/* =====================================================================
   拼豆小屋 · 主题层 theme.css（用户版 user_1733 移植，来自 team/mobile 主题）
   - 只放外观：颜色 / 圆角 / 阴影 / 字体 / 装饰 / 加载动画 + 简洁区新元素的布局（第 7 节）
   - 全部由 :root 令牌驱动；两套配色：data-theme="a" 樱花奶油（默认）/ "b" 薄荷薰衣草
   - 默认 A（用户选定）；B 变量保留，仅可用隐藏开发参数 ?theme=b 查看（页面无入口、不记 localStorage）
   - 本文件在 index.html 内联 <style> 之后加载，同权重选择器覆盖原「粉调主题」「视觉规范层」的写死颜色
   - 硬约束：图纸区（#grid / #fsCanvas 画布、色号、网格线、图例 .sw）保持白底中性色，不上主题色
   ===================================================================== */

/* ---------- 1. 令牌 ---------- */
:root, :root[data-theme="a"]{
  /* A 樱花奶油 */
  --t-bg:#FFF8F4; --t-bg-deco:#FFEFF4; --t-surface:#FFFFFF; --t-surface-2:#FFF3F6; --t-switch-bg:#FFE6EE;
  --t-line:#F2DCE3; --t-line-strong:#E7C3CF;
  --t-text:#3F2A33;          /* 12.6:1 on bg */
  --t-muted:#7A5F6B;         /* 5.4:1 on bg */
  --t-primary:#C43D6E;       /* 白字 4.95:1 */
  --t-primary-hover:#AE2F5D; --t-on-primary:#FFFFFF;
  --t-primary-soft:#FFE6EE; --t-primary-ink:#A8305F;   /* ink on soft 5.5:1 */
  --t-accent-2:#8FD3BC; --t-accent-3:#CDBDF2; --t-accent-4:#FFD79A;   /* 薄荷 / 薰衣草 / 奶黄（仅装饰） */
  --t-warn-bg:#FFF4E0; --t-warn-line:#F3D29A; --t-warn-text:#7A4E00;
  --t-danger:#C0392B; --t-toast-bg:#3F2A33;
  --t-shadow-1:0 2px 10px rgba(196,61,110,.08); --t-shadow-2:0 8px 24px rgba(196,61,110,.16);
  --t-ring:0 0 0 3px rgba(196,61,110,.22);
}
:root[data-theme="b"]{
  /* B 薄荷薰衣草 */
  --t-bg:#F3FAF7; --t-bg-deco:#EEF0FF; --t-surface:#FFFFFF; --t-surface-2:#EAF6F0; --t-switch-bg:#D9F1E7;
  --t-line:#DCE6F0; --t-line-strong:#C9C1EC;
  --t-text:#2C3142;          /* 12.2:1 on bg */
  --t-muted:#5F6577;         /* 5.5:1 on bg */
  --t-primary:#6F52C4;       /* 白字 5.7:1 */
  --t-primary-hover:#5B40AE; --t-on-primary:#FFFFFF;
  --t-primary-soft:#ECE6FB; --t-primary-ink:#5A3FB0;   /* 6.2:1 on soft */
  --t-accent-2:#7FD1B5; --t-accent-3:#F7C3D4; --t-accent-4:#FFE3A3;
  --t-warn-bg:#FFF6E3; --t-warn-line:#EBD39C; --t-warn-text:#6E4A00;
  --t-danger:#B83A3A; --t-toast-bg:#2C3142;
  --t-shadow-1:0 2px 10px rgba(111,82,196,.08); --t-shadow-2:0 8px 24px rgba(111,82,196,.16);
  --t-ring:0 0 0 3px rgba(111,82,196,.22);
}
:root, :root[data-theme]{
  --t-radius-s:10px; --t-radius-m:16px; --t-radius-l:22px; --t-radius-pill:999px;
  --t-font:"PingFang SC","HarmonyOS Sans SC","MiSans","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --t-bead:12px;
  /* 图纸区中性色（不随主题变） */
  --t-chart-bg:#FFFFFF; --t-chart-line:#E4E6EA; --t-chart-text:#1B1F24;
  /* 映射到页面原有变量（覆盖原 3 层 :root） */
  --bg:var(--t-bg); --card:var(--t-surface); --line:var(--t-line); --text:var(--t-text); --muted:var(--t-muted);
  --accent:var(--t-primary); --accent-soft:var(--t-primary-soft); --danger:var(--t-danger); --radius:var(--t-radius-l);
}

