/* ============================================================================
   二维码生成器 · 样式（2026-09-22 · 开发员15号）
   ----------------------------------------------------------------------------
   类名前缀 `qg-`（全站已核未被占用；注意 `qr-` 已被 style.css 占用，不能碰）。
   🔴 本文件在 style.css 之后加载 —— 只新增类名，**不改 style.css**
      （铁律：改别人的样式别动 style.css，避免与并发会话互相覆盖）。

   配色：深墨蓝一条色轴（`#24356e → #0b1330`）。
     选它的两条依据（都算过，不是凭感觉）：
       ① 运营板块已占色相 0/21/142/164/189/217/243/258/330 ——
          **深墨蓝是唯一"暗色"选择**：那两个深绿（164°）离它 ΔE 50+，
          亮蓝（217°）虽然同族，但明度差 40 个点，靠明度就能分开。
       ② **入口图标是白色字形**（`.func-ico` 的 color 是 #fff）——
          亮的黄/青柠底会让白字糊掉，暗底才是正解。
   ========================================================================== */

/* 🔴 `[hidden]` 兜底必须**按作用域各补一条**：本页多处用 display:flex/grid，
   它们会盖掉浏览器默认的 `[hidden]{display:none}`。 */
#sub-qrgen [hidden] { display: none !important; }

/* ===================== 顶部 hero（对齐运营板块其它子页） ===================== */
.qg-hero {
  position: relative; overflow: hidden;
  margin: 4px 16px 14px; padding: 20px 18px 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, #24356e 0%, #0b1330 100%);
  color: #fff;
  box-shadow: 0 14px 30px -18px rgba(11, 19, 48, .95);
}
.qg-hero-glow {
  position: absolute; top: -60px; right: -50px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 68%);
  pointer-events: none;
}
.qg-hero-tag {
  position: relative; display: inline-block;
  padding: 3px 10px; margin-bottom: 10px; border-radius: 999px;
  font-size: 11px; letter-spacing: .3px; background: rgba(255,255,255,.20);
}
.qg-hero-name { position: relative; font-size: 26px; font-weight: 800; letter-spacing: .5px; line-height: 1.15; }
.qg-hero-sub { position: relative; margin-top: 8px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.90); }
.qg-hero-stat { position: relative; display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.qg-hero-stat span {
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,.18);
}
/* hero 右侧的二维码点阵装饰：用几何而不是插画，不跟内容抢注意力 */
.qg-hero-dots {
  position: absolute; right: 14px; bottom: 12px; width: 74px; height: 74px;
  opacity: .30; pointer-events: none;
}

