/* ==================== 建工万能助手 - 计算器样式 v3.0 ==================== */
/* 严格参照 jg78.cn 敬翔建工 设计风格 */
/* 干净、简洁、专业、留白充分 */

/* === Design Tokens === */
:root {
  --calc-bg: #f0f2f5;
  --calc-white: #ffffff;
  --calc-blue: #409EFF;
  --calc-blue-light: #ecf5ff;
  --calc-blue-hover: #66b1ff;
  --calc-blue-dark: #337ecc;
  --calc-text-primary: #1f2937;
  --calc-text-regular: #374151;
  --calc-text-secondary: #6b7280;
  --calc-text-placeholder: #9ca3af;
  --calc-border: #e5e7eb;
  --calc-border-light: #f0f0f0;
  --calc-dot-color: #d1d5db;
  --calc-svg-stroke: #1e3a5f;
  --calc-svg-fill: #e8f4f8;
  --calc-orange: #e6a23c;
  --calc-orange-light: #fdf6ec;
  --calc-green: #67c23a;
  --calc-green-light: #f0f9eb;
  --calc-red: #f56c6c;
  --calc-radius-sm: 6px;
  --calc-radius-md: 8px;
  --calc-radius-lg: 12px;
  --calc-radius-xl: 16px;
  --calc-radius-pill: 9999px;
  --calc-shadow-card: 0 2px 12px rgba(0,0,0,0.06);
  --calc-font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}

/* ========================================================================
   CalcHub - 分类入口页
   ======================================================================== */
.calc-hub-page {
  min-height: 100vh;
  background: var(--calc-bg);
  padding-bottom: 40px;
}

/* Header */
.calc-hub-header {
  background: linear-gradient(135deg, #1a1f36 0%, #252b48 100%);
  padding: 0 40px;
  color: var(--calc-white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.calc-hub-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.calc-hub-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.calc-hub-title:hover { opacity: 0.85; }

.calc-hub-title-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--calc-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.calc-hub-subtitle {
  font-size: 12px;
  opacity: 0.6;
  font-weight: 400;
}

/* 搜索框 */
.calc-hub-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--calc-radius-pill);
  padding: 7px 18px;
  width: 280px;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  cursor: default;
}

/* 导航Tab */
.calc-hub-nav-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.calc-hub-nav-tab {
  padding: 8px 18px;
  border-radius: var(--calc-radius-md);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: all 0.2s;
}

.calc-hub-nav-tab:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.calc-hub-nav-tab.active {
  color: #fff;
  background: rgba(255,255,255,0.12);
}

.calc-hub-nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--calc-blue);
  border-radius: 2px;
}

/* 主内容区 */
.calc-hub-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 40px;
}

/* 分类卡片 - 大卡片网格 2行3列 */
.calc-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.calc-category-card {
  background: var(--calc-white);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius-xl);
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 100px;
}

.calc-category-card:hover {
  border-color: var(--calc-blue);
  box-shadow: 0 4px 12px rgba(64,158,255,0.12);
}

/* 分类图标 - 简单的圆角方块，不加渐变 */
.calc-category-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--calc-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--calc-blue);
  flex-shrink: 0;
  font-size: 22px;
}

/* 不同分类的颜色区分 */
.calc-category-card[data-theme="blue"] .calc-category-icon { background: var(--calc-blue-light); color: var(--calc-blue); }
.calc-category-card[data-theme="green"] .calc-category-icon { background: #f0f9eb; color: #67c23a; }
.calc-category-card[data-theme="orange"] .calc-category-icon { background: #fdf6ec; color: #e6a23c; }
.calc-category-card[data-theme="cyan"] .calc-category-icon { background: #ecfeff; color: #06b6d4; }
.calc-category-card[data-theme="violet"] .calc-category-icon { background: #f5f3ff; color: #7c3aed; }
.calc-category-card[data-theme="rose"] .calc-category-icon { background: #fff1f2; color: #f43f5e; }

.calc-category-info {
  flex: 1;
}

.calc-category-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--calc-text-primary);
  margin-bottom: 4px;
}

.calc-category-count {
  font-size: 13px;
  color: var(--calc-text-secondary);
}

.calc-category-arrow {
  color: var(--calc-text-placeholder);
  transition: all 0.2s;
}

.calc-category-card:hover .calc-category-arrow {
  color: var(--calc-blue);
  transform: translateX(3px);
}

/* 常用计算器 */
.calc-popular-section {
  margin-top: 8px;
}

.calc-section-header {
  margin-bottom: 20px;
}

.calc-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--calc-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.calc-section-title::before {
  content: '';
  width: 3px;
  height: 18px;
  background: var(--calc-blue);
  border-radius: 2px;
}

/* 常用计算器宫格 4列 */
.calc-popular-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.calc-popular-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--calc-white);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius-lg);
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--calc-text-regular);
  cursor: pointer;
  transition: all 0.2s;
}

