:root {
    /* Fonts */
    --font-ui: 'Nunito', system-ui, sans-serif;
    --font-digital: 'JetBrains Mono', 'Courier New', monospace;

    /* Light Theme (Pastel) */
    --bg-page: #f9f8fa;
    --bg-page-gradient: linear-gradient(135deg, #fdfbfd, #f2eff5);
    
    --calc-body-gradient: linear-gradient(145deg, #e4d7ee, #d5c3e6);
    --calc-border: #f0eaf6;
    --calc-shadow: 
        0 30px 60px rgba(100, 80, 120, 0.15),
        inset 0 4px 10px rgba(255, 255, 255, 0.6),
        inset 0 -6px 12px rgba(160, 140, 180, 0.4),
        0 0 0 2px rgba(220, 210, 230, 0.5);

    --screen-bg: #c0c6b8;
    --screen-text: #2f332c;
    --screen-shadow: 
        inset 0 4px 10px rgba(0, 0, 0, 0.2), 
        inset 0 1px 3px rgba(0, 0, 0, 0.3),
        0 1px 1px rgba(255, 255, 255, 0.7);
    --screen-border: #a4a99d;

    /* Base Button Text */
    --btn-text: #5a4b66;
    
    /* Memory Group */
    --btn-memory: #f6d8e4;
    --btn-memory-shadow: #d8b8c6;
    
    /* Clear Group */
    --btn-clear: #ff795c;
    --btn-clear-shadow: #d95e44;
    --btn-clear-text: #ffffff;

    /* Operator Group */
    --btn-operator: #d1f2d3;
    --btn-operator-shadow: #afd1b2;

    /* Equals Group */
    --btn-equals: #cce0ff;
    --btn-equals-shadow: #a8bfe6;

    /* Number Colors (Scattered) */
    --btn-c1: #fdf5c9; /* Yellow */
    --btn-c1-shadow: #e3d9a3;
    
    --btn-c2: #e6e6fa; /* Lavender */
    --btn-c2-shadow: #c8c8dc;
    
    --btn-c3: #cce0ff; /* Blue */
    --btn-c3-shadow: #a8bfe6;
    
    --btn-c4: #d1f2d3; /* Green */
    --btn-c4-shadow: #afd1b2;
    
    --brand-text: #8c7a9e;
}

[data-theme="dark"] {
    --bg-page: #15121b;
    --bg-page-gradient: linear-gradient(135deg, #1d1925, #110e16);
    
    --calc-body-gradient: linear-gradient(145deg, #382c44, #271d31);
    --calc-border: #4d3e5e;
    --calc-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.6),
        inset 0 4px 10px rgba(255, 255, 255, 0.05),
        inset 0 -6px 12px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(80, 60, 100, 0.3);

    --screen-bg: #809973;
    --screen-text: #172112;
    --screen-shadow: 
        inset 0 4px 10px rgba(0, 0, 0, 0.5), 
        inset 0 1px 3px rgba(0, 0, 0, 0.6),
        0 1px 1px rgba(255, 255, 255, 0.1);
    --screen-border: #4a5c41;

    --btn-text: #e6dff0;
    
    --btn-memory: #7a5464;
    --btn-memory-shadow: #4d333e;
    
    --btn-clear: #b84b36;
    --btn-clear-shadow: #802f1f;
    --btn-clear-text: #f0f0f0;

    --btn-operator: #48634a;
    --btn-operator-shadow: #2f4530;

    --btn-equals: #435878;
    --btn-equals-shadow: #2c3a52;

    --btn-c1: #807651;
    --btn-c1-shadow: #524b31;
    
    --btn-c2: #5f5f78;
    --btn-c2-shadow: #3b3b4f;
    
    --btn-c3: #435878;
    --btn-c3-shadow: #2c3a52;
    
    --btn-c4: #48634a;
    --btn-c4-shadow: #2f4530;
    
    --brand-text: #6f5f80;
}

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

body {
    background: var(--bg-page-gradient);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    color: var(--brand-text);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 0;
}

/* Top Controls */
.top-controls {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}
.left-controls {
    display: flex;
    gap: 10px;
}

.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 0.9rem;
}

/* History / Menu Button Base */
.history-toggle-btn {
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    padding: 6px 12px;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--brand-text);
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.2s;
}
.history-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}
[data-theme="dark"] .history-toggle-btn {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255,255,255,0.1);
    color: var(--btn-text);
}