/* ===================== 模式切换（三个大按钮） ===================== */
.qg-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.qg-mode {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 6px; border-radius: 14px; cursor: pointer;
  background: #faf8f5; border: 1.5px solid #f0eae3;
  transition: all .16s ease;
}
.qg-mode.on {
  background: linear-gradient(135deg, #eef2ff 0%, #e3eafc 100%);
  border-color: #24356e;
  box-shadow: 0 8px 18px -14px rgba(36, 53, 110, .95);
}
.qg-mode-ico { font-size: 21px; line-height: 1; }
.qg-mode-t { font-size: 13.5px; font-weight: 700; color: var(--text, #3a2a1e); }
.qg-mode-s { font-size: 11px; color: var(--text2, #a08c7c); }

/* ===================== 输入区 ===================== */
.qg-input, .qg-area {
  width: 100%; box-sizing: border-box; font-family: inherit;
  padding: 12px 13px; border-radius: 12px;
  border: 1.5px solid #ece5dd; background: #fcfbfa;
  font-size: 14px; color: var(--text, #3a2a1e); line-height: 1.5;
  outline: none; transition: border-color .16s ease;
}
.qg-area { min-height: 104px; resize: vertical; }
.qg-input:focus, .qg-area:focus { border-color: #24356e; background: #fff; }
.qg-count { margin-top: 7px; font-size: 11.5px; color: var(--text2, #a08c7c); display: flex; justify-content: space-between; }
.qg-count b { color: #24356e; font-weight: 700; }

/* 图片上传 */
.qg-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 26px 16px; text-align: center; cursor: pointer;
  border: 2px dashed #d9d1e0; border-radius: 16px;
  background: linear-gradient(180deg, #fbfaff 0%, #f6f5fb 100%);
  transition: all .16s ease;
}
.qg-drop.on { border-color: #24356e; background: #f1f3fc; }
.qg-drop-ico {
  width: 50px; height: 50px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; font-weight: 700; color: #24356e;
  background: #fff; border: 1px solid #e6e9f5;
  box-shadow: 0 8px 18px -12px rgba(36, 53, 110, .9);
}
.qg-drop-t { font-size: 14.5px; font-weight: 700; color: var(--text, #3a2a1e); }
.qg-drop-s { font-size: 12.5px; color: var(--text2, #a08c7c); line-height: 1.6; }
.qg-shot { position: relative; border-radius: 16px; overflow: hidden; background: #f6f3f0; }
.qg-shot img { display: block; width: 100%; height: auto; }
.qg-shot-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(11,19,48,0) 0%, rgba(11,19,48,.75) 100%);
}
.qg-shot-n { flex: 1; min-width: 0; color: #fff; font-size: 12.5px; }
.qg-shot-b {
  flex: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 7px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.92); color: #24356e;
}
/* 隐私提醒：图片托管是**会上传到公网**的，这句必须显著 */
.qg-warn {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: #fff7e6; color: #8a6100; font-size: 12.5px; line-height: 1.65;
  display: flex; gap: 8px; align-items: flex-start;
}
.qg-warn b { font-weight: 700; }

/* ===================== 样式控件 ===================== */
.qg-row { margin-bottom: 15px; }
.qg-row:last-child { margin-bottom: 0; }
.qg-row-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.qg-row-t { font-size: 13.5px; font-weight: 700; color: var(--text, #3a2a1e); }
.qg-row-s { font-size: 11.5px; color: var(--text2, #a08c7c); }
.qg-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.qg-pick {
  min-width: 62px; padding: 8px 10px; border-radius: 11px; cursor: pointer;
  background: #faf8f5; border: 1.5px solid #f0eae3;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all .14s ease;
}
.qg-pick.on { border-color: #24356e; background: #f1f3fc; }
.qg-pick-ico { width: 22px; height: 22px; display: block; }
.qg-pick-t { font-size: 11.5px; font-weight: 600; color: var(--text2, #a08c7c); }
.qg-pick.on .qg-pick-t { color: #24356e; }

/* 配色卡 */
.qg-pals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qg-pal {
  position: relative; padding: 6px; border-radius: 12px; cursor: pointer;
  background: #faf8f5; border: 1.5px solid #f0eae3; transition: all .14s ease;
}
.qg-pal.on { border-color: #24356e; box-shadow: 0 8px 18px -14px rgba(36,53,110,.95); }
.qg-pal-sw { height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.qg-pal-t { margin-top: 5px; text-align: center; font-size: 10.5px; color: var(--text2, #a08c7c); }
.qg-pal.on .qg-pal-t { color: #24356e; font-weight: 700; }
/* 自定义配色 */
.qg-custom { display: none; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.qg-custom.on { display: grid; }
.qg-color {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 11px; background: #faf8f5; border: 1.5px solid #f0eae3;
}
.qg-color input[type=color] {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: none; cursor: pointer; flex: none;
}
.qg-color span { font-size: 12px; color: var(--text2, #a08c7c); }

/* Logo 槽 */
.qg-logo { display: flex; align-items: center; gap: 10px; }
.qg-logo-box {
  width: 54px; height: 54px; flex: none; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #faf8f5; border: 1.5px dashed #ded6cd;
  font-size: 20px; color: #c3b7aa; overflow: hidden;
}
.qg-logo-box img { width: 100%; height: 100%; object-fit: cover; }
.qg-logo-tx { flex: 1; min-width: 0; font-size: 12px; color: var(--text2, #a08c7c); line-height: 1.55; }
.qg-mini {
  flex: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 6px 11px; border-radius: 9px; font-size: 12px; font-weight: 600;
  background: #f1f3fc; color: #24356e;
}

/* 开关 */
.qg-sw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 13px;
  background: #faf8f5; border: 1.5px solid #f0eae3; cursor: pointer;
}
.qg-sw-row.on { background: #f1f3fc; border-color: #c9d3ef; }
.qg-sw-row .tx { flex: 1; min-width: 0; }
.qg-sw-row .tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text, #3a2a1e); }
.qg-sw-row .tx i { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--text2, #a08c7c); line-height: 1.5; }
.qg-sw {
  flex: none; width: 44px; height: 26px; border-radius: 999px;
  background: #ddd4ca; position: relative; transition: background .18s ease;
}
.qg-sw::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: transform .18s ease;
}
.qg-sw-row.on .qg-sw { background: #24356e; }
.qg-sw-row.on .qg-sw::after { transform: translateX(18px); }

/* ===================== 预览 ===================== */
.qg-stage {
  display: flex; align-items: center; justify-content: center;
  padding: 18px; border-radius: 16px;
  background:
    linear-gradient(45deg, #f4f2ef 25%, transparent 25%, transparent 75%, #f4f2ef 75%) 0 0 / 18px 18px,
    linear-gradient(45deg, #f4f2ef 25%, transparent 25%, transparent 75%, #f4f2ef 75%) 9px 9px / 18px 18px,
    #fbfaf9;
  min-height: 190px;
}
.qg-stage canvas { display: block; max-width: 100%; height: auto; border-radius: 8px; }

/* 🔴 未生成（未付费）时**根本不渲染二维码**。
   产品决策（用户 2026-09-23 明确要求）：「没点生成，不应该显示二维码；点了生成必然是扣豆了，
   才会生成二维码」—— 所以付费前预览区只有一句提示，连"糊的码"都不给，
   语义才自洽（"生成"按钮真的在生成，而不是解锁一张已经存在的图）。
   代价：付费前试不了样式（看不到效果）；换来的是付费前**绝对拿不到可用成品**。
   ⚠️ 改这里之前先想清楚：二维码其实在浏览器本地早就算好了（成本为 0），
   「付费后才显示」纯属产品决策，不是技术限制。 */
.qg-empty { text-align: center; font-size: 12.5px; color: #b6a89b; line-height: 1.7; }

/* 可扫性评估 */
.qg-scan { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.55; }
.qg-scan i { font-style: normal; font-size: 15px; }
.qg-scan.ok   { background: #eefaf1; color: #216b41; }
.qg-scan.mid  { background: #fff7e6; color: #8a6100; }
.qg-scan.bad  { background: #fdeef0; color: #a01c34; }
.qg-scan b { font-weight: 700; }

.qg-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.qg-meta span {
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: #f4f1ed; color: #7d6a5a;
}

/* 「生成」按钮 —— 全页唯一的扣费动作，视觉上必须是最重的一颗。
   扣费点由用户决策（「你可以 1 毛呀，但不能不扣」）：预览免费，成品付费解锁。 */
.qg-run { display: block; width: 100%; margin-top: 14px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 800; color: #fff;
  padding: 14px 12px; border-radius: 14px; letter-spacing: .3px;
  background: linear-gradient(135deg, #24356e 0%, #0b1330 100%);
  box-shadow: 0 6px 18px rgba(11, 19, 48, .22); }
.qg-run:active { transform: scale(.985); }
.qg-run[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* 已生成：换成成功绿 + 不可点（避免用户以为还要再点一次、被重复扣） */
.qg-run.done { background: linear-gradient(135deg, #1f7a4d 0%, #0d3d26 100%);
  opacity: 1; cursor: default; box-shadow: none; }
.qg-run-tip { margin-top: 8px; font-size: 12px; line-height: 1.55; color: #7d6d5f; text-align: center; }
/* 下载区的锁定说明：按钮灰着的时候，旁边必须写清"为什么现在拿不走、要花多少" */
.qg-lock { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px;
  padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.6;
  color: #6b4f16; background: #fdf5e6; border: 1px solid #f0e0be; }
.qg-lock i { font-style: normal; flex: 0 0 auto; }
.qg-lock b { font-weight: 800; }

/* 保存按钮上方的一行说明：用户找不到下载入口，是因为按钮上只写了尺寸规格、
   没写"点了会发生什么"。这一行必须说清「复制到剪贴板」与"存到本地"的区别。
   ⚠️ 颜色别用 #8a7a6c —— 在卡片底 #fffdfa 上只有 4.07:1，12px 小字不达 WCAG AA；
      本功能通篇在提示用户对比度，自己的说明行更不能不合格。#7d6d5f = 4.90:1。 */
.qg-acts-h { margin-top: 12px; font-size: 12px; line-height: 1.55; color: #7d6d5f; }
.qg-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.qg-dl {
  border: 0; cursor: pointer; font-family: inherit;
  padding: 11px 6px; border-radius: 12px;
  font-size: 13px; font-weight: 700;
  background: #f2ede7; color: #5b4b3e;
}
.qg-dl.main { background: linear-gradient(135deg, #24356e 0%, #0b1330 100%); color: #fff; }
.qg-dl:active { transform: scale(.97); }
.qg-dl[disabled] { opacity: .45; cursor: not-allowed; }
.qg-acts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

/* 说明 */
.qg-steps { margin: 0; padding: 0; list-style: none; }
.qg-steps li {
  position: relative; padding-left: 28px; margin-bottom: 9px;
  font-size: 13px; color: var(--text2, #a08c7c); line-height: 1.65;
}
.qg-steps li:last-child { margin-bottom: 0; }
.qg-steps i {
  position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 11px; font-weight: 700;
  background: #e8ecf9; color: #24356e;
}
.qg-note {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: #f1f3fc; color: #2c3a6b; font-size: 12.5px; line-height: 1.65;
}

.qg-loading { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 13px; background: #f4f6fd; font-size: 13px; color: #24356e; }
.qg-spin { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid #d6ddf2; border-top-color: #24356e; animation: qg-rot .8s linear infinite; }
@keyframes qg-rot { to { transform: rotate(360deg); } }

.qg-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(10px);
  background: rgba(11,19,48,.94); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-size: 13.5px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease; z-index: 9999;
}
.qg-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 入口卡图标：深墨蓝（运营板块唯一暗色，且白字形在暗底上清楚） */
.f-qrgen { background: linear-gradient(135deg, #24356e, #0b1330); }

@media (max-width: 360px) {
  .qg-hero-name { font-size: 21px; }
  .qg-hero-dots { display: none; }
  .qg-pals { grid-template-columns: repeat(3, 1fr); }
  .qg-mode-s { display: none; }
}