/* OfficeCalculator v154 — match the navy display and distinct, responsive keys in the UI reference. */
.oc-calculator-app {
  --oc-bg:#ffffff;
  --oc-panel:#edf3f8;
  --oc-border:#8fa8bf;
  --oc-text:#152a40;
  --oc-muted:#40566d;
  --oc-key:#ffffff;
  --oc-key-hover:#e8f1f8;
  --oc-accent:#285f90;
  --oc-accent-dark:#1b4a73;
}

.oc-calculator-app.is-dark,
body.oc-dark .oc-calculator-app {
  --oc-bg:#15212c;
  --oc-panel:#1b2b39;
  --oc-border:#728ba1;
  --oc-text:#f7fbff;
  --oc-muted:#d2deea;
  --oc-key:#233646;
  --oc-key-hover:#30495d;
  --oc-accent:#397eae;
  --oc-accent-dark:#2c6996;
}

.oc-calculator-app.calculator-shell {
  box-sizing:border-box;
  width:min(100%,820px);
  border:1px solid #a8bdcf;
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 8px 22px rgba(27,57,84,.12);
  color:var(--oc-text);
}

.oc-calculator-app .calculator-topbar {
  gap:8px;
  padding:8px 10px;
  background:#eaf2f8;
  border-bottom-color:#b9cada;
}

.oc-calculator-app .mode-tab {
  min-height:38px;
  padding:7px 12px;
  color:#1c3c5b;
  background:#ffffff;
  border:1px solid #8ca6bf;
  font-weight:700;
}

.oc-calculator-app .mode-tab.active {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:#285f90 !important;
  border-color:#174b77 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.oc-calculator-app .small-control,
.oc-calculator-app .text-button {
  color:#203e5a;
  background:#ffffff;
  border-color:#8ca6bf;
  font-weight:650;
}

.oc-calculator-app button:disabled {
  color:#566a7e;
  background:#e0e8ef;
  border-color:#a7bacb;
  opacity:1;
}

.oc-calculator-app .display-panel,
html body .oc-calculator-app .display-panel,
html body .oc-calculator-app.is-dark .display-panel,
html body.oc-dark .oc-calculator-app .display-panel {
  min-height:116px;
  padding:12px 15px;
  background:linear-gradient(180deg,#1b4162 0%,#14334f 100%) !important;
  border:1px solid #102c45 !important;
  border-radius:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 5px rgba(12,37,59,.15);
}

.oc-calculator-app .display-panel .memory-indicator {
  color:#e4eef7;
}

.oc-calculator-app .display-panel .expression,
html body .oc-calculator-app .display-panel #expression,
html body .oc-calculator-app.is-dark .display-panel #expression,
html body.oc-dark .oc-calculator-app .display-panel #expression {
  color:#d4e3f0 !important;
  -webkit-text-fill-color:#d4e3f0 !important;
  font-size:13px;
}

.oc-calculator-app .display-panel .display-message,
html body .oc-calculator-app .display-panel #displayMessage,
html body .oc-calculator-app.is-dark .display-panel #displayMessage,
html body.oc-dark .oc-calculator-app .display-panel #displayMessage {
  color:#cfdeeb !important;
  -webkit-text-fill-color:#cfdeeb !important;
  font-weight:600;
}

.oc-calculator-app .display-panel output#result,
html body .oc-calculator-app .display-panel output#result,
html body .oc-calculator-app.is-dark .display-panel output#result,
html body.oc-dark .oc-calculator-app .display-panel output#result {
  min-width:0;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-size:clamp(42px,6vw,64px) !important;
  line-height:1 !important;
  overflow-wrap:anywhere;
  text-shadow:none !important;
}

.oc-calculator-app .memory-row button {
  min-height:36px;
  color:#1c3e5e;
  background:#eaf1f7;
  border-color:#8da7bf;
  font-weight:700;
}