.calc-popular-item:hover {
  border-color: var(--calc-blue);
  color: var(--calc-blue);
  background: var(--calc-blue-light);
}

.calc-popular-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--calc-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--calc-blue);
  flex-shrink: 0;
}

.calc-popular-item:hover .calc-popular-icon {
  background: var(--calc-blue);
  color: var(--calc-white);
}

/* ========================================================================
   CalcCategory - 分类详情页
   ======================================================================== */
.calc-category-page {
  min-height: 100vh;
  background: var(--calc-bg);
  padding-bottom: 40px;
}

.calc-cat-header {
  background: linear-gradient(135deg, #1a1f36 0%, #252b48 100%);
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.calc-cat-back {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: var(--calc-radius-md);
  transition: all 0.2s;
}

.calc-cat-back:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

.calc-cat-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--calc-white);
}

.calc-cat-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 40px;
}

/* 子分类Tab - 白底胶囊，active态蓝色文字+底部下划线 */
.calc-sub-tabs {
  display: flex;
  gap: 8px;
  padding: 0 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.calc-sub-tabs::-webkit-scrollbar { display: none; }

.calc-sub-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--calc-radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--calc-text-secondary);
  background: var(--calc-white);
  border: 1px solid var(--calc-border);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.calc-sub-tab:hover {
  border-color: var(--calc-blue);
  color: var(--calc-blue);
}

.calc-sub-tab.active {
  color: var(--calc-blue);
  background: var(--calc-white);
  border-color: var(--calc-border);
  border-bottom: 2px solid var(--calc-blue);
  font-weight: 600;
}

.calc-sub-badge {
  background: var(--calc-bg);
  border-radius: var(--calc-radius-pill);
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--calc-text-placeholder);
}

.calc-sub-tab.active .calc-sub-badge {
  background: var(--calc-blue-light);
  color: var(--calc-blue);
}

/* 形状选择 - 药丸按钮排列（不是大卡片网格） */
.calc-shape-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  background: var(--calc-white);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius-xl);
  padding: 16px;
}

.calc-shape-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--calc-radius-pill);
  border: 1px solid var(--calc-border);
  background: var(--calc-white);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13px;
  font-weight: 500;
  color: var(--calc-text-regular);
}

.calc-shape-card:hover {
  border-color: var(--calc-blue);
  color: var(--calc-blue);
}

.calc-shape-card.active {
  border-color: var(--calc-blue);
  background: var(--calc-blue-light);
  color: var(--calc-blue);
  font-weight: 600;
}

/* 药丸按钮里的小图标点 */
.calc-shape-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--calc-text-placeholder);
  flex-shrink: 0;
}

.calc-shape-card.active .calc-shape-dot {
  background: var(--calc-blue);
}

.calc-shape-name {
  white-space: nowrap;
}

/* 隐藏原来的 SVG 预览（药丸模式不需要） */
.calc-shape-icon {
  display: none;
}

/* 参数面板 */
.calc-param-panel {
  background: var(--calc-white);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius-xl);
  padding: 28px 32px;
  box-shadow: var(--calc-shadow-card);
}

.calc-param-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--calc-text-primary);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--calc-border-light);
}

/* 模式切换 */
.calc-mode-switch {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: var(--calc-bg);
  border-radius: var(--calc-radius-md);
}

/* 参数字段 - 3列 */
.calc-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.calc-field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--calc-text-secondary);
}

.calc-field-unit {
  color: var(--calc-text-placeholder);
  font-size: 12px;
}

.calc-infer-tag {
  margin-left: 2px;
}

.calc-field-input {
  width: 100%;
}

.calc-field-input .el-input__wrapper {
  border-radius: var(--calc-radius-sm);
  height: 40px;
  box-shadow: 0 0 0 1px var(--calc-border) inset;
  transition: all 0.2s;
}

.calc-field-input .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px var(--calc-blue-hover) inset;
}

.calc-field-input .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--calc-blue) inset;
}

/* 精度 */
.calc-precision-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--calc-text-secondary);
  font-weight: 500;
}

/* 计算按钮 */
.calc-submit-btn {
  width: 60%;
  height: 44px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: var(--calc-radius-md) !important;
  background: var(--calc-blue) !important;
  border: none !important;
  transition: all 0.2s;
}

