/* KKK 买家前台 v3「卡券」精修层(2026-10-04 Claude;同日按四路复审 r1 修订,注释里的 design-n / brand-n / robust-n / a11y-n 是复审编号)
   只在 <html class="kkk-ui kui-v3"> 下生效,叠在 kkk-polish.css 之后;不带 kui-v3 时整份文件对页面没有任何影响。
   设计说明见 polish/V3_DESIGN.md。要点:
     · KKK 卖的是卡密,商品做成一张张「券」:票面 + 虚线撕口 + 右侧价格存根;选中像「检票」——存根变墨青。
     · 底是纸:暖灰白纸面 + 极淡点阵,去掉四角大光晕;只在页顶留一条很淡的青绿晨光。
     · 磨砂只留顶栏、弹窗、手机底部支付栏;其余是实心白卡 + 细线 + 两层柔影。
     · 价格用系统自带的票面数字字体(Bahnschrift / DIN Alternate),不加载网络字体。
     · 只动展示:不改下单/支付/取卡,不移动节点;电脑端几何(三块竖叠、70% 居中、三列框内滚、标签在左)和密度都贴近现行 v2。
   老内核退路:不用 clamp()/:has();不认 flex gap 的内核由第 16 节 @supports not (inset:0) 段用外边距补间距;不支持模糊时磨砂退成实色。 */

/* ==================== 1. 设计变量 ==================== */
html.kkk-ui.kui-v3 {
  --v-paper: #f3f4f0;
  --v-card: #ffffff;
  --v-sunk: #f5f6f3;
  --v-stub: #fafaf7;                                /* 价格存根:和纸同色系的暖白(design-15) */
  --v-ink: #16201e;
  --v-ink2: #4a5552;
  --v-ink3: #646d6a;                                /* 白底 5.33:1、浅底 4.92:1(a11y-3,原 #7d8784 只有 3.7) */
  --v-line: rgba(22, 32, 30, .09);
  --v-line2: rgba(22, 32, 30, .14);
  --v-teal: #06988b;
  --v-teal-d: #05796f;
  --v-teal-ink: #0b4a44;
  --v-teal-dd: #046d64;                             /* 浅青底/白底上的小号按钮字,4.8~5.2:1(r2 guard-4) */
  --v-teal-soft: rgba(6, 152, 139, .10);
  --v-teal-ring: rgba(6, 152, 139, .20);
  --v-price: #f04a25;
  --v-red: #d4401f;
  --v-amber: #b25e00;                               /* 同底层,白底 4.67:1(a11y-12) */
  --v-num: "Bahnschrift", "DIN Alternate", "DIN Pro", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --v-sh1: 0 1px 2px rgba(16, 40, 36, .05), 0 10px 28px -16px rgba(16, 40, 36, .22);
  --v-sh2: 0 2px 6px rgba(16, 40, 36, .06), 0 18px 36px -18px rgba(16, 40, 36, .32);
  --v-ease: cubic-bezier(.2, .8, .2, 1);
  --v-spring: cubic-bezier(.32, .72, 0, 1);
  --v-t1: .16s;                                     /* 动效时长令牌(design-12):颜色/描边 */
  --v-t2: .24s;                                     /* 位移/弹出 */
  --v-t3: .36s;                                     /* 进场/跳动 */
  /* 主按钮:字形上沿起白字 ≥4.5:1;悬停越来越深(a11y-5 / r2 guard-3) */
  --v-btn: linear-gradient(180deg, #08867b 0%, #06837a 55%, #05796f 100%);
  --v-btn-hi: linear-gradient(180deg, #078c80 0%, #05796f 55%, #046d64 100%);
  /* 把底层(kkk-polish.css)用到的设计变量改成纸面材质:这样底层的大部分组件自动换装,新层只补差异 */
  --k-bg: var(--v-paper);
  --k-glass: var(--v-card);
  --k-glass-strong: var(--v-card);
  --k-glass-input: var(--v-card);
  --k-card: var(--v-card);
  --k-fill: var(--v-sunk);
  --k-stroke: var(--v-line2);
  --k-stroke-soft: var(--v-line);
  --k-line: var(--v-line);
  --k-ink: var(--v-ink);
  --k-ink2: var(--v-ink2);
  --k-ink3: var(--v-ink3);
  --k-price: var(--v-price);
  --k-red: var(--v-red);
  --k-orange: var(--v-amber);
  --k-shadow: var(--v-sh1);
  --k-shadow-soft: 0 1px 2px rgba(16, 40, 36, .05);
  --k-inset: 0 0 0 0 transparent;
  --k-blur: none;
  --k-btn-tint: var(--v-btn);
  --k-btn-tint-hi: var(--v-btn-hi);
  --k-btn-shadow: 0 6px 14px -8px rgba(5, 121, 111, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
  /* 纸面 + 页顶一条很淡的青绿晨光(随页面滚走,不是固定的光晕) */
  background: linear-gradient(180deg, rgba(6, 152, 139, .11) 0, rgba(6, 152, 139, .04) 180px, rgba(6, 152, 139, 0) 420px) 0 0 / 100% 420px no-repeat, var(--v-paper) !important;
}
html.kkk-ui.kui-v3.kui-pc { --k-r-card: 14px; --k-r-ctl: 10px; }
html.kkk-ui.kui-v3.kui-m { --k-r-card: 20px; --k-r-ctl: 12px; }
/* 点阵票据底纹(固定在屏幕上,极淡);四角光晕去掉 */
html.kkk-ui.kui-v3 body::before {
  background: radial-gradient(rgba(22, 60, 54, .075) 1px, transparent 1.4px) 0 0 / 22px 22px;
}
html.kkk-ui.kui-v3 body::after { display: none; }
html.kkk-ui.kui-v3 ::selection { background: rgba(6, 152, 139, .20); color: var(--v-ink); }
html.kkk-ui.kui-v3 ::-webkit-scrollbar-thumb { background: rgba(22, 60, 54, .20); }
html.kkk-ui.kui-v3 ::-webkit-scrollbar-thumb:hover { background: rgba(22, 60, 54, .34); }
html.kkk-ui.kui-v3 body { color: var(--v-ink); text-rendering: optimizeLegibility; }

/* ==================== 2. 顶栏 ==================== */
html.kkk-ui.kui-v3 .top {
  background: rgba(14, 19, 21, .90) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px -16px rgba(0, 0, 0, .6);
}
/* 顶栏里的两处橙统一(design-18) */
html.kkk-ui.kui-v3 .top .right span, html.kkk-ui.kui-v3.kui-pc .top .kui-quick a.kui-warn { color: #ff9a80 !important; }
html.kkk-ui.kui-v3 .top .right span { font-weight: 600; }
/* 电脑顶栏回到 v2 的 36px(brand-1) */
html.kkk-ui.kui-v3.kui-pc .top { height: 36px; line-height: 36px; padding: 0 28px; font-size: 13px; }
html.kkk-ui.kui-v3.kui-pc .top .kui-quick a {
  position: relative; height: 36px; line-height: 36px; padding: 0 12px; font-size: 13px !important; letter-spacing: .02em;
  transition: color var(--v-t1) ease;
}
/* 悬停时下面滑出一条细线(从左往右) */
html.kkk-ui.kui-v3.kui-pc .top .kui-quick a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 1.5px; border-radius: 1px;
  background: currentColor; opacity: .85; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--v-t2) var(--v-ease);
}
html.kkk-ui.kui-v3.kui-pc .top .kui-quick a:hover { background: transparent !important; }
html.kkk-ui.kui-v3.kui-pc .top .kui-quick a:hover::after { transform: scaleX(1); }
html.kkk-ui.kui-v3.kui-pc .top .right { font-size: 13px; color: rgba(255, 255, 255, .62); }

/* ==================== 3. 卡片材质:实心白纸 + 细线 + 两层柔影(不再模糊) ==================== */
html.kkk-ui.kui-v3.kui-m .banner, html.kkk-ui.kui-v3.kui-m .buyClass, html.kkk-ui.kui-v3.kui-m .PayContent,
html.kkk-ui.kui-v3.kui-pc .banner, html.kkk-ui.kui-v3.kui-pc .PayContent {
  background: var(--v-card) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--v-line) !important;
  box-shadow: var(--v-sh1) !important;
}
html.kkk-ui.kui-v3.kui-m .content::before, html.kkk-ui.kui-v3.kui-pc .content::before {
  background: var(--v-card);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--v-line);
  box-shadow: var(--v-sh1);
}

