/* Premium Themes Variables */
.theme-white { --bg: #ffffff; --s1: #d1d1d1; --s2: #ffffff; --t: #333; --acc: #ff9500; }
.theme-dark { --bg: #222222; --s1: #0d0d0d; --s2: #333333; --t: #eeeeee; --acc: #ff9500; }
.theme-blue { --bg: #e1f5fe; --s1: #b3e5fc; --s2: #ffffff; --t: #01579b; --acc: #0288d1; }
.theme-rose { --bg: #fff1f3; --s1: #fbc2cc; --s2: #ffffff; --t: #880e4f; --acc: #e91e63; }

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensures it takes full viewport height */
    background: #f0f0f0; /* Light background for the page */
    font-family: 'Segoe UI', Tahoma, sans-serif;
    padding: 20px; /* Add some padding around the calculator for small screens */
    box-sizing: border-box; /* Include padding in element's total width and height */
}

.ultra-student-calc-wrapper { 
    width: 100%; /* Take full width available */
    max-width: 450px; /* Max width for desktop */
    margin: 0; /* Remove auto margin from wrapper, let body handle centering */
}

#pro-sci-app {
    width: 100%;
    background: var(--bg);
    padding: 25px;
    border-radius: 40px;
    position: relative;
    transition: 0.3s;
    box-shadow: 15px 15px 30px var(--s1), -15px -15px 30px var(--s2);
    overflow: hidden;
    box-sizing: border-box; /* Include padding in element's total width and height */
}

.app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.theme-dots { display: flex; gap: 8px; }
.t-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ddd; cursor: pointer; }
.dot-white { background: #fff; } .dot-dark { background: #333; } .dot-blue { background: #0288d1; } .dot-rose { background: #d81b60; }

.mode-bar { 
    display: flex; 
    background: var(--s1); 
    border-radius: 12px; 
    padding: 5px; 
    margin-bottom: 25px; /* Increased margin for better spacing */
    gap: 5px; 
}
.mode-bar button { 
    flex: 1; 
    border: none; 
    padding: 12px; /* Increased padding */
    border-radius: 10px; 
    cursor: pointer; 
    background: none; 
    color: var(--t); 
    font-weight: 700; 
    font-size: 14px; /* Increased font size */
    transition: 0.3s; 
}
.active-tab { background: var(--bg) !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); }

/* Specific styles for the Boiler Feed Pump Calculator */
.calc-section {
    padding: 0; /* No padding here, handled by #pro-sci-app */
}

.calc-section h2 {
    color: var(--t);
    text-align: center;
    margin-bottom: 30px; /* Increased margin */
    font-size: 26px; /* Larger title */
    font-weight: 700;
}

.input-group {
    margin-bottom: 20px; /* Increased margin */
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-size: 15px; /* Slightly larger label */
    color: var(--t);
    margin-bottom: 8px; /* Increased margin */
    font-weight: 600;
}

.input-group input[type="number"] {
    padding: 14px 18px; /* More padding for better touch targets */
    border: none;
    border-radius: 16px; /* Slightly larger border-radius */
    font-size: 18px;
    background: var(--bg);
    color: var(--t);
    box-shadow: inset 3px 3px 6px var(--s1), inset -3px -3px 6px var(--s2);
    outline: none;
    transition: 0.2s;
    -moz-appearance: textfield; /* Hide Firefox spinner */
}
/* Hide Chrome/Safari/Edge number input spinners */
.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


.input-group input[type="number"]:focus {
    box-shadow: inset 2px 2px 4px var(--s1), inset -2px -2px 4px var(--s2), 0 0 0 3px var(--acc); /* Thicker focus ring */
}

.calculate-btn {
    width: 100%;
    margin-top: 30px; /* Increased margin */
    height: 60px; /* Taller button */
    font-size: 22px; /* Larger font */
    background: #4caf50 !important; /* Green for calculate */
    color: #fff !important;
    font-weight: 700;
    border-radius: 18px; /* Slightly larger border-radius */
    box-shadow: 6px 6px 12px var(--s1), -6px -6px 12px var(--s2); /* Bigger shadow */
}
.calculate-btn:active {
    box-shadow: inset 4px 4px 8px var(--s1), inset -4px -4px 8px var(--s2);
    transform: scale(0.98); /* Less aggressive scale on active */
}


.display-box.result-box {
    text-align: center;
    margin-top: 40px; /* Increased margin */
    padding: 25px 15px; /* More padding */
    border-radius: 25px; /* Larger border-radius */
    box-shadow: inset 5px 5px 10px var(--s1), inset -5px -5px 10px var(--s2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#boiler-result-label {
    font-size: 18px; /* Larger label */
    color: #999;
    margin-bottom: 10px; /* Increased margin */
    font-weight: 600;
}

#boiler-result {
    font-size: 44px; /* Much larger result font */
    font-weight: 800;
    color: var(--t);
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 5px; /* Add slight horizontal padding */
}

/* General Button Styles (for theme dots and calculate button) */
button { 
    border: none; cursor: pointer; transition: 0.2s;
    background: var(--bg); color: var(--t);
    box-shadow: 4px 4px 8px var(--s1), -4px -4px 8px var(--s2); 
    border-radius: 14px; /* Default for theme dots etc */
}
button:active { box-shadow: inset 3px 3px 6px var(--s1), inset -3px -3px 6px var(--s2); transform: scale(0.96); }


/* Media Queries for Responsiveness */

/* For smaller screens (like Android phones in portrait) */
@media (max-width: 480px) { 
    body {
        padding: 10px; /* Less padding on very small screens */
    }
    #pro-sci-app { 
        padding: 15px; /* Less padding inside the app */
        border-radius: 30px; /* Slightly smaller border-radius */
        box-shadow: 10px 10px 20px var(--s1), -10px -10px 20px var(--s2); /* Smaller shadow */
    }
    .app-header { margin-bottom: 15px; }
    .t-dot { width: 16px; height: 16px; }

    .mode-bar { margin-bottom: 20px; }
    .mode-bar button { padding: 10px; font-size: 12px; }

    .calc-section h2 { 
        font-size: 22px; 
        margin-bottom: 25px; 
    }

    .input-group { margin-bottom: 15px; }
    .input-group label { font-size: 14px; margin-bottom: 5px; }
    .input-group input[type="number"] { 
        padding: 12px 15px; 
        font-size: 16px; 
        border-radius: 14px;
    }

    .calculate-btn { 
        margin-top: 25px; 
        height: 55px; 
        font-size: 20px; 
        border-radius: 16px;
        box-shadow: 5px 5px 10px var(--s1), -5px -5px 10px var(--s2);
    }
    
    .display-box.result-box { 
        margin-top: 30px; 
        padding: 20px 10px; 
        border-radius: 20px;
    }
    #boiler-result-label { font-size: 16px; margin-bottom: 8px; }
    #boiler-result { font-size: 38px; }
}

/* For even smaller screens (e.g., small phones) */
@media (max-width: 360px) {
    #pro-sci-app { padding: 10px; border-radius: 25px; }
    .calc-section h2 { font-size: 20px; margin-bottom: 20px; }
    .input-group input[type="number"] { padding: 10px 12px; font-size: 15px; }
    .calculate-btn { height: 50px; font-size: 18px; margin-top: 20px; }
    #boiler-result { font-size: 32px; }
}