@charset "UTF-8";
/* ============================================================
   Material Design 3 · 交互式计算器（单页应用版）
   结构：左侧 Navigation Rail + 主区域三页面（计算器 / 历史 / 设置）
   样式表：设计令牌 → 布局 → 组件 → 动效 → 响应式
   注意：首行 @charset 必须保留，否则部分浏览器会按 Latin-1 解码本文件，
         使注释乱码、含全角符号的属性选择器失配（如 data-value="M−"）。
   ============================================================ */

/* ---------------- 1. M3 设计令牌 ---------------- */
:root {
  color-scheme: light;

  /* 主色（M3 Baseline 紫色方案） */
  --md-primary:               #6750A4;
  --md-on-primary:            #FFFFFF;
  --md-primary-container:     #EADDFF;
  --md-on-primary-container:  #21005D;
  --md-secondary:             #625B71;
  --md-secondary-container:   #E8DEF8;
  --md-on-secondary-container:#1D192B;
  --md-tertiary-container:    #FFD8E4;
  --md-on-tertiary-container: #31111D;
  --md-error:                 #B3261E;
  --md-on-error:              #FFFFFF;
  --md-error-container:       #F9DEDC;
  --md-on-error-container:    #410E0B;

  /* 表面层次 */
  --md-surface:                  #FEF7FF;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low:    #F7F2FA;
  --md-surface-container:        #F3EDF7;
  --md-surface-container-high:   #ECE6F0;
  --md-surface-container-highest:#E6E0E9;
  --md-on-surface:               #1D1B20;
  --md-on-surface-variant:       #49454F;
  --md-outline:                  #79747E;
  --md-outline-variant:          #CAC4D0;
  --md-inverse-surface:          #322F35;
  --md-inverse-on-surface:       #F5EFF7;

  /* 层级阴影（M3 Elevation） */
  --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);

  /* 形状 */
  --shape-xs: 8px;
  --shape-sm: 12px;
  --shape-md: 16px;
  --shape-lg: 20px;
  --shape-xl: 28px;
  --shape-full: 999px;

  /* 动效（M3 Motion） */
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  --ease-standard:   cubic-bezier(.2, 0, 0, 1);
  --dur-short: 120ms;
  --dur-medium: 220ms;
  --dur-long: 420ms;

  /* 字体：数字与文字用界面字体；√ × ÷ ± − ² % = 等数学符号用数学字体栈 */
  --font-brand: system-ui, "Google Sans", Roboto, "Segoe UI", "Microsoft YaHei", sans-serif;
  /* Cambria Math 随 Windows 提供，是本机首选的数学字体；其余为跨平台开源数学字体与符号字体回退 */
  --font-math: "Cambria Math", "STIX Two Math", "Latin Modern Math", "XITS Math",
               "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", serif;

  /* 布局尺寸 */
  --rail-w: 88px;
  --gap: clamp(8px, 1.1vw, 16px);

  /* 自适应尺寸：显示屏与键盘共用同一列宽，由视口高度反推单键尺寸。
     高度不足时优先滚动页面，而不是把按键压成扁条；宽度不足时优先保证最小触摸尺寸。 */
  --viewport-h: 100vh;                    /* 支持 dvh 的浏览器由 @supports 升级 */
  --rows: 7;                              /* 宽屏键盘行数（5 列科学布局 + 1 列工具键） */
  --screen-h: clamp(76px, 17vh, 176px);   /* 显示屏高度 */
  /* 显示数字字号同时受比例与「显示屏实际可用高度」约束，矮屏也不会撑破显示区 */
  --screen-font: clamp(1.4rem,
                       min(calc(var(--screen-h) * .42), calc(var(--screen-h) - 56px)),
                       6.5rem);
  --key-min: 44px;                        /* 单键最小边长（触摸可用下限） */
  --key-max-h: 108px;                     /* 单键最大高度，避免大屏把按键拉成长条 */
  --key-ratio: 1.5;                       /* 单键最大宽高比，避免矮屏把按键压成扁条 */
  --col-max: 1000px;                      /* 显示屏与键盘整列的硬上限 */
  /* 当前宽度下 6 列布局能给出的单键宽度（用于限制键高，避免窄而高的按键） */
  --key-w-avail: calc((100vw - var(--rail-w) - 7 * var(--gap)) / 6);
  /* 单键高度 = (视口高度 − 显示屏 − 页面留白 3 个 gap − 键盘行间距 (行数-1) 个 gap) ÷ 行数，
     并且不超过当前宽度允许的键宽 */
  --key-h: clamp(var(--key-min),
                 min(calc((var(--viewport-h) - var(--screen-h) - (var(--rows) + 2) * var(--gap)) / var(--rows)),
                     var(--key-w-avail)),
                 var(--key-max-h));
  /* 单键宽度同时受整列上限与宽高比上限约束 */
  --key-w: min(calc((var(--col-max) - 5 * var(--gap)) / 6),
               calc(var(--key-h) * var(--key-ratio)));
  /* 整列实际宽度：6 列键宽 + 5 个间距（窄屏 4 列时在响应式段落覆盖） */
  --keypad-col-max: calc(6 * var(--key-w) + 5 * var(--gap));
}