.calc-submit-btn:hover {
  background: var(--calc-blue-hover) !important;
}

/* 结果展示 */
.calc-result {
  background: var(--calc-white);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius-lg);
  padding: 20px;
  margin-top: 24px;
}

.calc-result-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--calc-text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.calc-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--calc-bg);
  border-radius: var(--calc-radius-md);
  border: 1px solid var(--calc-border);
}

.calc-result-key {
  font-size: 13px;
  color: var(--calc-text-secondary);
}

.calc-result-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--calc-text-primary);
  font-family: var(--calc-font-mono);
}

.calc-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--calc-border-light);
}

.calc-table-mode {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--calc-border-light);
}

.calc-table-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--calc-text-primary);
  margin-bottom: 12px;
}

/* ========================================================================
   CalcPage - 左右分栏 (核心页面)
   ======================================================================== */
.calc-page {
  display: flex;
  min-height: 100vh;
  background: var(--calc-bg);
}

/* 左侧预览区 - 60% */
.calc-left-panel {
  flex: 0 0 60%;
  min-width: 480px;
  display: flex;
  flex-direction: column;
  padding: 28px 36px;
  position: relative;
  border-right: 1px solid var(--calc-border);
  background: var(--calc-white);
}

.calc-back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 36px;
  height: 36px;
  border-radius: var(--calc-radius-md);
  background: var(--calc-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--calc-text-secondary);
  transition: all 0.2s;
  border: 1px solid var(--calc-border);
}

.calc-back-btn:hover {
  background: var(--calc-blue-light);
  color: var(--calc-blue);
  border-color: var(--calc-blue);
}

/* 预览区标题 */
.calc-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-top: 4px;
}

.calc-preview-label {
  font-size: 12px;
  color: var(--calc-text-placeholder);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calc-preview-shape-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--calc-text-primary);
}

/* SVG预览容器 - 点阵网格背景 */
.calc-svg-preview {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafbfc;
  background-image: radial-gradient(circle, var(--calc-dot-color) 0.8px, transparent 0.8px);
  background-size: 20px 20px;
  border-radius: var(--calc-radius-lg);
  border: 1px solid var(--calc-border);
  min-height: 400px;
  padding: 40px;
  position: relative;
}

.calc-svg-preview svg {
  width: 85%;
  height: 85%;
  max-width: 420px;
  max-height: 420px;
}

/* SVG 图形颜色强制 */
.calc-svg-preview svg *[stroke] {
  stroke: var(--calc-svg-stroke) !important;
}
.calc-svg-preview svg *[fill]:not([fill="none"]) {
  fill: var(--calc-svg-fill) !important;
}

.calc-svg-label {
  margin-top: 16px;
  text-align: center;
}

/* 右侧参数区 */
.calc-right-panel {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 32px;
  overflow-y: auto;
  min-height: 100vh;
  background: var(--calc-bg);
}

.calc-right-card {
  width: 100%;
  max-width: 600px;
  background: var(--calc-white);
  border-radius: var(--calc-radius-xl);
  padding: 32px;
  box-shadow: var(--calc-shadow-card);
  border: 1px solid var(--calc-border);
}

/* 右侧标题行：标题 + 切换按钮 */
.calc-right-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--calc-border-light);
}

.calc-right-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--calc-text-primary);
}

/* 自定义/查表 切换胶囊 */
.calc-mode-tabs {
  display: flex;
  gap: 0;
  background: var(--calc-bg);
  border-radius: var(--calc-radius-pill);
  padding: 3px;
  border: 1px solid var(--calc-border);
}

.calc-mode-tab {
  padding: 6px 16px;
  border-radius: var(--calc-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--calc-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.calc-mode-tab.active {
  background: var(--calc-blue);
  color: var(--calc-white);
  box-shadow: 0 1px 4px rgba(64,158,255,0.3);
}

/* 输入提示行 */
.calc-input-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--calc-text-placeholder);
  margin-bottom: 20px;
  padding: 10px 14px;
  background: var(--calc-orange-light);
  border-radius: var(--calc-radius-md);
  border: 1px solid #faecd8;
}

.calc-input-hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--calc-orange);
  flex-shrink: 0;
}

/* 密度选择行 */
.calc-density-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--calc-text-secondary);
  font-weight: 500;
  padding: 10px 14px;
  background: var(--calc-bg);
  border-radius: var(--calc-radius-md);
}

/* 单位切换 */
.calc-unit-toggle {
  margin-bottom: 16px;
}

.calc-unit-toggle .el-radio-group {
  background: var(--calc-bg);
  border-radius: var(--calc-radius-sm);
  padding: 2px;
  border: 1px solid var(--calc-border);
}

