/* custom 页（搭配器）自己的样式。共用的 token、按钮、徽章（.status-*）、能力标签（.cap-tag-*）在 base.css；
   这里的类名都带 custom- 前缀。视觉照 aibao.fun：浅色、白卡片、橙色只给「能点的」和「正在选的」。
   CSP：没有 style="…"。身上位置按钮的 left / right / top 由 custom.js 用 CSSOM 设（百分比，跟着图一起缩放）。

   版面（DOM 顺序 = 手机上的顺序 = Tab 顺序）：
     宽屏   ┌ 身体图 + 三句实话 + 放在身边 ┐┌ 清单（粘在右边，里面自己滚） ┐
            └ 按组件找位置                ┘└                            ┘
     窄屏   身体图 → 三句实话 → 放在身边 → 清单 → 按组件找位置
   「实测过 / 还没实测」的区分全靠 base.css 的徽章和能力标签：这里不改它们的颜色，只改换行和间距。 */

/* ---------------------------------------------------------------- 头部 */
.custom-head{padding-top:56px;padding-bottom:4px}
.custom-sub{margin-bottom:28px;text-wrap:pretty}

/* 推荐搭配：一排胶囊。按下的那个（当前这套正好是它）用橙色淡底 + 勾 */
.custom-sets-label{font-size:13px;font-weight:600;color:var(--gray-2);margin-bottom:10px}
.custom-sets-list{display:flex;flex-wrap:wrap;gap:8px}
.custom-set-chip{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:7px 7px 7px 16px;border-radius:var(--radius-pill);
  background:#fff;box-shadow:inset 0 0 0 1px var(--gray-4),0 1px 2px rgba(0,0,0,.03);
  font-size:14px;font-weight:500;color:var(--gray-1);line-height:1.3;text-align:left;
  transition:box-shadow .2s,color .2s,background .2s;
}
.custom-set-chip:hover{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-dark)}
.custom-set-chip:focus-visible{border-radius:var(--radius-pill)}
.custom-set-n{
  flex-shrink:0;font-size:12px;font-weight:500;color:var(--gray-2);
  background:var(--gray-6);padding:2px 9px;border-radius:var(--radius-pill);
  font-variant-numeric:tabular-nums;
}
.custom-set-chip[aria-pressed="true"]{
  background:var(--accent-tint);color:var(--accent-dark);
  box-shadow:inset 0 0 0 1.5px var(--accent);
}
.custom-set-chip[aria-pressed="true"] .custom-set-name::before{content:"✓ ";font-weight:700}
.custom-set-chip[aria-pressed="true"] .custom-set-n{background:#fff;color:var(--accent-dark)}

/* 推荐搭配下面的说明：catalog 里这套的原文 + 撤销 */
.custom-set-note{
  margin-top:14px;max-width:720px;display:grid;gap:8px;justify-items:start;
  background:#fff;border-radius:18px;padding:14px 18px;box-shadow:var(--shadow-card);
  font-size:14px;line-height:1.6;color:var(--gray-1);
}
.custom-note-set b{display:block;font-weight:600;color:var(--black);margin-bottom:2px}
.custom-note-set span{color:var(--gray-2)}
.custom-note-line{color:var(--gray-1)}
.custom-note-link{color:var(--accent-dark);font-weight:500}
.custom-undo{
  color:var(--link);font-size:14px;font-weight:500;line-height:1.4;padding:2px 0;
  border-bottom:1px solid transparent;transition:border-color .2s,color .2s;
}
.custom-undo:hover{border-bottom-color:currentColor}

/* ---------------------------------------------------------------- 两栏 */
.custom-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;
  grid-template-areas:"builder summary" "modules summary";
  column-gap:40px;row-gap:64px;align-items:start;
  padding-top:36px;padding-bottom:24px;
}
.custom-builder{grid-area:builder;min-width:0;position:relative}
.custom-modules{grid-area:modules;min-width:0}
.custom-summary{grid-area:summary;min-width:0}