/* ==================== 4. 店铺头 ==================== */
html.kkk-ui.kui-v3 .seller_logo {
  border-radius: 14px !important; background: #e8f2ef !important;
  box-shadow: 0 0 0 1px var(--v-line2), 0 8px 18px -10px rgba(16, 40, 36, .55) !important;
}
html.kkk-ui.kui-v3 .seller_name { color: var(--v-ink) !important; letter-spacing: .01em; }
html.kkk-ui.kui-v3 .qq { color: var(--v-ink2) !important; }                     /* 可点的 QQ 链接,用深灰(a11y-3) */
/* 电脑:一行——头像 / 店名 / 公告条 / 一组分段按钮;密度回到 v2(brand-1) */
html.kkk-ui.kui-v3.kui-pc body > .banner { margin-top: 18px !important; }
html.kkk-ui.kui-v3.kui-pc .banner { padding: 14px 18px; gap: 10px 16px; }
html.kkk-ui.kui-v3.kui-pc .seller_logo { width: 48px; height: 48px !important; }
html.kkk-ui.kui-v3.kui-pc .seller_name { font-size: 20px !important; font-weight: 700; line-height: 1.3; }
html.kkk-ui.kui-v3.kui-pc .qq { font-size: 12.5px; margin-top: 2px !important; }
/* 公告条:KKK 的暖色提示(和客服面板的「注意」同一套,brand-4)+ 左侧小喇叭。
   marquee 在内边距盒处裁切文字:用透明的左右边框给喇叭和右端头让位,文字滚到两端被干净裁掉,不再压过喇叭;描边改用外阴影(design-2) */
html.kkk-ui.kui-v3.kui-pc .banner .gd {
  height: 32px; line-height: 32px; padding: 0 !important; border-radius: 999px;
  border: 0 !important; border-left: 38px solid transparent !important; border-right: 16px solid transparent !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b25e00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10v4a1 1 0 0 0 1 1h2.5L12 19V5L7.5 9H5a1 1 0 0 0-1 1z'/><path d='M15.5 9a4.2 4.2 0 0 1 0 6'/><path d='M18.3 6.3a8 8 0 0 1 0 11.4'/></svg>") 14px 50% / 16px 16px no-repeat, #fff8ee !important;
  background-origin: border-box !important;
  box-shadow: 0 0 0 1px rgba(240, 163, 58, .30);
  -webkit-mask-image: none; mask-image: none;
}
html.kkk-ui.kui-v3.kui-pc .banner .gd .spp { color: #7a4a00 !important; font-size: 13px !important; font-weight: 500; }
/* 四个操作按钮收成一组分段按钮 */
html.kkk-ui.kui-v3.kui-pc .banner > div:not(.seller_content):not(.clear):not(.kui-quick) > div {
  gap: 2px; padding: 3px; border-radius: 12px; background: var(--v-sunk); border: 1px solid var(--v-line);
}
html.kkk-ui.kui-v3.kui-pc .banner .layui-btn {
  height: 30px !important; line-height: 30px !important; padding: 0 12px !important; border-radius: 9px;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--v-ink2) !important; font-weight: 600;
  transition: background-color var(--v-t1) ease, color var(--v-t1) ease, box-shadow var(--v-t1) ease;
}
html.kkk-ui.kui-v3.kui-pc .banner .layui-btn:hover {
  background: var(--v-card) !important; color: var(--v-teal-d) !important;
  box-shadow: 0 1px 2px rgba(16, 40, 36, .08), 0 4px 10px -6px rgba(16, 40, 36, .25) !important;
}
/* 底层材质层用 #complaint(带 ID、权重高)把它写成了白底,在分段按钮里会像「被选中」——这里同样用 ID 压回透明 */
html.kkk-ui.kui-v3.kui-pc .banner #complaint { background: transparent !important; color: var(--v-red) !important; }
html.kkk-ui.kui-v3.kui-pc .banner #complaint:hover { background: var(--v-card) !important; color: var(--v-red) !important; }
/* 手机:头像 + 店名 + 查询 */
html.kkk-ui.kui-v3.kui-m .banner { padding: 16px; }
html.kkk-ui.kui-v3.kui-m .seller_logo { width: 56px; height: 56px !important; }
html.kkk-ui.kui-v3.kui-m .seller_name { font-size: 18px !important; }
html.kkk-ui.kui-v3.kui-m .banner .layui-btn {
  height: 34px !important; line-height: 34px !important; padding: 0 14px !important;
  background: var(--v-teal-soft) !important; border: 0 !important; box-shadow: none !important; color: var(--v-teal-d) !important;
}
html.kkk-ui.kui-v3.kui-m .banner #complaint { background: rgba(212, 64, 31, .08) !important; color: var(--v-red) !important; }
/* 手机快捷入口:白色细边胶囊 */
html.kkk-ui.kui-v3.kui-m .kui-quick { gap: 8px; margin: 12px 12px 0; }
html.kkk-ui.kui-v3.kui-m .kui-quick a {
  height: 34px; line-height: 32px; padding: 0 15px; background: var(--v-card) !important;
  border: 1px solid var(--v-line2) !important; box-shadow: 0 1px 2px rgba(16, 40, 36, .04);
  color: var(--v-ink2) !important; font-weight: 600; font-size: 13.5px !important;
}
html.kkk-ui.kui-v3.kui-m .kui-quick a.kui-warn { color: var(--v-red) !important; }

/* ==================== 5. 商品区标题行 + 搜索 ==================== */
html.kkk-ui.kui-v3.kui-pc .content { padding: 16px 18px; }
html.kkk-ui.kui-v3 .content .layui-icon-cart-simple { color: var(--v-teal) !important; }
html.kkk-ui.kui-v3 .content .layui-icon-cart-simple span { color: var(--v-ink) !important; font-weight: 700 !important; letter-spacing: .01em; }
html.kkk-ui.kui-v3.kui-pc .content .layui-icon-cart-simple span { font-size: 15px !important; }   /* 和购买栏的分段标题同级同号(design-7) */
/* 「在售商品 283 个」做成浅青胶囊,数字用票面字体;模板行内写了 line-height:35px/margin-left:10px,要带 !important(robust-3) */
html.kkk-ui.kui-v3 .content #goodsCount {
  font-family: var(--v-num) !important; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--v-teal-d) !important;
}
html.kkk-ui.kui-v3.kui-pc .content > div:first-child > div > span {
  display: inline-block; height: 24px; line-height: 24px !important; margin-left: 8px !important; padding: 0 10px; border-radius: 999px;
  background: var(--v-teal-soft); color: var(--v-teal-d) !important; font-size: 12.5px !important; vertical-align: 1px;
}
/* 搜索:左侧放大镜,按钮嵌在框内右侧 */
html.kkk-ui.kui-v3 #goodsName {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646d6a' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4 4'/></svg>") 12px 50% / 16px 16px no-repeat, var(--v-sunk) !important;
  border: 1px solid var(--v-line) !important; padding-left: 36px !important; color: var(--v-ink) !important;
  transition: border-color var(--v-t1) ease, box-shadow var(--v-t1) ease, background-color var(--v-t1) ease;
}
html.kkk-ui.kui-v3 #goodsName:focus {
  background-color: var(--v-card) !important; border-color: var(--v-teal) !important;
  box-shadow: 0 0 0 3px rgba(6, 152, 139, .26) !important;
}
html.kkk-ui.kui-v3.kui-pc .kui-search { width: 320px; }
html.kkk-ui.kui-v3.kui-pc #goodsName { height: 32px !important; line-height: 32px !important; border-radius: 9px !important; }
html.kkk-ui.kui-v3.kui-pc #searchGoods { top: 3px; right: 3px !important; height: 26px !important; line-height: 24px !important; border-radius: 7px; padding: 0 12px; }
html.kkk-ui.kui-v3.kui-m #goodsName { height: 44px !important; line-height: 44px !important; border-radius: 12px !important; }
html.kkk-ui.kui-v3.kui-m #searchGoods { top: 10px; right: 5px !important; height: 34px !important; line-height: 32px !important; border-radius: 9px; }
/* 次级按钮(搜索 / 立即搜索 / 上一组 / 下一组):白底青边青字粗体。实心青只留给选中态和支付按钮(design-3);
   不用浅青底,否则和旁边浅青底的说明标签长得一样、分不清哪个能点(r2 look-1)。
   悬停规则带 ID,才压得过模板全局的 a:hover{color:#fff!important} */