/* 移动端用 dvh，避免地址栏收放造成的整屏挤压 */
@supports (height: 100dvh) {
  :root { --viewport-h: 100dvh; }
}

/* 深色主题令牌 */
[data-theme="dark"] {
  color-scheme: dark;
  --md-primary:               #D0BCFF;
  --md-on-primary:            #381E72;
  --md-primary-container:     #4F378B;
  --md-on-primary-container:  #EADDFF;
  --md-secondary:             #CCC2DC;
  --md-secondary-container:   #4A4458;
  --md-on-secondary-container:#E8DEF8;
  --md-tertiary-container:    #633B48;
  --md-on-tertiary-container: #FFD8E4;
  --md-error:                 #F2B8B5;
  --md-on-error:              #601410;
  --md-error-container:       #8C1D18;
  --md-on-error-container:    #F9DEDC;

  --md-surface:                  #141218;
  --md-surface-container-lowest: #0F0D13;
  --md-surface-container-low:    #1D1B20;
  --md-surface-container:        #211F26;
  --md-surface-container-high:   #2B2930;
  --md-surface-container-highest:#36343B;
  --md-on-surface:               #E6E0E9;
  --md-on-surface-variant:       #CAC4D0;
  --md-outline:                  #938F99;
  --md-outline-variant:          #49454F;
  --md-inverse-surface:          #E6E0E9;
  --md-inverse-on-surface:       #322F35;

  --elev-1: 0 1px 2px rgba(0,0,0,.55), 0 1px 3px 1px rgba(0,0,0,.35);
  --elev-2: 0 1px 2px rgba(0,0,0,.55), 0 2px 6px 2px rgba(0,0,0,.35);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.55);
}

/* ---------------- 2. 基础重置 ---------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-brand);
  color: var(--md-on-surface);
  background: var(--md-surface);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                         /* 全屏应用，不出现页面滚动条 */
  transition: background-color var(--dur-long) var(--ease-standard),
              color var(--dur-medium) var(--ease-standard);
}

h1, h2, h3, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }

/* ---------------- 3. 整体布局：导航栏 + 主画布 + 侧边栏 ---------------- */
.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: stretch;
  background: var(--md-surface);
}

/* ============ 左侧 Navigation Rail ============ */
.rail {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 18px;
  background: var(--md-surface-container-low);
  border-right: 1px solid color-mix(in srgb, var(--md-outline-variant) 55%, transparent);
  z-index: 3;
}

.rail__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

/* 导航项：图标 + 药丸形激活指示器 */
.rail-item {
  position: relative;
  width: 72px;
  padding: 4px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-radius: var(--shape-md);
  color: var(--md-on-surface-variant);
  transition: color var(--dur-medium) var(--ease-standard);
}
.rail-item__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px; height: 32px;
  border-radius: var(--shape-full);
  transition: background-color var(--dur-medium) var(--ease-emphasized),
              transform var(--dur-short) var(--ease-standard);
}
.rail-item__label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
}
.rail-item:hover { color: var(--md-on-surface); }
.rail-item:hover .rail-item__icon { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.rail-item:active .rail-item__icon { transform: scale(.92); }
.rail-item.is-active { color: var(--md-on-surface); }
.rail-item.is-active .rail-item__icon {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.rail-item.is-active .rail-item__label { font-weight: 700; }

.rail-item--foot { margin-top: auto; }

[data-theme="light"] .icon-moon,
[data-theme="dark"]  .icon-sun { display: none; }

/* ============ 窄屏覆盖层：遮罩 + 悬浮导航按钮 ============ */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 55;                            /* 面板（60/65）与悬浮按钮（70）都在遮罩之上 */
  background: color-mix(in srgb, var(--md-inverse-surface) 40%, transparent);
}
.scrim[hidden] { display: none; }

/* 窄屏菜单按钮：嵌在显示屏信息行里，宽屏隐藏 */
.nav-trigger {
  display: none;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-right: 2px;
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--md-on-surface-variant);
}
.nav-trigger:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }

