/* 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; /* Padding around the calculator for small screens */
    box-sizing: border-box; /* Include padding in element's total width and height */
    overflow-y: auto; /* Allow scrolling if content is taller than viewport */
}

.ultra-student-calc-wrapper { 
    width: 100%; /* Take full width available */
    max-width: 450px; /* Max width for desktop */
    margin: auto; /* Center the wrapper */
}

#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; /* Hide anything that overflows the main app container */
    box-sizing: border-box;
}

.app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.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; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--t); padding: 5px; /* Add padding for easier tapping */ }
.icon-btn svg { width: 24px; height: 24px; } /* Larger icons */


.mic-section { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
#calc-mic-btn { 
    width: 44px; height: 44px; /* Larger mic button */
    border-radius: 12px; 
    border: none; background: var(--bg); color: var(--t); cursor: pointer; 
    box-shadow: 4px 4px 8px var(--s1), -4px -4px 8px var(--s2); 
    display: flex; align-items: center; justify-content: center; /* Center SVG */
}
#calc-mic-btn svg { width: 22px; height: 22px; } /* Larger mic icon */
#calc-mic-btn.active { background: #f44336; color: #fff; }
#v-status-msg { font-size: 13px; color: #888; } /* Slightly larger status msg */

.mode-bar { display: flex; background: var(--s1); border-radius: 12px; padding: 5px; margin-bottom: 20px; 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; /* Slightly larger font */
    transition: 0.3s; 
}
.active-tab { background: var(--bg) !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); }

.display-box { 
    text-align: right; margin-bottom: 25px; /* Increased margin */
    padding: 25px 15px; /* More padding */
    border-radius: 20px; 
    box-shadow: inset 5px 5px 10px var(--s1), inset -5px -5px 10px var(--s2); 
    color: var(--t); /* Ensure text color is set */
}
#exp-history { font-size: 15px; color: #999; height: 20px; margin-bottom: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* ellipsis for long history */
#main-output { 
    font-size: 40px; /* Larger output font */
    font-weight: 800; 
    overflow-x: auto; 
    white-space: nowrap; 
    line-height: 1.2; /* Better line spacing */
}

.keys-grid { display: grid; gap: 10px; }
.sci-layout { grid-template-columns: repeat(5, 1fr); margin-bottom: 15px; }
.basic-layout { grid-template-columns: repeat(4, 1fr); }
.hidden { display: none !important; }

button { 
    height: 56px; /* Taller buttons for better touch */
    border-radius: 16px; /* Larger border-radius */
    border: none; font-size: 20px; /* Larger font for numbers/operators */
    font-weight: 600;
    background: var(--bg); color: var(--t); cursor: pointer;
    box-shadow: 4px 4px 8px var(--s1), -4px -4px 8px var(--s2); transition: 0.2s;
    display: flex; align-items: center; justify-content: center; /* Center text/icons */
}
button:active { 
    box-shadow: inset 3px 3px 6px var(--s1), inset -3px -3px 6px var(--s2); 
    transform: scale(0.96); 
}

.k-f { color: var(--acc) !important; }
.k-o { background: var(--acc) !important; color: #fff !important; }
.k-eq { background: #4caf50 !important; color: #fff !important; font-size: 24px; /* Even larger for equals */ }
.k-s { font-size: 13px !important; background: var(--s1) !important; } /* Scientific keys slightly larger */

#hist-panel-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: var(--bg); z-index: 100; 
    border-radius: 40px; padding: 25px; 
    transition: transform 0.4s ease-out, opacity 0.4s ease-out; /* Smooth transition */
    overflow-y: auto; /* Allow scrolling for long history */
    box-sizing: border-box;
}
.overlay-hide { transform: translateY(100%); opacity: 0; pointer-events: none; }
.panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--s1); padding-bottom: 15px; margin-bottom: 15px; color: var(--t); font-weight: bold; }
.panel-header span { font-size: 16px; } /* History title font size */
.back-link { background: var(--acc); color: #fff; border: none; padding: 8px 18px; border-radius: 12px; cursor: pointer; font-size: 14px; } /* Larger back button */
#history-items-container { padding-top: 5px; } /* Slight padding */
.hist-item { 
    padding: 15px; /* More padding for history items */
    border-bottom: 1px solid rgba(0,0,0,0.05); 
    font-size: 14px; 
    color: var(--t); 
    cursor: pointer; 
    border-radius: 10px; /* Rounded history items */
    margin-bottom: 8px;
}
.hist-item:hover { background: rgba(0,0,0,0.05); }

/* Media Queries for Responsiveness */

/* For typical phone screens (e.g., Android portrait) */
@media (max-width: 480px) { 
    body { padding: 10px; }
    #pro-sci-app { 
        padding: 15px; 
        border-radius: 30px; 
        box-shadow: 10px 10px 20px var(--s1), -10px -10px 20px var(--s2); 
    }
    .app-header { margin-bottom: 10px; }
    .t-dot { width: 16px; height: 16px; }
    .icon-btn svg { width: 20px; height: 20px; }

    .mic-section { margin-bottom: 15px; }
    #calc-mic-btn { width: 40px; height: 40px; border-radius: 10px; }
    #calc-mic-btn svg { width: 18px; height: 18px; }
    #v-status-msg { font-size: 12px; }

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

    .display-box { padding: 20px 12px; margin-bottom: 20px; }
    #exp-history { font-size: 13px; height: 18px; margin-bottom: 4px; }
    #main-output { font-size: 34px; }

    button { 
        height: 50px; 
        border-radius: 14px; 
        font-size: 18px; 
        box-shadow: 3px 3px 6px var(--s1), -3px -3px 6px var(--s2);
    }
    .k-s { font-size: 11px !important; }
    .k-eq { font-size: 20px; }

    #hist-panel-overlay { padding: 15px; border-radius: 30px; }
    .panel-header { padding-bottom: 10px; margin-bottom: 10px; }
    .panel-header span { font-size: 14px; }
    .back-link { padding: 6px 15px; border-radius: 10px; font-size: 12px; }
    .hist-ite