/* ═══════════════════════════════════════════════════════════════════════
   QRCard 卡面视觉系统 v2.0 —— 二维卡 spec 的样式半边（card.json + card.css）
   ─────────────────────────────────────────────────────────────────────────
   零依赖（不依赖 Tailwind / 本页 / Vue），可独立分享。BEM + CSS 变量主题。

   DOM 契约（任何渲染器只要输出以下结构，即可用本文件完整还原一张卡）：

   .qrc-shell                                    容器查询壳（cqw 基准，无视觉；卡面高度随内容撑开）
     └ .qrc-card                                 ← L1 palette（若有）以 inline style 覆写 --qrc-* 到这里
       ├ .qrc-l1                                 画面层 L1（absolute 铺满 z:0，可选；AI 生成的整卡气质舞台）
       ├ .qrc-deco--{tl|t|tr|l|r|bl|b|br}       插画装饰层（absolute 浮层 z:0，8 向位置 × 三档大小）
       ├ .qrc-theme-{paper|ink|violet|warm|… 共 12 个}   基础配色主题（调色板变量）
       ├ .qrc-brand-{youtube|tiktok|spotify|… 共 18 个}  品牌主题（gen 生成器页预设，变量集同构）
       ├ .qrc-card--{classic|split|minimal}        布局（排列方式）
       ├ .qrc-card--{biz|square|post}              卡型（实物最小比例，内容可撑高）
       ├ .qrc-card--{sharp|round|soft}             圆角
       ├ .qrc-mat-{paper|glass|metal|linen|… 共 12 个}  材质（SVG 纹理 / 玻璃）
       └ .qrc-card--light                          浅色舞台修饰（可选）
         .qrc-slot.qrc-slot--{badge|head|sub|main|action|status|foot}
           .qrc-w.qrc-w--{qr|title|note|domain|cta|progress|badge|foot}
             + 修饰符（对齐 / 字号 / 码区样式 / tone / 行数…）

   可扫性红线：码区一律白底深码（.qrc-w__qr-box 恒白底）。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 主题层：调色板变量（材质层与组件层全部引用这里，单一来源） ───────── */
.qrc-theme-paper{
  --qrc-bg:#FAF9F6; --qrc-bg-soft:rgba(250,249,246,.72);
  --qrc-ink:#191722; --qrc-sub:#6F6A78;
  --qrc-accent:#7C5CFF; --qrc-on-accent:#FFFFFF;
  --qrc-line:rgba(25,23,34,.12); --qrc-wash:rgba(25,23,34,.06);
  --qrc-ok:#0E9F6E;
}
.qrc-theme-ink{
  --qrc-bg:#0F0D14; --qrc-bg-soft:rgba(15,13,20,.62);
  --qrc-ink:#F4F2FA; --qrc-sub:#A8A3B8;
  --qrc-accent:#A78BFA; --qrc-on-accent:#17112B;
  --qrc-line:rgba(244,242,250,.14); --qrc-wash:rgba(244,242,250,.07);
  --qrc-ok:#34D399;
}
.qrc-theme-violet{
  --qrc-bg:#1B1438; --qrc-bg-soft:rgba(27,20,56,.60);
  --qrc-ink:#EDE9FE; --qrc-sub:#B7ABDD;
  --qrc-accent:#A78BFA; --qrc-on-accent:#1B1438;
  --qrc-line:rgba(167,139,250,.25); --qrc-wash:rgba(167,139,250,.12);
  --qrc-ok:#34D399;
}
.qrc-theme-warm{
  --qrc-bg:#F6F0E4; --qrc-bg-soft:rgba(246,240,228,.72);
  --qrc-ink:#3B3123; --qrc-sub:#8B7F6C;
  --qrc-accent:#C05D34; --qrc-on-accent:#FFFFFF;
  --qrc-line:rgba(59,49,35,.14); --qrc-wash:rgba(59,49,35,.06);
  --qrc-ok:#2F855A;
}
/* 深色系拉开策略：四张深底必须一眼分得开——墨黑（纯黑紫）· 石墨（明显更亮的灰）·
   午夜（饱和靛蓝）· 海蓝（青绿 teal）。小尺寸 swatch 里靠底色色相 + 强调色双通道区分 */