html.kkk-ui.kui-v3 #searchGoods, html.kkk-ui.kui-v3 #pick_search,
html.kkk-ui.kui-v3 #jiaose_box #getS.kui-plain, html.kkk-ui.kui-v3 #jiaose_box #getE.kui-plain {
  background: var(--v-card) !important; color: var(--v-teal-dd) !important;
  border: 1px solid rgba(6, 152, 139, .45) !important; box-shadow: 0 1px 2px rgba(16, 40, 36, .08) !important; font-weight: 600 !important;
  transition: background-color var(--v-t1) ease;
}
html.kkk-ui.kui-v3 #searchGoods i, html.kkk-ui.kui-v3 #pick_search i { color: inherit !important; }
html.kkk-ui.kui-v3 #searchGoods:hover, html.kkk-ui.kui-v3 #pick_search:hover,
html.kkk-ui.kui-v3 #jiaose_box #getS.kui-plain:hover, html.kkk-ui.kui-v3 #jiaose_box #getE.kui-plain:hover {
  background: rgba(6, 152, 139, .16) !important; color: var(--v-teal-dd) !important;
}

/* ==================== 6. 分类胶囊 ==================== */
html.kkk-ui.kui-v3 .cat li {
  background: var(--v-card); border: 1px solid var(--v-line2); color: var(--v-ink2); box-shadow: none;
  transition: background-color var(--v-t1) ease, border-color var(--v-t1) ease, color var(--v-t1) ease, transform var(--v-t1) var(--v-spring);
}
html.kkk-ui.kui-v3.kui-pc .cat ul { gap: 6px; }
html.kkk-ui.kui-v3.kui-pc .cat { margin-top: 12px; }
html.kkk-ui.kui-v3.kui-pc .cat li { height: 28px; line-height: 26px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
html.kkk-ui.kui-v3.kui-pc .cat li:hover { background: var(--v-teal-soft); border-color: rgba(6, 152, 139, .35); color: var(--v-teal-d); }
html.kkk-ui.kui-v3 .cat li:active { transform: scale(.96); }
html.kkk-ui.kui-v3 .cat li.select, html.kkk-ui.kui-v3.kui-pc .cat li.select:hover {
  background: var(--v-teal-d); border-color: var(--v-teal-d); color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px -8px rgba(5, 121, 111, .8);
}
/* 手机分类条:各往里收 1px,露出卡片描边(design-9 / brand-7);底已是 .94 白,不再模糊 */
html.kkk-ui.kui-v3.kui-m .cat {
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: none; backdrop-filter: none;
  margin-left: -13px !important; margin-right: -13px !important; padding-left: 13px !important; padding-right: 13px !important;
}
html.kkk-ui.kui-v3.kui-m .cat li { height: 36px; line-height: 34px; font-size: 14px; }

/* ==================== 7. 商品券 ==================== */
/* 券夹:浅灰托盘把一张张白券托住 */
html.kkk-ui.kui-v3 .goods ul.flow-default {
  box-sizing: border-box !important;
  background: var(--v-sunk); border: 1px solid var(--v-line); border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(16, 40, 36, .04);
}
/* 电脑:框高、间距回到 v2(brand-1 / brand-2) */
html.kkk-ui.kui-v3.kui-pc .goods { margin-top: 12px; }
html.kkk-ui.kui-v3.kui-pc .goods ul.flow-default {
  gap: 8px; margin: 0 !important; padding: 8px !important; max-height: 318px !important;
}
/* 手机:券夹贯穿卡片左右,左右各收 1px 露出卡片描边(design-9 / brand-7) */
html.kkk-ui.kui-v3.kui-m .goods ul.flow-default {
  width: auto !important; margin: 12px -13px 0 !important; padding: 12px 12px 2px !important;
  border-radius: 0; border-left: 0; border-right: 0;
}
/* 一张券。底层电脑端 .goods li 的描边是 (0,4,2) 带 !important,这里同权重以上才压得住(robust-2) */
html.kkk-ui.kui-v3 .goods li {
  --tk-bd: var(--v-line2);
  position: relative; overflow: visible;
  background: var(--v-card) !important;
  box-shadow: 0 1px 2px rgba(16, 40, 36, .05) !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0;
  transition: transform var(--v-t2) var(--v-ease), box-shadow var(--v-t2) var(--v-ease), border-color var(--v-t1) ease, background-color var(--v-t1) ease;
  animation: kuiV3Rise var(--v-t3) var(--v-ease) backwards;
}
html.kkk-ui.kui-v3.kui-pc .goods li, html.kkk-ui.kui-v3.kui-m .goods li { border: 1px solid var(--tk-bd) !important; }
html.kkk-ui.kui-v3.kui-pc .goods li { min-height: 60px; padding: 8px 0 8px 42px; border-radius: 12px; row-gap: 4px; }   /* 券的密度回到 v2(r2 look-2) */
html.kkk-ui.kui-v3.kui-m .goods li { min-height: 72px; margin: 0 0 10px; padding: 13px 0 13px 60px; border-radius: 16px; row-gap: 6px; }
html.kkk-ui.kui-v3.kui-pc .goods li > i, html.kkk-ui.kui-v3.kui-pc .goods li > div { padding-right: 6px !important; }
html.kkk-ui.kui-v3.kui-m .goods li > i, html.kkk-ui.kui-v3.kui-m .goods li > div { padding-right: 12px !important; }
/* 券被同排的两行名称撑高时,名称贴上一行底、标签贴下一行顶,两者成组居中,不再被拉开(design-6) */
html.kkk-ui.kui-v3 .goods li > i { align-self: end; }
html.kkk-ui.kui-v3 .goods li > div { align-self: start; }
/* 图标小方块 */
html.kkk-ui.kui-v3 .goods li > i::before {
  background: var(--v-teal-soft); color: var(--v-teal-d); box-shadow: none;
  transition: background-color var(--v-t1) ease, color var(--v-t1) ease, transform var(--v-t2) var(--v-spring);
}
html.kkk-ui.kui-v3.kui-pc .goods li > i::before { left: 8px; width: 28px; height: 28px; margin-top: -14px; border-radius: 9px; }
html.kkk-ui.kui-v3.kui-m .goods li > i::before { left: 12px; width: 34px; height: 34px; margin-top: -17px; border-radius: 11px; line-height: 34px; }
/* 商品名不加字距:0.005em 会让第一行少放一个字,电脑端多截断一个大区名(r2 look-nf1) */
html.kkk-ui.kui-v3 .goods li > i > span { color: var(--v-ink) !important; font-weight: 600; letter-spacing: 0; }
html.kkk-ui.kui-v3.kui-pc .goods li > i > span { font-size: 13.5px !important; line-height: 1.4; }
/* 价格存根:虚线撕口 + 票面数字(700 字重)。宽度随价格。
   电脑存根收窄,把商品名宽度还给买家——大区/服务器名就靠它区分(brand-2) */
html.kkk-ui.kui-v3 .goods li .kui-price {
  position: relative; grid-area: price; align-self: stretch; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  border-left: 1.5px dashed var(--v-line2);
  background: var(--v-stub);
  color: var(--v-price); font-family: var(--v-num) !important; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; line-height: 1;
  transition: background-color var(--v-t1) ease, color var(--v-t1) ease;
}
html.kkk-ui.kui-v3.kui-pc .goods li .kui-price { min-width: 0; padding: 0 9px; margin: -8px 0; font-size: 17px; border-radius: 0 11px 11px 0; }
html.kkk-ui.kui-v3.kui-m .goods li .kui-price { min-width: 84px; padding: 0 12px; margin: -13px 0; font-size: 22px; border-radius: 0 15px 15px 0; }
/* 撕口两头原来有半圆打孔,站主看了觉得像券边缺了一块(10-05「为啥非要缺这个口」)——去掉,券框保持完整一圈,只留虚线撕口和存根 */
html.kkk-ui.kui-v3 .goods li .kui-price small {
  font-family: var(--v-num) !important; font-size: 12px; font-weight: 700; margin-right: 2px;
  position: relative; top: -.42em;
}
html.kkk-ui.kui-v3.kui-m .goods li .kui-price small { font-size: 13px; }
/* 小标签:满赠 = 细边红字(不再铺粉底,券上只留价格一处暖色焦点,design-15);库存 = 圆点 + 灰字 */
html.kkk-ui.kui-v3 .goods li .liwu {
  height: 20px !important; line-height: 18px !important; padding: 0 6px !important; border-radius: 6px !important;
  background: transparent !important; box-shadow: inset 0 0 0 1px rgba(212, 64, 31, .30);
  color: #bf3a1c !important; font-size: 12px !important; font-weight: 600;
}
html.kkk-ui.kui-v3 .goods li .liwu b { font-size: 12px !important; }
html.kkk-ui.kui-v3.kui-m .goods li .liwu { height: 22px !important; line-height: 20px !important; font-size: 13px !important; }
html.kkk-ui.kui-v3.kui-m .goods li .liwu b { font-size: 13px !important; }
/* 库存:模板写的是「库存:库存非常多」。选中商品时 shop.js 会把里面改写成纯文字,所以不能靠内部结构;
   改用一直挂在上面的 data-kucun:整段字号置 0(文字不删),用 ::after 显示档位——本身带「库存」二字的原样显示,纯数字的显示成「库存 23」。
   shop.js 改写后的最新库存由 v3 脚本同步回 data-kucun/data-lv(robust-4 / a11y-2)。data-kucun 为空/没有时不动,原文照常显示。
   第二条 content 带替代文本 "",读屏只念原文一次;老内核不认会退回第一条(a11y-14)。 */
html.kkk-ui.kui-v3 .goods li .kucun_ {
  display: inline-flex !important; align-items: center; height: 20px; line-height: 20px; padding: 0 !important; background: transparent !important;
  color: var(--v-ink3) !important; font-size: 12px !important;
}
html.kkk-ui.kui-v3 .goods li .kucun_[data-kucun]:not([data-kucun=""]) { font-size: 0 !important; }
html.kkk-ui.kui-v3 .goods li .kucun_[data-kucun]:not([data-kucun=""])::after { content: "库存 " attr(data-kucun); content: "库存 " attr(data-kucun) / ""; font-size: 12px; }
html.kkk-ui.kui-v3 .goods li .kucun_[data-kucun^="库存"][data-kucun]:not([data-kucun=""])::after { content: attr(data-kucun); content: attr(data-kucun) / ""; }
html.kkk-ui.kui-v3.kui-m .goods li .kucun_[data-kucun]:not([data-kucun=""])::after { font-size: 13px; }
/* 库存充足是常态:中性灰点、不加光晕;只有偏少/不足才上色(design-10,沿用底层「常态不上色」的约定) */
html.kkk-ui.kui-v3 .goods li .kucun_::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #b3bcb9;
}
html.kkk-ui.kui-v3 .goods li .kucun_[data-lv="low"] { color: var(--v-amber) !important; }
html.kkk-ui.kui-v3 .goods li .kucun_[data-lv="low"]::before { background: #e39a00; box-shadow: 0 0 0 3px rgba(227, 154, 0, .16); }
html.kkk-ui.kui-v3 .goods li .kucun_[data-lv="out"] { color: var(--v-red) !important; }
html.kkk-ui.kui-v3 .goods li .kucun_[data-lv="out"]::before { background: var(--v-red); box-shadow: 0 0 0 3px rgba(212, 64, 31, .14); }
/* 悬停:券轻轻浮起,券框转青。券框要用同权重以上的 !important 压住底层的「悬停描边变白」(robust-2) */
@media (hover: hover) {
  html.kkk-ui.kui-v3 .goods li:hover {
    --tk-bd: rgba(6, 152, 139, .42);
    transform: translateY(-2px); background: var(--v-card) !important;
    box-shadow: 0 2px 4px rgba(16, 40, 36, .05), 0 14px 26px -16px rgba(16, 40, 36, .38) !important;
  }
  html.kkk-ui.kui-v3.kui-pc .goods li:hover { border-color: var(--tk-bd) !important; }
  html.kkk-ui.kui-v3 .goods li:hover > i::before { transform: scale(1.06); }
}
html.kkk-ui.kui-v3 .goods li:active { transform: translateY(0) scale(.99); transition-duration: .1s; }
/* 选中 = 检票:券面描青、存根变墨青底白字(白字 5.3~7.5:1,a11y-5)、图标变对勾 */
html.kkk-ui.kui-v3 .goods li.select, html.kkk-ui.kui-v3.kui-pc .goods li.select:hover {
  --tk-bd: var(--v-teal);
  background: linear-gradient(90deg, rgba(6, 152, 139, .07), rgba(6, 152, 139, .02)) , var(--v-card) !important;
  box-shadow: 0 0 0 3px var(--v-teal-ring), 0 12px 24px -16px rgba(5, 121, 111, .55) !important;
}
html.kkk-ui.kui-v3.kui-pc .goods li.select, html.kkk-ui.kui-v3.kui-pc .goods li.select:hover, html.kkk-ui.kui-v3.kui-m .goods li.select { border-color: var(--tk-bd) !important; }
html.kkk-ui.kui-v3 .goods li.select .kui-price {
  background: linear-gradient(180deg, #05796f 0%, #0b5f57 100%); color: #fff; border-left-color: rgba(255, 255, 255, .45);
}
html.kkk-ui.kui-v3 .goods li.select > i::before {
  background: var(--v-teal); color: #fff; box-shadow: 0 6px 12px -6px rgba(5, 121, 111, .8);
  animation: kuiV3Pop var(--v-t2) var(--v-spring) backwards;
}
/* 「加载更多」/ 手机「展开全部」:白色胶囊 */
html.kkk-ui.kui-v3 .layui-flow-more a cite, html.kkk-ui.kui-v3 .goods .kui-fold a {
  background: var(--v-card) !important; border: 1px solid var(--v-line2) !important; box-shadow: 0 1px 2px rgba(16, 40, 36, .05);
  color: var(--v-teal-d) !important; font-weight: 600;
}
html.kkk-ui.kui-v3.kui-m .goods .kui-fold { padding: 4px 0 12px; }
html.kkk-ui.kui-v3.kui-m .goods.kui-capped ul.flow-default { padding-bottom: 0 !important; }

/* ==================== 8. 商品说明 / 选号 ==================== */
/* 默认主题的 .desc 里只有 <i> 和 <p>,容器画在 .desc 本身上(design-11) */
html.kkk-ui.kui-v3.kui-pc .desc { margin-top: 12px; padding: 10px 14px !important; border-radius: 12px; background: var(--v-sunk); border: 1px solid var(--v-line); }
html.kkk-ui.kui-v3 .goodsContent { color: var(--v-ink2); }
html.kkk-ui.kui-v3 .goodscards { background: var(--v-card) !important; border: 1px solid var(--v-line2) !important; box-shadow: none !important; }
html.kkk-ui.kui-v3.kui-m .goodscards tr:first-child td, html.kkk-ui.kui-v3.kui-pc .goodscards tr:first-child td {
  background: var(--v-sunk); color: var(--v-ink2) !important; font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
html.kkk-ui.kui-v3.kui-m .goodscards tr:first-child td { font-size: 13px; }
html.kkk-ui.kui-v3.kui-pc .goodscards tr:hover td { background: rgba(6, 152, 139, .05); }
html.kkk-ui.kui-v3 #jiaose_box .layui-badge.kui-plain { border: 0; background: var(--v-teal-soft) !important; color: var(--v-teal-d) !important; }
/* 说明标签不能点:去掉模板行内的手形光标,免得和旁边的按钮混(r2 look-1) */
html.kkk-ui.kui-v3 #jiaose_box .layui-badge.kui-plain:not(#getS):not(#getE) { cursor: default !important; }
/* 「请避免长时间停留…号码可能被他人抢购」是警示,用琥珀提示条,和普通说明分开(design-11)。
   哪条是警示由 v3 脚本按文字打 kui-stay-warn:jd 手机等模板没有这条警示,按位置猜会把「例如搜索关键词」染成琥珀(r3 flow-2) */
html.kkk-ui.kui-v3 #jiaose_box .layui-badge.kui-plain.kui-stay-warn { background: #fff8ee !important; color: #7a4a00 !important; box-shadow: inset 3px 0 0 #f0a33a; }
html.kkk-ui.kui-v3 #pick_account { background: var(--v-sunk) !important; border: 1px solid var(--v-line) !important; }
html.kkk-ui.kui-v3 #pick_account:focus { background: var(--v-card) !important; border-color: var(--v-teal) !important; box-shadow: 0 0 0 3px rgba(6, 152, 139, .26) !important; }

/* ==================== 9. 购买栏 ==================== */
html.kkk-ui.kui-v3.kui-pc .PayContent { padding: 16px 18px 18px; }
/* 分段标题:去掉原来那个「回复」图标,换成一条青绿短竖线,字重拉开层级 */
html.kkk-ui.kui-v3 .PayContent .layui-icon-reply-fill { display: none !important; }
html.kkk-ui.kui-v3.kui-pc .PayContent > div:not(.layui-form-item) > div > span,
html.kkk-ui.kui-v3.kui-m .PayContent > div > div:first-child > div > span,
html.kkk-ui.kui-v3 .PayContent fieldset legend {
  position: relative; padding-left: 12px !important; color: var(--v-ink) !important; font-weight: 700 !important; letter-spacing: .01em;
}
html.kkk-ui.kui-v3.kui-pc .PayContent > div:not(.layui-form-item) > div > span::before,
html.kkk-ui.kui-v3.kui-m .PayContent > div > div:first-child > div > span::before,
html.kkk-ui.kui-v3 .PayContent fieldset legend::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 14px; margin-top: -7px; border-radius: 2px;
  background: linear-gradient(180deg, var(--v-teal), var(--v-teal-d));
}
html.kkk-ui.kui-v3.kui-pc .PayContent > div:not(.layui-form-item) > div > span { font-size: 15px !important; }
html.kkk-ui.kui-v3.kui-pc .PayContent fieldset legend { font-size: 15px; margin-bottom: 10px; }
/* 分段之间:虚线 + 间距回到 v2(brand-1) */
html.kkk-ui.kui-v3.kui-pc .PayContent > div:not(.layui-form-item) ~ div:not(.layui-form-item) { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px dashed var(--v-line2); }
/* 「支付方式」:fieldset 的标题默认压在上边线中间;让 legend 浮动成普通内容,分隔线就和其他分段一样是一整条 */
html.kkk-ui.kui-v3.kui-pc .PayContent fieldset.layui-elem-field { margin-top: 14px !important; padding: 12px 0 0 !important; border: 0 !important; border-top: 1px dashed var(--v-line2) !important; }
html.kkk-ui.kui-v3 .PayContent fieldset.layui-elem-field > legend { float: left; width: 100%; box-sizing: border-box; margin-left: 0 !important; }
html.kkk-ui.kui-v3 .PayContent fieldset.layui-elem-field > legend + * { clear: both; }
/* 标题旁的说明文字(如「使用该服务,会收取0元费用」)用深灰(a11y-3) */
html.kkk-ui.kui-v3.kui-pc .PayContent > div:not(.layui-form-item) > span:not(.goodsName) { color: var(--v-ink2) !important; }
html.kkk-ui.kui-v3 .smsPrice { color: var(--v-price) !important; font-family: var(--v-num) !important; }
/* 表单行 */
html.kkk-ui.kui-v3.kui-pc .PayContent .layui-form-label { color: var(--v-ink2); font-size: 13.5px; line-height: 34px; }
html.kkk-ui.kui-v3 .PayContent .layui-input {
  background: var(--v-sunk) !important; border: 1px solid var(--v-line) !important; box-shadow: none !important;
  transition: border-color var(--v-t1) ease, box-shadow var(--v-t1) ease, background-color var(--v-t1) ease;
}
html.kkk-ui.kui-v3.kui-pc .PayContent .layui-input { height: 34px; border-radius: 9px !important; padding: 0 12px; }
html.kkk-ui.kui-v3.kui-m .PayContent .layui-input { height: 46px; border-radius: 12px !important; }
html.kkk-ui.kui-v3 .PayContent .layui-input:focus {
  background: var(--v-card) !important; border-color: var(--v-teal) !important; box-shadow: 0 0 0 3px rgba(6, 152, 139, .26) !important;
}
html.kkk-ui.kui-v3 .PayContent .layui-input.kui-invalid { border-color: rgba(212, 64, 31, .55) !important; background: #fff8f6 !important; }
html.kkk-ui.kui-v3 .PayContent .layui-input.kui-invalid:focus { box-shadow: 0 0 0 3px rgba(212, 64, 31, .16) !important; }
html.kkk-ui.kui-v3 .kui-hint { color: var(--v-ink3); }
html.kkk-ui.kui-v3 .kui-hint.kui-ok { color: var(--v-teal-d); }
/* 已选商品名:和「购买商品」标题同一行,选了是正文深色,没选是浅灰(没选的判断由 v3 脚本打 kui-nogoods)。
   要压过上面「标题旁说明文字」那条 (0,5,3) 的规则,这里带上 span.goodsName(design-4) */
html.kkk-ui.kui-v3.kui-pc .PayContent > div:not(.layui-form-item) > span.goodsName {
  display: inline; clear: none; margin: 0 0 0 10px !important; line-height: 28px !important;
  color: var(--v-ink) !important; font-size: 14px !important; font-weight: 600;
}
html.kkk-ui.kui-v3.kui-pc.kui-nogoods .PayContent > div:not(.layui-form-item) > span.goodsName { color: var(--v-ink3) !important; font-weight: 400; }
html.kkk-ui.kui-v3 .PayContent .goodsName { color: var(--v-ink) !important; font-weight: 600; }
html.kkk-ui.kui-v3.kui-nogoods .PayContent .goodsName, html.kkk-ui.kui-v3.kui-nogoods .goodsInfo { color: var(--v-ink3) !important; font-weight: 400; }
/* 数量步进器:−、数量框、+ 三个等高(design-16) */
html.kkk-ui.kui-v3 #jian, html.kkk-ui.kui-v3 #jia {
  position: relative;
  background: var(--v-card); border: 1px solid var(--v-line2); color: var(--v-ink); box-shadow: 0 1px 2px rgba(16, 40, 36, .05);
  transition: background-color var(--v-t1) ease, border-color var(--v-t1) ease, color var(--v-t1) ease, transform var(--v-t1) var(--v-spring);
}
html.kkk-ui.kui-v3.kui-pc #jian, html.kkk-ui.kui-v3.kui-pc #jia { width: 30px; height: 30px; line-height: 28px; border-radius: 9px; cursor: pointer; }
html.kkk-ui.kui-v3.kui-pc .buyNum {
  height: 30px; box-sizing: border-box; border: 1px solid var(--v-line2); border-radius: 9px; background: var(--v-card); text-align: center; vertical-align: middle;
}
html.kkk-ui.kui-v3.kui-m #jian, html.kkk-ui.kui-v3.kui-m #jia { width: 36px; height: 36px; line-height: 34px; border-radius: 11px; }
/* 手机加减按钮外扩一圈透明热区,不改外观:内边距盒 34 + 两侧各 5 = 44px(a11y-9 / r2 guard-8;这两个元素的 ::after 底层和 v3 都没用到,字形在 ::before 上) */
html.kkk-ui.kui-v3.kui-m #jian::after, html.kkk-ui.kui-v3.kui-m #jia::after { content: ""; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; }
@media (hover: hover) {
  html.kkk-ui.kui-v3 #jian:hover, html.kkk-ui.kui-v3 #jia:hover { border-color: rgba(6, 152, 139, .45); color: var(--v-teal-d); background: var(--v-teal-soft); }
}
html.kkk-ui.kui-v3 .buyNum { font-family: var(--v-num) !important; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--v-ink); }
html.kkk-ui.kui-v3 .buyNum:focus { box-shadow: 0 0 0 2px var(--v-teal-d); border-radius: 8px; }   /* 数量框原来获得焦点没有任何提示(a11y-7) */
html.kkk-ui.kui-v3 #kucun { color: var(--v-teal-d) !important; }
/* 支付方式:白卡,选中描青 + 右上角对勾徽章弹出 */
html.kkk-ui.kui-v3 .payType li {
  position: relative; background: var(--v-card) !important; border: 1.5px solid var(--v-line2) !important; box-shadow: 0 1px 2px rgba(16, 40, 36, .05);
  transition: border-color var(--v-t1) ease, box-shadow var(--v-t1) ease, transform var(--v-t2) var(--v-ease);
  cursor: pointer;
}
html.kkk-ui.kui-v3.kui-pc .payType { gap: 10px; }
html.kkk-ui.kui-v3.kui-pc .payType li { width: 136px !important; height: 44px; border-radius: 10px; }
html.kkk-ui.kui-v3.kui-m .payType li { height: 58px; border-radius: 14px; }
@media (hover: hover) {
  html.kkk-ui.kui-v3 .payType li:hover { border-color: rgba(6, 152, 139, .45) !important; transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(16, 40, 36, .45); }
}
html.kkk-ui.kui-v3 .payType li.paySelect {
  border-color: var(--v-teal) !important; box-shadow: 0 0 0 3px var(--v-teal-ring), 0 10px 20px -14px rgba(5, 121, 111, .55) !important;
}
html.kkk-ui.kui-v3 .payType li.paySelect::after {
  content: "\e605"; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--v-teal); color: #fff; font-family: layui-icon !important; font-size: 11px; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px #fff, 0 4px 8px -3px rgba(5, 121, 111, .7);
  animation: kuiV3Pop var(--v-t2) var(--v-spring) backwards;
}
html.kkk-ui.kui-v3 .yue { background: var(--v-sunk) !important; border: 1px solid var(--v-line) !important; }
/* 支付按钮 */
html.kkk-ui.kui-v3 #toPay {
  background: var(--v-btn) !important; border: 0 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 12px 24px -12px rgba(5, 121, 111, .75) !important;
  transition: transform var(--v-t2) var(--v-ease), box-shadow var(--v-t2) var(--v-ease), background-color var(--v-t1) ease;
}
/* 所有 #price 都做成行内块,金额跳动的位移才生效(手机 .pricet、jd「应付总额」里的那个都是行内元素,design-13 / robust-8) */
html.kkk-ui.kui-v3 #price { display: inline-block; }
html.kkk-ui.kui-v3 #toPay #price { font-family: var(--v-num) !important; font-weight: 700 !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
html.kkk-ui.kui-v3.kui-pc .proInfo2 { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v-line); }
html.kkk-ui.kui-v3.kui-pc #toPay { height: 40px !important; line-height: 40px !important; min-width: 240px; padding: 0 26px !important; border-radius: 11px; }
html.kkk-ui.kui-v3.kui-pc #toPay #price { font-size: 20px !important; vertical-align: -1px; }
@media (hover: hover) {
  html.kkk-ui.kui-v3 #toPay:hover { background: var(--v-btn-hi) !important; transform: translateY(-1px); filter: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 28px -12px rgba(5, 121, 111, .85) !important; }
}
html.kkk-ui.kui-v3 #toPay:active { transform: translateY(0) scale(.98); }
/* 还没选商品:按钮降一档成同色系浅底青字(仍可点,点了照常提示「请先选择商品」)。
   不再用滤镜调出色板外的灰绿;两个 ID 的选择器才压得过底层把按钮里文字写成白色的规则;悬停不上浮(design-5 / a11y-6) */
