@media (max-width: 700px) {
    body {
        overflow-y: auto;
        min-height: 100vh; 
        min-height: 100svh;
        padding-top: 20px;
        padding-bottom: 20px;
        overflow-y: hidden; /* Added: Hides vertical scrollbar, relies on min-height */
    }

    h1 {
        display: none;
    }
    .main-content {
        width: 100% !important; 
        max-width: 500px;
        height: auto; /* Adjusted for mobile */
        min-height: 80vh; /* Adjusted for mobile */
        flex-direction: column; 
        margin: 0 auto;
        border-radius: 10px; /* Adjusted for mobile */
        box-shadow: none; /* Adjusted for mobile */
        transition: none; /* Adjusted for mobile */
        transform: translateY(-2rem);
        padding: 0;
        margin-bottom: 3rem;
    }

    .main-content.active,
    .main-content.scientific-mode,
    .main-content.scientific-mode.active,
    .main-content.programming-mode,
    .main-content.programming-mode.active {
        width: 100%; 
        padding-right: 15px;
    }

    .menu-panel {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        min-height: 100%;
        transform: translateY(100%); /* Hides the panel below the screen */
        transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
        z-index: 10;
        background: rgba(26, 43, 45, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
    
    .menu-panel.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    
    .menu-items li {
        width: 100%;
        margin: 10px auto;
        padding: 15px 20px;
        transform: translateX(-3rem);
    }

    /* --- CALCULATOR BODY AND SCREEN --- */

    .calculator-body {
        width: 100% !important;
        padding: 15px; 
        grid-template-rows: 15% 1fr;
        height: auto; /* Adjusted for mobile */
        min-height: 80vh; /* Adjusted for mobile */
    }
    .calculator-body.programming-mode {
        max-height: 60vh;
        max-width: 400px;
    }
    .calculator-body.scientific-mode {
        max-height: 60vh;
    }
    #input {
        font-size: 2rem; 
        padding: 10px 10px;
    }
    
    #result {
        font-size: 1.5rem; 
    }

    /* --- BUTTONS AND LAYOUT --- */

    .buttons-container {
        flex-direction: column; /* Stacks button groups vertically */
        height: auto; /* Auto height */
        gap: 10px;
    }

    /* Reduce width of scientific/programming buttons (Variable redefinition for mobile) */
    :root {
        --button-size: 65px; /* Smaller button size */
        --button-gap: 5px; /* Smaller gap */
        --scientific-buttons-width: 100%; 
        --programming-buttons-width: 100%;
        --normal-buttons-width: 100%;
    }
    .normal-buttons .row button {
        width: var(--button-size); 
        height: var(--button-size); 
        font-size: 1rem; 
    }
    .normal-buttons,
    .scientific-buttons,
    .programming-buttons {
        width: auto; /* Auto width */
        opacity: 1; /* Default visible */
        pointer-events: auto;
        flex-direction: column; 
        height: auto; 
        margin-right: 0 !important; /* Remove right margin */
        gap: var(--button-gap);
        
        display: flex; /* Initially set to flex for control */
        max-height: 0; /* Hides the content for animation */
        margin-bottom: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }
    
    /* Normal buttons are ALWAYS visible in mobile mode! (FIX) */
    .calculator-body .normal-buttons {
        max-height: 100vh; /* Always visible */
        opacity: 1; 
    }

    /* Hide only extended blocks when not needed */
    .calculator-body:not(.scientific-mode):not(.programming-mode) .scientific-buttons,
    .calculator-body:not(.scientific-mode):not(.programming-mode) .programming-buttons {
        max-height: 0;
        margin-bottom: 0;
        opacity: 0;
        pointer-events: none;
    }

    .calculator-body.scientific-mode .scientific-buttons {
        order: 1; /* Show scientific buttons first */
        width: 100%;
        flex-direction: row; /* Arranged in a row at the top */
        max-height: 500px; /* Shows the content */
        margin-bottom: var(--button-gap);
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
    #magic-trick {
        display: none; /* Hide the magic trick element */
    }
    .calculator-body.scientific-mode .normal-buttons {
        order: 2; /* Normal buttons below scientific buttons */
        width: 100%;
        height: auto;
        flex-direction: column;
        max-height: 100vh;
        opacity: 1;
        pointer-events: auto;
    }

    .calculator-body.scientific-mode .buttons-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Show programming buttons (This block remained unchanged from original Polish) */
    .calculator-body.programming-mode .programming-buttons {
        max-height: 500px; 
        margin-bottom: var(--button-gap);
        opacity: 1;
        pointer-events: auto;
    }
    
    .normal-buttons .row,
    .scientific-buttons .row,
    .programming-buttons .row {
        width: 100%;
        gap: var(--button-gap);
        flex-wrap: wrap; /* Allows buttons to wrap to the next line */
        justify-content: space-between; /* Distributes space between buttons */
    }
    
    .buttons-container button {
        flex-grow: 1; /* Buttons grow to fill space */
        min-width: var(--button-size);
        height: var(--button-size); 
        border-radius: 15px; 
        font-size: 1rem; 
    }

    .normal-buttons .row:last-child button:nth-child(2) {
        width: auto;
        flex-grow: 1;
    }
    
    /* --- NAVIGATION BUTTONS --- */
    
    .hamburger-menu {
        top: 10px;
        left: 10px;
        z-index: 999;
    }
    
    .main-content.converter-mode .back-icon {
        opacity: 0;
        visibility: hidden;
    }

    .main-content.converter-mode .hamburger-icon {
        opacity: 1;
        visibility: visible;
    }
    
    /* --- HISTORY SECTION --- */
    
    .history-content {
        padding: 15px; 
    }
    
    .history-list-container {
        padding-right: 0; /* Remove right padding */
        transform: none; /* Remove transform */
        overflow-y: auto; /* Enable native scrollbar for history list (if custom scrollbar fails) */
        width: 10rem;
    }
    
    #clear-history-btn {
        width: 100%; 
        height: 3rem; 
        margin-top: 10px;
    }
    /* --- CONVERTERS (This block remained unchanged) --- */

    .converter-currency-container {
        width: 100%; 
        max-width: none;
    }
}
/* ========================================================= */
/* mobile.css - Styles for mode switch (.radio-input) - Unchanged */
/* ========================================================= */
@media (max-width: 700px) {
    
    .container {
        position: relative; 
        bottom: auto; 
        left: auto;
        transform: none;
        margin-top: 20px; 
        width: 100%; 
        display: flex; 
        justify-content: center;
    }
    
    .radio-input {
        --container_width: 90vw; 
        max-width: 300px; 
        width: var(--container_width); 
        height: 40px; 
        border-radius: 20px; 
    }

    .radio-input label {
        padding: 8px 0; 
        font-size: 13px; 
        letter-spacing: normal;
    }

    .selection {
        border-radius: 20px;
        width: calc(var(--container_width) / 4);
    }
    
    .radio-input label:nth-child(1):has(input:checked)~.selection {
        transform: translateX(calc(var(--container_width) * 0/4));
    }

    .radio-input label:nth-child(2):has(input:checked)~.selection {
        transform: translateX(calc(var(--container_width) * 1/4));
    }

    .radio-input label:nth-child(3):has(input:checked)~.selection {
        transform: translateX(calc(var(--container_width) * 2/4));
    }
    
    .radio-input label:nth-child(4):has(input:checked)~.selection {
        transform: translateX(calc(var(--container_width) * 3/4));
    }
}
/* ========================================================= */
/* mobile.css - Styles for Converter sections (.converter-section) - Unchanged */
/* ========================================================= */
@media (max-width: 700px) {

    .converter-inputs,
    .other-converter-inputs {
        position: relative; 
        top: auto;
        left: auto;
        transform: none;
        padding: 20px 0;
        margin: auto;
        width: 100%; 
        max-width: 95%; 
    }
    
    .other-converter-inputs {
        top: auto; 
        transform: none;
    }

    .input-group input,
    .custom-select {
        width: 100%; 
        max-width: 250px; 
        margin-bottom: 0.8rem; 
    }

    .input-group input {
        padding: 8px; 
        font-size: 1.1em; 
    }
    
    .swap-icon-container {
        margin: 0.5rem 0; 
    }
    
    .converter-section h3 {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-top: 1.25rem;
        margin-bottom: 20px;
        text-align: center;
    }

    .converter-list-body {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        max-width: 95%; 
        padding: 10px; 
    }

    .converter-list-body h3 {
        margin-bottom: 20px; 
    }
    
    .main-converters-list li {
        margin-bottom: 10px; 
    }
    
    .main-converters-list a {
        padding: 12px 0; 
        font-size: 1em;
    }

    .select-selected, .select-items div {
        padding: 8px 12px; 
        font-size: 0.95em;
    }
    .converter-mode-body {
        display: flex !important; 
        position: relative; 
        padding: 15px;
        width: 350px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        box-sizing: border-box;
    }

    .converter-mode-body.section-visible {
        display: flex !important; 
        flex-direction: column; 
        .converter-inputs {
            transform: translateY(4rem) translateX(-10rem);
        }
    }
    .converters-title {
        transform: translateX(-1rem) translateY(3rem);
    }
    .converters-list {
        transform: translateX(0rem) translateY(3rem);
    }
    .converter-inputs,
    .other-converter-inputs {
        position: relative; 
        top: auto;
        left: auto;
        margin: 10px auto;
    }

}
/* ========================================================= */
/* mobile.css - Styles for mobile devices (phones) - Programming Mode - Unchanged */
/* ========================================================= */
@media (max-width: 700px) {
    
    .main-content.programming-mode {
        padding-right: 0; 
    }

    .calculator-body.programming-mode {
        grid-template-rows: auto auto 1fr; 
        height: auto; 
        min-height: 80vh; 
        padding: 10px; 
    }
    
    /* --- CONVERSION SECTION (HEX/DEC/OCT/BIN) - Unchanged --- */

    .pro-conversions {
        padding: 5px 0; 
        margin-bottom: 5px; 
        border-bottom: none; 
    }
    
    .conversion-mode-selector button {
        font-size: 0.8rem; 
        padding: 5px;
    }

    .conversion-display-row {
        font-size: 0.8rem; 
    }

    .conversion-display-row span:last-child {
        font-size: 1em; 
    }
    
    /* --- DISPLAY IN PRO MODE - Unchanged --- */
    
    .calculator-body.programming-mode #input {
        font-size: 1.8rem; 
        padding-top: 10px; 
        padding-bottom: 5px;
        grid-row: 1; 
    }
    
    /* --- PROGRAMMING BUTTONS - Unchanged --- */
    
    .calculator-body.programming-mode .buttons-container {
        flex-direction: column; 
        height: auto;
    }

    .programming-buttons {
        width: 100% !important; 
        margin-right: 0 !important;
        pointer-events: none;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }
    
    .calculator-body.programming-mode .programming-buttons {
        max-height: 400px; 
        opacity: 1;
        pointer-events: auto;
        display: grid; 
        grid-template-columns: repeat(5, 1fr); 
        /* gap: var(--button-gap); */
    }

    .calculator-body.programming-mode .scientific-buttons {
        display: none !important; 
        width: 0;
        opacity: 0;
    }
    
    .programming-buttons .row,
    .programming-buttons .row-hex {
        display: contents; 
    }

    .programming-buttons .row button,
    .programming-buttons .row-hex button {
        flex-grow: 1; 
        width: 100%; 
        height: var(--button-size); 
        font-size: 1.1rem;
    }

    .programming-buttons .row-hex button {
        grid-column: span 1; 
    }
}
@media (max-width: 700px) {

    .date-calculator-body {
        width: 100%;
        padding: 0 200px; /* Note: This padding value seems extremely large for a max-width of 700px and might be a typo in the original code. It is preserved here but should be checked if this causes layout issues. */
        box-sizing: border-box;
    }
    
    /* --- Absolute Positioning and Size Correction - Unchanged --- */
    
    .date-same-dates-message,
    .date-detailed-results, 
    #current-result {
        position: relative; 
        top: auto;
        left: auto;
        transform: none; 
        width: 100%; 
        padding: 0 10px;
        margin-top: 10px; 
        justify-content: center; 
        text-align: center;
        flex-direction: column; 
        gap: 5px;
    }
    
    .date-same-dates-message {
        margin-top: 20px; 
    }

    .date-detailed-results {
        flex-direction: column;
        gap: 10px;
        font-size: 0.9em;
    }

    #current-result {
        gap: 0px; 
        margin-top: 20px;
    }

    #date-result-value {
        transform: none; 
        font-size: 1.5rem; 
        font-weight: bold;
    }
    
    /* --- Date Input Fields - Unchanged --- */
    
    .input-group input[type="date"] {
        width: 100%;
        max-width: 300px; 
        padding: 8px 12px;
        font-size: 1.1rem;
        margin-bottom: 15px; 
    }

    .input-group input[type="date"]::-webkit-calendar-picker-indicator {
        /* font-size: 1.5rem; */ /* Commented out for a cleaner look */
    }
}
@media (max-width: 700px) {
    .menu-content.scientific-active {
        transform: translateX(-18rem);
    }
    .menu-content.programming-active {
        transform: translateX(-3em);
    }
    .menu-content {
        transform: translateX(-3rem);
    }
    .container {
        position: absolute;
        bottom: 2%;
        left: 50%;
        transform: translate(-50%, 2%);
    }
}
/* ========================================================= */
/* 🔥 FIX: Specyficzne style dla najmniejszych telefonów (< 375px) 🔥 */
/* ========================================================= */
@media (max-width: 415px) { 

    /* Napraw błąd: Używasz flex-direction: column dla .buttons-container, 
       ale w trybie scientific-mode ustawiasz .scientific-buttons na flex-direction: row. 
       Musisz dostosować rozmiary przycisków, żeby się mieściły. */

    :root {
        /* Dalsze zmniejszenie rozmiaru przycisków i odstępów na bardzo małych ekranach */
        --button-size: 55px; /* Było 65px, teraz 55px */
        --button-gap: 3px;   /* Było 5px, teraz 3px */
    }

    .main-content {
        /* Minimalne dostosowanie głównego kontenera */
        max-width: 100%; /* Upewnij się, że nie jest za mały */
    }

    /* W trybie naukowym/programistycznym przyciski są bardzo ciasne, 
       więc usuń marginesy/paddingi, które mogą powodować przepełnienie */
    .main-content.scientific-mode,
    .main-content.programming-mode {
        padding-right: 5px; /* Zmniejsz padding */
        padding-left: 5px; 
    }
    
    .calculator-body {
        padding: 5px; /* Zmniejsz padding głównego ciała kalkulatora */
    }
    
    /* Zmień rozmiary czcionek, aby wszystko się zmieściło */
    #input {
        font-size: 1.8rem; 
    }

    /* Zmiana układu przycisków programistycznych */
    .calculator-body.programming-mode .programming-buttons {
        /* W 360px lub 320px 5 kolumn (repeat(5, 1fr)) jest za ciasne! 
           Zmień na 4 kolumny lub dostosuj rozmiar przycisków HEX*/
        grid-template-columns: repeat(4, 1fr); /* W 360px 4 kolumny wyglądają lepiej */
    }
    
    /* Jeśli .menu-content jest ciągle za małe (dotyczy przesuwania trybów) */
    .menu-content.scientific-active {
        transform: translateX(-18rem); /* Mniejsze przesunięcie dla mniejszego ekranu */
    }
    .menu-content.programming-active {
        transform: translateX(-3.5rem); /* Zerowe przesunięcie lub minimalne */
    }
}