/* ---------------------------------------------------------------- 「按组件找位置」的提示条：粘在导航下面 */
.custom-mode{
  position:sticky;top:calc(var(--nav-h) + 10px);z-index:30;
  display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:7px 7px 7px 7px;
  background:rgba(29,29,31,.92);color:#fff;border-radius:var(--radius-pill);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:custom-drop .25s ease-out;
}
.custom-mode-thumb{width:38px;height:38px;border-radius:50%;background:#fff;overflow:hidden;flex-shrink:0}
.custom-mode-img{width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
.custom-mode-text{flex:1;min-width:0;font-size:13.5px;line-height:1.35}
.custom-mode-cancel{
  flex-shrink:0;padding:8px 16px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.16);color:#fff;font-size:13px;font-weight:500;transition:background .2s;
}
.custom-mode-cancel:hover{background:rgba(255,255,255,.26)}
.custom-mode-cancel:focus-visible{outline-color:#fff;border-radius:var(--radius-pill)}

/* ---------------------------------------------------------------- 分区标题（穿在身上 / 放在身边） */
.custom-zone-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.custom-zone-title{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--black)}
/* 「示意图」小标签：图都是示意，不是实物照片 */
.custom-illus-tag{
  display:inline-block;font-size:11px;font-weight:500;line-height:1.5;color:var(--gray-2);
  padding:1px 8px;border-radius:var(--radius-pill);
  box-shadow:inset 0 0 0 1px var(--gray-4);white-space:nowrap;
}
.custom-illus-over{
  position:absolute;right:10px;bottom:10px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* ---------------------------------------------------------------- 身体图
   舞台和 aibao.fun 首屏插图同一个底：浅灰渐变 + 中间一团淡橙光。
   人形是 viewBox 0..100 × 0..200 的剪影，.custom-figure 用 aspect-ratio 1/2 保持比例；
   位置按钮是百分比定位，所以图怎么缩，点都还在原处。 */
.custom-stage{
  position:relative;display:flex;justify-content:center;
  padding:30px 16px 22px;border-radius:var(--radius-card);overflow:hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 38%,rgba(255,122,26,.11) 0%,transparent 70%),
    linear-gradient(160deg,#f7f7f9 0%,#ececf0 100%);
}
.custom-figure{position:relative;height:540px;aspect-ratio:1/2;flex-shrink:0}
.custom-body-svg{
  width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.07)) drop-shadow(0 14px 26px rgba(0,0,0,.08));
}
/* 人形是 AC.bodyOutline()，渐变由 custom.js 换上；这里只加一圈很淡的描边 */
.custom-body-svg .body-shape{stroke:rgba(29,29,31,.07);stroke-width:.35}
.custom-spots{position:absolute;inset:0}

/* 一个位置 = 一个按钮：圆点（空的「+」/ 放了的组件小图）+ 旁边的标签。
   圆点的圆心对准 catalog 里的 x / y：右侧的按钮左边缘在那个点上，往左挪半个圆点；
   左侧的（x < 50）反过来：右边缘在点上、圆点排在最右、往右挪半个圆点。 */
.custom-spot{
  --dot:46px;
  /* max-content：绝对定位的元素默认只能用到图里剩下的那点宽度（右边的位置只剩半个身子宽），标签会被挤成一字一行 */
  position:absolute;display:flex;align-items:center;gap:8px;width:max-content;
  transform:translate(calc(var(--dot) / -2),-50%);
  text-align:left;border-radius:calc(var(--dot) / 2);z-index:1;
  transition:opacity .25s;
}
.custom-spot.is-left{flex-direction:row-reverse;text-align:right;transform:translate(calc(var(--dot) / 2),-50%)}
.custom-spot:hover,.custom-spot:focus-visible{z-index:3}
.custom-spot:focus-visible{outline-offset:4px;border-radius:calc(var(--dot) / 2)}
.custom-spot-dot{
  width:var(--dot);height:var(--dot);border-radius:50%;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;color:var(--accent-dark);
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 1.5px var(--accent),0 6px 16px rgba(0,0,0,.10);
  transition:transform .25s ease,box-shadow .25s ease,background .25s;
}
/* 空位置：虚线圈 + 「+」，在说「这里还能放」 */
.custom-spot.is-empty .custom-spot-dot{
  position:relative;background:rgba(255,255,255,.78);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.custom-spot.is-empty .custom-spot-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px dashed rgba(255,122,26,.75);pointer-events:none;
}
.custom-spot:hover .custom-spot-dot{transform:scale(1.08)}
.custom-spot-img{width:100%;height:100%;object-fit:cover;transform:scale(1.4)}
.custom-spot-label{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  max-width:12em;padding:6px 11px;border-radius:12px;line-height:1.3;
  background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(0,0,0,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.custom-spot.is-left .custom-spot-label{align-items:flex-end}
/* 名字折行时上下两行差不多长，别剩一个「屏）」挂在第二行 */
.custom-spot-name,.custom-desk-name,.custom-opt-name{text-wrap:balance}
.custom-spot-slot{font-size:11px;font-weight:600;color:var(--gray-3);letter-spacing:.02em}
.custom-spot.is-empty .custom-spot-slot{font-size:13px;color:var(--gray-1)}
.custom-spot-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--black)}
.custom-spot.is-left .custom-spot-name{flex-direction:row-reverse}
.custom-spot-here{font-size:12px;font-weight:600;color:var(--accent-dark)}
/* 只剩一个圆点的状态徽章（三档颜色 + 实心 / 半实心 / 虚线空心点）：文字在按钮的 aria-label 里 */
.custom-status-dot{font-size:0;line-height:0;gap:0;padding:0;border:0;background:transparent;flex-shrink:0}
.custom-status-dot.status-flashed_untested,
.custom-status-dot.status-firmware_built_not_flashed{border:0;background:transparent}

