@robot-admin/naive-ui-components 0.14.0 → 0.14.2

package/dist/C_FormulaEditor.css

@@ -65,12 +65,8 @@
     transform: rotate(360deg);
 }
 }
-/* unplugin-vue-components disabled */
-/* layer: default */
-.px[data-v-fdb8dd69]{padding-left:1rem;padding-right:1rem;}
-
 /* unplugin-vue-components disabled *//* 公式工作区：变量、原生输入与试算结果共享一个模型。 */
-.c-formula[data-v-fdb8dd69] {
+.c-formula[data-v-b006a294] {
   container: formula-editor/inline-size;
   overflow: auto;
   border: 1px solid var(--c-border);
@@ -78,11 +74,11 @@
   background: var(--c-bg-card);
   color: var(--c-text-2);
 }
-.c-formula h2[data-v-fdb8dd69],
-.c-formula p[data-v-fdb8dd69] {
+.c-formula h2[data-v-b006a294],
+.c-formula p[data-v-b006a294] {
   margin: 0;
 }
-.c-formula__title-row[data-v-fdb8dd69] {
+.c-formula__title-row[data-v-b006a294] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -91,34 +87,34 @@
   padding: 24px;
   border-bottom: 1px solid var(--c-border);
 }
-.c-formula__title-row h2[data-v-fdb8dd69] {
+.c-formula__title-row h2[data-v-b006a294] {
   margin-top: 8px;
   color: var(--c-text-1);
   font-size: 22px;
   letter-spacing: -0.4px;
 }
-.c-formula__title-row p[data-v-fdb8dd69] {
+.c-formula__title-row p[data-v-b006a294] {
   margin-top: 6px;
   font-size: 13px;
 }
-.c-formula__eyebrow[data-v-fdb8dd69] {
+.c-formula__eyebrow[data-v-b006a294] {
   color: var(--c-primary);
   font: 600 10px ui-monospace, monospace;
   letter-spacing: 2px;
 }
-.c-formula__actions[data-v-fdb8dd69] {
+.c-formula__actions[data-v-b006a294] {
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.c-formula__templates[data-v-fdb8dd69] {
+.c-formula__templates[data-v-b006a294] {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
   gap: 8px;
   padding: 16px 24px;
   border-bottom: 1px solid var(--c-border);
 }
-.c-formula__templates button[data-v-fdb8dd69] {
+.c-formula__templates button[data-v-b006a294] {
   appearance: none;
   display: flex;
   flex-direction: column;
@@ -132,70 +128,93 @@
   font: inherit;
   cursor: pointer;
 }
-.c-formula__templates button strong[data-v-fdb8dd69] {
+.c-formula__templates button strong[data-v-b006a294] {
   color: var(--c-text-1);
   font-size: 12px;
 }
-.c-formula__templates button span[data-v-fdb8dd69] {
+.c-formula__templates button span[data-v-b006a294] {
   font-size: 11px;
 }
-.c-formula__templates button[aria-pressed=true][data-v-fdb8dd69], .c-formula__templates button[data-v-fdb8dd69]:hover:enabled {
+.c-formula__templates button[aria-pressed=true][data-v-b006a294], .c-formula__templates button[data-v-b006a294]:hover:enabled {
   border-color: var(--c-primary);
   background: color-mix(in srgb, var(--c-primary) 6%, transparent);
 }
-.c-formula__templates button[data-v-fdb8dd69]:disabled {
+.c-formula__templates button[data-v-b006a294]:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.c-formula__templates button[data-v-fdb8dd69]:focus-visible {
+.c-formula__templates button[data-v-b006a294]:focus-visible {
   outline: 2px solid var(--c-primary);
   outline-offset: 2px;
 }
-.c-formula__body[data-v-fdb8dd69] {
+.c-formula__body[data-v-b006a294] {
   display: grid;
   grid-template-columns: 210px minmax(0, 1fr) 300px;
   align-items: stretch;
 }
-.c-formula__body--no-sidebar[data-v-fdb8dd69] {
+.c-formula__body--no-sidebar[data-v-b006a294] {
   grid-template-columns: minmax(0, 1fr) 300px;
 }
-.c-formula__body--no-preview[data-v-fdb8dd69] {
+.c-formula__body--no-preview[data-v-b006a294] {
   grid-template-columns: 210px minmax(0, 1fr);
 }
-.c-formula__body--no-sidebar.c-formula__body--no-preview[data-v-fdb8dd69] {
+.c-formula__body--no-sidebar.c-formula__body--no-preview[data-v-b006a294] {
   grid-template-columns: minmax(0, 1fr);
 }
-.c-formula__sidebar[data-v-fdb8dd69] {
+.c-formula__sidebar[data-v-b006a294] {
   min-width: 0;
   border-right: 1px solid var(--c-border);
 }
-.c-formula__main[data-v-fdb8dd69] {
+.c-formula__main[data-v-b006a294] {
   min-width: 0;
   padding: 24px;
 }
-.c-formula__keyboard[data-v-fdb8dd69] {
+.c-formula__keyboard[data-v-b006a294] {
   margin-top: 20px;
   border: 1px solid var(--c-border);
-  border-radius: 10px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--c-primary) 2%, var(--c-bg-card));
 }
-.c-formula__keyboard summary[data-v-fdb8dd69] {
+.c-formula__keyboard summary[data-v-b006a294] {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   padding: 12px 16px;
+  list-style: none;
   font-size: 12px;
   cursor: pointer;
+  color: var(--c-primary);
+}
+.c-formula__keyboard summary[data-v-b006a294]::-webkit-details-marker {
+  display: none;
+}
+.c-formula__keyboard summary[data-v-b006a294]:focus-visible {
+  outline: 2px solid var(--c-primary);
+  outline-offset: 2px;
+}
+.c-formula__keyboard[open] summary[data-v-b006a294] {
+  border-bottom: 1px solid var(--c-border);
+}
+.c-formula__keyboard[open] .c-formula__keyboard-chevron[data-v-b006a294] {
+  transform: rotate(180deg);
+}
+.c-formula__keyboard-title[data-v-b006a294] {
+  min-width: 0;
+  flex: 1;
   color: var(--c-text-1);
+  font-weight: 600;
 }
-.c-formula__keyboard summary span[data-v-fdb8dd69] {
-  margin-left: 8px;
+.c-formula__keyboard-title small[data-v-b006a294] {
+  display: block;
+  margin-top: 3px;
   color: var(--c-text-3);
   font-size: 11px;
+  font-weight: 400;
 }
-.c-formula__keyboard summary[data-v-fdb8dd69]:focus-visible {
-  outline: 2px solid var(--c-primary);
-}
-.c-formula__keyboard[data-v-fdb8dd69] .virtual-keyboard {
-  padding: 0 16px 16px;
+.c-formula__keyboard-chevron[data-v-b006a294] {
+  flex-shrink: 0;
 }
-.c-formula__guide[data-v-fdb8dd69] {
+.c-formula__guide[data-v-b006a294] {
   display: flex;
   align-items: flex-start;
   gap: 8px;
@@ -204,148 +223,43 @@
   color: var(--c-text-3);
   line-height: 1.8;
 }
-.c-formula__guide[data-v-fdb8dd69] > :first-child {
+.c-formula__guide[data-v-b006a294] > :first-child {
   flex-shrink: 0;
   margin-top: 3px;
 }
-.c-formula__guide code[data-v-fdb8dd69] {
+.c-formula__guide code[data-v-b006a294] {
   color: var(--c-primary);
 }
 @container formula-editor (max-width: 980px) {
-.c-formula__body[data-v-fdb8dd69] {
+.c-formula__body[data-v-b006a294] {
     grid-template-columns: 190px minmax(0, 1fr);
 }
-.c-formula__body--no-sidebar[data-v-fdb8dd69] {
+.c-formula__body--no-sidebar[data-v-b006a294] {
     grid-template-columns: minmax(0, 1fr);
 }
-.c-formula__body[data-v-fdb8dd69] >  .formula-preview {
+.c-formula__body[data-v-b006a294] >  .formula-preview {
     grid-column: 1/-1;
     border-left: 0;
     border-top: 1px solid var(--c-border);
 }
 }
 @container formula-editor (max-width: 580px) {
-.c-formula__body[data-v-fdb8dd69] {
+.c-formula__body[data-v-b006a294] {
     grid-template-columns: minmax(0, 1fr);
 }
-.c-formula__sidebar[data-v-fdb8dd69] {
+.c-formula__sidebar[data-v-b006a294] {
     border-right: 0;
     border-bottom: 1px solid var(--c-border);
 }
-.c-formula__title-row[data-v-fdb8dd69],
-  .c-formula__main[data-v-fdb8dd69] {
+.c-formula__title-row[data-v-b006a294],
+  .c-formula__main[data-v-b006a294] {
     padding: 18px;
 }
 }
-/* unplugin-vue-components disabled *//* 原生文本输入与转义后的结构预览，避免 contenteditable 光标和样式副作用。 */
-.formula-input__header[data-v-6bf933c2] {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-.formula-input__label[data-v-6bf933c2] {
-  color: var(--c-text-1);
-  font-size: 13px;
-  font-weight: 600;
-}
-.formula-input__clear[data-v-6bf933c2] {
-  appearance: none;
-  border: 0;
-  background: transparent;
-  color: var(--c-primary);
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-}
-.formula-input__editor[data-v-6bf933c2] {
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-  min-height: 168px;
-  resize: vertical;
-  padding: 18px;
-  border: 1px solid var(--c-border);
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--c-primary) 2%, var(--c-bg-card));
-  color: var(--c-text-1);
-  font: 15px/1.9 ui-monospace, "SFMono-Regular", Consolas, monospace;
-  outline: none;
-  overflow-wrap: anywhere;
-}
-.formula-input__editor[data-v-6bf933c2]:focus {
-  border-color: var(--c-primary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent);
-}
-.formula-input__editor[data-v-6bf933c2]::placeholder {
-  font-size: 13px;
-  color: var(--c-text-3);
-}
-.formula-input__editor[data-v-6bf933c2]:read-only {
-  background: color-mix(in srgb, var(--c-border) 25%, var(--c-bg-card));
-}
-.formula-input--error .formula-input__editor[data-v-6bf933c2] {
-  border-color: var(--c-error);
-}
-.formula-input__tokens[data-v-6bf933c2] {
-  margin-top: 16px;
-  padding: 14px 16px;
-  border: 1px dashed var(--c-border);
-  border-radius: 10px;
-  font: 12px/2 ui-monospace, monospace;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-.formula-input__tokens > span[data-v-6bf933c2]:first-child {
-  display: block;
-  font: 11px/1.5 sans-serif;
-  margin-bottom: 8px;
-  color: var(--c-text-3);
-}
-.formula-input__validation[data-v-6bf933c2] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin-top: 12px;
-  font-size: 12px;
-  color: var(--c-text-3);
-  line-height: 1.7;
-}
-.formula-input__validation button[data-v-6bf933c2] {
-  appearance: none;
-  flex-shrink: 0;
-  border: 0;
-  padding: 2px 0;
-  color: var(--c-primary);
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-}
-.formula-input--error .formula-input__validation[data-v-6bf933c2] {
-  color: var(--c-error);
-}
-.formula-input button[data-v-6bf933c2]:focus-visible {
-  outline: 2px solid var(--c-primary);
-  outline-offset: 3px;
-}
-.formula-input .formula-token--variable[data-v-6bf933c2] {
-  color: var(--c-primary);
-  padding: 2px 5px;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--c-primary) 9%, transparent);
-}
-.formula-input .formula-token--function[data-v-6bf933c2] {
-  color: var(--c-success);
-  font-weight: 600;
-}
-.formula-input .formula-token--operator[data-v-6bf933c2] {
-  color: var(--c-primary);
-}
-.formula-input .formula-token--number[data-v-6bf933c2] {
-  color: var(--c-warning);
-}
+/* unplugin-vue-components disabled */
+/* layer: default */
+.px[data-v-b006a294]{padding-left:1rem;padding-right:1rem;}
+
 /* unplugin-vue-components disabled *//* 隔离试算值与明确结果，组件宽度变化时自然换行。 */
 .formula-preview[data-v-b2656900] {
   min-width: 0;
@@ -452,6 +366,115 @@
   padding-top: 16px;
   border-top: 1px solid var(--c-border);
 }
+/* unplugin-vue-components disabled *//* 原生文本输入与转义后的结构预览，避免 contenteditable 光标和样式副作用。 */
+.formula-input__header[data-v-5b2f30eb] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.formula-input__label[data-v-5b2f30eb] {
+  color: var(--c-text-1);
+  font-size: 13px;
+  font-weight: 600;
+}
+.formula-input__clear[data-v-5b2f30eb] {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--c-primary);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.formula-input__editor[data-v-5b2f30eb] {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 168px;
+  resize: vertical;
+  padding: 18px;
+  border: 1px solid var(--c-border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--c-primary) 2%, var(--c-bg-card));
+  color: var(--c-text-1);
+  font: 15px/1.9 ui-monospace, "SFMono-Regular", Consolas, monospace;
+  outline: none;
+  overflow-wrap: anywhere;
+}
+.formula-input__editor[data-v-5b2f30eb]:focus {
+  border-color: var(--c-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent);
+}
+.formula-input__editor[data-v-5b2f30eb]::placeholder {
+  font-size: 13px;
+  color: var(--c-text-3);
+}
+.formula-input__editor[data-v-5b2f30eb]:read-only {
+  background: color-mix(in srgb, var(--c-border) 25%, var(--c-bg-card));
+}
+.formula-input--error .formula-input__editor[data-v-5b2f30eb] {
+  border-color: var(--c-error);
+}
+.formula-input__tokens[data-v-5b2f30eb] {
+  margin-top: 16px;
+  padding: 14px 16px;
+  border: 1px dashed var(--c-border);
+  border-radius: 10px;
+  font: 12px/2 ui-monospace, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.formula-input__tokens > span[data-v-5b2f30eb]:first-child {
+  display: block;
+  font: 11px/1.5 sans-serif;
+  margin-bottom: 8px;
+  color: var(--c-text-3);
+}
+.formula-input__validation[data-v-5b2f30eb] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--c-text-3);
+  line-height: 1.7;
+}
+.formula-input__validation button[data-v-5b2f30eb] {
+  appearance: none;
+  flex-shrink: 0;
+  border: 0;
+  padding: 2px 0;
+  color: var(--c-primary);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+}
+.formula-input--error .formula-input__validation[data-v-5b2f30eb] {
+  color: var(--c-error);
+}
+.formula-input button[data-v-5b2f30eb]:focus-visible {
+  outline: 2px solid var(--c-primary);
+  outline-offset: 3px;
+}
+.formula-input .formula-token--variable[data-v-5b2f30eb] {
+  color: var(--c-primary);
+  padding: 2px 5px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--c-primary) 9%, transparent);
+}
+.formula-input .formula-token--function[data-v-5b2f30eb] {
+  color: var(--c-success);
+  font-weight: 600;
+}
+.formula-input .formula-token--operator[data-v-5b2f30eb] {
+  color: var(--c-primary);
+}
+.formula-input .formula-token--number[data-v-5b2f30eb] {
+  color: var(--c-warning);
+}
 /* unplugin-vue-components disabled *//* VariablePanel 组件样式 */
 .variable-panel[data-v-2d73fec7] {
   display: flex;
@@ -612,138 +635,195 @@
   color: var(--c-text-3);
   margin-top: 3px;
 }
-/* unplugin-vue-components disabled *//* VirtualKeyboard 组件样式 */
-.vk[data-v-8c874c05] {
-  /* ═══════ 标题行 ═══════ */
+/* unplugin-vue-components disabled *//*
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2026-10-07
+ * @Description: 主题驱动的公式键帽与容器响应式布局
+ * Copyright (c) 2026 by CHENY, All Rights Reserved.
+ */
+.virtual-keyboard[data-v-05f0982d] {
+  container: formula-keyboard/inline-size;
+  padding: 16px;
+  color: var(--c-text-2);
 }
-.vk__title[data-v-8c874c05] {
-  font-size: 13px;
+.virtual-keyboard__label[data-v-05f0982d] {
+  display: block;
+  margin: 0 0 10px;
+  color: var(--c-text-3);
+  font-size: 11px;
   font-weight: 500;
-  color: var(--c-text-4);
-  padding: 0 0 8px;
-  letter-spacing: 0.5px;
 }
-.vk[data-v-8c874c05] {
-  /* ═══════ 键盘主体 ═══════ */
-  /* 浅米黄暖色底板，对应参考截图 */
+.virtual-keyboard__functions[data-v-05f0982d] {
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--c-border);
 }
-.vk__body[data-v-8c874c05] {
-  display: flex;
-  gap: 68px;
+.virtual-keyboard__function-grid[data-v-05f0982d] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 76px), 1fr));
+  gap: 6px;
+}
+.virtual-keyboard__function[data-v-05f0982d] {
+  min-width: 0;
+  padding: 8px 6px;
+  border: 1px solid color-mix(in srgb, var(--c-primary) 20%, var(--c-border));
+  border-radius: 7px;
+  color: var(--c-primary);
+  background: color-mix(in srgb, var(--c-primary) 5%, var(--c-bg-card));
+  font: 600 11px ui-monospace, monospace;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+.virtual-keyboard__function span[data-v-05f0982d] {
+  margin-left: 5px;
+  opacity: 0.55;
+}
+.virtual-keyboard__body[data-v-05f0982d] {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
+  gap: 20px;
+}
+.virtual-keyboard__operators[data-v-05f0982d] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+.virtual-keyboard__numbers[data-v-05f0982d] {
+  min-width: 0;
   padding: 12px;
-  border-radius: 8px;
-  border: 1px solid rgba(240, 160, 32, 0.2);
-  background: rgba(240, 160, 32, 0.06);
+  border: 1px solid var(--c-border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--c-border) 16%, var(--c-bg-card));
 }
-.vk__half[data-v-8c874c05] {
+.virtual-keyboard__keys[data-v-05f0982d] {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 5px;
-  flex: 1;
-  /* 数字区：白色底板层区分 */
+  gap: 7px;
 }
-.vk__half--nums[data-v-8c874c05] {
-  padding: 6px;
-  border-radius: 6px;
-  background: var(--c-bg-card);
-  border: 1px solid rgba(0, 0, 0, 0.07);
+.virtual-keyboard__keys--arithmetic[data-v-05f0982d] {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
 }
-.vk[data-v-8c874c05] {
-  /* ═══════ 动作行 ═══════ */
+.virtual-keyboard__keys--compare[data-v-05f0982d] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-.vk__actions[data-v-8c874c05] {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 8px 12px 0;
+.virtual-keyboard__keys--logic[data-v-05f0982d] {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-.vk[data-v-8c874c05] {
-  /* ═══════ 经典键帽按键 ═══════ */
-  /* 3D 效果核心：border-bottom 加粗 = 键帽厚度，按下时 translateY + 底边归细 */
+.virtual-keyboard__keys--numbers[data-v-05f0982d] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-.vk__key[data-v-8c874c05] {
+.virtual-keyboard__key[data-v-05f0982d] {
+  --key-accent: var(--c-border);
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 34px;
+  box-sizing: border-box;
   min-width: 0;
-  padding: 0;
-  border-radius: 5px;
-  cursor: pointer;
-  user-select: none;
-  font-size: 14px;
-  font-weight: 500;
+  min-height: 40px;
+  padding: 6px 2px;
+  border: 1px solid var(--key-accent);
+  border-bottom-width: 3px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, var(--c-bg-card), color-mix(in srgb, var(--c-border) 10%, var(--c-bg-card)));
   color: var(--c-text-1);
-  background: var(--c-bg-card);
-  /* 立体效果关键：底边用确定 rgba 保证可见 */
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-bottom: 3px solid rgba(0, 0, 0, 0.18);
-  transition: transform 0.06s ease, border-bottom-width 0.06s ease, background 0.1s ease;
-}
-.vk__key[data-v-8c874c05]:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--c-primary) 6%, var(--c-bg-card));
-  border-color: color-mix(in srgb, var(--c-primary) 50%, transparent);
-  border-bottom-color: color-mix(in srgb, var(--c-primary) 60%, transparent);
+  box-shadow: 0 2px 3px color-mix(in srgb, var(--c-text-1) 4%, transparent);
+  font: 600 14px ui-monospace, monospace;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
+}
+.virtual-keyboard__key--zero[data-v-05f0982d] {
+  grid-column: span 2;
+}
+.virtual-keyboard__key--primary[data-v-05f0982d] {
+  --key-accent: color-mix(in srgb, var(--c-primary) 35%, var(--c-border));
   color: var(--c-primary);
+  background: color-mix(in srgb, var(--c-primary) 5%, var(--c-bg-card));
+  font-size: 18px;
 }
-.vk__key[data-v-8c874c05] {
-  /* 按下：键帽下沉 + 底边归细 */
+.virtual-keyboard__key--warning[data-v-05f0982d] {
+  --key-accent: color-mix(in srgb, var(--c-warning) 30%, var(--c-border));
+  color: var(--c-warning);
+  background: color-mix(in srgb, var(--c-warning) 7%, var(--c-bg-card));
+  font-size: 12px;
 }
-.vk__key[data-v-8c874c05]:active:not(:disabled) {
+.virtual-keyboard__key[data-v-05f0982d]:active:enabled {
   transform: translateY(2px);
-  border-bottom-width: 1px;
+  box-shadow: none;
+}
+.virtual-keyboard__footer[data-v-05f0982d] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding-top: 16px;
+  margin-top: 16px;
+  border-top: 1px solid var(--c-border);
 }
-.vk__key[data-v-8c874c05]:disabled {
-  opacity: 0.4;
+.virtual-keyboard__footer > span[data-v-05f0982d] {
+  flex: 1 1 140px;
+  color: var(--c-text-3);
+  font-size: 11px;
+  line-height: 1.7;
+}
+.virtual-keyboard__actions[data-v-05f0982d] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.virtual-keyboard__action[data-v-05f0982d] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--c-border);
+  border-radius: 8px;
+  background: var(--c-bg-card);
+  color: var(--c-text-2);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.virtual-keyboard__action--clear[data-v-05f0982d] {
+  color: var(--c-error);
+}
+.virtual-keyboard button[data-v-05f0982d]:hover:enabled {
+  border-color: var(--c-primary);
+  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-bg-card));
+}
+.virtual-keyboard button[data-v-05f0982d]:focus-visible {
+  outline: 2px solid var(--c-primary);
+  outline-offset: 3px;
+}
+.virtual-keyboard button[data-v-05f0982d]:disabled {
+  opacity: 0.45;
   cursor: not-allowed;
 }
-.vk__key[data-v-8c874c05] {
-  /* ─── warning（? : and or）—橙色背景块 ─── */
+@container formula-keyboard (max-width: 360px) {
+.virtual-keyboard__body[data-v-05f0982d] {
+    grid-template-columns: minmax(0, 1fr);
 }
-.vk__key--warning[data-v-8c874c05] {
-  background: rgba(240, 160, 32, 0.12);
-  border-color: rgba(240, 160, 32, 0.35);
-  border-bottom-color: rgba(240, 160, 32, 0.55);
-  color: #d48806;
-  font-weight: 700;
-  font-size: 15px;
 }
-.vk__key--warning[data-v-8c874c05]:hover:not(:disabled) {
-  background: rgba(240, 160, 32, 0.2);
-  border-color: rgba(240, 160, 32, 0.55);
-  border-bottom-color: rgba(240, 160, 32, 0.75);
-  color: #b8760a;
+@container formula-keyboard (max-width: 220px) {
+.virtual-keyboard__keys--arithmetic[data-v-05f0982d],
+  .virtual-keyboard__keys--logic[data-v-05f0982d] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-.vk__key[data-v-8c874c05] {
-  /* ─── primary（+ − × ÷）—蓝色文字 + 蓝色底边 ─── */
+.virtual-keyboard__numbers[data-v-05f0982d] {
+    padding: 8px;
 }
-.vk__key--primary[data-v-8c874c05] {
-  color: var(--c-primary);
-  font-weight: 700;
-  font-size: 16px;
-  border-color: rgba(32, 128, 240, 0.25);
-  border-bottom-color: rgba(32, 128, 240, 0.55);
+.virtual-keyboard__actions[data-v-05f0982d] {
+    width: 100%;
 }
-.vk__key--primary[data-v-8c874c05]:hover:not(:disabled) {
-  background: rgba(32, 128, 240, 0.06);
-  color: var(--c-primary);
-  border-color: rgba(32, 128, 240, 0.45);
-  border-bottom-color: rgba(32, 128, 240, 0.75);
+.virtual-keyboard__action[data-v-05f0982d] {
+    flex: 1;
+    padding: 8px 4px;
 }
-.vk__key[data-v-8c874c05] {
-  /* ─── 动作键（⌫ 清空）─── */
 }
-.vk__key--action[data-v-8c874c05] {
-  width: 64px;
-  height: 34px;
-  font-size: 13px;
-  color: var(--c-text-2);
-  background: color-mix(in srgb, var(--c-text-4) 8%, var(--c-bg-card));
-  border-color: rgba(0, 0, 0, 0.1);
-  border-bottom-color: rgba(0, 0, 0, 0.15);
-}
-.vk__key--action[data-v-8c874c05]:hover:not(:disabled) {
-  color: var(--error-color);
-  border-color: color-mix(in srgb, var(--error-color) 40%, transparent);
-  border-bottom-color: color-mix(in srgb, var(--error-color) 55%, transparent);
+@media (prefers-reduced-motion: reduce) {
+.virtual-keyboard__key[data-v-05f0982d] {
+    transition: none;
+}
 }