/* 窄屏弹出菜单：紧凑的 4 个按钮，锚定在菜单按钮下方 */
.nav-menu {
  display: none;
  position: fixed;
  z-index: 70;
  min-width: 208px;
  padding: 6px;
  border-radius: var(--shape-lg);
  background: var(--md-surface-container-high);
  box-shadow: var(--elev-3);
  animation: menuIn var(--dur-short) var(--ease-emphasized);
}
.nav-menu[hidden] { display: none; }
.nav-menu .rail-item {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--shape-sm);
}
.nav-menu .rail-item__icon { width: 34px; height: 34px; }
.nav-menu .rail-item__label { display: block; font-size: .9375rem; }
.nav-menu .rail-item.is-active { font-weight: 600; }
.nav-menu__divider {
  height: 1px;
  margin: 4px 8px;
  background: color-mix(in srgb, var(--md-outline-variant) 70%, transparent);
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* 覆盖层（弹出菜单 / 高级功能抽屉）打开时锁住背景滚动 */
.is-scroll-locked .page--calc { overflow: hidden; }

/* ============ 主区域（导航栏切换三个页面） ============ */
.main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  background: var(--md-surface);
  overflow: hidden;
}

/* 页面容器：只有当前页参与布局 */
.page {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.page[hidden] { display: none; }

/* 计算器页：显示屏 + 键盘，居中列容器，竖向居中 */
.page--calc {
  justify-content: center;
  justify-content: safe center;           /* 内容高于视口时可滚动，顶部不被裁切 */
  gap: var(--gap);
  padding: var(--gap);
  overflow-y: auto;                       /* 高度不足时滚动，绝不压缩按键 */
  scrollbar-width: thin;
}
.page--calc::-webkit-scrollbar { width: 10px; }
.page--calc::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant);
  border-radius: var(--shape-full);
}

/* 显示屏与键盘共用一列，宽度一致 → 视觉成组；
   列宽由 --keypad-col-max 给出（宽屏随视口高度收缩，矮窗口下按键不会被拉成扁长条） */
.screen-area,
.keypad {
  width: 100%;
  max-width: var(--keypad-col-max);
  margin: 0 auto;
}

/* 历史 / 设置页：整页滚动，内容居中成列 */
.page--history,
.page--settings {
  overflow-y: auto;
  padding: clamp(20px, 3.2vh, 40px) clamp(20px, 4vw, 64px) clamp(28px, 5vh, 56px);
  scrollbar-width: thin;
}
.page--history::-webkit-scrollbar,
.page--settings::-webkit-scrollbar { width: 10px; }
.page--history::-webkit-scrollbar-thumb,
.page--settings::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant);
  border-radius: var(--shape-full);
}