html.kkk-ui.kui-v3.kui-nogoods #toPay {
  filter: none; opacity: 1; background: var(--v-teal-soft) !important; box-shadow: inset 0 0 0 1px rgba(6, 152, 139, .30) !important;
}
html.kkk-ui.kui-v3.kui-nogoods #toPay, html.kkk-ui.kui-v3.kui-nogoods #toPay i, html.kkk-ui.kui-v3.kui-nogoods #toPay span,
html.kkk-ui.kui-v3.kui-nogoods #toPay #ppp, html.kkk-ui.kui-v3.kui-nogoods #toPay #price { color: var(--v-teal-dd) !important; }
/* 没选商品时,金额和「未选中商品」也不该是价格橙红(jd 价格规则权重更高,要单独压;手机底栏的 ¥0.00 同理)(r2 look-4 / guard-6) */
html.kkk-ui.kui-v3.kui-pc.kui-jd.kui-nogoods .goodsInfo { color: var(--v-ink3) !important; font-family: inherit !important; font-weight: 400 !important; }
html.kkk-ui.kui-v3.kui-m.kui-nogoods .pricet #price, html.kkk-ui.kui-v3.kui-m.kui-nogoods .pricet #ppp + span { color: var(--v-ink3) !important; }
html.kkk-ui.kui-v3.kui-nogoods #toPay:hover { transform: none; background: rgba(6, 152, 139, .15) !important; box-shadow: inset 0 0 0 1px rgba(6, 152, 139, .40) !important; }
/* 金额变化时数字轻跳一下(v3 脚本打 kui-tick) */
html.kkk-ui.kui-v3 #price.kui-tick { animation: kuiV3Tick var(--v-t3) var(--v-ease); }

