/* ============================================================================
   AI 艺术二维码（运营板块）· 独立样式文件
   ----------------------------------------------------------------------------
   🔴 为什么单独一个文件、不写进 style.css：
     style.css 是全站共用、**多个会话在并发改**的文件。改它 = 每次上线都要整文件
     覆盖别人的改动（站里最惨的一次事故就是这么来的）。所以本功能所有样式都带
     `qra-` 前缀，装在这个文件里，并且**排在 style.css 之后**加载。
   🔴 类名全局唯一：加新类前先 grep 一遍全站（tools/check-css-collisions.py）。
   🔴 `[hidden]` 兜底：本站多处用 display:flex/grid，会盖掉 [hidden] 的 display:none，
     所以每个子页都要自己补一条（漏了就是"该藏的没藏住"）。
   ==========================================================================*/

#sub-qrart [hidden] { display: none !important; }

.qra-wrap { padding: 0 14px 96px; }

/* ---------- 顶部说明卡 ---------- */
.qra-hero {
  position: relative; overflow: hidden;
  margin: 12px 0 14px; padding: 18px 16px 16px;
  border-radius: 18px; color: #eaf9fb;
  background: linear-gradient(135deg, #14323d 0%, #1b5560 55%, #2b8b86 100%);
  box-shadow: 0 8px 22px rgba(20, 80, 90, .22);
}
.qra-hero-glow {
  position: absolute; right: -34px; top: -46px; width: 168px; height: 168px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.30), rgba(255,255,255,0) 68%);
}
.qra-hero-t { position: relative; font-size: 20px; font-weight: 800; letter-spacing: .3px; }
.qra-hero-s { position: relative; margin-top: 7px; font-size: 12.5px; line-height: 1.65; color: rgba(234,249,251,.86); }
.qra-hero-flow { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.qra-fchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; font-size: 11.5px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16);
}
.qra-fchip i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; font-style: normal;
  font-size: 10px; font-weight: 800; color: #123b45; background: #a9e8e0;
}

/* ---------- 两栏布局（宽屏：左表单 / 右预览） ---------- */
.qra-grid { display: block; }
@media (min-width: 1024px) {
  .qra-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 18px; align-items: start; }
  .qra-col-side { position: sticky; top: 10px; }
  .qra-wrap { padding: 0 22px 60px; }
}

