/* ===== AI 智能报价弹窗 · 精致紫调视觉（深色模式） =====
   外壳四条（.tech-modal / .tech-modal-box / .header / .body / .close）用 #aiQuoteModal 作用域提权，
   压过 index.html 内联同名规则；其余 .aiq-* 正常特异性即可。 */

/* Logo 尺寸令牌：全站厂商品牌 Logo 统一来源（与 card.css 保持一致），改一处即全站生效 */
:root{
  --logo-xs: 28px;   /* 弹窗结果行内 */
  --logo-sm: 40px;   /* 弹窗品牌选项 */
  --logo-md: 56px;   /* 卡片预览（注册 / 品牌信息卡 / hero 头像，统一） */
  --logo-lg: 80px;   /* 品牌 hero 预留 */
}

/* —— 遮罩基础（与内联规则一致） —— */
.tech-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 16px; }
.tech-modal.show { display: flex; }
/* 背景/模糊用 id 选择器提权，盖过内联 .tech-modal 背景 */
#aiQuoteModal {
  background: rgba(10, 8, 20, .65);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* —— 弹窗外壳（提权盖过内联 .tech-modal-box） —— */
#aiQuoteModal .tech-modal-box {
  position: relative;
  background: #16161F;
  border: 1px solid rgba(139,124,246,.25);
  border-radius: 24px;
  width: 100%;
  max-width: 384px;
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .3);
}
/* 每次打开都重放入场动画 */
#aiQuoteModal.show .tech-modal-box {
  animation: aiqPop .42s cubic-bezier(.22, 1, .36, 1);
}
@keyframes aiqPop {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* —— 头栏（渐变 + 玻璃感关闭键） —— */
#aiQuoteModal .tech-modal-header {
  position: relative;
  padding: 16px 18px 15px;
  background-image:
    radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, .20), transparent 55%),
    linear-gradient(135deg, #7C5CFC 0%, #6366F1 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
}
#aiQuoteModal .tech-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .2s, transform .25s;
}
#aiQuoteModal .tech-modal-close:hover { background: rgba(255, 255, 255, .34); transform: rotate(90deg); }

/* —— 主体滚动区 —— */
#aiQuoteModal .tech-modal-body {
  padding: 16px 18px 6px;
  overflow-y: auto;
  flex: 1 1 auto;
  font-size: 15px;
  color: #C8C8D8;
  line-height: 1.5;
  background: #16161F;
}
/* 每步内容轻轻上浮入场 */
#aiQuoteModal .tech-modal-body > .aiq-q,
#aiQuoteModal .tech-modal-body > .aiq-sub,
#aiQuoteModal .tech-modal-body > .aiq-opts,
#aiQuoteModal .tech-modal-body > .aiq-inputs,
#aiQuoteModal .tech-modal-body > .aiq-rec-card,
#aiQuoteModal .tech-modal-body > .aiq-rec-fail {
  animation: aiqFadeUp .32s ease both;
}
@keyframes aiqFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* —— 步骤标签胶囊 —— */
.aiq-step-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(124, 92, 252, .25);
}