.page__head {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 头部右侧的操作按钮（如「清空」）始终靠右，菜单按钮留在标题左侧 */
.page__head > .btn-text,
.page__head > .btn-tonal { margin-left: auto; }
.page__head > .nav-trigger { margin-left: -6px; }
.page__title {
  font-size: clamp(1.5rem, 3.2vh, 2rem);
  font-weight: 600;
  letter-spacing: .01em;
}
.page__sub {
  width: 100%;
  max-width: 1040px;
  margin: 8px auto 0;
  font-size: .875rem;
  color: var(--md-on-surface-variant);
}

/* 设置项：宽屏两列；行/列间距统一，同行卡片拉伸等高 → 边界对齐 */
.settings {
  width: 100%;
  max-width: 1040px;
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.setting--wide { grid-column: 1 / -1; }

/* ---------------- 4. 显示屏（整幅通栏、无卡片包裹） ---------------- */
.screen-area {
  flex: 0 0 auto;                         /* 固定高度，富余空间让给键盘 */
  height: var(--screen-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: clamp(10px, 1.8vh, 28px) clamp(20px, 2.6vw, 48px);
  border-radius: var(--shape-xl);
  background: var(--md-surface-container-low);
  transition: background-color var(--dur-medium) var(--ease-standard),
              box-shadow var(--dur-medium) var(--ease-standard);
}
.screen-area.is-error {
  background: var(--md-error-container);
  box-shadow: inset 0 0 0 2px var(--md-error);
}

.screen-area__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 28px;
}
.screen-area__tape {
  flex: 1 1 auto;
  text-align: right;
  font-family: var(--font-math);
  font-size: clamp(.85rem, 1.5vh, 1.05rem);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .02em;
}

/* 实时预览：表达式成型时提前显示结果 */
.screen-area__preview {
  flex: 0 0 auto;
  font-family: var(--font-math);
  font-size: clamp(.85rem, 1.5vh, 1.05rem);
  font-weight: 700;
  color: var(--md-primary);
  white-space: nowrap;
  letter-spacing: .02em;
}
.screen-area__preview:empty { display: none; }

/* 小标签（角度单位） */
.chip {
  flex: 0 0 auto;
  padding: 4px 12px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-xs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--md-on-surface-variant);
}

.screen-area__value {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--font-math);
  font-variant-numeric: tabular-nums;
  font-size: var(--screen-font);
  font-weight: 600;
  line-height: 1;
  text-align: right;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  transition: font-size var(--dur-medium) var(--ease-standard),
              color var(--dur-medium) var(--ease-standard);
}
.screen-area__value:focus-visible { outline-offset: 6px; }
/* 数字过长时逐级缩小，绝不溢出 */
/* 数字过长 / 式子过长时逐级缩小，绝不溢出 */
.screen-area__value.size-sm { font-size: clamp(1.5rem, calc(var(--screen-h) * .30), 4.6rem); }
.screen-area__value.size-xs { font-size: clamp(1.2rem, calc(var(--screen-h) * .21), 3.3rem); }
.screen-area__value.size-xxs { font-size: clamp(1rem, calc(var(--screen-h) * .16), 2.4rem); }
.screen-area.is-error .screen-area__value { color: var(--md-error); }

.screen-area__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
}
.pending-badge {
  padding: 4px 12px;
  border-radius: var(--shape-full);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  animation: pop var(--dur-medium) var(--ease-emphasized);
}
/* 页脚仅在有待输入徽标时占位 */
.screen-area__foot { min-height: 0; }
.screen-area__foot:has(.pending-badge[hidden]) { display: none; }

/* ---------------- 5. 键盘（宽屏 6 列 / 窄屏 4 列统一网格） ---------------- */
/* 窄屏的高级功能抽屉开关：宽屏隐藏（此时高级键直接显示在键盘左侧两列） */
.keypad-toolbar {
  display: none;
  width: 100%;
  justify-content: center;
}

.keypad {
  flex: 1 1 auto;
  /* 行数由 --rows 推出：撑开页面产生滚动，而不是压缩按键 */
  min-height: calc(var(--rows) * var(--key-min) + (var(--rows) - 1) * var(--gap));
  max-height: calc(var(--rows) * var(--key-h) + (var(--rows) - 1) * var(--gap));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: var(--gap);
}

/* 高级功能组：宽屏下 display: contents 让科学函数与记忆键直接参与上面的 6 列网格
   （位置由响应式段落的 grid-area 指定）；窄屏改为底部抽屉 */
.keypad__adv { display: contents; }
.adv-sheet__head { display: none; }

/* ---------------- 6. 按键（M3 大圆角、扁平、状态层） ---------------- */
.key {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: var(--key-min);
  min-width: 0;
  padding: 0;
  border-radius: var(--shape-md);
  container-type: inline-size;            /* 字号按按键宽度变化（见 .key__label） */
  font-family: var(--font-math);          /* √ × ÷ ± − 等数学符号用数学字体 */
  font-weight: 500;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  transition: background-color var(--dur-medium) var(--ease-standard),
              color var(--dur-medium) var(--ease-standard),
              border-radius var(--dur-medium) var(--ease-emphasized),
              transform var(--dur-short) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
/* 按键文字：字号跟随按键宽度（容器查询单位 cqw），窄屏不再出现文字被裁 */
.key__label {
  position: relative;
  z-index: 2;
  pointer-events: none;
  font-size: clamp(.75rem, 13cqw, 1.6rem);
  white-space: nowrap;
}

/* 悬停 / 按下：M3 state layer */
.key:hover::after,
.key:active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--md-on-surface);
  opacity: .06;
  pointer-events: none;
}
.key:active::after { opacity: .10; }
.key:active { transform: scale(.985); }