/* ---------- 2. 基础 ---------- */
body{font-family:var(--t-font);color:var(--t-text);background:
  radial-gradient(600px 300px at 100% -40px,var(--t-bg-deco),transparent 70%),
  radial-gradient(500px 260px at -60px 30%,var(--t-bg-deco),transparent 70%),var(--t-bg);background-attachment:fixed}
header{background:color-mix(in srgb,var(--t-surface) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:0;border-bottom:1px solid var(--t-line);box-shadow:var(--t-shadow-1);color:var(--t-text);border-radius:0 0 var(--t-radius-l) var(--t-radius-l)}
header h1{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:1px;color:var(--t-text)}
header .hint{color:var(--t-muted)}
header .btn.ghost{background:var(--t-surface);border:1px solid var(--t-line-strong);color:var(--t-primary-ink);
  box-shadow:none;border-radius:var(--t-radius-pill);min-height:44px;font-weight:700}
.beadlogo{display:inline-flex;gap:3px;align-items:center}
.beadlogo i{width:var(--t-bead);height:var(--t-bead);border-radius:50%;display:block;
  background:radial-gradient(circle at 50% 50%,var(--t-surface) 0 26%,transparent 29%),var(--c,var(--t-primary));
  box-shadow:inset -1px -2px 0 rgba(0,0,0,.08)}
.beadlogo i:nth-child(1){--c:var(--t-primary)} .beadlogo i:nth-child(2){--c:var(--t-accent-2)} .beadlogo i:nth-child(3){--c:var(--t-accent-3)}
.card,.board{border:1px solid var(--t-line);border-radius:var(--t-radius-l);box-shadow:var(--t-shadow-1);background:var(--t-surface)}
.card h2,.toolbar h2{color:var(--t-text)}
.card h2:before,.toolbar h2:before{content:"";width:10px;height:10px;border-radius:50%;flex:none;
  background:radial-gradient(circle,var(--t-surface) 0 25%,transparent 28%),var(--t-primary)}
details.adv{border-top:0;position:relative}
details.adv::before,.styletop::before{content:"";display:block;height:6px;margin:0 0 10px;
  background:radial-gradient(circle,var(--t-line-strong) 2.4px,transparent 2.8px) 0 0/12px 6px repeat-x}
label.row span.k,.flabel,.stitle,.bgrow,.shinfo,.legendhead{color:var(--t-text)}
.mini,.unit,.stitle b,.chips .chip i,.mode i,.stylecard i,.btn.dl span,.drop small,.crophead{color:var(--t-muted)}
.adv summary{color:var(--t-primary-ink)}
.adv summary:before{color:var(--t-primary-ink)}

/* ---------- 3. 控件 ---------- */
.btn{border-radius:var(--t-radius-pill);border:1px solid var(--t-line-strong);background:var(--t-surface);color:var(--t-text);font-family:var(--t-font);min-height:44px}
.btn:hover{border-color:var(--t-primary);background:var(--t-surface-2)}
.btn.primary{background:var(--t-primary);border:1px solid var(--t-primary);color:var(--t-on-primary);box-shadow:var(--t-shadow-2);border-radius:var(--t-radius-pill)}
.btn.primary:hover{background:var(--t-primary-hover);border-color:var(--t-primary-hover)}
.btn.primary:disabled{background:var(--t-switch-bg);border-color:var(--t-switch-bg);color:var(--t-muted);box-shadow:none}
.btn.subtle{background:var(--t-surface-2);border-color:var(--t-line);color:var(--t-text);min-height:44px}
.btn.link{color:var(--t-muted);min-height:44px}
.btn.sm{min-height:44px}
.btn:focus-visible,select:focus-visible,.num:focus,.stylecard:focus-visible,.chips .chip:focus-visible,.mode:focus-visible{outline:none;box-shadow:var(--t-ring)}
#btnGen{letter-spacing:2px}
select,input[type=number]{border-color:var(--t-line-strong);border-radius:var(--t-radius-s);background:var(--t-surface);color:var(--t-text);min-height:44px}
input[type=range]{background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--t-accent-3),var(--t-primary-soft) 50%,var(--t-accent-2))}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--t-accent-3),var(--t-accent-2))}
input[type=range]::-webkit-slider-thumb,.row>input[type=range]::-webkit-slider-thumb{margin-top:-8px;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle,var(--t-surface) 0 24%,var(--t-primary) 27%);
  border:3px solid var(--t-surface);box-shadow:0 2px 6px rgba(0,0,0,.18),0 0 0 1px var(--t-primary)}