/* —— 分段式进度条 —— */
.aiq-dots { display: flex; gap: 6px; margin: 0 0 14px; }
.aiq-dots i { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); transition: background .35s ease; }
.aiq-dots i.on { background: linear-gradient(90deg, #8B5CF6, #6366F1); }

/* —— 问题 / 副标题 —— */
.aiq-q { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 5px; line-height: 1.35; letter-spacing: .2px; }
.aiq-sub { font-size: 12.5px; color: #9A9AB0; margin: 0 0 16px; line-height: 1.55; }
.aiq-hint { font-size: 12.5px; color: #B3A6FA; text-align: center; padding: 12px 0 4px; font-weight: 700; }
.aiq-auto { font-size: 11px; color: #B3A6FA; text-align: center; padding: 0 0 2px; }

/* —— 选项卡片 —— */
.aiq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aiq-opt {
  position: relative;
  text-align: left;
  cursor: pointer;
  padding: 14px 12px 12px;
  border: 1.5px solid rgba(139,124,246,.3);
  border-radius: 16px;
  background: #1A1A24;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.aiq-opt:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(124, 92, 252, .18); border-color: rgba(139,124,246,.5); }
.aiq-opt:active { transform: scale(.985); }
.aiq-opt.sel {
  border-color: #8B5CF6;
  background: rgba(139,124,246,.16);
  box-shadow: 0 10px 24px rgba(124, 92, 252, .28);
}
.aiq-opt .ic {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  line-height: 1;
  background: rgba(139,124,246,.18);
  margin-bottom: 10px;
  transition: background .2s;
}
.aiq-opt.sel .ic { background: linear-gradient(135deg, #8B5CF6, #6366F1); }
.aiq-opt .t { font-size: 14.5px; font-weight: 700; color: #fff; margin-top: 0; line-height: 1.25; }
.aiq-opt.sel .t { color: #cbbcff; }
.aiq-opt .d { font-size: 11.5px; color: #9A9AB0; margin-top: 4px; line-height: 1.4; }

/* 品牌步骤联动：厂商已发布 Logo */
.aiq-opt .aiq-opt-logo-wrap {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: rgba(139,124,246,.18);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.aiq-opt .aiq-opt-logo {
  width: var(--logo-sm);
  height: var(--logo-sm);
  border-radius: 11px;
  object-fit: contain;
  background: #0F0F16;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.aiq-opt .aiq-opt-badge {
  font-size: 10.5px;
  color: #34D399;
  font-weight: 700;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* 选中勾标（带弹出动画） */
.aiq-opt .tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  color: #fff;
  font-size: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(124, 92, 252, .4);
}
.aiq-opt.sel .tick { display: flex; animation: aiqTick .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes aiqTick { from { transform: scale(0); } to { transform: scale(1); } }

/* —— 井道输入 —— */
.aiq-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aiq-inputs label { font-size: 12px; color: #9A9AB0; display: block; margin-bottom: 5px; font-weight: 600; }
.aiq-inputs input {
  width: 100%;
  border: 1.5px solid rgba(139,124,246,.3);
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 15px;
  box-sizing: border-box;
  background: #0F0F16;
  color: #E6E6EF;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.aiq-inputs input:focus { outline: none; border-color: #8B5CF6; background: #16161F; box-shadow: 0 0 0 4px rgba(124, 92, 252, .18); }

/* —— AI 推荐 / 反推卡 —— */
.aiq-rec-card {
  background: rgba(139,124,246,.12);
  border: 1.5px solid rgba(139,124,246,.3);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.aiq-rec-tag { font-size: 13px; color: #cbbcff; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.aiq-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.aiq-rec-grid > div { display: flex; flex-direction: column; }
.aiq-rec-grid span { font-size: 11px; color: #9A9AB0; margin-bottom: 3px; }
.aiq-rec-grid b { font-size: 16px; color: #fff; font-weight: 800; }
.aiq-rec-fail { background: rgba(248,85,85,.1); border: 1.5px solid rgba(248,85,85,.35); border-radius: 16px; padding: 14px 16px; font-size: 13px; color: #F87171; line-height: 1.7; }

/* —— 底部按钮区（钉底常驻） —— */
.aiq-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: #16161F;
}
.aiq-foot .btn-outline-block, .aiq-foot .btn-primary-block { margin: 0; width: auto; flex: 1; }
.aiq-foot .btn-outline-block { flex: 0 0 88px; height: 50px; }
.aiq-foot .btn-primary-block { height: 52px; }

/* 主按钮（渐变 + 阴影 + 微交互） */
.btn-primary-block {
  display: block;
  width: calc(100% - 36px);
  margin: 14px 18px 18px;
  height: 52px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(124, 92, 252, .32);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn-primary-block:hover { filter: brightness(1.05); box-shadow: 0 14px 30px rgba(124, 92, 252, .42); }
.btn-primary-block:active { transform: scale(.98); }

/* 最后一步"生成安装参数"：放大高亮、呼吸光 */
.aiq-gen-btn { font-size: 17px; height: 56px; margin-top: 0; box-shadow: 0 14px 30px rgba(124, 92, 252, .45); animation: aiqPulse 1.5s ease-in-out infinite; }
@keyframes aiqPulse {
  0%, 100% { box-shadow: 0 14px 30px rgba(124, 92, 252, .40); }
  50%      { box-shadow: 0 14px 40px rgba(124, 92, 252, .72); }
}
/* 未选时置灰但始终可见（非死按钮） */
.aiq-gen-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; animation: none; filter: grayscale(.2); }

/* 选中后的绿色引导提示 */
.aiq-foot-hint {
  font-size: 12.5px;
  font-weight: 700;
  color: #34D399;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.35);
  border-radius: 12px;
  padding: 9px 12px;
  margin: 0 0 2px;
  text-align: center;
  flex-basis: 100%;
}

/* 次按钮（描边） */
.btn-outline-block {
  display: block;
  width: calc(100% - 28px);
  margin: 12px 14px 16px;
  height: 44px;
  border: 1.5px solid rgba(139,124,246,.5);
  border-radius: 12px;
  background: #1A1A24;
  color: #cbbcff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.btn-outline-block:hover { background: rgba(139,124,246,.16); border-color: #8B5CF6; }
.btn-outline-block:active { transform: scale(.98); }

/* —— 结果卡 —— */
.aiq-res { border-radius: 18px; overflow: hidden; border: 1.5px solid rgba(139,124,246,.3); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.aiq-res-h { background: linear-gradient(135deg, #211C45 0%, #3A2E6E 60%, #5B3DF5 100%); color: #fff; padding: 16px 18px; }
.aiq-res-badge { display: inline-block; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 3px 10px; margin-bottom: 10px; }
.aiq-res-h .p { font-size: 12.5px; opacity: .9; display: flex; align-items: center; gap: 8px; }
.aiq-res-h .v { font-size: 27px; font-weight: 900; margin-top: 4px; letter-spacing: .3px; }
.aiq-res-h .v small { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; opacity: .85; }
.aiq-res-b { padding: 6px 18px 2px; }
.aiq-res-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.1); font-size: 13.5px; gap: 8px; }
.aiq-res-row span:first-child { color: #9A9AB0; flex-shrink: 0; }
.aiq-res-row span:last-child { color: #fff; font-weight: 700; text-align: right; }
.aiq-tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 18px; }
.aiq-tags span { background: rgba(139,124,246,.18); color: #cbbcff; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.aiq-note { font-size: 11px; color: #6E6E85; text-align: center; padding: 0 18px 14px; line-height: 1.6; }

/* —— 留资卡 —— */
.aiq-lead { margin: 12px 18px 2px; background: rgba(139,124,246,.12); border: 1.5px solid rgba(139,124,246,.3); border-radius: 16px; padding: 12px 14px; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.aiq-lead-t { font-size: 12.5px; color: #cbbcff; margin-bottom: 10px; font-weight: 700; }
.aiq-lead input { display: block; width: 100%; box-sizing: border-box; border: 1.5px solid rgba(139,124,246,.3); border-radius: 12px; padding: 11px 12px; font-size: 14.5px; margin-bottom: 9px; background: #0F0F16; color: #E6E6EF; transition: border-color .2s, box-shadow .2s; }
.aiq-lead input:last-child { margin-bottom: 0; }
.aiq-lead input:focus { outline: none; border-color: #8B5CF6; box-shadow: 0 0 0 4px rgba(124, 92, 252, .18); }
.aiq-restart { text-align: center; font-size: 12.5px; color: #B3A6FA; cursor: pointer; padding: 10px 0 4px; font-weight: 700; }
.aiq-restart:active { opacity: .6; }

@media (max-width: 380px) { .aiq-opts { grid-template-columns: 1fr; } }

/* —— 加价配置分组（options 步骤） —— */
.aiq-groups { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.aiq-group-h { font-size: 13px; font-weight: 800; color: #cbbcff; margin: 0 0 9px; display: flex; align-items: center; gap: 6px; }
.aiq-group-h::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: linear-gradient(135deg, #8B5CF6, #6366F1); }
/* .aiq-opt-chk 复用 .aiq-opt 卡片视觉，本步骤内作多选卡 */
.aiq-opt-chk .d { font-size: 11.5px; color: #34D399; font-weight: 700; }
.aiq-opt-chk:not(.sel) .d { color: #6E6E85; font-weight: 500; }
/* 已选加价配置摘要 */
.aiq-opt-sum { margin: 4px 18px 2px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.3); border-radius: 14px; padding: 12px 14px; }
.aiq-opt-sum-h { font-size: 12.5px; font-weight: 800; color: #34D399; margin-bottom: 9px; }
.aiq-opt-sum span { display: inline-block; background: rgba(52,211,153,.16); color: #6EE7B7; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; margin: 0 7px 7px 0; }

/* ===== 规整·报价卡片透明计价块（2026-07-24） ===== */
.aiq-res-h { display: flex; flex-direction: column; }
.aiq-res-id { font-size: 12.5px; opacity: .92; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.aiq-res-logo { width: var(--logo-xs); height: var(--logo-xs); border-radius: 7px; object-fit: contain; background: #fff; border: 1px solid rgba(255,255,255,.25); flex-shrink: 0; }
.aiq-res-total { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; }
.aiq-res-total span { font-size: 12px; opacity: .82; font-weight: 600; letter-spacing: .5px; }
.aiq-res-total strong { font-size: 30px; font-weight: 900; letter-spacing: .3px; line-height: 1.12; }
.aiq-price { margin: 14px 18px 2px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.02); }
.aiq-price-h { font-size: 12px; color: #B3A6FA; font-weight: 800; padding: 11px 15px 7px; letter-spacing: .2px; }
.aiq-price-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; font-size: 14px; gap: 10px; }
.aiq-price-row + .aiq-price-row { border-top: 1px solid rgba(255,255,255,.07); }
.aiq-price-row span { color: #9A9AB0; flex-shrink: 0; }
.aiq-price-row b { color: #E6E6EF; font-weight: 700; text-align: right; }
.aiq-price-row b.up { color: #6EE7B7; }
.aiq-price-row.sub { font-size: 11.5px; color: #7E7E96; padding-top: 0; padding-bottom: 10px; }
.aiq-price-row.sub span, .aiq-price-row.sub b { color: #7E7E96; font-weight: 500; font-size: 11.5px; }
.aiq-price-row.total { background: rgba(139,124,246,.14); }
.aiq-price-row.total span { color: #cbbcff; font-weight: 700; }
.aiq-price-row.total b { color: #fff; font-size: 18px; font-weight: 900; }

/* options 步底部实时加价小计：点选即反馈，治"点了没反应"的卡感 */
.aiq-opt-live {
  flex-basis: 100%;
  font-size: 12.5px;
  color: #9A9AB0;
  text-align: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(139,124,246,.08);
  border: 1px dashed rgba(139,124,246,.3);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.aiq-opt-live b { color: #cbbcff; font-weight: 800; }
.aiq-opt-live.has {
  color: #34D399;
  font-weight: 700;
  background: rgba(52,211,153,.10);
  border: 1px solid rgba(52,211,153,.35);
}
.aiq-opt-live.has b { color: #6EE7B7; }