/* 「按组件找位置」：能放的位置亮橙色、呼吸；放不下的淡下去 */
.custom-spot.is-target .custom-spot-dot{
  background:var(--accent);color:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.9),0 8px 20px rgba(255,122,26,.35);
  animation:custom-breathe 1.8s ease-in-out infinite;
}
.custom-spot.is-target .custom-spot-dot::after{display:none}
.custom-spot.is-target.is-filled .custom-spot-img{opacity:.35}
.custom-spot.is-target .custom-spot-label{box-shadow:0 0 0 1.5px var(--accent),0 6px 18px rgba(255,122,26,.18)}
.custom-spot.is-dim,.custom-desk.is-dim{opacity:.38}
.custom-spot-dot.is-pop,.custom-desk-media.is-pop{animation:custom-pop .5s cubic-bezier(.2,.9,.3,1.35)}

/* 「+」号：两条线画的，跟着 currentColor */
.custom-plus{position:relative;display:inline-block;width:14px;height:14px;flex-shrink:0}
.custom-plus::before,.custom-plus::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:1px;
  transform:translate(-50%,-50%);
}
.custom-plus::before{width:100%;height:2px}
.custom-plus::after{width:2px;height:100%}
.custom-plus-sm{width:10px;height:10px}
.custom-plus-sm::before{height:1.75px}
.custom-plus-sm::after{width:1.75px}

