/* 共享：测算器表单控件 + 套餐徽章
   用 .pc-dark / .pc-light 作用域区分主题 */

/* number input 去掉上下三角 */
.pc-scope input[type=number]::-webkit-outer-spin-button,
.pc-scope input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pc-scope input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* select 自定义箭头 + 弹出层字号收紧（macOS 系统字体过大） */
.pc-scope select { -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px !important; font-size: 14px; }
.pc-scope select option { font-size: 14px; padding: 6px 10px; }
.pc-dark select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.pc-light select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='rgba(15,23,42,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }

/* range slider */
.pc-scope input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 22px; cursor: pointer; padding: 0; width: 100%; }
.pc-scope input[type=range]:focus { outline: none; }

/* track */
.pc-dark input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, #38bdf8 0%, #38bdf8 var(--pc-fill, 0%), rgba(255,255,255,0.12) var(--pc-fill, 0%));
}
.pc-light input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, #c33639 0%, #c33639 var(--pc-fill, 0%), #e7e2dc var(--pc-fill, 0%));
}
.pc-dark input[type=range]::-moz-range-track {
  height: 4px; border-radius: 999px; background: rgba(255,255,255,0.12);
}
.pc-light input[type=range]::-moz-range-track {
  height: 4px; border-radius: 999px; background: #e7e2dc;
}
.pc-dark input[type=range]::-moz-range-progress { height: 4px; border-radius: 999px; background: #38bdf8; }
.pc-light input[type=range]::-moz-range-progress { height: 4px; border-radius: 999px; background: #c33639; }

/* thumb */
.pc-scope input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%; cursor: grab;
  transition: transform .15s, box-shadow .15s;
}
.pc-dark input[type=range]::-webkit-slider-thumb {
  background: #fff; border: 2px solid #0b0d10;
  box-shadow: 0 0 0 1px #38bdf8, 0 4px 10px rgba(0,0,0,0.5);
}
.pc-light input[type=range]::-webkit-slider-thumb {
  background: #fff; border: 2px solid #c33639;
  box-shadow: 0 1px 3px rgba(31,29,27,0.2);
}
.pc-scope input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.pc-scope input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); cursor: grabbing; }

.pc-scope input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; cursor: grab;
}
.pc-dark input[type=range]::-moz-range-thumb {
  background: #fff; border: 2px solid #0b0d10; box-shadow: 0 0 0 1px #38bdf8;
}
.pc-light input[type=range]::-moz-range-thumb {
  background: #fff; border: 2px solid #c33639; box-shadow: 0 1px 3px rgba(31,29,27,0.2);
}

/* 套餐 4 色徽章 — 共享基础结构；颜色由各页面主题样式提供 */
.tier-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; line-height: 1.4; white-space: nowrap; }
/* 浅色（v2 控制台）默认 — 与 pricing.html 暖色系对齐 */
.pc-light .tier-tag--Lite  { background: #f0ece6; color: #6b6760; border: 1px solid #e3ddd4; }
.pc-light .tier-tag--Pro   { background: #fdebe9; color: #b14037; border: 1px solid #f8d3cf; }
.pc-light .tier-tag--Max   { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.pc-light .tier-tag--Utura { background: linear-gradient(135deg, #c33639, #8b5cf6); color: #fff; border: none; box-shadow: 0 2px 8px rgba(139,92,246,0.25); }

/* ---------- 计算器交互反馈 ---------- */
/* 数字变化时短暂高亮 */
@keyframes pcFlash {
  0%   { background-color: var(--pc-flash-color, rgba(195,54,57,0.10)); }
  100% { background-color: transparent; }
}
.pc-scope .pc-flash { animation: pcFlash 0.45s ease-out; }
.pc-dark .pc-flash  { --pc-flash-color: rgba(56,189,248,0.16); }
.pc-light .pc-flash { --pc-flash-color: rgba(195,54,57,0.10); }

/* 大数字字体过渡 */
.pc-scope [data-pc-num] {
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-block;
  will-change: transform;
}
.pc-scope [data-pc-num].pc-bump { transform: scale(1.06); }

/* 拖动 slider 时，对应消耗明细行高亮 */
.pc-scope .pc-row { transition: background-color 0.2s ease, color 0.2s ease; }
.pc-light .pc-row.pc-row-active { background-color: rgba(195,54,57,0.06); }
.pc-dark  .pc-row.pc-row-active { background-color: rgba(56,189,248,0.10); }
.pc-scope .pc-row.pc-row-active td { color: inherit; font-weight: 500; }

/* slider 的 chip 数字也加个轻微的过渡 */
.pc-scope [data-pc-v] { transition: transform 0.18s ease, background-color 0.18s ease; }
.pc-scope [data-pc-v].pc-bump { transform: scale(1.08); }

/* ---------- 帮助提示 ? ---------- */
.pc-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 11px; font-weight: 600; line-height: 1; cursor: help;
  position: relative; user-select: none;
  transition: background-color 0.15s, color 0.15s;
}
.pc-light .pc-help { background: #ebe6dd; color: #7b7773; }
.pc-light .pc-help:hover { background: #c33639; color: #fff; }
.pc-dark  .pc-help { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.65); }
.pc-dark  .pc-help:hover { background: #38bdf8; color: #0b0d10; }

.pc-help[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 280px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 400; line-height: 1.55;
  white-space: normal; text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}
.pc-help[data-tip]::before {
  content: ''; position: absolute;
  bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s; z-index: 101;
}
.pc-light .pc-help[data-tip]::after { background: #1f1d1b; color: #f5f3ef; }
.pc-light .pc-help[data-tip]::before { border-top-color: #1f1d1b; }
.pc-dark  .pc-help[data-tip]::after { background: #fff; color: #0b0d10; }
.pc-dark  .pc-help[data-tip]::before { border-top-color: #fff; }
.pc-help:hover::after, .pc-help:hover::before { opacity: 1; }