/* Side Menu Panel */
.side-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.side-menu-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.side-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 260px;
    height: 100vh;
    background: var(--bg-page);
    z-index: 210;
    box-shadow: 5px 0 25px rgba(0,0,0,0.2);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 10px;
}
.side-menu.active {
    left: 0;
}
.menu-item {
    background: rgba(0,0,0,0.05);
    border: none;
    padding: 15px;
    border-radius: 15px;
    font-family: var(--font-ui);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-text);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}
.menu-item:hover {
    background: rgba(0,0,0,0.1);
}
.menu-item.active {
    background: var(--btn-c3);
    color: var(--btn-text);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
[data-theme="dark"] .menu-item {
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .menu-item:hover {
    background: rgba(255,255,255,0.1);
}
[data-theme="dark"] .menu-item.active {
    background: var(--btn-equals);
}
/* History Panel */
.history-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.history-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.history-panel {
    position: fixed;
    top: 0;
    left: -350px;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: var(--bg-page);
    z-index: 210;
    box-shadow: 5px 0 25px rgba(0,0,0,0.2);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.history-panel.active {
    left: 0;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: var(--brand-text);
}

.close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--brand-text);
    line-height: 1;
}

.history-content {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-right: 5px;
}
.history-empty {
    text-align: center;
    opacity: 0.5;
    margin-top: 20px;
}

.history-item {
    text-align: right;
    padding: 12px;
    background: rgba(0,0,0,0.04);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.history-item:hover {
    background: rgba(0,0,0,0.08);
}
[data-theme="dark"] .history-item {
    background: rgba(255,255,255,0.03);
}
[data-theme="dark"] .history-item:hover {
    background: rgba(255,255,255,0.06);
}

.history-equation {
    font-size: 0.9rem;
    color: var(--brand-text);
    opacity: 0.8;
    margin-bottom: 5px;
    font-family: var(--font-digital);
}

.history-result {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-text);
    font-family: var(--font-digital);
}

.clear-history-btn {
    margin-top: 15px;
    padding: 12px;
    border-radius: 15px;
    border: none;
    background: var(--btn-clear);
    color: var(--btn-clear-text);
    font-weight: 800;
    cursor: pointer;
    font-family: var(--font-ui);
    box-shadow: 0 4px 0 var(--btn-clear-shadow);
}
.clear-history-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--btn-clear-shadow);
}

.theme-switch {
    display: inline-block;
    height: 28px;
    position: relative;
    width: 56px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #d5c3e6;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    font-size: 12px;
}

[data-theme="dark"] .slider {
    background-color: #271d31;
}

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 20px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 20px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider:before {
    transform: translateX(28px);
}

/* Calculator Body */
.calculator-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.calculator {
    width: min(92vw, 400px);
    background: var(--calc-body-gradient);
    border-radius: 40px;
    padding: 25px 22px;
    box-shadow: var(--calc-shadow);
    position: relative;
    border-top: 1px solid var(--calc-border);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Branding */
.branding {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--brand-text);
    margin-bottom: 5px;
    opacity: 0.8;
}

/* Display */
.display-container {
    background-color: var(--screen-bg);
    background-image: 
        radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.15) 120%),
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 100% 100%, 4px 4px, 4px 4px;
    background-position: center center;
    border: 2px solid var(--screen-border);
    border-radius: 15px;
    padding: 15px;
    box-shadow: var(--screen-shadow);
    position: relative;
    min-height: 150px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.memory-indicator {
    font-family: var(--font-digital);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--screen-text);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.screen-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.equation-display {
    font-family: var(--font-digital);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--screen-text);
    opacity: 0.6;
    min-height: 1.2rem;
    text-align: right;
    flex-grow: 1;
    margin-left: 10px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
}
.equation-display::-webkit-scrollbar {
    display: none; /* WebKit */
}