/* ---------------------------------------------------------------- 三句实话（一直挂在图下面） */
.custom-honest{
  margin-top:14px;display:grid;gap:10px;padding:18px 20px;border-radius:18px;
  background:#fff;box-shadow:var(--shadow-card);
  font-size:14px;line-height:1.6;color:var(--gray-2);
}
.custom-honest li{position:relative;padding-left:18px}
.custom-honest li::before{
  content:"";position:absolute;left:1px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.custom-honest b{color:var(--black);font-weight:600}

/* ---------------------------------------------------------------- 放在身边：每个位置一张卡片 */
.custom-trays{margin-top:36px;display:grid;gap:32px}
.custom-tray-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.custom-tray-grid > li{display:flex;min-width:0}
.custom-desk{
  flex:1;min-width:0;display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;
  padding:12px 14px 12px 12px;border-radius:18px;text-align:left;
  background:#fff;box-shadow:var(--shadow-card);
  transition:box-shadow .25s,background .25s,opacity .25s,transform .25s;
}
.custom-desk:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.custom-desk:focus-visible{border-radius:18px}
.custom-desk.is-empty{background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1.5px var(--gray-4)}
.custom-desk.is-empty:hover{box-shadow:inset 0 0 0 1.5px var(--accent);background:#fff}
.custom-desk-media{
  width:64px;height:64px;border-radius:14px;overflow:hidden;flex-shrink:0;
  display:grid;place-items:center;background:var(--gray-6);color:var(--gray-3);
}
.custom-desk.is-empty .custom-desk-media{background:var(--gray-6);color:var(--gray-2)}
.custom-desk-icon{width:34px;height:34px}
.custom-desk-img{width:100%;height:100%;object-fit:cover;transform:scale(1.3)}
.custom-desk-text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.custom-desk-slot{font-size:12px;font-weight:600;color:var(--gray-3);letter-spacing:.01em}
.custom-desk-name{font-size:15px;font-weight:600;line-height:1.3;color:var(--black)}
.custom-desk-add{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--accent-dark)}
.custom-desk .custom-spot-here{margin-top:1px}
.custom-desk.is-target{
  background:#fff;box-shadow:inset 0 0 0 2px var(--accent),0 8px 22px rgba(255,122,26,.16);
}
.custom-desk.is-target .custom-desk-media{background:var(--accent-tint);color:var(--accent-dark)}
.custom-desk.is-target.is-empty .custom-desk-media{animation:custom-breathe 1.8s ease-in-out infinite}

/* ---------------------------------------------------------------- 清单（右栏）
   宽屏时粘在右边：头和底（合计、按钮）一直看得见，中间放得多了自己滚。 */
.custom-summary{
  display:flex;flex-direction:column;
  background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);
}
.custom-summary-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:22px 24px 10px}
.custom-summary-title{font-size:21px;letter-spacing:-.01em}
.custom-summary-title:focus{outline:none}
.custom-summary-title:focus-visible{outline:2px solid var(--accent)}
.custom-summary-count{font-size:13px;color:var(--gray-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.custom-summary-body{padding:0 24px 18px;min-height:0}
.custom-summary-foot{
  display:grid;gap:12px;padding:16px 24px 22px;
  border-top:1px solid var(--gray-5);
}
.custom-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:var(--gray-1)}
.custom-total .price{font-size:17px}
.custom-actions-row{display:flex;gap:8px}
.custom-actions-row > *{flex:1}
.custom-status{font-size:13.5px;line-height:1.55;color:var(--gray-1)}
.custom-status:empty{display:none}
.custom-status-line{display:block}
.custom-status-link{color:var(--link);font-weight:500;white-space:nowrap}
.custom-status-link:hover{color:var(--accent)}
.custom-share-input{
  display:block;width:100%;margin-top:8px;padding:9px 12px;font-size:13px;
  background:var(--gray-6);border:1px solid var(--gray-4);border-radius:10px;color:var(--black);
}
.custom-share-input:focus{outline:none;border-color:var(--accent);background:#fff}
.custom-demo{font-size:12px;color:var(--gray-3);line-height:1.5}

/* 还空着 */
.custom-empty{text-align:center;padding:18px 4px 8px}
.custom-empty-mark{
  width:56px;height:56px;border-radius:50%;margin-bottom:12px;
  display:inline-grid;place-items:center;color:var(--accent);
  border:1.5px dashed rgba(255,122,26,.6);background:rgba(255,122,26,.04);
}
.custom-empty-title{font-size:16px;font-weight:600}
.custom-empty-body{font-size:14px;color:var(--gray-2);margin-top:4px;line-height:1.55;text-wrap:balance}
.custom-empty-undo{margin-top:14px;font-size:14px;color:var(--gray-2)}

/* 放了什么：按分区，每个位置一行 */
.custom-sum-zone{font-size:12px;font-weight:600;color:var(--gray-3);letter-spacing:.03em;margin:8px 0 2px}
.custom-sum-zone ~ .custom-sum-zone{margin-top:14px}
.custom-sum-item{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--gray-6);
}
.custom-sum-item:last-child{border-bottom:0}
.custom-sum-thumb{width:44px;height:44px;border-radius:12px;background:var(--gray-6);overflow:hidden;display:grid;place-items:center}
.custom-sum-img{width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
.custom-sum-text{display:flex;flex-direction:column;min-width:0}
.custom-sum-name{font-size:15px;font-weight:600;line-height:1.3;transition:color .2s;align-self:flex-start}
.custom-sum-name:hover{color:var(--accent-dark)}
.custom-sum-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:13px;color:var(--gray-2)}
.custom-sum-qty{font-size:12px;font-weight:500;color:var(--accent-dark);margin-top:3px}
/* 拿掉：圆形的 ×（两条线画的） */
.custom-remove,.custom-close{
  position:relative;width:34px;height:34px;border-radius:50%;flex-shrink:0;color:var(--gray-3);
  transition:background .2s,color .2s;
}
.custom-remove::before,.custom-remove::after,.custom-close::before,.custom-close::after{
  content:"";position:absolute;left:50%;top:50%;width:13px;height:1.75px;border-radius:1px;background:currentColor;
}
.custom-remove::before,.custom-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.custom-remove::after,.custom-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.custom-remove:hover,.custom-close:hover{background:var(--gray-6);color:var(--black)}
.custom-remove:focus-visible,.custom-close:focus-visible{border-radius:50%;outline-offset:1px}

/* 要配中枢、却没有中枢 */
.custom-warn{
  margin-top:12px;padding:10px 12px;border-radius:12px;
  background:var(--warn-tint);color:var(--warn);font-size:13px;line-height:1.5;
}

/* 能力 / 联动 */
.custom-sum-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--gray-5)}
.custom-sum-h{font-size:15px;font-weight:600;letter-spacing:-.005em;margin-bottom:10px}
.custom-caps{border-radius:14px;padding:12px 14px 14px}
.custom-caps + .custom-caps{margin-top:10px}
.custom-caps-verified{background:rgba(47,143,78,.06)}
/* 还没实测：没有底色、虚线框 —— 和徽章「还没实测」那一档同一个样子 */
.custom-caps-goal{background:transparent;box-shadow:none;border:1px dashed var(--gray-4)}
.custom-caps-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-bottom:10px}
.custom-caps-n{font-size:12px;color:var(--gray-2)}
.custom-caps-prod{font-size:12px;font-weight:600;color:var(--gray-1);margin:12px 0 6px}
.custom-caps-head + .custom-caps-prod{margin-top:0}
.custom-cap-list{gap:6px}
.custom-cap-list .cap{font-size:13.5px;line-height:1.5;padding-left:17px}
.custom-cap-list .cap::before{top:6px;width:8px;height:8px}
.custom-sum-note{font-size:12.5px;color:var(--gray-2);line-height:1.5;margin-bottom:8px}
.custom-ideas{display:grid;gap:8px}
.custom-idea{padding:10px 12px;border-radius:12px;border:1px dashed var(--gray-4);background:#fff}
.custom-idea-text{font-size:13.5px;line-height:1.5;color:var(--gray-1)}
.custom-idea-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;font-size:12px;color:var(--gray-2);line-height:1.4}
/* 「加一个中枢，还能……」：淡橙底，是一个建议，不是已有功能（每条下面照样标着设计目标） */
.custom-hint{
  margin-top:12px;padding:12px 14px 14px;border-radius:14px;
  background:rgba(255,122,26,.05);border:1px solid rgba(255,122,26,.2);
}
.custom-hint-head{font-size:13px;font-weight:600;color:var(--accent-dark);margin-bottom:8px;line-height:1.45}
.custom-hint-btn{margin-top:10px}