.qrc-theme-ocean{
  --qrc-bg:#07272F; --qrc-bg-soft:rgba(7,39,47,.62);
  --qrc-ink:#D8F1F7; --qrc-sub:#7FA9B4;
  --qrc-accent:#22D3EE; --qrc-on-accent:#03262E;
  --qrc-line:rgba(216,241,247,.14); --qrc-wash:rgba(216,241,247,.07);
  --qrc-ok:#34D399;
}
.qrc-theme-forest{
  --qrc-bg:#0E2B1D; --qrc-bg-soft:rgba(14,43,29,.62);
  --qrc-ink:#E2F6E9; --qrc-sub:#8FBBA3;
  --qrc-accent:#34D399; --qrc-on-accent:#07271A;
  --qrc-line:rgba(226,246,233,.13); --qrc-wash:rgba(226,246,233,.06);
  --qrc-ok:#34D399;
}
.qrc-theme-sunset{
  --qrc-bg:#2B1611; --qrc-bg-soft:rgba(43,22,17,.62);
  --qrc-ink:#FCEBE1; --qrc-sub:#C49C8C;
  --qrc-accent:#FB923C; --qrc-on-accent:#2B1611;
  --qrc-line:rgba(252,235,225,.14); --qrc-wash:rgba(252,235,225,.07);
  --qrc-ok:#34D399;
}
.qrc-theme-sakura{
  --qrc-bg:#FAECF2; --qrc-bg-soft:rgba(250,236,242,.72);
  --qrc-ink:#38222E; --qrc-sub:#9A7182;
  --qrc-accent:#EC4899; --qrc-on-accent:#FFFFFF;
  --qrc-line:rgba(56,34,46,.12); --qrc-wash:rgba(56,34,46,.06);
  --qrc-ok:#0E9F6E;
}
.qrc-theme-mint{
  --qrc-bg:#ECF9F1; --qrc-bg-soft:rgba(236,249,241,.72);
  --qrc-ink:#123227; --qrc-sub:#6E8D80;
  --qrc-accent:#10B981; --qrc-on-accent:#FFFFFF;
  --qrc-line:rgba(18,50,39,.12); --qrc-wash:rgba(18,50,39,.06);
  --qrc-ok:#0E9F6E;
}
.qrc-theme-sky{
  --qrc-bg:#EEF5FC; --qrc-bg-soft:rgba(238,245,252,.72);
  --qrc-ink:#1B2B3D; --qrc-sub:#6F8299;
  --qrc-accent:#2563EB; --qrc-on-accent:#FFFFFF;
  --qrc-line:rgba(27,43,61,.12); --qrc-wash:rgba(27,43,61,.06);
  --qrc-ok:#0E9F6E;
}
/* 石墨：比墨黑明显更亮的中性灰（拉开两档明度，小图里也能区分） */
.qrc-theme-slate{
  --qrc-bg:#262A35; --qrc-bg-soft:rgba(38,42,53,.62);
  --qrc-ink:#EAEEF6; --qrc-sub:#9CA5B8;
  --qrc-accent:#C7D0DE; --qrc-on-accent:#161922;
  --qrc-line:rgba(234,238,246,.13); --qrc-wash:rgba(234,238,246,.06);
  --qrc-ok:#34D399;
}
/* 午夜：饱和靛蓝（与紫夜的紫、海蓝的青拉开色相距离） */
.qrc-theme-midnight{
  --qrc-bg:#131C55; --qrc-bg-soft:rgba(19,28,85,.62);
  --qrc-ink:#E6EAFF; --qrc-sub:#9299D4;
  --qrc-accent:#93C5FD; --qrc-on-accent:#0C1240;
  --qrc-line:rgba(230,234,255,.15); --qrc-wash:rgba(230,234,255,.08);
  --qrc-ok:#34D399;
}

/* ── 品牌主题层：gen 生成器页预设（youtube/tiktok/… 各一页，初始卡即品牌配色）─────────
   变量集与基础主题同构——材质层/组件层零改动自动生效。
   v2 匹配原则「整卡即品牌」：卡面主色直接取品牌识别色——
   强色彩品牌（YouTube/Spotify/SO/Dribbble/LinkedIn/Discord）整卡品牌色，
   accent 反白胶囊（品牌色底上的白按钮，社交产品 Follow 键的通用基因）；
   深色系品牌（TikTok/X/GitHub）保持官方深底，识别色做点睛；Figma 取站点本色（白画布+紫按钮）；
   Instagram 的渐变单独实现（见本节末尾专属规则）；Notion 唯一浅底。
   文字/按钮对比度已按 WCAG 校核（正文 ≥4.5:1，大号粗体 ≥3:1）。
   不进 Step 3 基础配色选择器：品牌是 gen 页起点，点基础配色即覆盖、对 Agent 说品牌名可切回 */