/* ==================== 10. 手机:购买数量卡、预留信息卡、底部支付栏 ==================== */
html.kkk-ui.kui-v3.kui-m .buyClass .jsq p, html.kkk-ui.kui-v3.kui-m .buyClass .jsq p span { color: var(--v-ink) !important; }
/* 「购买数量」标题和另外两张卡一样带青色竖条、700 字重(字号保持 14,选中后「库存 库存非常多件」在 360~390 宽不溢出);
   模板行内给库存那段写了 margin-left:16px,收成 6px。数量框和 −、+ 等高带框(r2 look-3) */
html.kkk-ui.kui-v3.kui-m .buyClass .jsq p > span:first-child { position: relative; padding-left: 10px; font-weight: 700 !important; }
html.kkk-ui.kui-v3.kui-m .buyClass .jsq p > span:first-child::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 14px; margin-top: -7px; border-radius: 2px;
  background: linear-gradient(180deg, var(--v-teal), var(--v-teal-d));
}
html.kkk-ui.kui-v3.kui-m .buyClass .jsq p > span:first-child + span { margin-left: 6px !important; }
/* 数量框宽 48(原 52):−、+ 加了边框各宽 2px,这里收回 4px,「购买数量」那行在 360/375 宽被省略号截掉的部分不比现行版多 */
html.kkk-ui.kui-v3.kui-m .buyNum { width: 48px; height: 36px; box-sizing: border-box; border: 1px solid var(--v-line2); border-radius: 11px; background: var(--v-card); text-align: center; vertical-align: middle; }
html.kkk-ui.kui-v3.kui-m .PayContent fieldset legend { font-size: 15px; }
html.kkk-ui.kui-v3 .payInfo {
  background: rgba(255, 255, 255, .86) !important; border-top: 1px solid var(--v-line);
  box-shadow: 0 -10px 30px -18px rgba(16, 40, 36, .35);
}
html.kkk-ui.kui-v3.kui-m #price { font-size: 26px !important; vertical-align: -2px; }
html.kkk-ui.kui-v3.kui-m .pricet, html.kkk-ui.kui-v3.kui-m .pricet span { font-family: var(--v-num) !important; }
/* 底栏只让 ¥ 和金额是橙红;「支付金额 :」深灰、手续费浅灰(design-8;底层 .pricet span[style] 把它们都染成了价格色) */
html.kkk-ui.kui-v3.kui-m .pricet #ppp { font-family: var(--k-font) !important; color: var(--v-ink2) !important; font-weight: 500 !important; }
html.kkk-ui.kui-v3.kui-m #fee_str, html.kkk-ui.kui-v3.kui-m #fee_str span { color: var(--v-ink3) !important; font-weight: 400 !important; }
html.kkk-ui.kui-v3.kui-m #toPay { height: 46px !important; line-height: 46px !important; padding: 0 26px !important; border-radius: 14px; font-size: 16px !important; }