/* ---------------------------------------------------------------- 按组件找位置 */
.custom-modules-title{font-size:clamp(26px,3vw,34px);margin-bottom:10px;text-wrap:balance}
.custom-modules-sub{font-size:16px;color:var(--gray-2);line-height:1.55;max-width:560px;margin-bottom:24px}
.custom-mod-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.custom-mod{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  transition:box-shadow .3s,transform .3s;
}
.custom-mod:hover{box-shadow:var(--shadow-lift)}
.custom-mod.is-active{box-shadow:0 0 0 2px var(--accent),var(--shadow-lift)}
.custom-mod-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--gray-6);display:flex;align-items:center;justify-content:center}
.custom-mod-img{width:100%;height:100%;object-fit:contain}
.custom-mod-media .custom-noimg,.custom-opt-media .custom-noimg,.custom-noimg{font-size:28px;line-height:1}
.custom-mod-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.custom-mod-name{font-size:18px;line-height:1.3}
.custom-mod-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.custom-mod-placed{
  font-size:12px;font-weight:600;color:var(--accent-dark);background:var(--accent-tint);
  padding:2px 9px;border-radius:var(--radius-pill);white-space:nowrap;line-height:1.4;
}
.custom-needs-hub{font-size:12px;padding:2px 9px;line-height:1.4}
.custom-mod-tag{font-size:14px;color:var(--gray-2);line-height:1.55}
.custom-mod-slots{font-size:12.5px;color:var(--gray-3);line-height:1.5}
.custom-mod-slots span{font-weight:500;color:var(--gray-2)}
.custom-mod-actions{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px}
.custom-mod-btn[aria-pressed="true"]{background:var(--accent);color:#fff}
.custom-mod-btn:focus-visible,.custom-hint-btn:focus-visible{border-radius:var(--radius-pill)}
.custom-mod-more{font-size:14px}

/* ---------------------------------------------------------------- 选组件的对话框
   原生 <dialog>：宽屏居中，手机上从底部升起（下面 @media）。 */
.custom-chooser{
  margin:auto;padding:0;border:0;color:var(--black);background:#fff;
  width:min(580px,calc(100vw - 32px));max-width:none;
  max-height:min(760px,calc(100vh - 48px));max-height:min(760px,calc(100dvh - 48px));
  border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.24);overflow:hidden;
}
.custom-chooser[open]{display:flex;flex-direction:column;animation:custom-rise .22s ease-out}
.custom-chooser::backdrop{background:rgba(29,29,31,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.custom-chooser-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 20px 4px 24px}
.custom-chooser-zone{font-size:13px;font-weight:500;color:var(--accent);margin-bottom:2px}
.custom-chooser-title{font-size:24px;line-height:1.2}
.custom-close{background:var(--gray-6);color:var(--gray-1);margin-top:-2px}
.custom-close:hover{background:var(--gray-5)}
.custom-chooser-sub{padding:4px 24px 14px;font-size:13.5px;line-height:1.5;color:var(--gray-2)}
.custom-chooser-list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:8px;padding:2px 16px 14px}
.custom-opt{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  border-radius:18px;background:var(--gray-6);transition:background .2s,box-shadow .2s;
}
.custom-opt:hover{background:var(--gray-5)}
.custom-opt.is-current{background:rgba(255,122,26,.07);box-shadow:inset 0 0 0 1.5px var(--accent)}
.custom-opt-main{
  display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center;
  width:100%;padding:12px;text-align:left;border-radius:18px;
}
.custom-opt-main:focus-visible{outline-offset:-2px;border-radius:18px}
.custom-opt-media{position:relative;width:76px;height:76px;border-radius:14px;overflow:hidden;background:#fff;display:grid;place-items:center}
.custom-opt-img{width:100%;height:100%;object-fit:cover;transform:scale(1.3)}
.custom-opt-media .custom-illus-over{right:4px;bottom:4px;font-size:9.5px;padding:0 5px}
.custom-opt-text{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.custom-opt-name{font-size:16px;font-weight:600;line-height:1.3}
.custom-opt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.custom-opt-role{font-size:12px;font-weight:500;color:var(--gray-2);white-space:nowrap}
.custom-opt-tag{font-size:13px;line-height:1.5;color:var(--gray-2)}
.custom-opt-also{font-size:12px;line-height:1.45;color:var(--gray-1)}
.custom-opt-cur{font-size:12px;font-weight:600;color:var(--accent-dark)}
.custom-opt-cur::before{content:"✓ "}
.custom-opt-more{padding:10px 16px 10px 6px;font-size:13px;font-weight:500;color:var(--link);white-space:nowrap}
.custom-opt-more::after{content:" ›"}
.custom-opt-more:hover{color:var(--accent)}
.custom-chooser-empty{padding:18px 8px;font-size:14px;color:var(--gray-2)}
.custom-chooser-foot{display:flex;align-items:center;gap:8px;padding:14px 24px 20px;border-top:1px solid var(--gray-5)}
.custom-chooser-done{margin-left:auto}
.custom-chooser-foot .btn-quiet:focus-visible{border-radius:var(--radius-pill)}
/* 对话框开着时页面不跟着滚 */
.custom-lock,.custom-lock body{overflow:hidden}

.custom-noscript{padding-top:24px;padding-bottom:24px;color:var(--gray-2)}

/* ---------------------------------------------------------------- 动画（base.css 在「减少动态效果」下一律关掉） */
@keyframes custom-pop{0%{transform:scale(.55);opacity:.2}100%{transform:scale(1);opacity:1}}
@keyframes custom-breathe{
  0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 0 4px rgba(255,122,26,.35),0 8px 20px rgba(255,122,26,.3)}
  50%{box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 0 11px rgba(255,122,26,0),0 8px 20px rgba(255,122,26,.3)}
}
@keyframes custom-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes custom-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- 宽屏：清单粘在右边，里面自己滚 */
@media (min-width:901px){
  .custom-summary{
    position:sticky;top:calc(var(--nav-h) + 16px);
    max-height:calc(100vh - var(--nav-h) - 32px);
  }
  /* 里面还有没看到的（能力、联动）时，上 / 下边缘出一道淡阴影：两层白色渐变跟着内容走（local），
     两层阴影钉在框上（scroll）—— 滚到头，白色渐变正好盖住那一头的阴影。纯 CSS，不用 JS 判断。 */
  .custom-summary-body{
    flex:1 1 auto;overflow:auto;overscroll-behavior:contain;
    background:
      linear-gradient(#fff 30%,rgba(255,255,255,0)) center top,
      linear-gradient(rgba(255,255,255,0),#fff 70%) center bottom,
      radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.10),rgba(0,0,0,0)) center top,
      radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.10),rgba(0,0,0,0)) center bottom;
    background-repeat:no-repeat;
    background-size:100% 36px,100% 36px,100% 12px,100% 12px;
    background-attachment:local,local,scroll,scroll;
  }
}

