:root{--background:#eeeeee;--calculator:rgba(255, 255, 255, 0.15);--display:rgba(255, 255, 255, 0.2);--number:rgba(255, 255, 255, 0.55);--operator:rgba(219, 234, 254, 0.65);--operator-text:#1e40af;--clear:rgba(254, 226, 226, 0.65);--clear-text:#b91c1c;--backspace:rgba(255, 237, 213, 0.65);--backspace-text:#c2410c;--percentage:rgba(237, 233, 254, 0.65);--percentage-text:#6d28d9;--memory:rgba(209, 250, 229, 0.65);--memory-text:#065f46;--equals:#2563eb;--equals-text:#fff;--border:rgba(255, 255, 255, 0.4);--text:#111;--muted:#555}

body[data-theme="dark"]{--background:#181818;--calculator:rgba(30, 30, 30, 0.25);--display:rgba(20, 20, 20, 0.3);--number:rgba(45, 45, 45, 0.55);--operator:rgba(30, 58, 95, 0.65);--operator-text:#dbeafe;--clear:rgba(95, 34, 34, 0.65);--clear-text:#fecaca;--backspace:rgba(95, 58, 30, 0.65);--backspace-text:#fed7aa;--percentage:rgba(73, 53, 107, 0.65);--percentage-text:#e9d5ff;--memory:rgba(6, 78, 59, 0.65);--memory-text:#a7f3d0;--equals:#3b82f6;--border:rgba(255, 255, 255, 0.2);--text:#fff;--muted:#ccc}

body[data-theme="golden"]{--background:#f4ead1;--calculator:rgba(255, 250, 240, 0.25);--display:rgba(255, 253, 246, 0.3);--number:rgba(248, 239, 217, 0.55);--operator:rgba(232, 199, 102, 0.65);--operator-text:#4a3500;--clear:rgba(243, 197, 189, 0.65);--clear-text:#8b2418;--backspace:rgba(242, 213, 166, 0.65);--backspace-text:#754400;--percentage:rgba(226, 209, 165, 0.65);--percentage-text:#604d00;--memory:rgba(200, 230, 201, 0.65);--memory-text:#1b5e20;--equals:#c99722;--border:rgba(255, 255, 255, 0.4);--text:#2f260f;--muted:#5d4b21}

*{box-sizing:border-box}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    color: var(--text);
    background: var(--background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Clear crystal frosted glass effect so background photo is fully visible */
.calculator {
    width: 700px;
    max-width: 100%;
    padding: 30px;
    background: var(--calculator);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.top-bar {display:flex;justify-content:space-between;gap:10px;margin-bottom:20px}
.top-button {padding:14px 22px;font-size:20px;font-weight:600;color:var(--text);background:var(--number);border:2px solid var(--border);border-radius:8px;cursor:pointer}

/* Transparent display screen so photo shows through clearly */
.display {
    min-height: 180px;
    padding: 25px;
    margin-bottom: 20px;
    background: var(--display);
    border: 2px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.calculation {min-height:42px;font-size:30px;line-height:1.35;text-align:right;word-break:break-word;color:var(--muted)}
.result {text-align:right;font-size:55px;line-height:1.1;font-weight:bold;word-break:break-word}

.modes {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
.modes button, .keypad button {color:var(--text);background:var(--number);border:2px solid var(--border);cursor:pointer}
.modes button {padding:14px 5px;font-size:18px;font-weight:600;border-radius:7px}

.keypad {display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.keypad button {min-height:65px;font-size:24px;font-weight:600;border-radius:10px}
.keypad .operator {background:var(--operator);color:var(--operator-text)}
.keypad .equals {background:var(--equals);color:var(--equals-text);border-radius:10px;grid-row:span 2;min-height:auto}
.keypad .clear {background:var(--clear);color:var(--clear-text)}
.keypad .backspace {background:var(--backspace);color:var(--backspace-text)}
.keypad .percentage {background:var(--percentage);color:var(--percentage-text)}
.keypad .memory {background:var(--memory);color:var(--memory-text);font-size:20px}

button {transition:transform .1s ease,filter .1s ease}
button:hover {transform:translateY(-2px);filter:brightness(.96)}
button:active {transform:scale(.96);filter:brightness(.9)}

.overlay {position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;justify-content:center;align-items:center;padding:20px;z-index:1000}
.overlay.active {display:flex}

.panel {
    width: 420px;
    max-width: 100%;
    max-height: 90vh;
    overflow: auto;
    padding: 25px;
    color: var(--text);
    background: var(--calculator);
    border: 2px solid var(--border);
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.panel-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.panel-head h2 {margin:0;font-size:28px}
.panel-head button {width:45px;height:45px;font-size:30px;color:var(--text);background:transparent;border:0;cursor:pointer}
.panel h3 {margin:0 0 12px}

.theme-option, .remove-background {width:100%;padding:15px;margin-bottom:10px;font-size:18px;font-weight:600;text-align:left;color:var(--text);background:var(--number);border:2px solid var(--border);border-radius:10px;cursor:pointer}
.remove-background {color:var(--clear-text);background:var(--clear);text-align:center}
.setting-row {display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-size:18px}
.history-item {padding:14px;margin-bottom:10px;background:var(--number);border:2px solid var(--border);border-radius:10px;font-size:18px}
.empty-history {text-align:center;color:var(--muted)}

body.large-buttons .keypad button {min-height:78px;font-size:28px}
body.large-buttons .result {font-size:60px}

@media(max-width:600px){
    body {
        padding: 0;
        align-items: flex-start;
    }
    .calculator {
        width: 100vw;
        min-height: 100vh;
        border-radius: 0;
        padding: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .result {font-size:40px}
    .calculation {font-size:20px}
    .keypad button {min-height:50px;font-size:18px}
    .top-button {font-size:16px;padding:10px 14px}
    .modes button {font-size:14px;padding:10px 2px}
}

/* =========================================================
   Percentage Calculation Setting
   ========================================================= */
.percentage-options {display:flex;flex-direction:column;gap:10px;margin-top:10px}
.percentage-option {display:flex;align-items:flex-start;gap:12px;padding:15px;background:var(--number);border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:transform .1s ease,filter .1s ease}
.percentage-option:hover {transform:translateY(-2px);filter:brightness(.96)}
.percentage-option input[type="radio"] {width:20px;height:20px;margin-top:3px;flex-shrink:0;cursor:pointer}
.percentage-option-content {display:flex;flex-direction:column;gap:5px}
.percentage-option-title {font-size:18px;font-weight:600}
.percentage-option-description {font-size:14px;line-height:1.4;color:var(--muted)}

/* =========================================================
   Interest & Feature Cards (Affiliates & Sharing)
   ========================================================= */
.interest-calculator {display:none;padding-top:4px;opacity:0;transition:opacity 0.25s ease-in-out}
.interest-calculator.active {display:block;opacity:1}
.interest-header {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}
.interest-header h2 {margin:0;font-size:30px}
.interest-type {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.interest-type-button, .interest-actions button {padding:14px 18px;font-size:18px;font-weight:700;color:var(--text);background:var(--number);border:2px solid var(--border);border-radius:10px;cursor:pointer}
.interest-type-button.active, .interest-actions button.active {background:var(--operator);color:var(--operator-text);border-color:var(--border)}
.interest-field {display:flex;flex-direction:column;gap:7px;margin-bottom:16px;font-size:18px;font-weight:600}
.interest-input {display:flex;align-items:center;gap:8px}
.interest-input input, .interest-input select, .compound-frequency select {width:100%;padding:12px 13px;font-size:20px;color:var(--text);background:var(--display);border:2px solid var(--border);border-radius:8px;outline:none}
.interest-input .input-unit {font-size:22px;font-weight:700;min-width:28px}
.compound-frequency {display:none}
.compound-frequency.active {display:flex}
.compound-frequency select {width:100%}
.interest-actions {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.interest-actions button:first-child {background:var(--equals);color:var(--equals-text)}
.interest-actions button:last-child {background:var(--clear);color:var(--clear-text)}
.interest-result {padding:18px;margin-top:10px;background:var(--display);border:2px solid var(--border);border-radius:10px}
.interest-result-row {display:flex;justify-content:space-between;gap:15px;padding:8px 0;font-size:20px}
.interest-result-row strong {font-size:24px;text-align:right;word-break:break-word}
.interest-result-row.final-amount {border-top:1px solid var(--border);margin-top:8px;padding-top:15px}
.interest-result-row.final-amount strong {font-size:30px}
.interest-explanation {margin-top:15px;padding:14px;background:var(--number);border:2px solid var(--border);border-radius:10px;font-size:16px;line-height:1.5}
.interest-explanation summary {cursor:pointer;font-weight:700}
.interest-explanation div {margin-top:10px;color:var(--muted)}

/* Affiliate & Share Box Styles */
.affiliate-card {margin-top:12px;padding:12px 14px;background:var(--number);border:2px solid var(--border);border-radius:10px;font-size:15px;line-height:1.4;text-align:center;color:var(--text)}
.affiliate-card a {color:var(--operator-text);font-weight:700;text-decoration:underline}

/* Non-Intrusive Display Ad Banner */
.app-ad-banner {margin-top:20px;padding:10px 15px;background:var(--display);border:2px solid var(--border);border-radius:10px;font-size:13px;text-align:center;color:var(--muted);position:relative}
.ad-label {position:absolute;top:4px;right:8px;font-size:9px;text-transform:uppercase;letter-spacing:1px;opacity:0.6}
.ad-content {margin-top:4px;font-size:12px}

@media(max-width:600px){
    .interest-header h2 {font-size:26px}
    .interest-type-button, .interest-actions button {font-size:16px;padding:12px}
    .interest-result-row {font-size:18px}
    .interest-result-row strong {font-size:21px}
    .interest-result-row.final-amount strong {font-size:26px}
}

/* =========================================================
   SCIENTIFIC CALCULATOR COMPACT STYLES & CARD WRAPPER
   ========================================================= */
.sci-card-container {background: var(--display);border: 2px solid var(--border);border-radius: 12px;padding: 16px;margin-bottom: 15px}
.sci-keypad {display: grid;grid-template-columns: repeat(4, 1fr);gap: 8px;margin-top: 10px}
.sci-btn {padding: 10px 6px;font-size: 14px;font-weight: 600;border-radius: 8px;border: 2px solid var(--border);background-color: var(--number);color: var(--text);cursor: pointer;text-align: center;transition: transform 0.1s ease, filter 0.1s ease}
.sci-btn:hover {transform: translateY(-2px);filter: brightness(0.96)}
.sci-btn:active {transform: scale(0.96);filter: brightness(0.9)}