/* YouTube：整卡官方红 #FF0033 × 白字，白胶囊反红字——logo 的红底白字铺满整卡 */
.qrc-brand-youtube{
  --qrc-bg:#FF0033; --qrc-bg-soft:rgba(255,0,51,.62);
  --qrc-ink:#FFFFFF; --qrc-sub:rgba(255,255,255,.88);
  --qrc-accent:#FFFFFF; --qrc-on-accent:#FF0033;
  --qrc-line:rgba(255,255,255,.30); --qrc-wash:rgba(255,255,255,.16);
  --qrc-ok:#FFFFFF;
}
/* TikTok：近黑底（深色系品牌）× 青 #25F4EE 按钮黑字——双色标识的青做主点睛，粉 #FE2C55 藏进 L1 画面层（L1_TEMPLATES.tt，gen 页挂载） */
.qrc-brand-tiktok{
  --qrc-bg:#0C0A10; --qrc-bg-soft:rgba(12,10,16,.62);
  --qrc-ink:#F1F1F5; --qrc-sub:#A09EA9;
  --qrc-accent:#25F4EE; --qrc-on-accent:#0C0A10;
  --qrc-line:rgba(241,241,245,.14); --qrc-wash:rgba(254,44,85,.16);
  --qrc-ok:#34D399;
}
/* Spotify：整卡官方绿 #1DB954 × 黑字（2020 品牌重塑经典组合），黑胶囊亮绿字即「按下即播」 */
.qrc-brand-spotify{
  --qrc-bg:#1DB954; --qrc-bg-soft:rgba(29,185,84,.62);
  --qrc-ink:#0E0E0E; --qrc-sub:rgba(14,14,14,.66);
  --qrc-accent:#0E0E0E; --qrc-on-accent:#1ED760;
  --qrc-line:rgba(14,14,14,.24); --qrc-wash:rgba(14,14,14,.14);
  --qrc-ok:#0E0E0E;
}
/* GitHub：暗夜底 #0D1117 × 代码绿 #3FB950——品牌本身是深色系，绿做点睛（gen 页网格材质致敬贡献图谱） */
.qrc-brand-github{
  --qrc-bg:#0D1117; --qrc-bg-soft:rgba(13,17,23,.62);
  --qrc-ink:#E6EDF3; --qrc-sub:#8B949E;
  --qrc-accent:#3FB950; --qrc-on-accent:#052D13;
  --qrc-line:rgba(230,237,243,.14); --qrc-wash:rgba(63,185,80,.10);
  --qrc-ok:#3FB950;
}
/* Stack Overflow：整卡官方橙 #F48024 × 近黑字——upvote 的橙铺满卡面，深色按钮反橙字 */
.qrc-brand-stackoverflow{
  --qrc-bg:#F48024; --qrc-bg-soft:rgba(244,128,36,.62);
  --qrc-ink:#231505; --qrc-sub:rgba(35,21,5,.68);
  --qrc-accent:#231505; --qrc-on-accent:#F48024;
  --qrc-line:rgba(35,21,5,.28); --qrc-wash:rgba(35,21,5,.14);
  --qrc-ok:#231505;
}
/* Figma：白画布 #FFFFFF × 品牌紫 #A259FF 按钮——figma.com 站点本色（纯白，与纸白的米白拉开） */
.qrc-brand-figma{
  --qrc-bg:#FFFFFF; --qrc-bg-soft:rgba(255,255,255,.72);
  --qrc-ink:#1E1E1E; --qrc-sub:#7A7A85;
  --qrc-accent:#A259FF; --qrc-on-accent:#FFFFFF;
  --qrc-line:rgba(30,30,30,.14); --qrc-wash:rgba(30,30,30,.06);
  --qrc-ok:#0E9F6E;
}
/* Dribbble：整卡品牌粉 #EA4C89 × 近黑字——那个粉铺满卡面，设计师一眼认出 */
.qrc-brand-dribbble{
  --qrc-bg:#EA4C89; --qrc-bg-soft:rgba(234,76,137,.62);
  --qrc-ink:#241B21; --qrc-sub:rgba(36,27,33,.68);
  --qrc-accent:#241B21; --qrc-on-accent:#FFFFFF;
  --qrc-line:rgba(36,27,33,.28); --qrc-wash:rgba(36,27,33,.14);
  --qrc-ok:#241B21;
}
/* Instagram：渐变即品牌——变量只承载玫红锚色与反白按钮，渐变由 L1 画面层承载（L1_TEMPLATES.ig，gen 页挂载） */
.qrc-brand-instagram{
  --qrc-bg:#DD2A7B; --qrc-bg-soft:rgba(221,42,123,.62);
  --qrc-ink:#FFFFFF; --qrc-sub:rgba(255,255,255,.88);
  --qrc-accent:#FFFFFF; --qrc-on-accent:#C13584;
  --qrc-line:rgba(255,255,255,.30); --qrc-wash:rgba(255,255,255,.16);
  --qrc-ok:#FFFFFF;
}
/* X：纯黑 #000 × 白 accent（白底黑字 CTA，Follow 按钮基因；次级灰取官方 #71767B） */
.qrc-brand-x{
  --qrc-bg:#000000; --qrc-bg-soft:rgba(0,0,0,.62);
  --qrc-ink:#E7E9EA; --qrc-sub:#71767B;
  --qrc-accent:#E7E9EA; --qrc-on-accent:#0F1419;
  --qrc-line:rgba(231,233,234,.16); --qrc-wash:rgba(231,233,234,.08);
  --qrc-ok:#34D399;
}
/* LinkedIn：整卡职业蓝 #0A66C2 × 白字（app 图标同款），白胶囊反蓝字 */
.qrc-brand-linkedin{
  --qrc-bg:#0A66C2; --qrc-bg-soft:rgba(10,102,194,.62);
  --qrc-ink:#FFFFFF; --qrc-sub:rgba(255,255,255,.78);
  --qrc-accent:#FFFFFF; --qrc-on-accent:#0A66C2;
  --qrc-line:rgba(255,255,255,.28); --qrc-wash:rgba(255,255,255,.15);
  --qrc-ok:#FFFFFF;
}
/* Notion：唯一浅底品牌（米白 #F7F6F3 × 文字黑 × 链接蓝 #2383E2）——页面本来就像一张纸 */
.qrc-brand-notion{
  --qrc-bg:#F7F6F3; --qrc-bg-soft:rgba(247,246,243,.72);
  --qrc-ink:#37352F; --qrc-sub:#787774;
  --qrc-accent:#2383E2; --qrc-on-accent:#FFFFFF;
  --qrc-line:rgba(55,53,47,.13); --qrc-wash:rgba(55,53,47,.06);
  --qrc-ok:#0E9F6E;
}
/* Discord：整卡 Blurple #5865F2 × 白字（app 图标同款），白胶囊反 Blurple 字 */
.qrc-brand-discord{
  --qrc-bg:#5865F2; --qrc-bg-soft:rgba(88,101,242,.62);
  --qrc-ink:#FFFFFF; --qrc-sub:rgba(255,255,255,.78);
  --qrc-accent:#FFFFFF; --qrc-on-accent:#5865F2;
  --qrc-line:rgba(255,255,255,.28); --qrc-wash:rgba(255,255,255,.15);
  --qrc-ok:#FFFFFF;
}
/* WhatsApp：整卡官方绿 #25D366 × 墨绿字（暗于字底 8:1+），墨绿胶囊反亮绿字——「立即开聊」按钮基因 */
.qrc-brand-whatsapp{
  --qrc-bg:#25D366; --qrc-bg-soft:rgba(37,211,102,.62);
  --qrc-ink:#0B241B; --qrc-sub:rgba(11,36,27,.68);
  --qrc-accent:#0B241B; --qrc-on-accent:#25D366;
  --qrc-line:rgba(11,36,27,.26); --qrc-wash:rgba(11,36,27,.14);
  --qrc-ok:#0B241B;
}
/* Telegram：官方夜间蓝 #17212B（Android 夜间模式同款）× 天空蓝 #2AABEE 点睛——
   中亮度品牌蓝上白字达不到 4.5:1，夜间蓝底既官方又稳过对比红线，白纸飞机在深蓝上最像 Telegram */