/* 高级计算区域 */
.calc-advanced-section {
  border: 1px dashed var(--calc-border);
  border-radius: var(--calc-radius-lg);
  padding: 16px;
  margin-bottom: 20px;
}

.calc-advanced-label {
  font-size: 13px;
  color: var(--calc-text-placeholder);
  margin-bottom: 12px;
  font-weight: 500;
}

/* 计算按钮行 */
.calc-btn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 20px;
}

.calc-submit-btn {
  flex: none;
  width: auto;
  min-width: 200px;
  height: 44px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: var(--calc-radius-md) !important;
  background: var(--calc-blue) !important;
  border: none !important;
  transition: all 0.2s;
}

.calc-submit-btn:hover {
  background: var(--calc-blue-hover) !important;
}

.calc-btn-text {
  font-size: 14px;
  color: var(--calc-text-secondary);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--calc-radius-md);
  transition: all 0.2s;
  background: none;
  border: none;
}

.calc-btn-text:hover {
  color: var(--calc-blue);
  background: var(--calc-blue-light);
}

/* 精度 */
.calc-precision-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--calc-text-secondary);
  font-weight: 500;
}

/* 结果展示 - 2列小卡片 */
.calc-result {
  background: var(--calc-bg);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius-lg);
  padding: 20px;
  margin-top: 20px;
}

.calc-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--calc-text-primary);
  margin-bottom: 14px;
}

.calc-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.calc-result-row {
  padding: 10px 14px;
  background: var(--calc-white);
  border-radius: var(--calc-radius-md);
  border: 1px solid var(--calc-border);
}

.calc-result-key {
  font-size: 12px;
  color: var(--calc-text-placeholder);
  margin-bottom: 4px;
}

.calc-result-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--calc-text-primary);
  font-family: var(--calc-font-mono);
}

.calc-result-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--calc-text-secondary);
  margin-left: 2px;
}

.calc-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--calc-border-light);
}

.calc-table-mode {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--calc-border-light);
}

.calc-table-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--calc-text-primary);
  margin-bottom: 12px;
}

/* ========================================================================
   响应式
   ======================================================================== */
@media (min-width: 1200px) {
  .calc-category-grid {
    gap: 20px;
  }
  .calc-popular-grid {
    gap: 16px;
  }
  .calc-fields {
    gap: 20px;
  }
  .calc-result-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .calc-right-card {
    max-width: 640px;
  }
}

@media (max-width: 1199px) and (min-width: 769px) {
  .calc-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .calc-popular-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .calc-fields {
    grid-template-columns: repeat(2, 1fr);
  }
  .calc-left-panel {
    flex: 0 0 50%;
    min-width: 400px;
  }
  .calc-hub-search {
    width: 220px;
  }
}

@media (max-width: 768px) {
  .calc-hub-header { padding: 0 16px; }
  .calc-hub-nav-tabs,
  .calc-hub-search { display: none; }
  .calc-hub-content { padding: 16px; }
  .calc-category-grid { grid-template-columns: 1fr; }
  .calc-popular-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-fields { grid-template-columns: 1fr; }
  .calc-result-grid { grid-template-columns: 1fr; }
  .calc-shape-grid { padding: 12px; }
  .calc-page { flex-direction: column; }
  .calc-left-panel {
    flex: none;
    width: 100%;
    min-width: auto;
    padding: 20px 16px;
    border-right: none;
    border-bottom: 1px solid var(--calc-border);
    min-height: 300px;
  }
  .calc-svg-preview { min-height: 260px; padding: 24px; }
  .calc-right-panel { padding: 16px; }
  .calc-right-card { padding: 20px; }
  .calc-param-panel { padding: 20px; }
  .calc-cat-header { padding: 0 16px; }
  .calc-cat-content { padding: 16px; }
}

@media (max-width: 480px) {
  .calc-popular-grid { grid-template-columns: 1fr; }
  .calc-right-card { padding: 16px; }
  .calc-svg-preview { min-height: 220px; padding: 16px; }
}

/* ========================================================================
   暗色模式
   ======================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --calc-bg: #111827;
    --calc-white: #1f2937;
    --calc-text-primary: #f3f4f6;
    --calc-text-regular: #e5e7eb;
    --calc-text-secondary: #9ca3af;
    --calc-text-placeholder: #6b7280;
    --calc-border: #374151;
    --calc-border-light: #2d3748;
    --calc-dot-color: #4b5563;
    --calc-shadow-card: 0 2px 12px rgba(0,0,0,0.2);
  }
}

/* ========================================================================
   Element Plus 覆写
   ======================================================================== */
