/* ==========================================================================
   Calculator widget — modern skin + Casio fx-580VN skin
   ========================================================================== */
.mto-calc {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  contain: content;
}
.mto-calc__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--c-border); }
.mto-calc__modes { display: inline-flex; background: var(--c-surface-2); border-radius: 10px; padding: 3px; gap: 2px; }
.mto-calc__mode { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: .86rem; font-weight: 600; color: var(--c-muted); cursor: pointer; white-space: nowrap; }
.mto-calc__mode[aria-pressed="true"] { background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-sm); }
.mto-calc__brand { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.mto-calc__tools { display: flex; align-items: center; gap: 4px; }
.mto-calc__chip { border: 1px solid var(--c-border); background: var(--c-surface-2); border-radius: 8px; padding: 5px 10px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--c-text-2); cursor: pointer; min-width: 52px; }
.mto-calc__chip:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Display */
.mto-calc__display { padding: 10px 18px 14px; min-height: 124px; display: flex; flex-direction: column; justify-content: flex-end; text-align: right; background: var(--c-surface); }
.mto-calc__indicators { display: flex; gap: 10px; justify-content: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--c-muted); min-height: 1.1em; margin-bottom: 4px; }
.mto-calc__ind[hidden] { display: none; }
.mto-calc__expr { font-family: var(--font-mono); font-size: 1.1rem; color: var(--c-text-2); min-height: 1.6em; line-height: 1.5; white-space: nowrap; overflow-x: auto; scrollbar-width: none; word-break: keep-all; }
.mto-calc__expr::-webkit-scrollbar { display: none; }
.mto-calc__caret { display: inline-block; width: 2px; height: 1.05em; background: var(--c-accent); vertical-align: -0.15em; animation: mto-blink 1s steps(2) infinite; }
.mto-calc.is-result .mto-calc__caret { visibility: hidden; }
@keyframes mto-blink { 50% { opacity: 0; } }
.mto-calc__result { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.9rem, 7.5vw, 2.5rem); font-weight: 600; line-height: 1.25; color: var(--c-text); white-space: nowrap; overflow-x: auto; scrollbar-width: none; min-height: 1.25em; transition: color .15s; }
.mto-calc__result::-webkit-scrollbar { display: none; }
.mto-calc__result.is-preview { color: var(--c-muted); font-weight: 400; font-size: clamp(1.4rem, 5.5vw, 1.8rem); }
.mto-calc__result.is-error { color: var(--c-danger); font-size: clamp(1.2rem, 4.5vw, 1.5rem); font-weight: 600; }
.mto-calc__result sup { font-size: .55em; vertical-align: super; line-height: 0; }