.qrc-brand-telegram{
  --qrc-bg:#17212B; --qrc-bg-soft:rgba(23,33,43,.62);
  --qrc-ink:#F5F8FA; --qrc-sub:rgba(245,248,250,.66);
  --qrc-accent:#2AABEE; --qrc-on-accent:#17212B;
  --qrc-line:rgba(245,248,250,.14); --qrc-wash:rgba(42,171,238,.10);
  --qrc-ok:#34D399;
}
/* Reddit：整卡官方橙红 #FF4500 × 官方暗色字 #1A1A1B（dark mode 同款）——
   白字在橙红上只有 3.4:1，官方暗色才是正确答案；暗胶囊反橙红即 upvote */
.qrc-brand-reddit{
  --qrc-bg:#FF4500; --qrc-bg-soft:rgba(255,69,0,.62);
  --qrc-ink:#1A1A1B; --qrc-sub:rgba(26,26,27,.70);
  --qrc-accent:#1A1A1B; --qrc-on-accent:#FF4500;
  --qrc-line:rgba(26,26,27,.26); --qrc-wash:rgba(26,26,27,.14);
  --qrc-ok:#1A1A1B;
}
/* Pinterest：整卡品牌正红 #E60023 × 白字（4.8:1 过线，全品牌里最标准的红白配） */
.qrc-brand-pinterest{
  --qrc-bg:#E60023; --qrc-bg-soft:rgba(230,0,35,.62);
  --qrc-ink:#FFFFFF; --qrc-sub:rgba(255,255,255,.88);
  --qrc-accent:#FFFFFF; --qrc-on-accent:#E60023;
  --qrc-line:rgba(255,255,255,.30); --qrc-wash:rgba(255,255,255,.16);
  --qrc-ok:#FFFFFF;
}
/* Medium：奶油纸 #FAF8F3 × 墨字 #242424 × 官方绿 #1A8917（Follow 按钮同款）——
   写作平台的纸感与衬线气质，与 Notion 的冷白×蓝拉开（Medium 偏暖偏绿） */
.qrc-brand-medium{
  --qrc-bg:#FAF8F3; --qrc-bg-soft:rgba(250,248,243,.72);
  --qrc-ink:#242424; --qrc-sub:#6B6B60;
  --qrc-accent:#1A8917; --qrc-on-accent:#FFFFFF;
  --qrc-line:rgba(36,36,36,.14); --qrc-wash:rgba(36,36,36,.06);
  --qrc-ok:#1A8917;
}
/* Twitch：整卡直播紫 #9146FF × 白字（4.6:1 过线），白胶囊反深紫 #772CE8 字（官方双色） */
.qrc-brand-twitch{
  --qrc-bg:#9146FF; --qrc-bg-soft:rgba(145,70,255,.62);
  --qrc-ink:#FFFFFF; --qrc-sub:rgba(255,255,255,.82);
  --qrc-accent:#FFFFFF; --qrc-on-accent:#772CE8;
  --qrc-line:rgba(255,255,255,.30); --qrc-wash:rgba(255,255,255,.16);
  --qrc-ok:#FFFFFF;
}
/* Instagram / TikTok 卡面画面已迁移 L1（doc/2.card.md 分层：品牌调色板归 L0 变量，
   品牌画面归 L1）：渐变/双色光晕由 L1_TEMPLATES.ig / .tt 承载（gen 页 preset 挂
   layers.l1，说品牌名 Agent 同源挂上）——可移除可换画面，不再是不动产。
   下方 text-shadow 保留：白字落在深色渐变上的可读性增强，跟主题类走 */
.qrc-card.qrc-brand-instagram .qrc-w--title,
.qrc-card.qrc-brand-instagram .qrc-w--note,
.qrc-card.qrc-brand-instagram .qrc-w--domain,
.qrc-card.qrc-brand-instagram .qrc-w--cta--text,
.qrc-card.qrc-brand-instagram .qrc-w--foot{ text-shadow:0 1px 4px rgba(80,10,80,.35); }

/* ── 基座层：容器查询壳 + 卡片容器。cqw 基准在壳（.qrc-shell）上——
   container-type 的 size containment 会把卡面高度锁死（aspect-ratio 定高后
   内容超高必被裁，预览窄卡上字号取整误差即可触发）；挪到壳上后卡面高度
   可随内容自动撑开，任何组件不再被裁（预览即成品，导出同源自适应）。
   流式三件套：字号 cqw + 间距 cqw + 码 cqw——同一公式从 172px 陈列卡到 380px 大图等比缩放；
   safe center：内容少于最小高度时垂直居中，超出时退化为顶部对齐（防御性保留） ── */