.display {
    font-family: var(--font-digital);
    font-size: 3rem;
    font-weight: 500;
    color: var(--screen-text);
    text-align: right;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    line-height: 1.1;
    scrollbar-width: thin;
    padding-bottom: 5px;
}
.display::-webkit-scrollbar {
    height: 4px;
}
.display::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}
[data-theme="dark"] .display::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
}

/* Modes */
.calc-mode {
    display: none;
    flex-direction: column;
    height: 100%;
    gap: 15px;
}
.calc-mode.active-mode {
    display: flex;
}

/* Date UI */
.date-ui-container {
    background-color: var(--screen-bg);
    background-image: 
        radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.15) 120%),
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 100% 100%, 4px 4px, 4px 4px;
    background-position: center center;
    border: 2px solid var(--screen-border);
    border-radius: 15px;
    padding: 15px;
    box-shadow: var(--screen-shadow);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: var(--font-ui);
    color: var(--screen-text);
}

.date-select {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--btn-c2);
    background: rgba(255,255,255,0.1);
    color: var(--screen-text);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    outline: none;
    appearance: none;
}
[data-theme="dark"] .date-select {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.1);
}

.date-view {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.date-view.hidden {
    display: none;
}

.date-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.date-field label {
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0.8;
}

.date-input {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--btn-c2);
    background: rgba(255,255,255,0.3);
    color: var(--screen-text);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
}
[data-theme="dark"] .date-input {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.1);
}

.date-result-box {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
[data-theme="dark"] .date-result-box {
    border-color: rgba(255,255,255,0.1);
}

.date-output {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-digital);
}
.diff-total-days {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.6;
    margin-top: 5px;
    font-family: var(--font-digital);
}

.radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 5px;
    padding-bottom: 5px;
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1.1rem;
}
.radio-label input {
    display: none;
}
.radio-custom {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--btn-c3-shadow);
    display: inline-block;
    position: relative;
    background: rgba(255,255,255,0.2);
}
.radio-label input:checked + .radio-custom {
    border-color: var(--brand-text);
}
.radio-label input:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--brand-text);
    border-radius: 50%;
}
.date-duration-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

/* Keypad Grid */
.keypad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 10px;
}

/* Button Base */
.btn {
    border: none;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    height: auto;
    font-family: var(--font-ui);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--btn-text);
    cursor: pointer;
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner highlight for 3D effect */
.btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4);
    pointer-events: none;
}

[data-theme="dark"] .btn::after {
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.1);
}

/* Interaction */
.btn:hover {
    filter: brightness(1.05);
}

.btn:active, .btn.active-key {
    transform: translateY(4px);
}

/* Active Box Shadow adjustment */
.btn:active::after, .btn.active-key::after {
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}

/* Button Colors */
.btn-memory {
    background-color: var(--btn-memory);
    box-shadow: 0 6px 0 var(--btn-memory-shadow), 0 8px 10px rgba(0,0,0,0.1);
}
.btn-memory:active, .btn-memory.active-key {
    box-shadow: 0 2px 0 var(--btn-memory-shadow), 0 3px 5px rgba(0,0,0,0.1);
}

.btn-clear {
    background-color: var(--btn-clear);
    color: var(--btn-clear-text);
    box-shadow: 0 6px 0 var(--btn-clear-shadow), 0 8px 10px rgba(0,0,0,0.1);
}
.btn-clear:active, .btn-clear.active-key {
    box-shadow: 0 2px 0 var(--btn-clear-shadow), 0 3px 5px rgba(0,0,0,0.1);
}

.btn-operator {
    background-color: var(--btn-operator);
    box-shadow: 0 6px 0 var(--btn-operator-shadow), 0 8px 10px rgba(0,0,0,0.1);
}
.btn-operator:active, .btn-operator.active-key {
    box-shadow: 0 2px 0 var(--btn-operator-shadow), 0 3px 5px rgba(0,0,0,0.1);
}