/* ==================== 11. 客服面板 ==================== */
html.kkk-ui.kui-v3.kui-pc #service-panel {
  background: var(--v-card) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--v-line) !important; border-radius: 14px; box-shadow: var(--v-sh2) !important; padding: 10px !important;
}
/* 面板标题(纯样式加的一行字,不改结构) */
html.kkk-ui.kui-v3.kui-pc #service-panel::before {
  content: "联系客服"; flex: 1 0 100%; order: -1; margin: 0 0 2px; padding: 0 2px 8px;
  border-bottom: 1px solid var(--v-line); color: var(--v-ink); font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
html.kkk-ui.kui-v3 #service-panel .tip-text {
  background: #fff8ee !important; border: 0 !important; border-left: 3px solid #f0a33a !important; color: #7a4a00 !important;
}
html.kkk-ui.kui-v3.kui-pc #service-panel .btn {
  height: 32px; line-height: 32px !important; border-radius: 9px !important; background: var(--v-sunk) !important; border: 1px solid var(--v-line) !important;
  box-shadow: none; transition: background-color var(--v-t1) ease, color var(--v-t1) ease, border-color var(--v-t1) ease;
}
html.kkk-ui.kui-v3.kui-pc #service-panel .btn-normal { color: var(--v-teal-d) !important; }
html.kkk-ui.kui-v3.kui-pc #service-panel .btn-special { color: var(--v-red) !important; }
html.kkk-ui.kui-v3.kui-pc #service-panel .btn-normal:hover { background: var(--v-teal-d) !important; border-color: var(--v-teal-d) !important; color: #fff !important; }
html.kkk-ui.kui-v3.kui-pc #service-panel .btn-special:hover { background: var(--v-red) !important; border-color: var(--v-red) !important; color: #fff !important; }
html.kkk-ui.kui-v3 #shrink-btn {
  background: var(--v-card) !important; border: 1px solid var(--v-line2) !important; box-shadow: var(--v-sh1) !important;
  color: var(--v-teal-d) !important; font-weight: 600; border-radius: 999px !important;
}
html.kkk-ui.kui-v3.kui-m #service-panel {
  background: var(--v-card) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--v-line) !important; box-shadow: 0 24px 60px -18px rgba(10, 40, 34, .5) !important;
}