.qrc-card, .qrc-card *, .qrc-swatch, .qrc-swatch *{ box-sizing:border-box; }
.qrc-shell{ container-type:inline-size; width:100%; }
.qrc-card{
  position:relative;
  width:100%;
  display:flex; flex-direction:column;
  justify-content:center;
  justify-content:safe center;
  gap:3cqw;
  padding:6% 6.5%;
  background-color:var(--qrc-bg);
  color:var(--qrc-ink);
  border:1px solid var(--qrc-line);
  box-shadow:0 12px 32px -14px rgba(10,8,20,.45);
  border-radius:18px;
  overflow:hidden;
  text-align:center;
  font-family:ui-sans-serif,system-ui,-apple-system,'PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.qrc-slot{ min-width:0; position:relative; z-index:1; }   /* z:1 = 槽位内容恒在装饰层（z:0）之上 */

/* 卡型：实物比例只作最小高度（cqw 引用壳宽 = 卡面宽）——内容装得下时卡面
   即实物比例；装不下自动撑高，不裁任何组件（预览/导出永不受裁） */
.qrc-card--square{ min-height:100cqw; }
.qrc-card--biz{ min-height:63.5cqw; gap:2cqw; padding:4.5% 5%; }
.qrc-card--post{ min-height:141cqw; gap:3.6cqw; }

/* 圆角档位 */
.qrc-card--sharp{ border-radius:6px; }
.qrc-card--round{ border-radius:18px; }
.qrc-card--soft{ border-radius:28px; }

/* 浅色舞台（同一张卡在浅色桌面/纸纹环境检查）；浅色主题在浅色舞台上加深描边 */
.qrc-card--light{ box-shadow:0 18px 40px -20px rgba(20,16,40,.38), 0 1px 2px rgba(20,16,40,.10); }
.qrc-card--light.qrc-theme-paper, .qrc-card--light.qrc-theme-warm,
.qrc-card--light.qrc-theme-sakura, .qrc-card--light.qrc-theme-mint, .qrc-card--light.qrc-theme-sky,
.qrc-card--light.qrc-brand-notion, .qrc-card--light.qrc-brand-figma,
.qrc-card--light.qrc-brand-medium{ border-color:rgba(22,21,26,.20); }

/* 名片太矮：状态槽一律让位（产品规则固化在 CSS） */
.qrc-card--biz .qrc-slot--status{ display:none; }

/* 名片保持横版观感（内容区仅 ≈ 54.5cqw，超出会撑高偏离名片比例）：
   标题/说明一行封顶（横版名片短文案是常态）；
   大标题降为常规字号；CTA 胶囊瘦身——多数卡仍是一张标准名片 */
.qrc-card--biz .qrc-w--title{ -webkit-line-clamp:1; }
.qrc-card--biz .qrc-w--title--lg{ font-size:6cqw; }
.qrc-card--biz .qrc-w--note{ -webkit-line-clamp:1; }
.qrc-card--biz .qrc-w--cta--solid{ padding:1.2cqw 4.5cqw; }

/* 居中方卡 6 组件纵排最挤：两行说明会挤掉进度条以下内容——说明压一行
   （分栏/竖版空间够，不受此条约束） */
.qrc-card--square.qrc-card--classic .qrc-w--note{ -webkit-line-clamp:1; }

/* minimal 极简语义固化：标题/说明一律单行——码是主角，文案克制；
   需要长文案的自然选 classic/split（布局即语义）。预算意义：方卡上
   两行标题 + 全组件 + md/lg 码必溢出（超 12cqw 侵入状态区），
   单行规则让 minimal 全组合落在「最多裁卡脚」承诺内 */
.qrc-card--minimal .qrc-w--title{ -webkit-line-clamp:1; }
.qrc-card--minimal .qrc-w--note{ -webkit-line-clamp:1; }

/* ── 布局层：槽位排列 ─────────────────────────────────────────────────── */
/* classic / minimal：单列纵排（minimal 的槽位顺序由渲染器按布局 order 输出）。

   节奏层（非均距排版，仅 classic）：语义组内收紧、码区前后呼吸、行动组聚拢——
   标题组(title→note 2) < 行动区(码→CTA 3.5) < 码区呼吸(note→码 4)、行动组内(2)，
   6 件套总预算 13.5cqw ≤ 原均距 15cqw；biz 太矮（内容区 ≈54.5cqw）不参与。
   minimal 是「码即画面」：紧排栈（均距 2）与大码白底盒自带的留白
   共同构成呼吸，不再叠节奏 margin——否则方卡 lg 档 + 两行标题会溢出
   1.4cqw（url 卡零裁切红线，码尺寸矩阵按此校核） */
.qrc-card--classic:not(.qrc-card--biz),
.qrc-card--minimal:not(.qrc-card--biz){ gap:2cqw; }
.qrc-card--classic:not(.qrc-card--biz) .qrc-slot--main{ margin-top:2cqw; }
.qrc-card--classic:not(.qrc-card--biz) .qrc-slot--action{ margin-top:1.5cqw; }
/* head 被隐藏时 main 成为首件：吃掉呼吸 margin，居中不整体下坠 */
.qrc-slot--main:first-child{ margin-top:0; }

/* split：两列——主区（码）跨两行居左，行动/状态居右；head/sub/foot 通栏
   行列间距与字号同体系（cqw）；右列全空时（用户隐藏了引导/状态）码通栏居中，不留半边空白。
   对齐：通栏文字（标题/说明/卡脚）回归卡面居中谱系（海报/名片的正文主轴居中，
   2026-08 用户走查反馈“方卡标题不居中”）；右列行动组件跟随居中——两列各自成轴，
   真想左对齐随时在 Step 3 把标题切「居左」（--left 类显式声明，不再依赖容器继承） */
.qrc-card--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:5%; row-gap:3cqw;
  align-content:center;
  align-content:safe center;
}
.qrc-card--split .qrc-slot--head,
.qrc-card--split .qrc-slot--sub,
.qrc-card--split .qrc-slot--foot{ grid-column:1 / -1; }
.qrc-card--split .qrc-slot--main{
  grid-row:span 2;
  display:flex; align-items:center; justify-content:center;
}
.qrc-card--split:not(:has(.qrc-slot--action, .qrc-slot--status)) .qrc-slot--main{
  grid-column:1 / -1; grid-row:auto;
}
.qrc-card--biz.qrc-card--split{ row-gap:2cqw; }
/* 右列行动/状态在行轨内垂直居中：与左侧码的视觉重心呼应
   （状态隐藏时 CTA 不再孤悬右上角） */