/* Keypads */
.mto-calc__body { padding: 12px; background: var(--c-surface-2); }
.mto-keys[hidden] { display: none; }
.mto-keys--modern { display: grid; gap: 10px; }
.mto-keys__sci-toggle { display: none; width: 100%; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 10px; border: 1px dashed var(--c-border); background: transparent; color: var(--c-text-2); font-size: .9rem; font-weight: 600; cursor: pointer; }
.mto-keys__sci-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mto-keys__sci { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mto-keys__sci.is-collapsed { display: none; }
@media (max-width: 520px) {
  .mto-keys__sci-toggle { display: flex; }
}
@media (min-width: 521px) {
  .mto-keys__sci.is-collapsed { display: grid; }
}
.mto-keys__basic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.key {
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  background: var(--c-key);
  color: var(--c-key-text);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: var(--shadow-sm);
  transition: transform .06s, background .15s, filter .15s;
}
.key:hover { filter: brightness(.97); }
.key:active { transform: scale(.95); }
:root[data-theme="dark"] .key:hover { filter: brightness(1.15); }
.key--fn { min-height: 42px; font-size: .95rem; background: var(--c-key-fn); font-weight: 600; }
.key--mem { font-size: .85rem; color: var(--c-muted); }
.key--op { background: var(--c-key-op); color: var(--c-accent-2); font-size: 1.4rem; }
.key--ac { background: var(--c-danger-soft); color: var(--c-danger); font-size: 1rem; letter-spacing: .04em; }
.key--eq { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-size: 1.5rem; }
.key--eq:hover { background: var(--c-accent-2); filter: none; }
.key--zero { grid-column: span 2; }
.key--shift[aria-pressed="true"] { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* History */
.mto-calc__history { border-top: 1px solid var(--c-border); background: var(--c-surface); max-height: 240px; overflow-y: auto; }
.mto-calc__history[hidden] { display: none; }
.mto-calc__history-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: .85rem; font-weight: 700; color: var(--c-muted); position: sticky; top: 0; background: var(--c-surface); }
.mto-calc__link { border: 0; background: none; color: var(--c-accent); cursor: pointer; font-size: .82rem; font-weight: 600; padding: 4px 6px; }
.mto-calc__history-list { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 2px; }
.mto-calc__history-item { width: 100%; text-align: right; border: 0; background: transparent; border-radius: 8px; padding: 6px 8px; cursor: pointer; font-family: var(--font-mono); display: grid; gap: 2px; }
.mto-calc__history-item:hover { background: var(--c-surface-2); }
.mto-calc__history-expr { font-size: .85rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mto-calc__history-res { font-size: 1.05rem; font-weight: 600; color: var(--c-text); }
.mto-calc__history-empty { margin: 0; padding: 4px 14px 14px; font-size: .85rem; color: var(--c-muted); }
.mto-calc__history-empty[hidden] { display: none; }
.mto-calc__toast { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--c-text); color: var(--c-bg); font-size: .82rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.mto-calc__toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.mto-calc__noscript { margin: 0; padding: 12px; text-align: center; color: var(--c-danger); font-size: .9rem; }

/* ---------------- Casio fx-580VN Plus skin ---------------- */
.mto-calc--casio { background: #1d2333; border-color: #0b0f19; box-shadow: 0 20px 40px -18px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .06); }
.mto-calc--casio .mto-calc__toolbar { border-color: #2c3547; color: #d5dbe7; }
.mto-calc--casio .mto-calc__modes { background: #0f1420; }
.mto-calc--casio .mto-calc__mode { color: #8b95aa; }
.mto-calc--casio .mto-calc__mode[aria-pressed="true"] { background: #2c3547; color: #fff; }
.mto-calc--casio .mto-calc__brand { color: #c7cfdd; }
.mto-calc--casio .mto-calc__chip { background: #0f1420; border-color: #2c3547; color: #d5dbe7; }
.mto-calc--casio .icon-btn { color: #c7cfdd; }
.mto-calc--casio .icon-btn:hover { background: #2c3547; color: #fff; }
.mto-calc--casio .mto-calc__display { margin: 12px 14px 0; border-radius: 8px; background: linear-gradient(180deg, #d5dccb, #c3ccb8); color: #101418; border: 3px solid #0b0f19; box-shadow: inset 0 3px 8px rgb(0 0 0 / .35); min-height: 112px; padding: 8px 14px 10px; }
.mto-calc--casio .mto-calc__indicators { color: #2b3138; }
.mto-calc--casio .mto-calc__expr { color: #1c2127; font-size: 1.05rem; }
.mto-calc--casio .mto-calc__caret { background: #1c2127; }
.mto-calc--casio .mto-calc__result { color: #101418; font-weight: 700; }
.mto-calc--casio .mto-calc__result.is-preview { color: #4b5563; }
.mto-calc--casio .mto-calc__result.is-error { color: #7f1d1d; }
.mto-calc--casio .mto-calc__body { background: transparent; padding: 10px 14px 14px; }
.mto-keys--casio { display: grid; gap: 8px; }
.mto-keys__fn { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 5px; }
.mto-keys__num { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px 6px; margin-top: 2px; }
.ckey-wrap { display: flex; flex-direction: column; min-width: 0; }
.ckey__legend { display: flex; justify-content: space-between; gap: 4px; font-size: .58rem; line-height: 1; font-weight: 700; padding: 0 3px 3px; min-height: .85rem; letter-spacing: .01em; white-space: nowrap; overflow: hidden; }
.ckey__shift { color: #fbbf24; }
.ckey__alpha { color: #f87171; }
.ckey {
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid #0b0f19;
  border-bottom-width: 3px;
  background: linear-gradient(180deg, #4b5567, #3a4354);
  color: #f5f7fa;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  padding: 0 2px;
  transition: transform .05s, filter .1s;
}
.ckey:hover { filter: brightness(1.1); }
.ckey:active { transform: translateY(2px); border-bottom-width: 1px; }
.ckey--num { background: linear-gradient(180deg, #f3f4f6, #d9dde3); color: #111827; font-size: 1.2rem; min-height: 46px; }
.ckey--op { background: linear-gradient(180deg, #e5e7eb, #c9ced6); color: #111827; font-size: 1.3rem; min-height: 46px; }
.ckey--eq { background: linear-gradient(180deg, #f3f4f6, #d9dde3); color: #111827; font-size: 1.45rem; min-height: 46px; }
.ckey--shift { background: linear-gradient(180deg, #fcd34d, #f59e0b); color: #1f1300; font-size: .78rem; }
.ckey--alpha { background: linear-gradient(180deg, #f87171, #dc2626); color: #fff; font-size: .78rem; }
.ckey--on { background: linear-gradient(180deg, #f3f4f6, #d9dde3); color: #111827; font-size: .8rem; }
.ckey--del, .ckey--ac { background: linear-gradient(180deg, #fdba74, #f97316); color: #1f1300; font-size: .85rem; min-height: 46px; }
.ckey--dark { background: linear-gradient(180deg, #2c3547, #1f2634); font-size: .74rem; }
.ckey--nav { background: linear-gradient(180deg, #6b7280, #4b5563); }
.ckey[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff inset, 0 0 12px rgb(255 255 255 / .35); }
.mto-calc--casio .mto-calc__history { background: #10141f; border-color: #2c3547; color: #e5e7eb; }
.mto-calc--casio .mto-calc__history-head { background: #10141f; color: #9aa5ba; }
.mto-calc--casio .mto-calc__history-item:hover { background: #1d2333; }
.mto-calc--casio .mto-calc__history-res { color: #f5f7fa; }
.mto-calc--casio .mto-calc__history-expr { color: #8b95aa; }

/* Casio page: calculator centred, a bit larger */
.page-casio__calc { margin: 12px auto 36px; }
.page-casio .mto-calc { max-width: 520px; }