/* ==================== 12. 弹窗 / 提示 ==================== */
html.kkk-ui.kui-v3 .layui-layer-shade.kui-dim { background: rgba(12, 22, 20, .46) !important; }
html.kkk-ui.kui-v3 .layui-layer.layui-layer-page, html.kkk-ui.kui-v3 .layui-layer.layui-layer-dialog {
  background: var(--v-card) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0 !important; box-shadow: 0 0 0 1px rgba(22, 32, 30, .06), 0 28px 70px -24px rgba(10, 30, 26, .55) !important;
}
html.kkk-ui.kui-v3.kui-pc .layui-layer.layui-layer-page, html.kkk-ui.kui-v3.kui-pc .layui-layer.layui-layer-dialog { border-radius: 14px !important; }
html.kkk-ui.kui-v3.kui-m .layui-layer.layui-layer-page, html.kkk-ui.kui-v3.kui-m .layui-layer.layui-layer-dialog { border-radius: 20px !important; }
html.kkk-ui.kui-v3 .layui-layer-molv .layui-layer-title, html.kkk-ui.kui-v3 .layui-layer-dialog .layui-layer-title {
  color: var(--v-ink) !important; font-weight: 700; letter-spacing: .02em; border-bottom: 1px solid var(--v-line);
}
html.kkk-ui.kui-v3 .layui-layer-btn { border-top: 1px solid var(--v-line); background: var(--v-sunk); }
html.kkk-ui.kui-v3 .layui-layer-btn a { border-radius: 10px !important; box-shadow: none; }
html.kkk-ui.kui-v3 .layui-layer-btn .layui-layer-btn0 { background: var(--v-btn) !important; border: 0 !important; box-shadow: 0 8px 16px -10px rgba(5, 121, 111, .8) !important; }
html.kkk-ui.kui-v3.kui-m .layui-layer-btn a { border-radius: 14px !important; min-width: 120px; }
/* 提示气泡(layer.msg:请选择支付方式、下单失败原因等)也带 layui-layer-dialog 类,会被上面的白底盖住,
   而底层把气泡文字定成白色 → 白底白字整条看不见(r3 flow-1)。这里把气泡的深色底找回来(和底层同一套,不加模糊) */
html.kkk-ui.kui-v3 .layui-layer.layui-layer-msg, html.kkk-ui.kui-v3 .layui-layer.layui-layer-hui {
  background: rgba(22, 26, 30, .88) !important; border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 14px 44px -12px rgba(0, 0, 0, .45) !important;
}

/* ==================== 13. jd 主题(电脑) ==================== */
html.kkk-ui.kui-v3.kui-pc.kui-jd header { background: rgba(14, 19, 21, .92) !important; }
html.kkk-ui.kui-v3.kui-pc.kui-jd .banner_bg .banner {
  background: var(--v-card) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--v-line) !important; box-shadow: var(--v-sh1) !important;
}
html.kkk-ui.kui-v3.kui-pc.kui-jd .containerx > .container > .main_box::before {
  background: var(--v-card); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--v-line); box-shadow: var(--v-sh1);
}
html.kkk-ui.kui-v3.kui-pc.kui-jd .mjgg h3 { border-bottom: 0; padding: 0 0 0 12px; position: relative; }
/* 模板在 h3 上行内写了 padding-bottom:10px,竖条按文字行定位,不按整盒居中(design-17) */
html.kkk-ui.kui-v3.kui-pc.kui-jd .mjgg h3::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 3px; height: 14px; margin-top: 0; border-radius: 2px; background: var(--v-teal);
}
html.kkk-ui.kui-v3.kui-pc.kui-jd .my_right select, html.kkk-ui.kui-v3.kui-pc.kui-jd .my_right input[type=text] {
  height: 36px; border-radius: 10px; background: var(--v-sunk) !important; border: 1px solid var(--v-line) !important; box-shadow: none;
  transition: border-color var(--v-t1) ease, box-shadow var(--v-t1) ease, background-color var(--v-t1) ease;
}
html.kkk-ui.kui-v3.kui-pc.kui-jd .my_right select:focus, html.kkk-ui.kui-v3.kui-pc.kui-jd .my_right input[type=text]:focus {
  background: var(--v-card) !important; border-color: var(--v-teal) !important; box-shadow: 0 0 0 3px rgba(6, 152, 139, .26);
}
/* jd 的数量框也是 type=text,和 −、+ 一样 30px 高(design-16) */
html.kkk-ui.kui-v3.kui-pc.kui-jd .my_right input.buyNum[type=text] { height: 30px; border-radius: 9px; background: var(--v-card) !important; border-color: var(--v-line2) !important; }
html.kkk-ui.kui-v3.kui-pc.kui-jd .my_left { color: var(--v-ink2); }
/* jd 原来是深色主题,模板把输入框占位文字写成了浅色,换到浅底上看不见(旧界面也有这个问题) */
html.kkk-ui.kui-v3.kui-jd input::placeholder { color: var(--v-ink3) !important; opacity: 1; }
html.kkk-ui.kui-v3.kui-jd input::-webkit-input-placeholder { color: var(--v-ink3) !important; opacity: 1; }
html.kkk-ui.kui-v3.kui-pc.kui-jd .goodsInfo { color: var(--v-price) !important; font-family: var(--v-num) !important; font-size: 16px; font-weight: 700; }
html.kkk-ui.kui-v3.kui-pc.kui-jd .pay_box { border-top: 1px dashed var(--v-line2); }
html.kkk-ui.kui-v3.kui-pc.kui-jd #toPay { height: 46px !important; line-height: 46px !important; border-radius: 12px; }
html.kkk-ui.kui-v3.kui-pc.kui-jd #toPay #price { font-size: 22px !important; }