.qrc-card--split .qrc-slot--action,
.qrc-card--split .qrc-slot--status{ align-self:center; }

/* 角标槽：浮层定位，不占排版空间。放右下角而不是右上角——居中标题永远向两侧
   吃满可用宽度（padding 让位防不住长标题第一行撞角标，如「周末读书会 · 报名」×「开放」）；
   右下角与各布局天然错开：卡脚是居中窄行、split 状态列垂直居中、minimal 大码居中，
   都不进右下角区——徽章成了收尾的status chip，眼动路径（标题→码→CTA→状态）也更顺 */
.qrc-slot--badge{ position:absolute; bottom:4.5%; right:5%; z-index:2; }
/* head/sub 都隐藏时 main 紧随浮层角标（DOM 上非首子元素）：吃掉呼吸 margin，
   居中不整体下坠 */
.qrc-slot--badge + .qrc-slot--main{ margin-top:0; }

/* ── 组件层（BEM）：每个 widget 一块 ─────────────────────────────────── */

/* 二维码：白底铁律；码区样式 plain 素白 / frame 描边 / float 悬浮 */
.qrc-w--qr{ display:flex; justify-content:center; }
.qrc-w__qr-box{
  background:#FFFFFF;
  border-radius:3cqw;
  padding:2.6cqw;
  min-width:10px;
}
.qrc-w--qr--frame .qrc-w__qr-box{ border:1px solid var(--qrc-line); }
.qrc-w--qr--float .qrc-w__qr-box{
  box-shadow:0 12px 28px -10px rgba(10,8,20,.38), 0 0 0 1px rgba(255,255,255,.07);
}
.qrc-w--qr--plain .qrc-w__qr-box{ border:none; box-shadow:none; }

/* 展示标题：两行封顶（超长 ellipsis 截断；输入端同步限 24 字，这里是最后一道防线）；
   overflow-wrap:anywhere 让连续长串（URL 型标题）也能折行，不横向撑破卡面。
   line-clamp 双路径：-webkit-box 是旧引擎截断 hack（旧 flex 模型下 text-align 对
   匿名文本项不生效——标题会左偏）；支持标准 line-clamp 的引擎一律回 block，
   对齐交给常规 text-align（继承卡面 center / --left 显式覆盖） */
.qrc-w--title{
  font-weight:800; line-height:1.28; letter-spacing:.01em;
  overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:2;
}
@supports (line-clamp: 2){
  .qrc-w--title{ display:block; line-clamp:2; }
}
.qrc-w--title--sm{ font-size:4.6cqw; }
.qrc-w--title--md{ font-size:6cqw; }
.qrc-w--title--lg{ font-size:7.2cqw; }
.qrc-w--title--left{ text-align:left; }

/* 说明文字（行数截断；anywhere 折行防长链接撑宽）——截断双路径同标题 */
.qrc-w--note{ color:var(--qrc-sub); font-size:3.7cqw; line-height:1.55; overflow-wrap:anywhere; }
.qrc-w--note--l1, .qrc-w--note--l2{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
}
@supports (line-clamp: 2){
  .qrc-w--note--l1, .qrc-w--note--l2{ display:block; }
  .qrc-w--note--l1{ line-clamp:1; }
  .qrc-w--note--l2{ line-clamp:2; }
}
.qrc-w--note--l1{ -webkit-line-clamp:1; }
.qrc-w--note--l2{ -webkit-line-clamp:2; }

/* 域名（链接卡）：hostname 是连续字符不折行——单行截断，长域名不再横向溢出卡面 */
.qrc-w--domain{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:3.5cqw; color:var(--qrc-sub); letter-spacing:.02em;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.qrc-w--domain--pill{
  display:inline-block;
  padding:.9cqw 3.2cqw; border-radius:999px;
  background:var(--qrc-wash); border:1px solid var(--qrc-line);
}

/* 行动引导：solid 实底胶囊 / text 强调色文字 */
.qrc-w--cta{ font-weight:700; font-size:4.1cqw; overflow-wrap:anywhere; }
.qrc-w--cta--solid{
  display:inline-block;
  padding:2cqw 6cqw; border-radius:999px;
  background:var(--qrc-accent); color:var(--qrc-on-accent);
  box-shadow:0 8px 20px -10px rgba(10,8,20,.4);
}
.qrc-w--cta--text{ color:var(--qrc-accent); }

/* 状态条（名额进度） */
.qrc-w--progress{ width:100%; max-width:78cqw; margin:0 auto; }
.qrc-card--split .qrc-w--progress{ max-width:none; }
.qrc-w__row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:3.3cqw; font-weight:600; color:var(--qrc-sub);
  margin-bottom:1.4cqw;
}
.qrc-w__num{ color:var(--qrc-ink); font-weight:800; font-size:3.6cqw; }
.qrc-w__bar{
  height:1.5cqw; min-height:5px; border-radius:999px;
  background:var(--qrc-wash); overflow:hidden;
}
.qrc-w__fill{
  height:100%; border-radius:inherit;
  background:var(--qrc-accent);
  transition:width .35s ease;
}