/* ---------------------------------------------------------------- 一栏 */
@media (max-width:900px){
  .custom-layout{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"builder" "summary" "modules";
    row-gap:40px;
  }
  .custom-builder,.custom-summary,.custom-modules{max-width:640px;width:100%;justify-self:center}
}

/* ---------------------------------------------------------------- 手机 */
@media (max-width:640px){
  .custom-head{padding-top:36px}
  .custom-sub{margin-bottom:22px}
  .custom-layout{padding-top:28px}
  .custom-stage{padding:22px 8px 16px}
  .custom-figure{height:440px}
  .custom-spot{--dot:42px;gap:6px}
  .custom-spot-label{max-width:8.6em;padding:5px 9px}
  .custom-spot-name{font-size:12.5px}
  .custom-honest{padding:16px 18px}
  .custom-trays{margin-top:28px}
  .custom-summary-head{padding:20px 20px 8px}
  .custom-summary-body{padding:0 20px 16px}
  .custom-summary-foot{padding:14px 20px 20px}
  .custom-mod-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* 放在身边：两列竖卡片 */
  .custom-desk{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px 10px 12px;align-content:start}
  .custom-desk-media{width:100%;height:84px}
  .custom-desk-img{transform:scale(1.15)}
  /* 组件卡片：左图右文，省一半高度 */
  .custom-mod{display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:14px;align-items:start;padding:14px 14px 16px}
  .custom-mod-media{width:92px;height:92px;aspect-ratio:auto;border-radius:14px;overflow:hidden}
  .custom-mod-img{transform:scale(1.2)}
  .custom-mod-media .custom-illus-over{right:4px;bottom:4px;font-size:9.5px;padding:0 5px}
  .custom-mod-body{padding:0;gap:7px}
  .custom-mod-name{font-size:16px}
  .custom-mod-tag{font-size:13.5px}
  /* 对话框：底部升起的面板 */
  .custom-chooser{
    width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;
    max-height:88vh;max-height:88dvh;
  }
  .custom-chooser[open]{animation:custom-sheet .26s ease-out}
  .custom-chooser-head{padding:18px 14px 2px 20px}
  .custom-chooser-sub{padding:4px 20px 12px}
  .custom-chooser-list{padding:2px 12px 12px}
  .custom-opt{grid-template-columns:minmax(0,1fr)}
  .custom-opt-main{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px 12px 4px}
  .custom-opt-media{width:64px;height:64px}
  .custom-opt-more{justify-self:start;padding:4px 12px 12px 88px}
  .custom-chooser-foot{padding:12px 20px calc(16px + env(safe-area-inset-bottom))}
}
@keyframes custom-sheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
/* 很窄的手机（≤360）：图不再缩（再缩，肩头和领口两个圆点就挨上了），圆点和标签字小一号 */
@media (max-width:360px){
  .custom-stage{padding-left:4px;padding-right:4px}
  .custom-figure{height:420px}
  .custom-spot{--dot:36px;gap:5px}
  .custom-spot-label{max-width:8em;padding:4px 8px;font-size:15px}
  .custom-spot-name{font-size:12px;gap:5px}
  .custom-spot.is-empty .custom-spot-slot{font-size:12.5px}
  .custom-spot-here{font-size:11.5px}
}