/* ==================== 14. 动效 ==================== */
@keyframes kuiV3Rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kuiV3Pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes kuiV3Tick { 0% { transform: translateY(-4px); opacity: .35; } 100% { transform: none; opacity: 1; } }
@keyframes kuiV3Enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kuiV3Fade { from { opacity: 0; } to { opacity: 1; } }
/* 商品券依次浮现:前 8 张每张错开 30ms,第 9 张起统一 .21s——最长约 0.57 秒;
   手机「展开全部」时后面的券也不会比前面的先出来(design-12 / robust-9) */
html.kkk-ui.kui-v3 .goods li:nth-child(2) { animation-delay: .03s; }
html.kkk-ui.kui-v3 .goods li:nth-child(3) { animation-delay: .06s; }
html.kkk-ui.kui-v3 .goods li:nth-child(4) { animation-delay: .09s; }
html.kkk-ui.kui-v3 .goods li:nth-child(5) { animation-delay: .12s; }
html.kkk-ui.kui-v3 .goods li:nth-child(6) { animation-delay: .15s; }
html.kkk-ui.kui-v3 .goods li:nth-child(7) { animation-delay: .18s; }
html.kkk-ui.kui-v3 .goods li:nth-child(n+8) { animation-delay: .21s; }
/* 三块主体进场:店铺头 → 商品区 → 购买栏,依次浮现一次。
   商品区里有 position:fixed 的 #result-modal / .bangz_box,位移动画会让它们临时相对商品区定位——商品区只淡入不位移(brand-6 / robust-6) */
html.kkk-ui.kui-v3 body > .banner { animation: kuiV3Enter var(--v-t3) var(--v-ease) backwards; }
html.kkk-ui.kui-v3 body > .content { animation: kuiV3Fade var(--v-t3) var(--v-ease) .06s backwards; }
html.kkk-ui.kui-v3 body > .buyClass { animation: kuiV3Enter var(--v-t3) var(--v-ease) .1s backwards; }
html.kkk-ui.kui-v3 body > .PayContent { animation: kuiV3Enter var(--v-t3) var(--v-ease) .12s backwards; }

/* ==================== 15. 键盘焦点 ==================== */
/* 墨青实线,白底 5.29:1;深色顶栏(默认主题 .top、jd 主题 header)上换浅青。
   不改 border-radius:焦点环跟随元素自己的圆角,胶囊按钮获得焦点时不会变方角(a11y-7 / r2 guard-5) */
html.kkk-ui.kui-v3 a:focus-visible, html.kkk-ui.kui-v3 button:focus-visible, html.kkk-ui.kui-v3 [tabindex]:focus-visible {
  outline: 2px solid var(--v-teal-d); outline-offset: 2px;
}
html.kkk-ui.kui-v3 .top a:focus-visible, html.kkk-ui.kui-v3.kui-jd header a:focus-visible { outline-color: #5fd3c6; }

/* ==================== 16. 退路 ==================== */
/* 减少动态效果:过渡全关;动画只关 v3 自己加的那几处,页面原有的「查询中」转圈、layui 流加载转圈照转(robust-7 / a11y-13) */
@media (prefers-reduced-motion: reduce) {
  html.kkk-ui.kui-v3 *, html.kkk-ui.kui-v3 *::before, html.kkk-ui.kui-v3 *::after { transition: none !important; }
  html.kkk-ui.kui-v3 .goods li, html.kkk-ui.kui-v3 .goods li > i::before, html.kkk-ui.kui-v3 .payType li.paySelect::after, html.kkk-ui.kui-v3 #price.kui-tick,
  html.kkk-ui.kui-v3 body > .banner, html.kkk-ui.kui-v3 body > .content, html.kkk-ui.kui-v3 body > .buyClass, html.kkk-ui.kui-v3 body > .PayContent { animation: none !important; }
  html.kkk-ui.kui-v3 .goods li:hover, html.kkk-ui.kui-v3 .goods li:active, html.kkk-ui.kui-v3 .payType li:hover,
  html.kkk-ui.kui-v3 #toPay:hover, html.kkk-ui.kui-v3 #toPay:active, html.kkk-ui.kui-v3 .cat li:active { transform: none !important; }
}
/* 不认 flex gap 的老内核(Chrome<84,QQ/360 浏览器常见):底层把子元素外边距清成了 0,间距会直接变 0、支付卡贴在一起、选中徽章压到相邻卡。
   inset 从 Chrome 87 才支持,覆盖所有不认 flex gap 的内核(84~86 也走这里,用外边距代替,效果一样)(brand-3 / robust-5) */
@supports not (inset: 0) {
  html.kkk-ui.kui-v3.kui-pc .payType { gap: 0 !important; }
  html.kkk-ui.kui-v3.kui-pc .payType li { margin: 0 10px 10px 0 !important; }
  html.kkk-ui.kui-v3.kui-pc .payType li:last-child { margin-right: 0 !important; }
  html.kkk-ui.kui-v3 .cat ul { gap: 0 !important; }
  html.kkk-ui.kui-v3.kui-pc .cat ul { margin: 0 -6px -6px 0 !important; }
  html.kkk-ui.kui-v3.kui-pc .cat li { margin: 0 6px 6px 0 !important; }
  html.kkk-ui.kui-v3.kui-m .cat li { margin: 0 8px 0 0 !important; }
  html.kkk-ui.kui-v3.kui-m .kui-quick { gap: 0 !important; }
  html.kkk-ui.kui-v3.kui-m .kui-quick a { margin-right: 8px !important; }
  html.kkk-ui.kui-v3.kui-pc .banner { gap: 0 !important; }
  html.kkk-ui.kui-v3.kui-pc .banner .seller_logo, html.kkk-ui.kui-v3.kui-pc .banner .seller_content, html.kkk-ui.kui-v3.kui-pc .banner .gd { margin-right: 16px !important; }
  /* 店铺头折行时按钮组和上一行之间的行距(gap 清零后补回;不折行时按钮组外沿 38+10=48 = 头像高,店铺头高度不变)(r2 guard-7) */
  html.kkk-ui.kui-v3.kui-pc .banner > div:not(.seller_content):not(.clear):not(.kui-quick) { margin-top: 5px !important; margin-bottom: 5px !important; }
}
/* 不支持模糊:顶栏/底栏退成实色 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.kkk-ui.kui-v3 .top { background: #0e1315 !important; }
  html.kkk-ui.kui-v3 .payInfo { background: #fff !important; }
}
/* 360 宽这类小屏:商品名最后一个字不再单独折到第二行(design-14) */
@media (max-width: 374px) {
  html.kkk-ui.kui-v3.kui-m .goods li { padding-left: 54px; }
  html.kkk-ui.kui-v3.kui-m .goods li > i::before { left: 10px; }
  html.kkk-ui.kui-v3.kui-m .goods li > i > span { font-size: 14px !important; }
  html.kkk-ui.kui-v3.kui-m .goods li .kui-price { min-width: 76px; padding: 0 10px; font-size: 20px; }
  /* 店名区(省略号截断)比现行版窄 12px,4 个字的店名在 360 宽会被截:查询/投诉按钮左右内边距收一点(高度不变,r3 final-1) */
  html.kkk-ui.kui-v3.kui-m .banner .layui-btn { padding: 0 10px !important; }
}