/* ============================================================
   MiniCalc · 主题预览计算器组件（仅展示，可点不可算）
   完全使用 themes.css 的 CSS 变量，与扩展内观感一致。
   容器需带 theme-xxx 类（变量由 themes.css 提供）。
   ============================================================ */

.calc {
  width: 100%;
  padding: 7px;
  font-family: var(--font);
  background: var(--bg);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  transition: background .25s ease;
}

.calc-display {
  background: var(--surface);
  border-radius: 12px;
  padding: 6px 9px;
  margin-bottom: 6px;
  text-align: right;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--key-shadow);
}
.calc-expr {
  font-size: 10px;
  color: var(--sub);
  min-height: 13px;
  word-break: break-all;
}
.calc-result {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calc-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.pkey {
  height: 30px;
  border: none;
  cursor: pointer;
  border-radius: 11px;
  background: var(--key);
  color: var(--key-text);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  box-shadow: var(--key-shadow), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .1s ease, filter .1s ease, box-shadow .1s ease;
  user-select: none;
}
.pkey:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: var(--key-shadow), inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px rgba(0, 0, 0, .1);
}
.pkey:active {
  transform: translateY(2px) scale(.96);
  filter: brightness(.96);
}
.pkey-op { background: var(--op); color: var(--op-text); }
.pkey-fn { background: var(--fn); color: var(--fn-text); }
.pkey-eq { background: var(--eq); color: var(--eq-text); }
.pkey-del { background: var(--fn); color: var(--fn-text); }
.pkey-clear { background: color-mix(in srgb, var(--eq) 28%, var(--key)); color: var(--op-text); }

/* 详情弹窗里的大号预览 */
.detail-preview .calc { padding: 12px; border-radius: 20px; }
.detail-preview .calc-display { min-height: 64px; padding: 10px 14px; border-radius: 14px; }
.detail-preview .calc-expr { font-size: 13px; }
.detail-preview .calc-result { font-size: 26px; }
.detail-preview .calc-keypad { gap: 7px; }
.detail-preview .pkey { height: 44px; border-radius: 14px; font-size: 17px; }