/* 状态徽章：auto 跟随状态（开放=绿）/ brand 品牌强调色 */
.qrc-w--badge{
  display:inline-flex; align-items:center; gap:1.4cqw;
  padding:1.1cqw 3.2cqw; border-radius:999px;
  font-size:3.1cqw; font-weight:700; line-height:1.4;
  background:color-mix(in srgb, var(--qrc-ok) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--qrc-ok) 35%, transparent);
  color:var(--qrc-ok);
}
.qrc-w--badge .qrc-w__dot{
  width:1.6cqw; height:1.6cqw; min-width:5px; min-height:5px;
  border-radius:50%; background:currentColor; flex:none;
}
.qrc-w--badge--brand{
  background:color-mix(in srgb, var(--qrc-accent) 14%, transparent);
  border-color:color-mix(in srgb, var(--qrc-accent) 38%, transparent);
  color:var(--qrc-accent);
}

/* 卡脚：截止信息（用户自己的内容；无内容时组件不渲染，宣传语不上卡面） */
.qrc-w--foot{
  font-size:3cqw; color:var(--qrc-sub);
}
.qrc-w__foot-text{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── 材质层：与配色主题自由组合（standalone 类，卡片与色板共用） ──────── */

/* 纸纹：黑白双向噪点（深浅主题上都可见的纸面颗粒） */
.qrc-mat-paper{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0 0 0 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.05 0 0 0 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 玻璃：半透明底 + 磨砂模糊 + 高光（主题提供 --qrc-bg-soft） */
.qrc-mat-glass{
  background-color:var(--qrc-bg-soft);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 62%),
    radial-gradient(130% 100% at 88% -12%, rgba(255,255,255,.16), transparent 55%);
  backdrop-filter:blur(14px) saturate(1.45);
  -webkit-backdrop-filter:blur(14px) saturate(1.45);
  border-color:color-mix(in srgb, var(--qrc-ink) 22%, transparent);
}

/* 金属：拉丝纹理（水平细纹，黑白双向）+ 斜向高光 */
.qrc-mat-metal{
  background-image:
    linear-gradient(112deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 55%, rgba(255,255,255,.07) 70%, rgba(255,255,255,0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='80'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.26 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='80' filter='url(%23b)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='80'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.10 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='80' filter='url(%23b)'/%3E%3C/svg%3E");
}

/* 亚麻：十字织纹（经纬细线） */
.qrc-mat-linen{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 6h12' stroke='%23000' stroke-opacity='.05' stroke-width='1'/%3E%3Cpath d='M6 0v12' stroke='%23000' stroke-opacity='.05' stroke-width='1'/%3E%3Cpath d='M0 3h12' stroke='%23fff' stroke-opacity='.06' stroke-width='1'/%3E%3Cpath d='M3 0v12' stroke='%23fff' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
}

/* 圆点：波尔卡圆点（黑白双向错位，深浅主题都成立） */
.qrc-mat-dots{
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1.1px, transparent 1.6px),
    radial-gradient(rgba(0,0,0,.07) 1.1px, transparent 1.6px);
  background-size:16px 16px;
  background-position:0 0, 8px 8px;
}

/* 网格：方格纸（黑白双向细线） */
.qrc-mat-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size:20px 20px;
}

/* 斜纹：45° 细条纹（双向） */
.qrc-mat-stripes{
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.055) 0 1px, transparent 1px 7px);
}

/* 波浪：连续波线（黑白双向，相位错开半周期） */
.qrc-mat-waves{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath d='M0 4 Q 8 0 16 4 T 32 4' fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='1.2'/%3E%3Cpath d='M0 12 Q 8 8 16 12 T 32 12' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* 木纹：竖向低频扰动（带色材质——棕色纹理在任何底色上都是木） */
.qrc-mat-wood{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,.05)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.16' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.28 0 0 0 0 0.14 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* 石纹：粗颗粒岩石（颗粒比纸纹大一倍，turbulence 多八度） */
.qrc-mat-stone{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0 0 0 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.06 0 0 0 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)'/%3E%3C/svg%3E");
}

/* 皮革：斑块纹理（turbulence 细胞感）+ 顶部柔光 */
.qrc-mat-leather{
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.07), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.09' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23l)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.09' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.05 0 0 0 0'/%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23l)'/%3E%3C/svg%3E");
}

/* 珠光：低饱和彩虹光泽扫过卡面（金属烫印的虹彩） */
.qrc-mat-holo{
  background-image:linear-gradient(115deg, rgba(167,139,250,.15) 0%, rgba(96,165,250,.11) 20%, rgba(110,231,183,.12) 42%, rgba(252,211,77,.10) 62%, rgba(251,146,60,.11) 78%, rgba(244,114,182,.12) 92%);
}

/* ── 画面层 L1（doc/2.card.md 影响分层）：AI 生成的整卡气质舞台 ─────────────
   定位契约与角部插画（.qrc-deco）同构：absolute 铺满卡面、z:0、不进排版流、
   pointer-events:none——内容高度预算零改动，槽位（z:1）恒在其上，码区白底
   铁律天然盖住伸入的元素，可扫性无虞（结构性保证，不靠画面自觉）。
   双产物：画面 html（自包含、无脚本、cqw 尺寸语言、t=0 完整）+ palette 提案
   （--qrc-* 变量集，渲染器 inline 覆写卡根→L2 全体组件自动换装；码色是
   QR_COLORS 封闭六档且走 prop 传入，palette 想覆盖也覆盖不了——红线 R1）。
   透明画面（无实底 div）让 L0 材质纹理透出（材质增强画面）；实底画面则按
   覆盖权单向公理压过材质——两种都合法，画面自己决定。
   被卡面 overflow:hidden + border-radius 自动裁形：L1 无权改变物理形状。 */
