.kalkulator {
  --k-bg: #f8fafc;
  --k-panel: #ffffff;
  --k-text: #111827;
  --k-muted: #64748b;
  --k-border: #dbe3ef;
  --k-btn: #f1f5f9;
  --k-btn-hover: #e2e8f0;
  --k-operator: #dbeafe;
  --k-operator-hover: #c9d7e9;
  --k-clear: #ffe2e2;
  --k-clear-hover: #ead0d0;
  --k-memory: #ede9fe;
  --k-memory-hover: #dad5e9;
  box-sizing: border-box;
  width: 100%;
  max-width: 620px;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--k-border);
  border-radius: 18px;
  background: var(--k-bg);
  color: var(--k-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
}
.kalkulator-theme-dark {
  --k-bg: #0f172a;
  --k-panel: #111827;
  --k-text: #f8fafc;
  --k-muted: #94a3b8;
  --k-border: #334155;
  --k-btn: #1e293b;
  --k-btn-hover: #334155;
}
.kalkulator *, .kalkulator *::before, .kalkulator *::after { box-sizing: border-box; }
.kalkulator-align-left { margin-left:0; margin-right:auto; }
.kalkulator-align-center { margin-left:auto; margin-right:auto; }
.kalkulator-align-right { margin-left:auto; margin-right:0; }
.kalkulator-header { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.kalkulator-title { font-size:1.15rem; font-weight:700; }
.kalkulator-indicators { display:flex; gap:.35rem; align-items:center; }
.kalkulator-memory-indicator { min-width:1.6rem; text-align:center; font-weight:700; color:var(--k-muted); }
.kalkulator-display { background:var(--k-panel); border:1px solid var(--k-border); border-radius:14px; padding:.75rem; margin-bottom:.75rem; }
.kalkulator-expression { width:100%; min-height:2.7rem; border:0; outline:0; background:transparent; color:var(--k-text); font:inherit; font-size:1.15rem; text-align:right; }
.kalkulator-result { min-height:2.25rem; color:var(--k-text); font-size:1.7rem; font-weight:700; text-align:right; overflow-wrap:anywhere; }
.kalkulator-help { color:var(--k-muted); font-size:.8rem; text-align:right; }
.kalkulator-error { color:#dc2626; font-size:1rem; }
.kalkulator-keypad { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:.45rem; }
.kalkulator-btn { border:1px solid var(--k-border); border-radius:12px; background:var(--k-btn); color:#000 !important; min-height:2.75rem; padding:.45rem .35rem; font:inherit; font-weight:650; cursor:pointer; line-height:1; }
.kalkulator-btn:hover, .kalkulator-btn:focus, .kalkulator-btn:active { color:#222222 !important; }
.kalkulator-btn:hover, .kalkulator-btn:focus { background:var(--k-btn-hover); outline:2px solid transparent; }
.kalkulator-btn:focus-visible { outline:3px solid #60a5fa; outline-offset:2px; }
.kalkulator-operator { background:var(--k-operator); }
.kalkulator-clear { background:var(--k-clear); }
.kalkulator-memory { background:var(--k-memory); }
.kalkulator-small { min-height:auto; padding:.35rem .55rem; font-size:.78rem; border-radius:999px; }
.kalkulator-actions { display:flex; gap:.5rem; margin-top:.75rem; }
.kalkulator-action { min-height:2.25rem; font-size:.85rem; padding:.35rem .65rem; }
.kalkulator-history { margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--k-border); }
.kalkulator-history-title { font-weight:700; margin-bottom:.4rem; }
.kalkulator-history ol { margin:0; padding-left:1.25rem; max-height:12rem; overflow:auto; }
.kalkulator-history li { margin:.25rem 0; }
.kalkulator-history li button { border:0; background:transparent; color:var(--k-text); cursor:pointer; text-align:left; padding:.2rem; overflow-wrap:anywhere; }
.kalkulator-basic-mode .kalkulator-scientific { display:none; }
.kalkulator-basic-mode .kalkulator-keypad { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kalkulator-editor-preview { border:1px dashed #94a3b8; padding:1rem; }
@media (max-width: 420px) {
  .kalkulator { padding:.7rem; border-radius:14px; }
  .kalkulator-keypad { gap:.35rem; }
  .kalkulator-btn { min-height:2.45rem; font-size:.9rem; border-radius:10px; }
  .kalkulator-result { font-size:1.35rem; }
}
.kalkulator-history-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.kalkulator-operator:hover, .kalkulator-operator:focus, .kalkulator-operator:active { background:var(--k-operator-hover); color:#222222 !important; }
.kalkulator-clear:hover, .kalkulator-clear:focus, .kalkulator-clear:active { background:var(--k-clear-hover); color:#222222 !important; }
.kalkulator-memory:hover, .kalkulator-memory:focus, .kalkulator-memory:active { background:var(--k-memory-hover); color:#222222 !important; }
