/* Scientific Calculator — polished, app-like calculator card: dark display
   panel, soft-shadow buttons, mode toggle (Standard/Scientific), memory
   row, and a slide-down history panel. */
/* Flex + align-items:center on the full-width wrapper, rather than
   max-width + margin:auto on the wrapper itself — robust against any
   parent layout quirk that block-level auto-margins can be thrown off
   by, and matches how every other tool page on the site centers its
   content. The card's own max-width (below) is what actually keeps it
   narrow; this wrapper just spans normally and centers its children. */
.calc-fit.calc-scope {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  width: 100%; margin: 0 auto;
  min-height: calc(100vh - 70px);
  padding: 90px 4vw 60px;
  box-sizing: border-box;
}

.calc-hero { text-align: center; flex-shrink: 0; width: 100%; max-width: 480px; }
.calc-hero h1 {
  font-size: 1.5rem !important; font-weight: 800 !important;
  color: var(--brand, #10b981) !important;
  margin: 0 0 4px !important;
}
#calcScope .calc-hero p {
  font-size: .85rem !important; color: var(--txt-2, #64748b) !important;
  margin: 0 !important;
}

#calcScope .calc-card {
  max-width: 420px !important; width: 100%;
  padding: 20px !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: 0 24px 60px -16px rgba(15,23,42,.18), 0 2px 8px rgba(15,23,42,.04) !important;
  margin: 0 !important;
  border-radius: 26px;
  position: relative;
  transition: max-width .25s ease;
  animation: calcCardIn .4s cubic-bezier(.22,1,.36,1) both;
}
#calcScope .calc-card.calc-card-sci { max-width: 480px !important; }
@keyframes calcCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #calcScope .calc-card { animation: none; }
}