/* 数字键：最亮表面，最大字号 */
.key--num {
  background: var(--md-surface-container-lowest);
  font-family: var(--font-brand);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* 深色主题下 surface-container-lowest 比页面还暗，数字键会「陷」进去；
   这里改用比页面亮一档的容器色，让「数字最突出」的层级在两个主题里保持一致 */
[data-theme="dark"] .key--num { background: var(--md-surface-container-high); }
[data-theme="dark"] .key--num:hover::after { opacity: .08; }
[data-theme="dark"] .keypad.is-sheet-open .key--adv.key--num { background: var(--md-surface-container-high); }
.key--num .key__label { font-size: clamp(1rem, 21cqw, 2rem); }
.key--num:hover::after { opacity: .08; }

/* 功能键：次级容器色，小字 */
.key--fn {
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  font-family: var(--font-brand);
  font-weight: 600;
}
.key--fn .key__label { font-size: clamp(.7rem, 12cqw, 1.05rem); }
.key--fn:hover { color: var(--md-on-surface); }
.key--wide { letter-spacing: .04em; }
.key--wide .key__label { font-size: clamp(.62rem, 10cqw, .9rem); }

/* 科学函数键：与功能键同一表面色、同一字重，只靠字号与排列区分，
   避免同一块键盘出现多种底色 / 多种字重 */
.key--sci {
  font-weight: 600;
}
.key--sci .key__label {
  font-size: clamp(.7rem, 11.5cqw, 1.05rem);
  letter-spacing: .01em;
}

/* 生效中的功能/科学键（sin 已打开、inv 已切换、正在输入的 ^ …）：主色容器高亮。
   数字键与等号不参与；四则运算符另有自己的高亮（主色实心） */
.key.is-active:not(.key--num):not(.key--eq):not(.key--op) {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--md-primary) 35%, transparent);
}
.key.is-active:not(.key--num):not(.key--eq):not(.key--op)::after { opacity: 0; }

/* 运算符：主色容器，强调 */
.key--op {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 700;
}
.key--op .key__label { font-size: clamp(1rem, 22cqw, 2.1rem); }
.key--op.is-active {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--md-on-primary) 45%, transparent);
}
.key--op.is-active::after { opacity: 0; }

/* 等号：主色实心，主操作 */
.key--eq {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-weight: 700;
}
.key--eq .key__label { font-size: clamp(1rem, 24cqw, 2.2rem); }
.key--eq:hover::after { opacity: .10; }

/* 0 键跨两列（与手机计算器习惯一致） */
.key--zero { grid-column: span 2; }

/* 涟漪水波（由 JS 动态插入） */
.ripple {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: currentColor;
  opacity: .26;
  transform: scale(0);
  pointer-events: none;
  animation: ripple var(--dur-long) var(--ease-emphasized) forwards;
}
@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}
@keyframes pop {
  0%   { transform: scale(.75); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(3px); }
}
.screen-area.is-shake { animation: shake 420ms var(--ease-standard); }

/* 键盘按键时的高亮 */
.key.is-pressed { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* ---------------- 7. 历史记录页 ---------------- */
.btn-text {
  padding: 6px 14px;
  border-radius: var(--shape-full);
  color: var(--md-primary);
  font-size: .8125rem;
  font-weight: 700;
  transition: background-color var(--dur-short) var(--ease-standard);
}
.btn-text:hover { background: color-mix(in srgb, var(--md-primary) 12%, transparent); }

/* 历史记录列表：宽屏两列卡片，卡片按内容高度 */
.history {
  width: 100%;
  max-width: 1040px;
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 10px;
  align-items: start;
}
.history__item {
  padding: 14px 18px;
  border-radius: var(--shape-lg);
  background: var(--md-surface-container-low);
  border: 1px solid color-mix(in srgb, var(--md-outline-variant) 45%, transparent);
  cursor: pointer;
  text-align: right;
  animation: slideUp var(--dur-medium) var(--ease-emphasized);
  transition: background-color var(--dur-short) var(--ease-standard),
              transform var(--dur-short) var(--ease-standard);
}
.history__item:hover { background: var(--md-surface-container-high); }
.history__item:active { transform: scale(.99); }
.history__expr {
  font-family: var(--font-math);
  font-size: .85rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history__res {
  margin-top: 4px;
  font-family: var(--font-math);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history__empty {
  grid-column: 1 / -1;
  margin: 40px auto 0;
  padding: 32px 18px;
  text-align: center;
  color: var(--md-on-surface-variant);
  font-size: .875rem;
  line-height: 1.7;
}
.history__empty span { font-size: .75rem; opacity: .75; }

/* ---------------- 8. 设置项组件 ---------------- */
.setting {
  padding: 18px 22px;
  border-radius: var(--shape-lg);
  background: var(--md-surface-container-low);
}
.setting__title {
  margin-bottom: 14px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--md-primary);
  text-transform: uppercase;
}
.setting__hint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--md-on-surface-variant);
}