.btn-equals {
    background-color: var(--btn-equals);
    box-shadow: 0 6px 0 var(--btn-equals-shadow), 0 8px 10px rgba(0,0,0,0.1);
}
.btn-equals:active, .btn-equals.active-key {
    box-shadow: 0 2px 0 var(--btn-equals-shadow), 0 3px 5px rgba(0,0,0,0.1);
}

/* Number Button Classes */
.c-1 {
    background-color: var(--btn-c1);
    box-shadow: 0 6px 0 var(--btn-c1-shadow), 0 8px 10px rgba(0,0,0,0.1);
}
.c-1:active, .c-1.active-key {
    box-shadow: 0 2px 0 var(--btn-c1-shadow), 0 3px 5px rgba(0,0,0,0.1);
}

.c-2 {
    background-color: var(--btn-c2);
    box-shadow: 0 6px 0 var(--btn-c2-shadow), 0 8px 10px rgba(0,0,0,0.1);
}
.c-2:active, .c-2.active-key {
    box-shadow: 0 2px 0 var(--btn-c2-shadow), 0 3px 5px rgba(0,0,0,0.1);
}

.c-3 {
    background-color: var(--btn-c3);
    box-shadow: 0 6px 0 var(--btn-c3-shadow), 0 8px 10px rgba(0,0,0,0.1);
}
.c-3:active, .c-3.active-key {
    box-shadow: 0 2px 0 var(--btn-c3-shadow), 0 3px 5px rgba(0,0,0,0.1);
}

.c-4 {
    background-color: var(--btn-c4);
    box-shadow: 0 6px 0 var(--btn-c4-shadow), 0 8px 10px rgba(0,0,0,0.1);
}
.c-4:active, .c-4.active-key {
    box-shadow: 0 2px 0 var(--btn-c4-shadow), 0 3px 5px rgba(0,0,0,0.1);
}

/* Specific Buttons Styling */
.btn-arrow {
    font-size: 1.5rem;
}

/* Responsiveness */
@media (max-height: 700px) and (min-width: 481px) {
    .calculator {
        margin-top: 40px; /* space for theme toggle */
        transform: scale(0.9);
        transform-origin: top center;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0;
        background: var(--calc-body-gradient);
        overflow: hidden; /* Lock viewport for native app feel */
    }
    .top-controls {
        top: max(15px, env(safe-area-inset-top));
        left: 15px;
        right: 15px;
    }
    #theme-label {
        display: none; /* Hide text on mobile to save space */
    }
    .history-toggle-btn {
        padding: 6px 10px;
        font-size: 0.8rem; /* Slightly smaller text to prevent squeezing */
    }
    .calculator-wrapper {
        padding: 0;
        height: 100dvh; /* Dynamic viewport height to avoid browser chrome */
        width: 100vw;
    }
    .calculator {
        width: 100%;
        max-width: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
        box-shadow: none;
        /* Increased top padding from 60 to 90px to clear controls + notch */
        padding: calc(70px + env(safe-area-inset-top)) 15px 30px 15px;
    }
    .calc-mode {
        gap: 20px;
    }
    .branding {
        display: none; /* Hide for cleaner native look */
    }
    .display-container {
        flex-grow: 1;
        height: auto;
        justify-content: flex-end;
        padding: 20px;
        border-radius: 25px;
    }
    .display {
        font-size: 4rem;
        padding-bottom: 5px;
    }
    .equation-display {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    .keypad {
        gap: 12px;
        margin-top: 0;
        margin-bottom: 20px;
    }
    .btn {
        border-radius: 16px; /* Slightly rounder squares on mobile */
        font-size: 1.3rem;
    }
    .theme-switch-wrapper {
        top: 0;
        left: 0;
    }
}

@media (max-width: 360px) {
    .keypad {
        gap: 8px;
    }
    .display {
        font-size: 3rem;
    }
}