/* ---------- 卡片 ---------- */
.qra-card {
  margin-bottom: 12px; padding: 14px;
  background: #fff; border: 1px solid #e6eef0; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 60, 70, .04);
}
.qra-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.qra-hd h3 { margin: 0; font-size: 15px; font-weight: 700; color: #16323a; }
.qra-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 7px; flex: 0 0 auto;
  font-size: 12px; font-weight: 800; color: #eaf9fb;
  background: linear-gradient(135deg, #173845, #1f6d78);
}
.qra-tip { margin-left: auto; font-size: 11.5px; color: #7b939a; text-align: right; }
.qra-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.qra-tagx {
  padding: 5px 10px; border-radius: 999px; font-size: 12px; cursor: pointer;
  color: #1b5560; background: #f1f8f9; border: 1px solid #daecee;
  -webkit-tap-highlight-color: transparent;
}
.qra-tagx:active { transform: scale(.97); }
.qra-hint { margin-top: 8px; font-size: 11.5px; color: #7b939a; line-height: 1.6; }

/* ---------- 输入 ---------- */
.qra-input, .qra-textarea, .qra-select {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; font-size: 14px; color: #16323a;
  background: #f7fbfc; border: 1px solid #dfeaec; border-radius: 11px;
  outline: none; font-family: inherit; -webkit-appearance: none;
}
.qra-textarea { min-height: 62px; resize: vertical; line-height: 1.6; }
.qra-input:focus, .qra-textarea:focus, .qra-select:focus { border-color: #56b8b0; background: #fff; }
.qra-input::placeholder, .qra-textarea::placeholder { color: #a8bcc1; }

/* ---------- 模式 tab（上传底图 / 文字描述） ---------- */
.qra-tabs { display: flex; gap: 8px; margin-bottom: 11px; }
.qra-tab {
  flex: 1 1 0; padding: 9px 6px; font-size: 13px; font-weight: 700; cursor: pointer;
  color: #55727a; background: #f4f9fa; border: 1px solid #e2edef; border-radius: 11px;
  -webkit-tap-highlight-color: transparent;
}
.qra-tab.on {
  color: #eaf9fb; border-color: transparent;
  background: linear-gradient(135deg, #173845, #1f6d78);
  box-shadow: 0 3px 10px rgba(31, 109, 120, .24);
}

/* ---------- 上传区 ---------- */
.qra-drop {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px; cursor: pointer; overflow: hidden;
  border: 1px dashed #b9d6da; border-radius: 13px; background: #f8fcfd;
  -webkit-tap-highlight-color: transparent;
}
.qra-drop.over { border-color: #1f6d78; background: #eefaf9; }
.qra-drop.has { border-style: solid; border-color: #cfe6e8; }
.qra-drop img {
  width: 62px; height: 62px; flex: 0 0 auto; object-fit: cover;
  border-radius: 10px; border: 1px solid #e2edef;
}
.qra-drop-tx { min-width: 0; }
.qra-drop-tx b { display: block; font-size: 13.5px; color: #16323a; }
.qra-drop-tx span { display: block; margin-top: 3px; font-size: 11.5px; color: #7b939a; word-break: break-all; }

/* ---------- 风格模板网格 ---------- */
.qra-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
@media (min-width: 560px) { .qra-styles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .qra-styles { grid-template-columns: repeat(4, 1fr); } }
.qra-style {
  position: relative; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid transparent; border-radius: 13px; background: #f2f8f9;
  -webkit-tap-highlight-color: transparent;
}
.qra-style img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.qra-style-tx {
  display: block; padding: 5px 6px 6px; text-align: center;
  background: #fff; border-top: 1px solid #eef5f6;
}
.qra-style-tx b { display: block; font-size: 12.5px; font-weight: 700; color: #16323a; }
.qra-style-tx em { display: block; font-size: 10.5px; font-style: normal; color: #8aa0a6; margin-top: 1px; }
.qra-style.on { border-color: #1f6d78; box-shadow: 0 4px 12px rgba(31, 109, 120, .22); }
.qra-style.on::after {
  content: '✓'; position: absolute; right: 5px; top: 5px;
  width: 19px; height: 19px; border-radius: 50%;
  font-size: 11px; font-weight: 800; line-height: 19px; text-align: center;
  color: #fff; background: #1f6d78; box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.qra-custom { margin-top: 10px; }

/* ---------- 明显程度 ---------- */
.qra-slider { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.qra-sl-tx { flex: 0 0 auto; font-size: 11.5px; color: #7b939a; }
.qra-slider input[type="range"] {
  flex: 1 1 auto; height: 6px; margin: 0; border-radius: 999px; appearance: none;
  background: linear-gradient(90deg, #a7dcd6 0%, #2b8b86 55%, #173845 100%);
}
.qra-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid #1f6d78; box-shadow: 0 2px 6px rgba(16,60,70,.25);
  cursor: pointer;
}
.qra-sl-val { display: flex; align-items: center; gap: 8px; }
.qra-sl-val button {
  width: 26px; height: 26px; font-size: 16px; line-height: 1; cursor: pointer;
  color: #1f6d78; background: #f1f8f9; border: 1px solid #daecee; border-radius: 8px;
}
.qra-sl-val b { min-width: 34px; text-align: center; font-size: 14px; color: #16323a; }
.qra-sl-val .qra-warn { font-size: 11.5px; color: #d9822b; }

/* ---------- 预览卡 ---------- */
.qra-pv { padding: 14px; background: #fff; border: 1px solid #e6eef0; border-radius: 16px; }
.qra-pv-hd {
  display: flex; align-items: center; gap: 7px; margin-bottom: 11px;
  font-size: 14px; font-weight: 700; color: #16323a;
}
.qra-pv-hd span { margin-left: auto; font-size: 11.5px; font-weight: 400; color: #7b939a; }
.qra-pv-box {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 14px; background: repeating-conic-gradient(#f2f6f7 0% 25%, #fbfdfd 0% 50%) 50% / 16px 16px;
  border: 1px solid #e6eef0; display: flex; align-items: center; justify-content: center;
}
.qra-pv-box canvas { width: 100%; height: 100%; display: block; }
.qra-ph { font-size: 12.5px; color: #9ab0b6; text-align: center; line-height: 1.8; }
.qra-spin {
  width: 26px; height: 26px; margin: 0 auto 10px; border-radius: 50%;
  border: 3px solid #d8eced; border-top-color: #1f6d78; animation: qraSpin .9s linear infinite;
}
@keyframes qraSpin { to { transform: rotate(360deg); } }
.qra-pv-empty { text-align: center; padding: 20px; }
.qra-pv-empty b { display: block; font-size: 13.5px; color: #16323a; }
.qra-pv-empty span { display: block; margin-top: 5px; font-size: 11.5px; color: #7b939a; }
.qra-pv-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.7; color: #7b939a; }
.qra-pv-note b { color: #16323a; }
.qra-go {
  display: block; width: 100%; margin-top: 12px; padding: 14px;
  font-size: 15.5px; font-weight: 800; letter-spacing: .4px; cursor: pointer;
  color: #eaf9fb; border: 0; border-radius: 13px;
  background: linear-gradient(135deg, #173845, #1f6d78);
  box-shadow: 0 6px 16px rgba(31, 109, 120, .26);
  -webkit-tap-highlight-color: transparent;
}
.qra-go:disabled { opacity: .45; box-shadow: none; }
.qra-go:not(:disabled):active { transform: scale(.985); }
.qra-cost { margin-top: 8px; font-size: 11.5px; color: #7b939a; text-align: center; }
.qra-dl {
  display: block; width: 100%; margin-top: 9px; padding: 12px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  color: #1f6d78; background: #f1f8f9; border: 1px solid #cfe6e8; border-radius: 12px;
  -webkit-appearance: none;
}

/* ---------- 生成记录 ---------- */
.qra-his-wrap { margin-top: 16px; }
.qra-his-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 13.5px; font-weight: 700; color: #16323a; }
.qra-his-hd em { font-style: normal; font-size: 11.5px; font-weight: 400; color: #8aa0a6; }
.qra-his-grid {
  display: grid; gap: 9px;
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 560px) { .qra-his-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .qra-his-grid { grid-template-columns: repeat(6, 1fr); } }
.qra-his { position: relative; }
.qra-his-open {
  display: block; width: 100%; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid #e6eef0; border-radius: 12px; background: #fff;
  -webkit-tap-highlight-color: transparent;
}
.qra-his-open img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.qra-his-tx { display: block; padding: 5px 6px 6px; text-align: left; }
.qra-his-tx b { display: block; font-size: 11.5px; color: #16323a; }
.qra-his-tx em { display: block; font-style: normal; font-size: 10.5px; color: #8aa0a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qra-his-tx i { display: block; font-style: normal; font-size: 10px; color: #b3c4c8; margin-top: 1px; }
.qra-his-del {
  position: absolute; right: 4px; top: 4px; width: 19px; height: 19px;
  font-size: 11px; line-height: 19px; text-align: center; cursor: pointer;
  color: #fff; background: rgba(22, 50, 58, .58); border-radius: 50%;
}

/* ---------- 错误条 / toast ---------- */
.qra-err {
  margin: 10px 0 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.6;
  color: #8c3b2e; background: #fdf2ef; border: 1px solid #f6d8d0; border-radius: 11px;
}
.qra-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(8px);
  max-width: 78vw; padding: 10px 16px; font-size: 13px; color: #eaf9fb;
  background: rgba(20, 50, 61, .94); border-radius: 999px; z-index: 60;
  opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none;
}
.qra-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- ① 二维码内容：三种内容类型（文字 / 链接 / 图片） ----------
   版式参考同类产品的「装什么内容」三选一卡片：图标 + 名称 + 一句定位；
   选中态用本站主色（青），不要用同行的紫（这家站的主色是青绿）。 */
.qra-ctype { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 11px; }
.qra-ctype-it {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 6px 9px; cursor: pointer;
  background: #fbfcfc; border: 1.5px solid #e8eff0; border-radius: 14px;
  font-family: inherit; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
}
.qra-ctype-it i { font-style: normal; font-size: 19px; line-height: 1.3; }
.qra-ctype-it b { font-size: 13.5px; font-weight: 700; color: #16323a; }
.qra-ctype-it span { font-size: 11px; color: #8aa0a6; }
.qra-ctype-it.on {
  border-color: #1f6d78; background: #f1f8f9;
  box-shadow: 0 3px 10px rgba(31, 109, 120, .16);
}
.qra-ctype-it.on b { color: #14545e; }
.qra-ctype-it:active { transform: scale(.985); }

/* 图片内容：选图 + 托管状态 */
.qra-cimg-ic { flex: 0 0 auto; font-size: 22px; line-height: 1.2; }
.qra-shot { margin-top: 10px; }
.qra-shot img {
  display: block; width: 100%; max-height: 280px; object-fit: contain;
  background: #f8fcfd; border: 1px solid #e2edef; border-radius: 12px;
}
.qra-shot-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: #7b939a; }
.qra-shot-bar .qra-shot-n { flex: 1 1 auto; }
.qra-shot-bar .qra-shot-n.ok { color: #2c8a5b; }
.qra-shot-bar button {
  white-space: nowrap;      /* 🔴 不折行：折成"换一 / 张"很难看（移动端实测过） */
  padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
  color: #1f6d78; background: #f1f8f9; border: 1px solid #daecee; border-radius: 9px;
  -webkit-appearance: none;
}

/* 图片内容的"公开网址"提示（与站内二维码功能的原文一致，不自己编） */
.qra-warn-note { margin-top: 6px; font-size: 11.5px; line-height: 1.6; color: #b06a1f; }

/* 顶部右角的「重新开始」（跟返回键同一行，不占内容区） */
.qra-topbtn {
  margin-left: auto; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
  color: #1f6d78; background: #f1f8f9; border: 1px solid #daecee; border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.qra-topbtn:active { transform: scale(.97); }