.segmented {
  display: flex;
  border: 1px solid var(--md-outline);
  border-radius: var(--shape-full);
  overflow: hidden;
  height: 40px;
}
.segmented__item {
  flex: 1 1 auto;
  padding: 0 12px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  transition: background-color var(--dur-medium) var(--ease-standard),
              color var(--dur-medium) var(--ease-standard);
}
.segmented__item + .segmented__item { border-left: 1px solid var(--md-outline); }
.segmented__item:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.segmented__item.is-selected {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 700;
}

/* 开关行 */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  cursor: pointer;
}
.switch-row__text { display: flex; flex-direction: column; gap: 2px; }
.switch-row__label { font-size: .875rem; font-weight: 600; }
.switch-row__hint { font-size: 12px; color: var(--md-on-surface-variant); }

.switch { position: relative; flex: 0 0 auto; display: inline-flex; }
.switch input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch__track {
  display: block;
  width: 52px; height: 32px;
  border-radius: var(--shape-full);
  border: 2px solid var(--md-outline);
  background: var(--md-surface-container-highest);
  transition: background-color var(--dur-medium) var(--ease-standard),
              border-color var(--dur-medium) var(--ease-standard);
}
.switch__thumb {
  display: block;
  width: 16px; height: 16px;
  margin: 6px 0 0 6px;
  border-radius: 50%;
  background: var(--md-outline);
  transition: transform var(--dur-medium) var(--ease-emphasized),
              background-color var(--dur-medium) var(--ease-standard),
              width var(--dur-medium) var(--ease-emphasized),
              height var(--dur-medium) var(--ease-emphasized);
}
.switch input:checked + .switch__track {
  background: var(--md-primary);
  border-color: var(--md-primary);
}
.switch input:checked + .switch__track .switch__thumb {
  width: 24px; height: 24px;
  margin: 2px 0 0 22px;
  background: var(--md-on-primary);
}
.switch input:focus-visible + .switch__track { outline: 3px solid var(--md-primary); outline-offset: 2px; }

/* 下拉选择 */
.select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 4px;
}
.select {
  min-width: 152px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--md-outline);
  border-radius: var(--shape-xs);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  font-family: inherit;
  font-size: .8125rem;
  cursor: pointer;
}

.btn-tonal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--shape-full);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: .875rem;
  font-weight: 600;
  transition: background-color var(--dur-short) var(--ease-standard),
              transform var(--dur-short) var(--ease-standard);
}
.btn-tonal:hover { background: color-mix(in srgb, var(--md-primary) 26%, var(--md-surface-container-high)); }
.btn-tonal:active { transform: scale(.97); }

