.basic-calculator {
    position: fixed;
    z-index: 3000;
    top: 5.25rem;
    right: 1rem;
    width: min(280px, calc(100vw - 1rem));
    min-width: 220px;
    min-height: 280px;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 6rem);
    overflow: auto;
    resize: both;
    padding: .8rem;
    border: 1px solid var(--border-color, #dbe3ef);
    border-radius: 1rem;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #172033);
    box-shadow: var(--shadow-lg, 0 16px 32px rgba(15, 23, 42, .18));
    font-family: inherit;
}
.basic-calculator[hidden],
.basic-calculator-open[hidden] { display: none !important; }
.basic-calculator-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.basic-calculator-drag-handle { min-width: 0; cursor: grab; touch-action: none; user-select: none; }
.basic-calculator-drag-handle:active { cursor: grabbing; }
.basic-calculator-heading .section-label { display: inline-block; margin: 0 0 .2rem; padding: .2rem .5rem; border-radius: 999px; background: var(--accent-soft, #fff1d6); color: var(--accent-dark, #a85f00); font-size: .62rem; font-weight: 800; letter-spacing: .04em; }
.basic-calculator-heading h2 { margin: 0; color: var(--text-primary, #172033); font-size: .92rem; line-height: 1.25; white-space: nowrap; }
.basic-calculator-heading-actions { display: flex; align-items: center; gap: .35rem; }
.basic-calculator-clear,
.basic-calculator-close { display: grid; place-items: center; min-width: 2rem; min-height: 2rem; border: 1px solid var(--border-color, #dbe3ef); border-radius: .55rem; padding: .25rem .45rem; background: var(--bg-secondary, #f5f7fb); color: var(--text-primary, #172033); font: inherit; font-weight: 750; cursor: pointer; }
.basic-calculator-close { font-size: 1.25rem; line-height: 1; }
.basic-calculator-screen { width: 100%; box-sizing: border-box; margin-bottom: .55rem; padding: .42rem .6rem .5rem; overflow: hidden; border-radius: .7rem; background: var(--bg-secondary, #f5f7fb); }
.basic-calculator-expression { min-height: 1.05rem; overflow-x: auto; color: var(--text-light, #7d8798); font: 500 .72rem/1.05rem 'Space Mono', monospace; text-align: right; white-space: nowrap; scrollbar-width: thin; }
.basic-calculator-expression[hidden] { display: none; }
.basic-calculator-display { display: block; width: 100%; min-height: 1.8rem; box-sizing: border-box; padding: .2rem 0 0; overflow: hidden; color: var(--text-primary, #172033); font: 700 1.25rem/1.6rem 'Space Mono', monospace; text-align: right; white-space: nowrap; }
.basic-calculator-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.basic-calculator-keys button { min-width: 0; min-height: 2.35rem; border: 1px solid var(--border-color, #dbe3ef); border-radius: .6rem; background: var(--bg-secondary, #f5f7fb); color: var(--text-primary, #172033); font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.basic-calculator-keys button:hover { background: var(--accent-soft, #fff1d6); }
.basic-calculator-keys .basic-calc-equals { grid-column: span 2; background: var(--primary-color, #1b2a4a); color: #fff; border-color: var(--primary-color, #1b2a4a); }
.basic-calculator-hint { margin: .45rem 1.6rem 0 0; color: var(--text-light, #94a0b8); font-size: .68rem; text-align: center; }
.basic-calculator-resize-handle { position: absolute; right: .3rem; bottom: .25rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 0; border-radius: .3rem; background: transparent; color: var(--text-light, #94a0b8); font-size: 1rem; cursor: nwse-resize; touch-action: none; }
.basic-calculator-resize-handle:active { color: var(--accent-dark, #a85f00); }
.basic-calculator-open { position: fixed; z-index: 10001; top: 5.25rem; right: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; border: 1px solid var(--border-color, #dbe3ef); border-radius: 999px; padding: .65rem 1rem; background: var(--bg-primary, #fff); color: var(--text-primary, #172033); box-shadow: var(--shadow-lg, 0 16px 32px rgba(15, 23, 42, .18)); font-family: inherit; font-size: .875rem; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; }
.basic-calculator-open svg { flex: 0 0 auto; color: var(--accent-dark, #d98c0f); }
.basic-calculator-open:hover { border-color: var(--accent-color, #f5a623); background: var(--accent-soft, #fff1d6); transform: translateY(-1px); }
.basic-calculator.is-dragging { opacity: .96; box-shadow: var(--shadow-xl, 0 24px 48px rgba(15, 23, 42, .22)); }
.basic-calculator.is-resizing { user-select: none; }
.basic-calculator-open:focus-visible,
.basic-calculator button:focus-visible { outline: 3px solid var(--accent-color, #f5a623); outline-offset: 2px; }

@media (max-width: 700px) {
    .basic-calculator { top: auto; right: .65rem; bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3.75rem)); width: min(280px, calc(100vw - 1.3rem)); max-height: min(65vh, calc(100vh - 6rem)); }
    .basic-calculator-open { top: auto; right: max(.75rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); min-height: 46px; padding: .65rem .95rem; }
}