#calculator-wrapper {
    --google-blue: #4285f4;
    --google-grey: #f1f3f4;
    --google-white: #f8f9fa;
    --text-dark: #202124;
    --border-color: #dadce0;
    
    display: flex;
    justify-content: center;
    padding: 20px;
    font-family: 'Roboto', Arial, sans-serif;
    background-color: transparent;
}

#calculator-wrapper * { box-sizing: border-box !important; }

#calculator-wrapper .calculator-container {
    width: 100% !important;
    max-width: 360px !important;
    background: #ffffff !important;
    padding: 18px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color) !important;
    position: relative !important;
    box-shadow: 0 1px 6px rgba(32,33,36,.28) !important;
}

#calculator-wrapper .display-screen {
    width: 100% !important;
    height: 120px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    margin: 35px 0 15px 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
}

#calculator-wrapper #calc-display {
    font-size: 42px !important;
    color: var(--text-dark) !important;
    word-break: break-all !important;
    line-height: 1.1 !important;
    text-align: right !important;
    width: 100% !important;
}

#calculator-wrapper .buttons-layout {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}

#calculator-wrapper button {
    height: 54px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid transparent !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: 0.1s !important;
}

#calculator-wrapper .span-2 {
    grid-column: span 2 !important;
}

#calculator-wrapper .btn-util { background-color: var(--google-grey) !important; color: var(--text-dark) !important; }
#calculator-wrapper .btn-num { background-color: var(--google-white) !important; border: 1px solid var(--border-color) !important; color: var(--text-dark) !important; }
#calculator-wrapper .btn-blue { background-color: var(--google-blue) !important; color: white !important; font-size: 24px !important; }

#calculator-wrapper button:active { filter: brightness(0.9) !important; transform: scale(0.98) !important; }

/* History Section */
#calculator-wrapper .history-toggle {
    position: absolute; top: 12px; right: 18px;
    color: var(--google-blue); font-size: 13px; cursor: pointer;
}

#calculator-wrapper .history-panel {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #fff; z-index: 100; display: none; flex-direction: column;
    padding: 18px; border-radius: 12px;
}

#calculator-wrapper .history-header { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 15px; color: var(--text-dark); }
#calculator-wrapper .history-list { list-style: none !important; padding: 0 !important; margin: 0 !important; overflow-y: auto; flex: 1; }
#calculator-wrapper .history-item { text-align: right; padding: 10px 0; border-bottom: 1px solid #eee; color: #5f6368; font-size: 14px; }
#calculator-wrapper .history-item span { display: block; font-size: 18px; color: var(--text-dark); font-weight: bold; }
#calculator-wrapper .close-panel { color: var(--google-blue); cursor: pointer; }
#calculator-wrapper .clear-history-btn { background: none !important; color: var(--google-blue) !important; border: none !important; margin-top: 10px !important; cursor: pointer; font-size: 14px !important; }