input[type=range]::-moz-range-thumb{background:var(--t-primary);border:3px solid var(--t-surface)}
input[type=checkbox]{accent-color:var(--t-primary)}
/* 触控 ≥44px：复选框放大到 22px，整行 label 做 44px 热区；高级折叠标题 44px */
label.row,.bgrow{min-height:44px}
label.row input[type=checkbox],.bgrow input[type=checkbox]{width:22px !important;height:22px;flex:none;margin:0}
.adv summary{min-height:44px;display:flex;align-items:center}
.drop{border:1.5px dashed var(--t-line-strong);border-radius:var(--t-radius-m);background:var(--t-surface-2);color:var(--t-primary-ink)}
.drop:hover,.drop.hot{border-color:var(--t-primary);background:var(--t-primary-soft)}
.drop .dicon{background:var(--t-primary-soft);color:var(--t-primary-ink)}
.drop b{color:var(--t-text)}
.thumb img{border-radius:var(--t-radius-m);border-color:var(--t-line)}
/* 尺寸胶囊 / 模式 / 风格卡 */
.chips .chip,.mode,.stylecard{border:1.5px solid var(--t-line);background:var(--t-surface);color:var(--t-text);
  box-shadow:var(--t-shadow-1);border-radius:var(--t-radius-m);transition:transform .12s,box-shadow .12s}
.chips .chip:hover{border-color:var(--t-line-strong);background:var(--t-surface-2)}
.chips .chip.on,.mode.on,.stylecard.on{border-color:var(--t-primary);background:var(--t-primary-soft);color:var(--t-primary-ink);
  box-shadow:inset 0 0 0 1px var(--t-primary),var(--t-shadow-1)}