/* ── Top bar: mode toggle + deg/rad + history ── */
.calc-topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.calc-mode-toggle {
  display: flex; flex: 1; background: var(--page-bg, #f1f5f9); border-radius: 12px; padding: 3px; gap: 2px;
}
.calc-mode-btn {
  flex: 1; border: none; background: transparent; padding: 7px 0; border-radius: 9px;
  font-size: .78rem; font-weight: 700; color: var(--txt-2, #64748b); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.calc-mode-btn.calc-mode-active { background: var(--surface, #fff); color: var(--brand-dark, #059669); box-shadow: 0 2px 6px rgba(15,23,42,.08); }
.calc-deg-toggle, .calc-history-btn {
  border: 1px solid var(--border, #e2e8f0); background: var(--page-bg, #f1f5f9);
  color: var(--txt-2, #64748b); font-size: .72rem; font-weight: 700;
  border-radius: 10px; height: 32px; padding: 0 10px; cursor: pointer; flex-shrink: 0;
}
.calc-history-btn { width: 32px; padding: 0; }
.calc-deg-toggle:hover, .calc-history-btn:hover { background: rgba(16,185,129,.12); color: var(--brand-dark, #059669); }

/* ── History panel ── */
.calc-history-panel {
  margin-bottom: 14px; border: 1px solid var(--border, #e2e8f0); border-radius: 14px;
  background: var(--page-bg, #f8fafc); overflow: hidden;
  animation: calcSlideDown .22s ease both;
  transform-origin: top;
}
@keyframes calcSlideDown {
  from { opacity: 0; transform: scaleY(.85) translateY(-6px); }
  to   { opacity: 1; transform: scaleY(1) translateY(0); }
}
.calc-history-item { animation: calcFadeIn .25s ease both; }
@keyframes calcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.calc-history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-size: .76rem; font-weight: 700; color: var(--txt-2, #64748b);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.calc-history-clear { border: none; background: none; color: var(--brand-dark, #059669); font-size: .72rem; font-weight: 700; cursor: pointer; }
.calc-history-clear:hover { text-decoration: underline; }
.calc-history-list { list-style: none; margin: 0; padding: 4px; max-height: 180px; overflow-y: auto; }
.calc-history-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: .8rem;
}
.calc-history-item:hover { background: var(--surface, #fff); }
.calc-history-expr { color: var(--txt-2, #64748b); font-family: 'SFMono-Regular', Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-history-result { color: var(--txt, #0f172a); font-weight: 700; font-family: 'SFMono-Regular', Consolas, monospace; flex-shrink: 0; }

/* ── Display panel — dark, sits visually "below" the surface like a real
   calculator screen, instead of a plain bordered box matching the card. ── */
.calc-display-wrap {
  position: relative;
  background: linear-gradient(160deg, #0f172a, #1e293b);
  border-radius: 18px;
  padding: 22px 20px 18px;
  margin-bottom: 16px;
  text-align: right;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 8px 20px -8px rgba(15,23,42,.4);
}
.calc-memory-indicator {
  position: absolute; top: 10px; left: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(16,185,129,.25); color: #34d399;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800;
  animation: calcMemPop .25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes calcMemPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.calc-prev {
  font-size: .82rem; color: rgba(255,255,255,.45);
  min-height: 1.3em; word-break: break-all;
  font-family: 'SFMono-Regular', Consolas, monospace;
  transition: opacity .15s ease;
}
.calc-display {
  font-size: 2.4rem; font-weight: 600; color: #fff;
  word-break: break-all; line-height: 1.25;
  font-family: 'SFMono-Regular', Consolas, monospace;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: transform .12s ease;
}
/* A quick scale-pop whenever the displayed value changes (typing a digit,
   getting a result, anything) — gives the screen a little life instead of
   numbers just silently swapping out. Toggled by JS re-triggering the
   class on every render(). */
.calc-display.calc-display-pop { animation: calcDisplayPop .18s ease; }
@keyframes calcDisplayPop { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
.calc-display.calc-display-error { animation: calcShake .35s ease; color: #fb7185; }
@keyframes calcShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  50%      { transform: translateX(5px); }
  75%      { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .calc-display.calc-display-pop, .calc-display.calc-display-error { animation: none; }
  .calc-history-panel, .calc-history-item, .calc-memory-indicator { animation: none; }
}

/* ── Memory row + scientific function rows ── */
.calc-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.calc-mem-row { grid-template-columns: repeat(5, 1fr); }
.calc-btn-mem {
  height: 38px; border-radius: 10px; font-size: .76rem; font-weight: 700;
  background: var(--page-bg, #f1f5f9); color: var(--txt-2, #475569); border: none; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.calc-btn-mem:hover { background: rgba(16,185,129,.14); color: var(--brand-dark, #059669); }
.calc-btn-mem:active { transform: scale(.95); }

.calc-sci-rows { display: none; flex-direction: column; }
.calc-card-sci .calc-sci-rows { display: flex; }
.calc-row-5 { grid-template-columns: repeat(5, 1fr); }
.calc-btn-sci {
  height: 40px; border-radius: 10px; font-size: .82rem; font-weight: 600;
  background: rgba(16,185,129,.08); color: var(--brand-dark, #059669); border: none; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.calc-btn-sci:hover { background: rgba(16,185,129,.18); }
.calc-btn-sci:active { transform: scale(.95); }

.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.calc-btn {
  border: none; border-radius: 16px;
  padding: 0; height: 60px;
  font-size: 1.25rem; font-weight: 600;
  cursor: pointer;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, background .15s ease;
  background: var(--page-bg, #f1f5f9);
  color: var(--txt, #0f172a);
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.06);
}
.calc-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,23,42,.12); }
.calc-btn:active { transform: translateY(0) scale(.95); box-shadow: 0 1px 2px rgba(15,23,42,.08); }

.calc-btn-num { background: var(--surface, #fff); font-weight: 600; }
.calc-btn-zero { grid-column: span 1; }

.calc-btn-fn {
  background: var(--page-bg, #e8edf3);
  color: var(--txt-2, #475569);
  font-size: 1.05rem;
}

.calc-btn-op {
  background: rgba(16,185,129,.14);
  color: var(--brand-dark, #059669);
  font-size: 1.4rem;
}
.calc-btn-op:hover { background: rgba(16,185,129,.22); }

.calc-btn-equals {
  background: linear-gradient(135deg, var(--brand, #10b981), var(--brand-dark, #059669));
  color: #fff;
  box-shadow: 0 10px 22px -4px rgba(16,185,129,.5);
}
.calc-btn-equals:hover { box-shadow: 0 14px 28px -4px rgba(16,185,129,.6); }
.calc-btn-equals:active { box-shadow: 0 6px 14px -4px rgba(16,185,129,.45); }

.calc-hint {
  margin-top: 16px; text-align: center;
  font-size: .76rem; color: var(--txt-2, #94a3b8);
}

html[data-theme="dark"] #calcScope .calc-card { background: var(--surface, #11111a) !important; }
html[data-theme="dark"] .calc-btn { background: rgba(255,255,255,.05); color: #f1f5f9; box-shadow: none; }
html[data-theme="dark"] .calc-btn-num { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .calc-btn-fn { background: rgba(255,255,255,.04); color: #cbd5e1; }
html[data-theme="dark"] .calc-btn:hover { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .calc-mode-toggle, html[data-theme="dark"] .calc-btn-mem { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .calc-mode-btn.calc-mode-active { background: rgba(255,255,255,.12); }
html[data-theme="dark"] .calc-history-panel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .calc-history-item:hover { background: rgba(255,255,255,.06); }

@media (max-width: 420px) {
  .calc-display { font-size: 2.1rem; }
  .calc-btn { height: 52px; font-size: 1.1rem; }
  .calc-btn-sci, .calc-btn-mem { height: 36px; font-size: .74rem; }
}