/* 快捷键列表：多列自动排布，避免拉成长条 */
.keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 24px;
}
.keys li { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.keys span { margin-left: 4px; color: var(--md-on-surface-variant); }
kbd {
  display: inline-block;
  min-width: 24px;
  padding: 3px 7px;
  border: 1px solid var(--md-outline-variant);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--md-surface-container-high);
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

/* ---------------- 9. 响应式 ---------------- */
@media (max-width: 1100px) {
  :root { --rail-w: 72px; }
  .rail-item { width: 60px; }
  .rail-item__icon { width: 48px; }
}

/* 中等宽度：设置与历史改为单列 */
@media (max-width: 900px) {
  .settings,
  .history { grid-template-columns: minmax(0, 1fr); }
}

/* 宽屏：6 列 × 7 行科学布局。
   上 3 行是函数区（三角/对数/幂根/括号/常量），下 4 行是数字与四则运算：
   数字占左三列，运算符占第 4 列，第 5-6 列放 AC ⌫ ± 与记忆键，`=` 跨两列收尾。
   .keypad__adv 用 display: contents 参与同一网格，这里用 nth-child 指定位置
   （nth-child(1) 是抽屉标题，按键从 2 起）。

   行/列对照：
     行1 sin   cos   tan   log   ln    inv
     行2 x²    √     ^     (     )     !
     行3 π     e     %     1/x   AC    ⌫
     行4 7     8     9     ÷     MR    MS
     行5 4     5     6     ×     M+    M−
     行6 1     2     3     −     MC    ±
     行7 00    0     .     +     ========== （= 跨第 5-6 列）            */
@media (min-width: 721px) {
  /* 主键盘 */
  .keypad > .key[data-action="clear"]    { grid-area: 3 / 5; }   /* AC   */
  .keypad > .key[data-action="back"]     { grid-area: 3 / 6; }   /* ⌫    */
  .keypad > .key[data-action="sign"]     { grid-area: 6 / 6; }   /* ±    */
  .keypad > .key[data-action="digit"][data-value="7"] { grid-area: 4 / 1; }
  .keypad > .key[data-action="digit"][data-value="8"] { grid-area: 4 / 2; }
  .keypad > .key[data-action="digit"][data-value="9"] { grid-area: 4 / 3; }
  .keypad > .key[data-action="digit"][data-value="4"] { grid-area: 5 / 1; }
  .keypad > .key[data-action="digit"][data-value="5"] { grid-area: 5 / 2; }
  .keypad > .key[data-action="digit"][data-value="6"] { grid-area: 5 / 3; }
  .keypad > .key[data-action="digit"][data-value="1"] { grid-area: 6 / 1; }
  .keypad > .key[data-action="digit"][data-value="2"] { grid-area: 6 / 2; }
  .keypad > .key[data-action="digit"][data-value="3"] { grid-area: 6 / 3; }
  .keypad > .key[data-action="dblzero"]  { grid-area: 7 / 1; }   /* 00   */
  .keypad > .key[data-action="digit"][data-value="0"] { grid-area: 7 / 2; }
  .keypad > .key[data-action="dot"]      { grid-area: 7 / 3; }   /* .    */
  .keypad > .key[data-action="equals"]   { grid-area: 7 / 5 / 8 / 7; }  /* = 跨两列 */
  .keypad > .key[data-action="op"][data-value="÷"] { grid-area: 4 / 4; }
  .keypad > .key[data-action="op"][data-value="×"] { grid-area: 5 / 4; }
  .keypad > .key[data-action="op"][data-value="−"] { grid-area: 6 / 4; }
  .keypad > .key[data-action="op"][data-value="+"] { grid-area: 7 / 4; }

  /* 函数区 */
  .keypad__adv > .key:nth-child(2)  { grid-area: 1 / 1; }   /* sin  */
  .keypad__adv > .key:nth-child(3)  { grid-area: 1 / 2; }   /* cos  */
  .keypad__adv > .key:nth-child(4)  { grid-area: 1 / 3; }   /* tan  */
  .keypad__adv > .key:nth-child(5)  { grid-area: 1 / 4; }   /* log  */
  .keypad__adv > .key:nth-child(6)  { grid-area: 1 / 5; }   /* ln   */
  .keypad__adv > .key:nth-child(7)  { grid-area: 1 / 6; }   /* inv  */
  .keypad__adv > .key:nth-child(8)  { grid-area: 2 / 1; }   /* x²   */
  .keypad__adv > .key:nth-child(9)  { grid-area: 2 / 2; }   /* √    */
  .keypad__adv > .key:nth-child(10) { grid-area: 2 / 3; }   /* ^    */
  .keypad__adv > .key:nth-child(11) { grid-area: 2 / 4; }   /* (    */
  .keypad__adv > .key:nth-child(12) { grid-area: 2 / 5; }   /* )    */
  .keypad__adv > .key:nth-child(13) { grid-area: 2 / 6; }   /* !    */
  .keypad__adv > .key:nth-child(14) { grid-area: 3 / 1; }   /* π    */
  .keypad__adv > .key:nth-child(15) { grid-area: 3 / 2; }   /* e    */
  .keypad__adv > .key:nth-child(16) { grid-area: 3 / 3; }   /* %    */
  .keypad__adv > .key:nth-child(17) { grid-area: 3 / 4; }   /* 1/x  */
  /* 记忆键：第 5-6 列（第 18 个子元素是抽屉分隔线，不参与宽屏网格） */
  .keypad__adv > .key:nth-child(19) { grid-area: 4 / 5; }   /* MR   */
  .keypad__adv > .key:nth-child(20) { grid-area: 4 / 6; }   /* MS   */
  .keypad__adv > .key:nth-child(21) { grid-area: 5 / 5; }   /* M+   */
  .keypad__adv > .key:nth-child(22) { grid-area: 5 / 6; }   /* M−   */
  .keypad__adv > .key:nth-child(23) { grid-area: 6 / 5; }   /* MC   */
}

/* 抽屉里的分隔线：宽屏不显示（它只在窄屏抽屉里充当分组线） */
.adv-sheet__divider { display: none; }

/* 矮屏（如 1280×500 的非最大化窗口）：压低显示屏，把高度让给键盘并允许整页滚动 */
@media (max-height: 620px) {
  :root { --screen-h: clamp(80px, 18vh, 150px); }
}

/* 窄屏（≤720px）：左上角就地弹出紧凑菜单；键盘收为 4 列并铺满剩余高度 */
@media (max-width: 720px) {
  :root {
    /* 4 列布局的单列宽度与行高上限：键高由「可用高度 ÷ 5 行」决定，不浪费竖向空间 */
    --key-col-w: calc((min(100vw - 20px, 560px) - 3 * var(--gap)) / 4);
    --key-h-fit: clamp(var(--key-min), calc(var(--key-col-w) * 1.45), 150px);
    --keypad-col-max: calc(4 * var(--key-col-w) + 3 * var(--gap));
    --screen-h: clamp(84px, 16vh, 150px);
  }

  .page--calc { padding: 10px; }
  .page--calc .page__title { font-size: 1.35rem; }
  .keypad-toolbar { display: flex; }

  /* ---- 导航：宽屏 Rail 隐藏，改用屏幕左上角的菜单按钮 + 弹出菜单 ---- */
  .rail { display: none; }
  .nav-trigger { display: grid; }
  .nav-menu:not([hidden]) { display: block; }

  /* ---- 键盘：4 列经典布局，铺满显示屏下方的全部高度 ---- */
  .keypad {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(5 * var(--key-h-fit) + 4 * var(--gap));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    align-content: stretch;
  }
  /* 行高由可用高度决定（aspect-ratio 在两个方向都确定时不生效），
     所以竖向空间不会被浪费；键高另有 --key-h-fit 上限兜住横屏手机 */
  .keypad .key { aspect-ratio: auto; }
  .keypad__adv { display: none; }                  /* 收起状态 */

  /* ---- 高级功能：底部上滑抽屉（4 列，21 个科学/记忆键） ----
     面板底色用 surface-container-highest：浅色下比按键深、深色下比按键浅，
     两个主题里按键都从面板上「浮」出来，不会和背景融成一片 */
  .keypad.is-sheet-open .keypad__adv {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(6px, 1.6vw, 10px);
    position: fixed;
    inset: auto 0 0 0;
    z-index: 65;
    max-height: 72vh;
    overflow-y: auto;
    padding: 8px clamp(14px, 5vw, 28px) calc(18px + env(safe-area-inset-bottom));
    border-radius: var(--shape-xl) var(--shape-xl) 0 0;
    border-top: 1px solid color-mix(in srgb, var(--md-outline-variant) 60%, transparent);
    background: var(--md-surface-container-highest);
    box-shadow: var(--elev-3);
    animation: slideUp var(--dur-medium) var(--ease-emphasized);
  }
  /* 抽屉里的科学键与功能键统一为「比面板浅一档」的表面色 */
  .keypad.is-sheet-open .key--adv {
    aspect-ratio: auto;
    height: clamp(46px, 12vw, 64px);
    background: var(--md-surface-container);
    color: var(--md-on-surface-variant);
  }
  .keypad.is-sheet-open .key--adv.key--op {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
  }
  /* 记忆键与函数键之间用一条分隔线分组：21 个键不再是一堵平墙 */
  .keypad.is-sheet-open .adv-sheet__divider {
    display: block;
    grid-column: 1 / -1;
    height: 1px;
    margin: 8px 0 4px;
    background: color-mix(in srgb, var(--md-outline-variant) 70%, transparent);
  }
  .keypad.is-sheet-open .key--adv .key__label { font-size: clamp(.68rem, 3.4vw, .95rem); }
  .adv-sheet__head { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .adv-sheet__handle { width: 32px; height: 4px; border-radius: var(--shape-full); background: var(--md-outline-variant); }
  .adv-sheet__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
  .adv-sheet__title { font-size: .9375rem; font-weight: 600; }
}

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}