.chips .chip.on i,.mode.on i{color:var(--t-primary-ink);opacity:1}
.mode b,.stylecard b{color:var(--t-text)}
.mode.on b,.stylecard.on b{color:var(--t-primary-ink)}
.chips .chip:active,.stylecard:active,.mode:active{transform:scale(.97)}
.stylecard img{background:#fff}
.stylecard[aria-disabled="true"]{background:var(--t-surface-2);border-style:dashed;border-color:var(--t-line-strong);box-shadow:none;cursor:not-allowed}
.stylecard[aria-disabled="true"] img{filter:grayscale(1) opacity(.5)}
.stylecard em{background:var(--t-warn-bg);color:var(--t-warn-text);border-radius:var(--t-radius-pill)}
.seg .btn.primary,#zoomBar .btn.primary{background:var(--t-primary-soft);color:var(--t-primary-ink);border:1.5px solid var(--t-primary);box-shadow:none}
.seg .btn{min-height:44px}
.btn.dl{border:1.5px solid var(--t-line-strong);background:var(--t-surface-2);color:var(--t-primary-ink);border-radius:var(--t-radius-m)}
.qstatus{background:var(--t-surface-2);border:1px solid var(--t-line);color:var(--t-text)}
.howto{background:var(--t-warn-bg);border-color:var(--t-warn-line);color:var(--t-warn-text);border-radius:var(--t-radius-m)}
.howto b{color:var(--t-warn-text)}
.maskchip{background:var(--t-primary-soft);border-color:var(--t-line-strong);color:var(--t-primary-ink)}
.maskchip button{background:var(--t-primary);color:var(--t-on-primary);border-radius:var(--t-radius-pill);min-height:32px}
.fab{background:var(--t-primary);color:var(--t-on-primary);box-shadow:var(--t-shadow-2);font-family:var(--t-font)}
.toast{background:var(--t-toast-bg);color:#fff;border:0;border-radius:var(--t-radius-pill);box-shadow:var(--t-shadow-2);font-family:var(--t-font)}
.pickchip .picktag{border-color:var(--t-primary);background:var(--t-primary-soft)}
@media (max-width:860px){
  .rowbtns{background:color-mix(in srgb,var(--t-surface) 94%,transparent);border-top:1px solid var(--t-line)}
  #genHint{color:var(--t-muted)}
}

/* ---------- 4. 弹层（裁剪 / 全屏工具条） ---------- */
.cropbox{border-radius:var(--t-radius-l)}
.fscol.on{background:var(--t-primary);border-color:var(--t-primary);color:var(--t-on-primary)}
.fscol.on em{color:rgba(255,255,255,.85)}

/* ---------- 5. 图纸区：保持中性高对比（不跟主题） ---------- */
.stage{background:var(--t-chart-bg);border-color:var(--t-chart-line);border-radius:12px}
#grid,#fsCanvas{background:#fff}
.legend .sw{background:#fff;border-color:var(--t-chart-line);color:var(--t-chart-text);border-radius:10px}
.legend .sw .code{color:var(--t-chart-text)}
.legend .sw:hover{border-color:#9AA1AB}
.legend .sw.active{background:#fff;border-color:#1B1F24;box-shadow:inset 0 0 0 1px #1B1F24}
.sizeinfo b,.stats b{color:var(--t-chart-text)}
.palette-grid span{border-color:rgba(0,0,0,.12)}

/* ---------- 6. 装饰 & 加载 ---------- */
.empty{color:var(--t-muted)}
.empty::before{content:"";display:block;width:84px;height:16px;margin:0 auto 14px;
  background:
    radial-gradient(circle at 8px 8px,var(--t-surface) 0 2.5px,transparent 3px) 0 0/21px 16px repeat-x,
    linear-gradient(90deg,var(--t-primary) 0 16px,transparent 16px 21px,var(--t-accent-2) 21px 37px,transparent 37px 42px,
      var(--t-accent-3) 42px 58px,transparent 58px 63px,var(--t-accent-4) 63px 79px,transparent 79px);
  -webkit-mask:radial-gradient(circle at 8px 8px,#000 7.5px,transparent 8px) 0 0/21px 16px repeat-x;
          mask:radial-gradient(circle at 8px 8px,#000 7.5px,transparent 8px) 0 0/21px 16px repeat-x;
  animation:t-bob 2.4s ease-in-out infinite}
/* 生成中：三颗豆子轮流跳（替换原转圈） */
.spin{display:inline-block;width:8px;height:8px;border:0;border-radius:50%;background:#fff;vertical-align:middle;
  margin:0 22px 0 2px;box-shadow:10px 0 0 rgba(255,255,255,.75),20px 0 0 rgba(255,255,255,.5);animation:t-bead .9s ease-in-out infinite}
@keyframes t-bead{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes t-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.spin,.empty::before{animation:none}}

/* ---------- 7. 简洁区新元素（品牌 / 自定义尺寸 / 竖图提示 / 风格卡 / 主题切换）布局 ---------- */
.brandbox{margin:2px 0 4px;padding:10px 12px;border-radius:var(--t-radius-m);background:var(--t-surface-2);border:1.5px solid var(--t-line-strong)}
.brandbox .bk{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:800;color:var(--t-text);margin-bottom:6px}
.brandbox .bk small{font-size:11.5px;font-weight:600;color:var(--t-primary-ink)}
.brandbox select{width:100%;max-width:none;min-height:48px;font-size:16px;font-weight:700;border-width:1.5px}
.chips{grid-template-columns:repeat(5,1fr)}
.chips .chip{min-width:44px;padding:6px 2px}
.chips .chip[data-size="custom"] b{font-size:14px}
.sizecustom{display:flex;align-items:center;gap:8px;margin:8px 0 2px;font-size:13px;color:var(--t-text)}
.sizecustom input{width:84px}
.tallhint{margin:8px 0 2px;color:var(--t-warn-text);background:var(--t-warn-bg);border:1px solid var(--t-warn-line);
  border-radius:var(--t-radius-s);padding:7px 10px;font-size:12.5px;line-height:1.5}
.tallhint::before{content:"💡 "}
.tallhint button{margin-left:4px;min-height:32px;padding:0 10px;font-size:12px;border-radius:999px;
  border:1px solid var(--t-warn-line);background:#fff;color:var(--t-warn-text);font-weight:700;cursor:pointer}
.stylerow{grid-template-columns:repeat(3,1fr);gap:6px}
@media (max-width:860px){.stylerow{grid-template-columns:repeat(var(--n,5),1fr)}}
.stylecard{position:relative;min-height:44px;cursor:pointer;font-family:var(--t-font)}
.stylecard img{image-rendering:pixelated;object-fit:contain}
.stylecard em{position:absolute;top:4px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:9.5px;font-weight:700;padding:0 6px;line-height:16px}
.stylenote{margin:6px 0 0}
/* 后端 recommend:true 的风格卡（如识别到简笔画时的「简笔插画」）：小徽标 + 主色描边虚线，不抢「已选」样式 */
.stylecard.rec:not(.on){border-color:var(--t-primary);border-style:dashed}
.stylecard em.recbadge{top:3px;right:3px;left:auto;transform:none;background:var(--t-primary);color:var(--t-on-primary);font-size:9px;padding:0 5px}

/* ---------- 8. 保存图纸入口（真链接 <a class="btn">；保存页本身由 /sheet/<sid> 输出，白底） ---------- */
.savebox{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:4px}
.savebox .btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:52px;cursor:pointer}
.savebox .savebtn{font-size:16px;letter-spacing:1px}
.savebox .btn.subtle{padding:0 16px;min-width:72px}
.savebox .btn[aria-disabled="true"]{opacity:.5;box-shadow:none;cursor:not-allowed}