.oc-calculator-app .keypad { gap:5px; }
.oc-calculator-app .keypad .key {
  min-height:46px;
  color:#152a40;
  background:#ffffff;
  border:1px solid #829db7;
  border-radius:8px;
  font-size:16px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.oc-calculator-app .keypad .number { color:#152a40; background:#ffffff; }
.oc-calculator-app .keypad .number:hover {
  color:#102b46;
  background:#edf4fa;
  border-color:#527b9f;
}
.oc-calculator-app .keypad .utility:not([data-action="clear"]) {
  color:#203e5a !important;
  -webkit-text-fill-color:#203e5a !important;
  background:#e8eef4 !important;
  border-color:#879fb6 !important;
}
.oc-calculator-app .keypad .utility:not([data-action="clear"]):hover {
  background:#dbe7f1 !important;
  border-color:#557c9e !important;
}
.oc-calculator-app .keypad [data-action="clear"] {
  color:#8e2020;
  background:#ffe2e2;
  border-color:#d77b7b;
}
.oc-calculator-app .keypad [data-action="clear"]:hover {
  color:#741515;
  background:#ffd3d3;
  border-color:#bd5959;
}
.oc-calculator-app .keypad .operator {
  color:#173957;
  background:#dceaf5;
  border-color:#7798b5;
}
.oc-calculator-app .keypad .operator:hover {
  color:#102e49;
  background:#cbdfee;
  border-color:#527b9f;
}
.oc-calculator-app .keypad .equals {
  color:#ffffff;
  background:#285f90;
  border-color:#174b77;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17);
}
.oc-calculator-app .keypad .equals:hover {
  color:#ffffff;
  background:#1b4a73;
  border-color:#113c62;
}

.oc-calculator-app .history-panel {
  background:#ffffff;
  border-color:#b8c9d9;
}
.oc-calculator-app .history-heading h2,
.oc-calculator-app .session-heading h3 { color:#1a3c5d; }
.oc-calculator-app .history-heading span,
.oc-calculator-app .privacy-note,
.oc-calculator-app .keyboard-tip,
.oc-calculator-app .empty-history,
.oc-calculator-app .session-heading span { color:#40566d; }
.oc-calculator-app .history-item { border-color:#b6c8d8; }
.oc-calculator-app .history-actions button,
.oc-calculator-app .session-primary-actions #saveResultImage,
.oc-calculator-app .session-primary-actions #downloadCsv {
  color:#1d3c5a;
  background:#ffffff;
  border-color:#829db7;
  font-weight:700;
}
.oc-calculator-app .history-actions button:hover,
.oc-calculator-app .session-primary-actions #saveResultImage:hover,
.oc-calculator-app .session-primary-actions #downloadCsv:hover {
  color:#102e49;
  background:#edf4fa;
  border-color:#527b9f;
}

.oc-calculator-app button:focus-visible,
.oc-calculator-app input:focus-visible,
.oc-calculator-app select:focus-visible,
.oc-calculator-app textarea:focus-visible {
  position:relative;
  z-index:3;
  outline:3px solid #174f89 !important;
  outline-offset:2px;
  box-shadow:0 0 0 5px #ffffff !important;
}

/* Keep the same clear key roles when the site or calculator uses dark mode. */
.oc-calculator-app.is-dark .calculator-topbar,
body.oc-dark .oc-calculator-app .calculator-topbar {
  background:#1b2b39;
  border-bottom-color:#566f84;
}
.oc-calculator-app.is-dark .mode-tab,
body.oc-dark .oc-calculator-app .mode-tab {
  color:#e6f0f8;
  background:#263b4e;
  border-color:#7891a6;
}
.oc-calculator-app.is-dark .mode-tab.active,
body.oc-dark .oc-calculator-app .mode-tab.active {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:#285f90 !important;
  border-color:#86b4d7 !important;
}
.oc-calculator-app.is-dark .small-control,
body.oc-dark .oc-calculator-app .small-control,
.oc-calculator-app.is-dark .text-button,
body.oc-dark .oc-calculator-app .text-button {
  color:#edf5fb;
  background:#263b4e;
  border-color:#7891a6;
}
.oc-calculator-app.is-dark .keypad .number,
body.oc-dark .oc-calculator-app .keypad .number {
  color:#f7fbff;
  background:#24394c;
  border-color:#7891a6;
}
.oc-calculator-app.is-dark .keypad .utility:not([data-action="clear"]),
body.oc-dark .oc-calculator-app .keypad .utility:not([data-action="clear"]) {
  color:#f7fbff !important;
  -webkit-text-fill-color:#f7fbff !important;
  background:#344b60 !important;
  border-color:#879fb4 !important;
}
.oc-calculator-app.is-dark .keypad [data-action="clear"],
body.oc-dark .oc-calculator-app .keypad [data-action="clear"] {
  color:#ffe7e7;
  background:#572b2b;
  border-color:#cc8585;
}
.oc-calculator-app.is-dark .keypad .operator,
body.oc-dark .oc-calculator-app .keypad .operator {
  color:#f0f7fc;
  background:#244765;
  border-color:#7fa9c8;
}
.oc-calculator-app.is-dark .history-panel,
body.oc-dark .oc-calculator-app .history-panel {
  color:#f4f8fc;
  background:#1b2b39;
  border-color:#566f84;
}
.oc-calculator-app.is-dark .history-heading h2,
.oc-calculator-app.is-dark .session-heading h3,
body.oc-dark .oc-calculator-app .history-heading h2,
body.oc-dark .oc-calculator-app .session-heading h3 { color:#e4eff8; }
.oc-calculator-app.is-dark .history-heading span,
.oc-calculator-app.is-dark .privacy-note,
.oc-calculator-app.is-dark .keyboard-tip,
.oc-calculator-app.is-dark .empty-history,
body.oc-dark .oc-calculator-app .history-heading span,
body.oc-dark .oc-calculator-app .privacy-note,
body.oc-dark .oc-calculator-app .keyboard-tip,
body.oc-dark .oc-calculator-app .empty-history { color:#d2deea; }
.oc-calculator-app.is-dark button:focus-visible,
.oc-calculator-app.is-dark input:focus-visible,
.oc-calculator-app.is-dark select:focus-visible,
.oc-calculator-app.is-dark textarea:focus-visible,
body.oc-dark .oc-calculator-app button:focus-visible,
body.oc-dark .oc-calculator-app input:focus-visible,
body.oc-dark .oc-calculator-app select:focus-visible,
body.oc-dark .oc-calculator-app textarea:focus-visible {
  outline-color:#ffffff !important;
  box-shadow:0 0 0 5px #15212c !important;
}

@media (max-width:900px) {
  .oc-calculator-app.calculator-shell { max-width:760px; }
  .oc-calculator-app .calculator-workspace { grid-template-columns:minmax(0,1fr); }
  .oc-calculator-app .history-panel {
    border-top:1px solid #b8c9d9;
    border-left:0;
  }
}

@media (max-width:600px) {
  .oc-calculator-app.calculator-shell {
    width:100%;
    max-width:100%;
    margin:5px auto 18px;
    border-radius:10px;
  }
  .oc-calculator-app .calculator-topbar {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    padding:7px;
  }
  .oc-calculator-app .mode-tabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    width:100%;
  }
  .oc-calculator-app .mode-tab {
    min-width:0;
    min-height:42px;
    padding:6px 3px;
    font-size:12px;
    white-space:nowrap;
  }
  .oc-calculator-app .calculator-topbar .status-controls {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    width:100%;
  }
  .oc-calculator-app .calculator-topbar .status-controls .small-control {
    width:100%;
    min-width:0;
    min-height:40px;
    padding:5px 2px;
    font-size:11px;
    white-space:nowrap;
  }
  .oc-calculator-app .calculator-main { padding:8px; }
  .oc-calculator-app .display-panel {
    min-height:104px;
    padding:10px 12px;
    border-radius:9px;
  }
  .oc-calculator-app .display-panel .expression { min-height:17px; font-size:12px; }
  .oc-calculator-app .display-panel output#result,
  html body .oc-calculator-app .display-panel output#result,
  html body .oc-calculator-app.is-dark .display-panel output#result,
  html body.oc-dark .oc-calculator-app .display-panel output#result {
    font-size:clamp(38px,11vw,48px) !important;
  }
  .oc-calculator-app .display-panel .display-message { min-height:12px; margin-top:4px; font-size:11px; }
  .oc-calculator-app .scientific-panel { grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
  .oc-calculator-app .scientific-panel button { min-width:0; min-height:40px; padding:4px 2px; font-size:12px; }
  .oc-calculator-app .memory-row { gap:4px; margin-bottom:5px; }
  .oc-calculator-app .memory-row button { min-width:0; min-height:40px; padding:4px 2px; font-size:13px; }
  .oc-calculator-app .keypad { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .oc-calculator-app .keypad .key { min-width:0; min-height:46px; padding:5px 2px; font-size:15px; }
  .oc-calculator-app .history-panel { padding:10px; }
  .oc-calculator-app .history-list { max-height:135px; }
  .oc-calculator-app .history-actions button { min-height:40px; }
  .oc-calculator-app .keyboard-tip,
  .oc-calculator-app .privacy-note { font-size:11px; line-height:1.45; }
}

@media (max-width:360px) {
  .oc-calculator-app .calculator-topbar { padding:6px; }
  .oc-calculator-app .mode-tab { font-size:11px; }
  .oc-calculator-app .calculator-topbar .status-controls .small-control {
    min-height:38px;
    padding:4px 1px;
    font-size:10px;
  }
  .oc-calculator-app .scientific-panel { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .oc-calculator-app .keypad .key { min-height:44px; font-size:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .oc-calculator-app button { transition:none !important; }
}