/* ============================================================
   山姆种草速报 · 基础样式（默认风格：荧光小红书）
   ------------------------------------------------------------
   ⚠️ 本文件只写「结构 + 变量」，所有视觉表现（配色 / 形状 / 圆角 /
      描边 / 阴影 / 字体）都走 CSS 变量。
   换风格请改 themes.css 里对应的 [data-theme="xxx"]，
   不要在这里写死颜色，否则会把其它风格覆盖掉。

   变量速查：
     --brand / --brand-2 / --accent   主色 / 副色 / 点缀色
     --ink-900/700/500/300            四级文字色
     --paper / --card / --line        底色 / 卡片色 / 分隔线
     --radius-xl/lg/md                三档圆角
     --stat-shape-1..4                四块数字的形状（clip-path）
     --stat-bg-1..4 / --stat-fg       数字块配色
     --cover-bg / --cover-fg          封面渐变与文字色
     --*                              其余按命名规律，见各处注释
   ============================================================ */

:root{
  /* ---------- 主色（默认：荧光四色系） ---------- */
  --brand:#FF2E4D;
  --brand-dk:#E01F3D;
  --accent:#FFD426;          /* 柠檬黄，点缀用 */
  --lemon:#FFE44D;
  --mint:#3DDC97;

  /* 兼容旧变量名（外部若有引用不至于失效） */
  --xhs-red:#FF2E4D;
  --xhs-red-dk:#E01F3D;
  --neon-orange:#FF6B1A;
  --neon-cyan:#00E5FF;
  --neon-violet:#B14DFF;
  --neon-lime:#B8FF2E;
  --pink:#FF6B9D;
  --lemon-dk:#F5C518;
  --grape:#B388FF;
  --sky:#4CC9F0;

  /* ---------- 文字 / 底色 ---------- */
  --ink-900:#1A1A1E;
  --ink-700:#3D3D45;
  --ink-500:#75757F;
  --ink-300:#B0B0BA;

  --paper:#FFF8F4;
  --card:#FFFFFF;
  --line:#FFE9E2;

  /* ---------- 圆角 ---------- */
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:14px;

  /* ---------- 字体 ---------- */
  --font-ui:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:var(--font-ui);      /* 标题/数字字体，可换成衬线体等 */
  --title-weight:900;
  --title-ls:-.03em;
  --row-title-weight:900;

  /* ---------- 桌面背景 ---------- */
  --body-bg:#FFE9E2;
  --body-dot1:radial-gradient(circle at 12% 18%,rgba(255,196,0,.30) 0 22px,transparent 23px);
  --body-dot2:radial-gradient(circle at 88% 78%,rgba(255,107,157,.26) 0 26px,transparent 27px);
  --phone-shell:#1A1A1E;

  /* ============================================================
     封面
     ============================================================ */
  --cover-bg:linear-gradient(165deg,#FF2E4D 0%,#FF5C7A 42%,#FF9A6B 100%);
  --cover-fg:#fff;
  --cover-glow:radial-gradient(circle,rgba(255,228,77,.5) 0%,rgba(255,228,77,0) 70%);
  --cover-glow-size:210px;
  --cover-foot-fg:rgba(255,255,255,.9);
  --cover-date-bg:rgba(0,0,0,.22);
  --cover-date-fg:#fff;

  /* 标题第二行的高亮条 */
  --l2-bg:#fff;
  --l2-fg:#FF2E4D;
  --l2-shadow:0 6px 0 rgba(120,0,20,.35);
  --l2-radius:16px;
  --l2-scale:.78em;         /* 必须带单位，否则 font-size 会整条失效 */
  --l2-rot:0deg;

  /* ============================================================
     四块数字
     ============================================================ */
  --stat-radius:0;                       /* clip-path 为 none 时靠圆角出形 */
  --stat-aspect:auto;                    /* 想出正圆就设 1（见会员蓝） */
  --stat-shape-1:polygon(50% 0,60% 18%,80% 5%,76% 26%,99% 32%,82% 46%,97% 66%,70% 64%,64% 88%,48% 72%,28% 94%,26% 70%,3% 62%,17% 44%,0 24%,32% 24%);
  --stat-shape-2:polygon(48% 2%,64% 16%,86% 6%,80% 30%,100% 44%,79% 54%,92% 80%,62% 72%,52% 100%,40% 76%,12% 90%,16% 64%,0 46%,20% 36%,6% 10%,34% 20%);
  --stat-shape-3:polygon(50% 1%,72% 20%,84% 10%,74% 34%,96% 52%,76% 60%,86% 86%,58% 74%,44% 96%,36% 70%,8% 78%,14% 54%,2% 38%,26% 32%,8% 6%,40% 16%);
  --stat-shape-4:polygon(50% 0,66% 14%,90% 12%,78% 36%,100% 48%,84% 58%,92% 84%,64% 72%,56% 100%,42% 78%,10% 94%,18% 66%,0 58%,22% 42%,4% 18%,36% 22%);

  --stat-bg-1:linear-gradient(145deg,#FFF48A 0%,#FFD426 48%,#D69B00 100%);
  --stat-bg-2:linear-gradient(145deg,#7DF9FF 0%,#00E5FF 48%,#0090B0 100%);
  --stat-bg-3:linear-gradient(145deg,#D79BFF 0%,#B14DFF 48%,#6A00C4 100%);
  --stat-bg-4:linear-gradient(145deg,#DBFF7A 0%,#B8FF2E 48%,#6FA800 100%);

  /* 数字块上的立体质感，可设为 none 关掉 */
  --stat-gloss:linear-gradient(160deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 45%,rgba(0,0,0,.10) 100%);
  --stat-rays:repeating-conic-gradient(from 0deg,rgba(255,255,255,.34) 0deg 5deg,transparent 5deg 15deg);
  --stat-ray-mask:radial-gradient(circle,transparent 22%,#000 38%,#000 66%,transparent 82%);
  --stat-shadow:drop-shadow(0 10px 14px rgba(120,20,30,.34));

  --stat-fg:#241005;
  --stat-fg-soft:rgba(36,16,5,.88);
  --stat-fg-shadow:0 2px 0 rgba(255,255,255,.55), 0 0 22px rgba(255,255,255,.7);
  --stat-lab-shadow:0 1px 0 rgba(255,255,255,.6);

  /* ============================================================
     清单页
     ============================================================ */
  --head-bg:#1A1A1E;
  --head-fg:#fff;
  --head-shadow:#FF2E4D;
  --head-radius:15px;
  --head-rot:-1.2deg;
  --date-bg:#FF2E4D;
  --date-fg:#fff;
  --desc-em-fg:#FF2E4D;

  --row-bg:#FFFFFF;
  --row-border:1.5px solid #1A1A1E;
  --row-radius:11px;
  --row-shadow:0 2.5px 0 #1A1A1E;
  --row-shadow-hover:0 4px 0 #1A1A1E;
  --row-shadow-active:0 .5px 0 #1A1A1E;

  --no-bg:#FF2E4D;
  --no-bg2:#FFE44D;
  --no-bg3:#3DDC97;
  --no-fg:#fff;
  --no-fg2:#1A1A1E;
  --no-fg3:#1A1A1E;
  --no-border:1.5px solid #1A1A1E;
  --no-radius:7px;

  --price-fg:#FF2E4D;
  --price-old-fg:#B0B0BA;

  --pill-bg:#FFE44D;
  --pill-fg:#1A1A1E;
  --pill-border:1.2px solid #1A1A1E;
  --pill-radius:6px;

  --go-bg:#1A1A1E;
  --go-fg:#fff;
  --go-radius:999px;

  /* ============================================================
     详情页
     ============================================================ */
  --rank-fg:#FF2E4D;
  --rank-bar:#FF2E4D;
  --tag-bg:#FFE44D;
  --tag-fg:#1A1A1E;
  --tag-border:2px solid #1A1A1E;

  --dcard-bg:#FFFFFF;
  --dcard-border:2px solid #1A1A1E;
  --dcard-radius:26px;
  --dcard-shadow:0 6px 20px rgba(26,26,30,.08);
  --dcard-rail:linear-gradient(180deg,#FF2E4D,#FFE44D);
  --dcard-rail-w:7px;

  --img-bg:#FFF4EF;
  --img-border:2px solid #1A1A1E;
  --img-radius:20px;

  --panel-bg:#FFF7F2;
  --panel-border:2px dashed #FFE9E2;
  --panel-radius:14px;

  --track-bg:#FFE0D5;
  --track-border:1.5px solid #1A1A1E;
  --track-radius:6px;
  --bar-old:#D9B99C;
  --bar-new:linear-gradient(90deg,#FF2E4D,#FF7A3D);

  --save-bg:linear-gradient(90deg,#FF2E4D,#FF7A3D);
  --save-fg:#fff;
  --save-border:2px solid #1A1A1E;
  --save-shadow:0 4px 0 #1A1A1E;
  --save-radius:14px;

  /* ============================================================
     工具条 / 风格切换器
     ============================================================ */
  --btn-bg:#1A1A1E;
  --btn-fg:#fff;
  --btn-border:2px solid #1A1A1E;
  --btn-shadow:#FF2E4D;
}

/* ============================================================
   基础
   ============================================================ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font-ui);
  background:var(--body-bg);
  background-image:var(--body-dot1),var(--body-dot2);
  background-attachment:fixed;
  color:var(--ink-900);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* ---------- 手机外框 ---------- */
.stage{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px;width:100%}
.phone{
  position:relative;width:420px;max-width:calc(100vw - 40px);flex:0 0 auto;
  height:min(880px,calc(100vh - 190px));
  border-radius:40px;overflow:hidden;background:var(--paper);
  box-shadow:0 0 0 8px var(--phone-shell), 0 30px 60px rgba(26,26,30,.30);
}

/* 三屏纵向翻页 */
.viewport{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:stretch;
  overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;
  overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
}
.viewport::-webkit-scrollbar{display:none}
.screen{
  scroll-snap-align:start;scroll-snap-stop:always;
  flex:0 0 100%;width:100%;max-width:100%;
  height:100%;min-height:0;box-sizing:border-box;
  overflow:hidden;scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none}

/* ============================================================
   封面
   ============================================================ */
.cover{
  background:var(--cover-bg);
  color:var(--cover-fg);display:flex;flex-direction:column;
  padding:32px 24px;height:100%;min-height:0;position:relative;
}
/* 右上大圆形光斑 */
.cover::after{
  content:"";position:absolute;top:-70px;right:-60px;
  width:var(--cover-glow-size);height:var(--cover-glow-size);border-radius:50%;
  background:var(--cover-glow);
  pointer-events:none;
}
.cover > *{position:relative;z-index:1}

.cover h1{
  margin:auto 0 0;font-size:58px;line-height:1.12;
  font-weight:var(--title-weight);letter-spacing:var(--title-ls);
  font-family:var(--font-display);
  flex:0 0 auto;
}
.cover h1 .l2{
  display:block;background:var(--l2-bg);color:var(--l2-fg);
  padding:8px 16px;border-radius:var(--l2-radius);margin-top:14px;
  box-shadow:var(--l2-shadow);
  font-size:var(--l2-scale);line-height:1.24;
  width:fit-content;max-width:100%;
  transform:rotate(var(--l2-rot));
}
.cover .spacer{flex:1;min-height:20px}

/* 四块关键数字 */
.stats{
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(178px,auto);
  gap:10px;margin:auto 0;flex:0 1 auto;
}
.stat{
  position:relative;
  container-type:inline-size;
  border-radius:var(--stat-radius);
  /* aspect-ratio 只在变量显式给出时生效，默认 auto 保持原布局 */
  aspect-ratio:var(--stat-aspect,auto);
  /* 必须裁掉内部：光泽(::before)/光芒(::after) 是 inset:0 的整块，
     只靠 clip-path 拦不住用圆角出形的主题，会在四角露出方块。
     overflow 先按圆角裁一层，外层再由 clip-path 裁成星爆，互不冲突。 */
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px 18px;text-align:center;color:var(--stat-fg);
  background:var(--stat-bg,var(--stat-bg-1));
  filter:var(--stat-shadow);
  transition:transform .24s cubic-bezier(.34,1.56,.64,1), filter .24s ease;
}
/* 顶部斜向光泽 */
.stat::before{
  content:"";position:absolute;inset:0;
  background:var(--stat-gloss);
  pointer-events:none;
}
/* 放射光芒 */
.stat::after{
  content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:var(--stat-rays);
  mask:var(--stat-ray-mask);
  -webkit-mask:var(--stat-ray-mask);
  opacity:.9;
}
/* 四种轮廓：clip-path 写在各自块上，值来自变量 */
.stat:nth-child(1){clip-path:var(--stat-shape-1);--stat-bg:var(--stat-bg-1)}
.stat:nth-child(2){clip-path:var(--stat-shape-2);--stat-bg:var(--stat-bg-2)}
.stat:nth-child(3){clip-path:var(--stat-shape-3);--stat-bg:var(--stat-bg-3)}
.stat:nth-child(4){clip-path:var(--stat-shape-4);--stat-bg:var(--stat-bg-4)}

.stat:hover{
  transform:scale(1.07) rotate(-2deg);
  filter:drop-shadow(0 18px 22px rgba(120,20,30,.44));
}
.stat:active{transform:scale(.97) rotate(1deg);filter:drop-shadow(0 6px 10px rgba(120,20,30,.30))}

.stat b,.stat span{position:relative;z-index:2}
.stat b{
  display:block;font-size:clamp(22px,10.5vw,54px);font-weight:900;line-height:1;
  color:var(--stat-fg);letter-spacing:-.035em;white-space:nowrap;
  text-shadow:var(--stat-fg-shadow);
  max-width:100%;
  font-family:var(--font-display);
}
@supports (container-type:inline-size){
  .stat b{font-size:clamp(24px,25cqw,60px)}
}
.stat span{
  display:block;margin-top:10px;font-size:clamp(11px,5vw,15px);font-weight:900;
  color:var(--stat-fg-soft);
  text-shadow:var(--stat-lab-shadow);white-space:nowrap;
}
@supports (container-type:inline-size){
  .stat span{font-size:clamp(11px,7.4cqw,16px)}
}

/* 底部：来源 + 日期 */
.cover-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:0 0 auto}
.cover .foot{font-size:12.5px;color:var(--cover-foot-fg);font-weight:600}
.cover .date{
  font-size:12.5px;font-weight:900;color:var(--cover-date-fg);
  background:var(--cover-date-bg);padding:6px 14px;border-radius:999px;white-space:nowrap;
}

/* ============================================================
   清单页
   ============================================================ */
.list{background:var(--paper);padding:16px 14px 12px;display:flex;flex-direction:column;height:100%;min-height:0}

.list-head{display:flex;align-items:center;gap:10px}
.list-head h2{
  margin:0;font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.2;
  font-family:var(--font-display);
  background:var(--head-bg);color:var(--head-fg);padding:7px 13px;border-radius:var(--head-radius);
  box-shadow:0 4px 0 var(--head-shadow);transform:rotate(var(--head-rot));
}
.list-head .date{
  margin-left:auto;font-size:12px;font-weight:900;color:var(--date-fg);
  background:var(--date-bg);padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.list-desc{margin:11px 0 9px;font-size:12.5px;color:var(--ink-700);font-weight:600;line-height:1.5}
.list-desc b{color:var(--desc-em-fg)}

/* 12 条均分整屏高度 */
.rank-list{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0}

.row{
  flex:1 1 0;min-height:0;
  display:flex;align-items:center;gap:8px;
  background:var(--row-bg);
  border:var(--row-border);border-radius:var(--row-radius);padding:0 9px;
  box-shadow:var(--row-shadow);text-align:left;width:100%;
  font-family:inherit;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease;
}
.row:active{transform:translateY(2px);box-shadow:var(--row-shadow-active)}
.row:hover{box-shadow:var(--row-shadow-hover)}

.no{
  flex:0 0 22px;height:22px;border-radius:var(--no-radius);display:grid;place-items:center;
  font-size:11px;font-weight:900;color:var(--no-fg);background:var(--no-bg);
  border:var(--no-border);
}
.row:nth-child(2) .no{background:var(--no-bg2);color:var(--no-fg2)}
.row:nth-child(3) .no{background:var(--no-bg3);color:var(--no-fg3)}

.row-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.row-title{
  display:block;font-size:13px;font-weight:var(--row-title-weight);line-height:1.32;
  color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-display);
}

.row-price{flex:0 0 auto;text-align:right;display:flex;flex-direction:row;align-items:baseline;gap:5px}
.price-now{display:block;font-size:15.5px;font-weight:900;color:var(--price-fg);letter-spacing:-.02em;line-height:1}
.price-old{display:block;font-size:10px;font-weight:600;color:var(--price-old-fg);text-decoration:line-through}
.pill{
  display:block;padding:2px 6px;border-radius:var(--pill-radius);
  background:var(--pill-bg);color:var(--pill-fg);border:var(--pill-border);
  font-size:9.5px;font-weight:900;text-align:center;line-height:1.1;white-space:nowrap;
}
.pill b{font-size:11.5px}
.pill i{display:none}

.list-foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:10px}
.list-foot .src{font-size:11px;font-weight:600;color:var(--ink-500)}
.list-foot .go{
  font-size:11.5px;font-weight:900;color:var(--go-fg);background:var(--go-bg);
  padding:5px 12px;border-radius:var(--go-radius);white-space:nowrap;
}

/* ============================================================
   详情页
   ============================================================ */
.detail{background:var(--paper);padding:20px 16px 16px;display:flex;flex-direction:column;height:100%;min-height:0}
.d-track{
  display:flex;flex-direction:column;gap:14px;overflow-x:hidden;overflow-y:auto;
  scroll-snap-type:y mandatory;flex:1;min-height:0;
  scrollbar-width:none;overscroll-behavior-y:contain;
}
.d-track::-webkit-scrollbar{display:none}
.d-slide{
  flex:0 0 100%;width:100%;max-width:100%;height:100%;min-height:0;box-sizing:border-box;
  scroll-snap-align:start;display:flex;flex-direction:column;overflow-y:auto;
  overscroll-behavior-y:contain;scrollbar-width:none;
}
.d-slide::-webkit-scrollbar{display:none}

.rank-tag{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:900;color:var(--rank-fg);font-family:var(--font-display)}
.rank-tag .bar{width:26px;height:8px;border-radius:4px;background:var(--rank-bar);transform:rotate(-3deg)}
.rank-tag .rk{
  background:var(--tag-bg);color:var(--tag-fg);padding:3px 10px;border-radius:999px;
  border:var(--tag-border);font-size:12.5px;
}

.d-card{
  position:relative;background:var(--dcard-bg);border-radius:var(--dcard-radius);
  padding:20px 18px 18px;border:var(--dcard-border);
  box-shadow:var(--dcard-shadow);overflow:hidden;
  flex:1;display:flex;flex-direction:column;min-height:0;
}
.d-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--dcard-rail-w);
  background:var(--dcard-rail);
}
.d-title{
  font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.01em;
  font-family:var(--font-display);color:var(--ink-900);
}

.d-img{
  margin-top:14px;border-radius:var(--img-radius);overflow:hidden;
  background:var(--img-bg);border:var(--img-border);
  flex:1;min-height:0;display:grid;place-items:center;
}
.d-img img{width:100%;height:100%;object-fit:cover;display:block}

.price-panel{
  margin-top:14px;border-radius:var(--panel-radius);background:var(--panel-bg);
  border:var(--panel-border);padding:12px 14px;
}
.p-line{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--ink-700)}
.p-line + .p-line{margin-top:8px}
.p-line .k{flex:0 0 48px}
.p-line .track{
  display:block;flex:1;height:12px;border-radius:var(--track-radius);
  background:var(--track-bg);overflow:hidden;border:var(--track-border);
}
.p-line .bar-in{display:block;height:100%;border-radius:var(--track-radius);background:var(--bar-old)}
.p-line.now .bar-in{background:var(--bar-new)}
.p-line .v{flex:0 0 auto;font-weight:900;color:var(--ink-700)}
.p-line.now .v{color:var(--price-fg)}

.save-line{
  margin-top:14px;text-align:center;font-size:16px;font-weight:900;color:var(--save-fg);
  background:var(--save-bg);
  padding:10px;border-radius:var(--save-radius);border:var(--save-border);
  box-shadow:var(--save-shadow);
  font-family:var(--font-display);
}

.detail-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px}
.detail-foot .src{font-size:11px;font-weight:600;color:var(--ink-500)}
.detail-foot .go{
  font-size:11.5px;font-weight:900;color:var(--go-fg);background:var(--go-bg);
  padding:5px 12px;border-radius:var(--go-radius);white-space:nowrap;
}

/* ============================================================
   桌面工具条（同上：桌面 UI 用固定中性色，不跟随主题）
   ============================================================ */
.toolbar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#5A5560}
.btn{
  font-family:inherit;font-size:12.5px;font-weight:800;padding:8px 16px;border-radius:999px;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border:var(--btn-border);box-shadow:0 3px 0 var(--btn-shadow);
}
.btn:hover{transform:translateY(-1px)}
.src{opacity:.85}
.file{display:none}
.phone.dragover{outline:4px dashed var(--brand);outline-offset:-6px}

/* 跳到 product.html（全国特价巡览页）的入口 */
.btn-goto-product{
  text-decoration:none;white-space:nowrap;
  background:transparent;color:var(--btn-fg);box-shadow:none;
  border:1px dashed var(--btn-border);
}
.btn-goto-product:hover{border-style:solid;background:var(--btn-bg)}

/* ============================================================
   切换器（版式 + 风格模板）
   ------------------------------------------------------------
   ⚠️ 切换器是「桌面 UI」，不属于手机屏内。
   它必须用自己的一套中性色，绝不能跟着主题的 --card/--ink-900 走，
   否则黑金/荧光夜市这类深色主题会把文字变成深底深字。

   结构：.switch-bar > .switch-group[data-group=layout|theme]
         每组含 .switch-label + .switch-chips
   ============================================================ */
.switch-bar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:min(1180px,calc(100vw - 32px));
  padding:4px;flex:0 0 auto;
}
.switch-group{
  display:flex;align-items:center;gap:8px;min-width:0;
}
.switch-label{
  font-size:11.5px;font-weight:800;color:#5A5560;white-space:nowrap;
  padding-right:2px;
}
.switch-chips{
  display:flex;align-items:center;gap:6px;overflow-x:auto;padding:2px;
  scrollbar-width:thin;
}
.switch-chips::-webkit-scrollbar{height:5px}
.switch-chips::-webkit-scrollbar-thumb{background:rgba(0,0,0,.20);border-radius:3px}

/* 主题组在 deal 版式下无效 → 置灰禁用，并注明原因 */
.switch-group.is-disabled{opacity:.42}
.switch-group.is-disabled .chip{cursor:not-allowed;pointer-events:none}

/* 版式 chip：没有三色小圆点，padding 与主题 chip 略有不同 */
.chip-layout{padding:5px 13px}
.chip{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:5px 11px 5px 6px;border-radius:999px;cursor:pointer;
  background:#FFFFFF;border:1.5px solid rgba(0,0,0,.12);
  box-shadow:0 1.5px 0 rgba(0,0,0,.10);
  font-family:inherit;font-size:11.5px;font-weight:800;color:#3A3740;
  white-space:nowrap;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.chip:hover{transform:translateY(-1.5px);box-shadow:0 3px 0 rgba(0,0,0,.14)}
.chip[aria-pressed="true"]{
  border-color:#1F1D24;color:#1F1D24;
  box-shadow:0 3px 0 var(--chip-accent,rgba(0,0,0,.24));
}
.chip .dots{display:flex;flex:0 0 auto}
.chip .dots i{
  width:12px;height:12px;border-radius:50%;display:block;
  border:1.5px solid #fff;box-shadow:0 0 0 .5px rgba(0,0,0,.10);
}
.chip .dots i + i{margin-left:-4px}

/* 兼容旧结构（.theme-bar / .theme-chips），若别处仍引用 */
.theme-bar{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.theme-bar-label{font-size:11.5px;font-weight:800;color:#5A5560;white-space:nowrap}
.theme-chips{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:2px}