.qrc-l1{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.qrc-l1 *{ box-sizing:border-box; }

/* ── 装饰层：角部扁平插画（绝对定位浮层，不进排版流——内容高度预算零改动）
   分工与材质层一致：形状在 JS（qrcard-workbench.js DECOS，内联 SVG），
   颜色在这里且只认主题变量——.da 主形强调色 / .di 次形墨色弱化 / .ds 墨色细线，
   24 主题 × 12 材质自动联动（变量集同构原则）；tone=mono（--mono）全墨线稿感。
   自由度（2026-08 用户反馈「插画与文字冲突且无法调整」）：位置八向
   （tl/t/tr/l/r/bl/b/br，style.decoPos 覆盖款式出厂锚点）× 大小三档
   （style.decoScale，md=默认尺寸）——打架就挪开/缩小的主动权在用户手里。
   完整内收不出血；槽位内容 z:1 恒在插画之上，码区白底铁律天然盖住伸入
   的插画，可扫性无虞（结构性保证，不靠位置自觉） */
.qrc-deco{ position:absolute; z-index:0; pointer-events:none; width:32cqw; aspect-ratio:1; }
.qrc-deco svg{ display:block; width:100%; height:100%; }
/* 四角（款式出厂锚点全在这四向；边距与内收契约不变） */
.qrc-deco--tl{ top:4.5%; left:5%; }
.qrc-deco--tr{ top:4.5%; right:5%; }
.qrc-deco--bl{ bottom:4.5%; left:5%; }
.qrc-deco--br{ bottom:4.5%; right:5%; }
/* 四边中点：transform 居中不占位（与四角同一 inset 基准） */
.qrc-deco--t{ top:4.5%; left:50%; transform:translateX(-50%); }
.qrc-deco--b{ bottom:4.5%; left:50%; transform:translateX(-50%); }
.qrc-deco--l{ left:5%; top:50%; transform:translateY(-50%); }
.qrc-deco--r{ right:5%; top:50%; transform:translateY(-50%); }
/* 大小三档：md 与无修饰类同值（旧卡无 decoScale 字段零迁移） */
.qrc-deco--sm{ width:20cqw; }
.qrc-deco--md{ width:32cqw; }
.qrc-deco--lg{ width:46cqw; }
/* 卡型分档：名片矮卡插画收小免喧宾夺主；竖版余量大一档。
   每档都写卡型变体——档位类(0,1,0) 压不过卡型选择器(0,2,0)，同优先级
   后来居上，顺序不可乱 */
.qrc-card--biz .qrc-deco{ width:22cqw; }
.qrc-card--biz .qrc-deco--sm{ width:14cqw; }
.qrc-card--biz .qrc-deco--md{ width:22cqw; }
.qrc-card--biz .qrc-deco--lg{ width:32cqw; }
.qrc-card--post .qrc-deco{ width:38cqw; }
.qrc-card--post .qrc-deco--sm{ width:24cqw; }
.qrc-card--post .qrc-deco--md{ width:38cqw; }
.qrc-card--post .qrc-deco--lg{ width:54cqw; }
.qrc-deco .da, .qrc-deco-mini .da{ fill:var(--qrc-accent); opacity:.85; }
.qrc-deco .di, .qrc-deco-mini .di{ fill:var(--qrc-ink); opacity:.3; }
.qrc-deco .ds{ fill:none; stroke:var(--qrc-ink); opacity:.32; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.qrc-deco--mono .da, .qrc-deco-mini--mono .da{ fill:var(--qrc-ink); opacity:.5; }
.qrc-deco--mono .di, .qrc-deco-mini--mono .di{ opacity:.24; }
.qrc-deco--mono .ds{ stroke:var(--qrc-ink); opacity:.3; }

/* 插画迷你预览（Step 3 swatch）：与真卡同一份内联 SVG + 同一套 da/di/ds 取色规则——
   swatch 容器自带主题类，预览色即成品色（与配色/材质 swatch 同一证据源模式） */
.qrc-deco-mini{ width:22px; height:22px; display:block; }
.qrc-deco-mini .ds{ fill:none; stroke:var(--qrc-ink); opacity:.32; stroke-width:5; stroke-linecap:round; }

/* ── 迷你预览（Step 2/3 选择器）：与真卡共用主题与材质类 ──────────────── */
.qrc-swatch{
  position:relative;
  height:52px;
  border-radius:10px;
  border:1px solid var(--qrc-line);
  background-color:var(--qrc-bg);
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.qrc-swatch-bar{ height:4px; border-radius:2px; }
.qrc-swatch-bar--a{ width:46%; background:var(--qrc-ink); opacity:.85; }
/* b 条用强调色（而非次级灰）：52px 小图里，强调色是主题间最醒目的差异通道 */
.qrc-swatch-bar--b{ width:30%; background:var(--qrc-accent); opacity:.75; }
.qrc-swatch-qr{ position:relative; width:18px; height:18px; border-radius:3px; background:#fff; }
.qrc-swatch-qr::after{
  content:'';
  position:absolute; inset:3px; border-radius:1px;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(15,13,20,.82) 2px 4px),
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(15,13,20,.82) 2px 4px);
  background-size:4px 4px;
}

/* ── 动效降级 ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .qrc-card, .qrc-w__fill{ transition:none !important; }
}