.calc-page .el-input-number .el-input__inner,
.calc-param-panel .el-input-number .el-input__inner {
  text-align: left;
  font-weight: 500;
}

.calc-page .el-radio-button__inner,
.calc-param-panel .el-radio-button__inner {
  border-radius: var(--calc-radius-sm) !important;
  font-weight: 500;
}

.calc-page .el-switch__label.is-active,
.calc-param-panel .el-switch__label.is-active {
  color: var(--calc-blue);
  font-weight: 600;
}

/* 结果入场动效 */
@keyframes calc-result-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.calc-result-row {
  animation: calc-result-fade 0.25s ease-out both;
}
.calc-result-row:nth-child(1) { animation-delay: 0.03s; }
.calc-result-row:nth-child(2) { animation-delay: 0.06s; }
.calc-result-row:nth-child(3) { animation-delay: 0.09s; }
.calc-result-row:nth-child(4) { animation-delay: 0.12s; }
.calc-result-row:nth-child(5) { animation-delay: 0.15s; }
.calc-result-row:nth-child(6) { animation-delay: 0.18s; }

/* ==================== AI 助手样式 ==================== */

/* 悬浮按钮 */
.calc-ai-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(22, 119, 255, 0.35);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.calc-ai-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(22, 119, 255, 0.45);
}
.calc-ai-fab.active {
  background: #f5f5f5;
  color: #666;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* 面板容器 */
.calc-ai-panel {
  position: fixed;
  right: 28px;
  bottom: 92px;
  width: 370px;
  height: calc(100vh - 160px);
  max-height: 580px;
  min-height: 400px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  z-index: 999;
  overflow: hidden;
}

/* 标题栏 */
.calc-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #f8faff 0%, #fff 100%);
  flex-shrink: 0;
}
.calc-ai-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
.calc-ai-header-icon {
  font-size: 18px;
}
.calc-ai-header-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #999;
  transition: all 0.2s;
}
.calc-ai-header-close:hover {
  background: #f0f0f0;
  color: #333;
}

/* 消息列表 */
.calc-ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.calc-ai-messages::-webkit-scrollbar {
  width: 4px;
}
.calc-ai-messages::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}

/* 欢迎消息 */
.calc-ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  gap: 12px;
}
.calc-ai-welcome-icon {
  font-size: 36px;
}
.calc-ai-welcome-text {
  font-size: 13px;
  color: #888;
  line-height: 1.6;
}

/* 消息气泡 */
.calc-ai-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.calc-ai-msg-user {
  flex-direction: row-reverse;
}
.calc-ai-msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  background: #f5f5f5;
}
.calc-ai-msg-user .calc-ai-msg-avatar {
  background: #e6f4ff;
}
.calc-ai-msg-bubble {
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.65;
  word-break: break-word;
  white-space: pre-wrap;
}
.calc-ai-msg-ai .calc-ai-msg-bubble {
  background: #f4f6f8;
  color: #333;
  border-top-left-radius: 4px;
}
.calc-ai-msg-user .calc-ai-msg-bubble {
  background: #1677ff;
  color: #fff;
  border-top-right-radius: 4px;
}

/* 打字动画 */
.calc-ai-typing {
  display: flex;
  gap: 4px;
  padding: 14px 18px !important;
  align-items: center;
}
.calc-ai-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #bbb;
  animation: ai-typing-bounce 1.4s infinite ease-in-out;
}
.calc-ai-typing span:nth-child(2) { animation-delay: 0.16s; }
.calc-ai-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes ai-typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* 输入区域 */
.calc-ai-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  flex-shrink: 0;
}
.calc-ai-input {
  flex: 1;
  height: 38px;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  padding: 0 16px;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.2s;
  background: #fff;
}
.calc-ai-input:focus {
  border-color: #1677ff;
}
.calc-ai-input:disabled {
  background: #f5f5f5;
}
.calc-ai-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #1677ff;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.calc-ai-send-btn:hover:not(:disabled) {
  background: #4096ff;
  transform: scale(1.05);
}
.calc-ai-send-btn:disabled {
  background: #d9d9d9;
  cursor: not-allowed;
}

/* 面板滑入/滑出动画 */
.calc-ai-slide-enter-active,
.calc-ai-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.calc-ai-slide-enter-from,
.calc-ai-slide-leave-to {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .calc-ai-panel {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 70vh;
    max-height: none;
    border-radius: 16px 16px 0 0;
  }
  .calc-ai-fab {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
  .calc-ai-msg-bubble {
    max-width: 220px;
  }
}