/* ===== 拼豆图纸生成器 —— 视觉按 design handoff 重做（playful cool-gray "toy" 风）=====
 * 功能保持我们的引擎：真实 MARD 色卡 / LAB 匹配 / 套装限定 / 平滑降噪 / 分页 PDF。
 */

/* 本地字体（子集化 woff2，只含 UI 用到的字，无外链，国内/离线都稳）*/
@font-face{font-family:'Noto Sans SC';src:url('../fonts/NotoSansSC-subset.woff2') format('woff2');font-weight:100 900;font-display:swap;}
@font-face{font-family:'ZCOOL KuaiLe';src:url('../fonts/ZCOOLKuaiLe-subset.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Baloo 2';src:url('../fonts/Baloo2-subset.woff2') format('woff2');font-weight:100 900;font-display:swap;}

:root{
  --ink:#33404D; --label:#465563; --body:#5C6B7A;
  --muted:#7C8794; --muted2:#8A93A3; --faint:#AEB7C4;
  --line:#E6EAF0; --line2:#E9EEF5;
  --soft:#F6F8FB; --soft2:#F7F9FC;
  --blue:#3B82E6; --blue-d:#2F6BD0; --blue-g1:#6FA8FF;
  --amber:#F5A524; --amber-d:#E08A1E;
  --green:#22B07A; --green-d:#1C9A69; --green2:#2FA678;
  --violet:#6A5AE0; --violet-d:#5646C4;
  --board:#FFFBF4;
  --card-sh:0 14px 30px -18px rgba(45,60,80,.4), 0 3px 0 rgba(205,216,232,.55);
  --step-sh:0 8px 22px -14px rgba(45,60,80,.35);
  --disp:'ZCOOL KuaiLe', ui-rounded, 'PingFang SC', 'Microsoft YaHei', cursive;
  --num:'Baloo 2', ui-monospace, Menlo, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at center, rgba(80,100,130,.07) 0 2.5px, transparent 3px) 0 0/24px 24px,
    linear-gradient(160deg,#F1F4F8 0%,#EDF1F6 50%,#E9F2F2 100%);
  background-attachment:fixed;
}
::selection{background:#BFDBFE}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.container{max-width:1240px;margin:0 auto;padding:26px 20px 60px}

/* ---------- Header ---------- */
.app-header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.logo{width:60px;height:60px;flex:0 0 auto;filter:drop-shadow(0 6px 10px rgba(45,60,80,.28));animation:floaty 4s ease-in-out infinite}
.head-text{flex:1 1 300px;min-width:0}
.head-text h1{margin:0;font-family:var(--disp);font-size:34px;line-height:1.1;color:var(--ink);letter-spacing:.5px;font-weight:400}
.head-text p{margin:5px 0 0;font-size:14.5px;color:var(--muted)}
.pill{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 16px;box-shadow:0 6px 16px -8px rgba(45,60,80,.4);flex:0 0 auto;white-space:nowrap}
.pill .dot{width:9px;height:9px;border-radius:50%;background:#6FD6AE;box-shadow:0 0 0 4px rgba(111,214,174,.25)}
.pill span:last-child{font-family:var(--num);font-weight:700;font-size:13px;color:var(--body)}

/* ---------- Steps ---------- */
.steps{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-bottom:22px}
.step{flex:1 1 200px;display:flex;align-items:center;gap:13px;background:#fff;border:2px solid var(--line);border-radius:20px;padding:14px 18px;box-shadow:var(--step-sh)}
.step-badge{width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--num);font-weight:800;font-size:19px}
.step-badge.b{background:#E4EEFC;color:var(--blue)}
.step-badge.b2{background:#E7F5FF;color:#3D93D8}
.step-badge.g{background:#E4F8EF;color:var(--green2)}
.step-title{font-family:var(--disp);font-size:16px;color:var(--ink);white-space:nowrap}
.step-sub{font-size:12px;color:var(--muted2)}

/* ---------- Workspace ---------- */
.workspace{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.col-left{flex:1 1 320px;max-width:390px;min-width:290px;display:flex;flex-direction:column;gap:18px;position:sticky;top:16px}
.col-right{flex:2.4 1 470px;min-width:300px;display:flex;flex-direction:column;gap:18px}
@media (max-width:820px){ .col-left{position:static;max-width:none} }

.card{background:#fff;border-radius:26px;border:2px solid var(--line);box-shadow:var(--card-sh);padding:20px}
.card-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.card-head .num{width:26px;height:26px;border-radius:9px;background:#E4EEFC;color:var(--blue);font-family:var(--num);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.card-head .num.amber{background:#FDEFD6;color:var(--amber-d)}
.card-head .t{font-family:var(--disp);font-size:18px;color:var(--ink)}
.card-head .spacer{flex:1}

/* ---------- Dropzone ---------- */
.dropzone{text-align:center;padding:26px 16px;border-radius:20px;cursor:pointer;border:2.5px dashed #CBD5E1;background:var(--soft2);transition:all .14s}
.dropzone:hover{border-color:#9CC0F5}
.dropzone.drag{border-color:var(--blue);background:#EEF4FE;transform:scale(1.015)}
.dropzone.has-image{padding:14px}
.dz-icon{width:52px;height:52px;margin:0 auto 8px;border-radius:16px;background:linear-gradient(150deg,var(--blue-g1),var(--blue));display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px -8px rgba(59,130,230,.5)}
.dz-title{font-family:var(--disp);font-size:16px;color:var(--label)}
.dz-sub{font-size:12px;color:#9AA4B2;margin-top:3px}
.dropzone img{max-width:100%;max-height:150px;border-radius:12px;display:none;margin:0 auto 8px}
.upload-compact{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--soft2);border:2px solid var(--line2);border-radius:14px;padding:12px 14px}
.uc-label{font-size:13px;font-weight:600;color:var(--body)}
.uc-btn{cursor:pointer;border:2px solid #CBDBF5;background:#fff;color:var(--blue);border-radius:11px;padding:7px 13px;font-size:13px;font-weight:700;font-family:var(--num)}
.uc-btn:hover{background:#EEF4FE}

/* ---------- Samples ---------- */
.samples-hint{font-size:13px;color:var(--muted);margin:14px 0 8px}
.samples{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sample{background:#fff;border:2px solid var(--line);border-radius:14px;padding:6px;cursor:pointer;transition:all .14s;text-align:center}
.sample:hover{transform:translateY(-3px);border-color:#9CC0F5}
.sample img{width:100%;aspect-ratio:1/1;border-radius:10px;background:var(--soft2);display:block}
.sample .lbl{font-size:11.5px;color:var(--body);margin-top:5px;font-weight:500}

/* ---------- Fields / sliders ---------- */
.field{margin:18px 0}
.field:first-of-type{margin-top:4px}
.field-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.field-head label{font-size:14px;font-weight:500;color:var(--label)}
.field-head .v{font-family:var(--num);font-weight:800;font-size:22px;line-height:1}
.v.amber{color:var(--amber-d)} .v.blue{color:var(--blue)} .v.green{color:var(--green2)} .v.ink{color:#5A616E} .v.violet{color:var(--violet)} .v.teal{color:#1F9FB0}
.hint{font-size:12px;color:var(--muted);margin-top:7px}
.field-label{display:block;font-size:14px;font-weight:500;color:var(--label);margin-bottom:9px}
.param-divider{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.3px;margin:22px 0 2px;padding-top:16px;border-top:1px dashed var(--line)}
.adv-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;background:var(--soft2);border:2px solid var(--line2);border-radius:14px;padding:11px 14px;margin:20px 0 0;font-family:'Noto Sans SC';font-weight:700;font-size:13px;color:var(--body);transition:all .14s}
.adv-toggle:hover{border-color:#9CC0F5;background:#fff}
.adv-toggle .chev{transition:transform .2s;font-size:12px;color:var(--muted)}
.adv-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.adv-body{margin-top:4px}
.seg.lv .seg-btn{font-size:12.5px;padding:8px 3px}
.seg.lv .seg-btn.active{background:linear-gradient(150deg,#8FA0B5,#5C6B7A);box-shadow:0 5px 12px -6px rgba(92,107,122,.5)}

input[type=range].slider{
  -webkit-appearance:none;appearance:none;width:100%;height:16px;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg, var(--fill-a,#F5A524) 0 var(--fill,0%), #E9EEF5 var(--fill,0%) 100%);
}
input[type=range].slider.amber{--fill-a:#F5A524}
input[type=range].slider.blue{--fill-a:#3D93D8}
input[type=range].slider.green{--fill-a:#2FA678}
input[type=range].slider.ink{--fill-a:#5A616E}
input[type=range].slider.violet{--fill-a:#6A5AE0}
input[type=range].slider.teal{--fill-a:#1F9FB0}
input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--thumb,#F5A524);box-shadow:0 4px 10px rgba(0,0,0,.18);cursor:grab}
input[type=range].slider.amber::-webkit-slider-thumb{border-color:#F5A524}
input[type=range].slider.blue::-webkit-slider-thumb{border-color:var(--blue)}
input[type=range].slider.green::-webkit-slider-thumb{border-color:var(--green2)}
input[type=range].slider.ink::-webkit-slider-thumb{border-color:#5A616E}
input[type=range].slider.violet::-webkit-slider-thumb{border-color:#6A5AE0}
input[type=range].slider.teal::-webkit-slider-thumb{border-color:#1F9FB0}
input[type=range].slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #F5A524;box-shadow:0 4px 10px rgba(0,0,0,.18);cursor:grab}

/* ---------- Toggle ---------- */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0}
.toggle-row .lab{font-size:14px;font-weight:500;color:var(--label)}
.switch{position:relative;width:50px;height:28px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .track{position:absolute;inset:0;background:#D5DBE3;border-radius:999px;transition:.16s}
.switch .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:.16s}
.switch input:checked ~ .track{background:var(--green)}
.switch input:checked ~ .knob{transform:translateX(22px)}

/* ---------- Segmented (色卡) ---------- */
.seg{display:flex;gap:4px;background:#EDF0F5;border-radius:14px;padding:4px}
.seg-btn{flex:1;cursor:pointer;border:none;border-radius:11px;padding:9px 6px;font-family:'Noto Sans SC';font-weight:700;font-size:12.5px;color:var(--muted);background:transparent;transition:all .14s}
.seg-btn.active{color:#fff;background:linear-gradient(150deg,#5B9BF5,var(--blue));box-shadow:0 5px 12px -5px rgba(59,130,230,.5)}

select{width:100%;padding:9px 11px;border:2px solid var(--line2);border-radius:12px;background:#fff;font-size:13px;color:var(--ink);font-family:inherit;cursor:pointer}
textarea{width:100%;padding:9px 11px;border:2px solid var(--line2);border-radius:12px;background:#fff;font-size:12.5px;font-family:var(--num);resize:vertical;line-height:1.5;color:var(--ink)}
select:focus,textarea:focus{outline:none;border-color:var(--blue)}

/* ---------- Series checkboxes (按系列勾选) ---------- */
.series-chips{display:flex;flex-wrap:wrap;gap:6px}
.series-chip{cursor:pointer;border:2px solid var(--line);background:#fff;color:var(--muted);border-radius:11px;padding:6px 9px;font-family:var(--num);font-weight:700;font-size:13px;display:flex;align-items:baseline;gap:4px;transition:all .12s}
.series-chip small{font-family:'Noto Sans SC';font-weight:500;font-size:10.5px;color:var(--faint)}
.series-chip.active{border-color:var(--blue);background:#EEF4FE;color:var(--blue)}
.series-chip.active small{color:var(--blue-d)}
.series-chip:not(.active){opacity:.7}

/* ---------- Series-bag summary (照着买) ---------- */
.series-bags{background:#FFF9F0;border:2px solid #FBE4C4;border-radius:16px;padding:12px;margin-bottom:14px}
.sb-title{font-size:12.5px;font-weight:700;color:var(--amber-d);margin-bottom:9px}
.sb-list{display:flex;flex-wrap:wrap;gap:8px}
.sb-pill{display:inline-flex;align-items:center;gap:5px;background:#fff;border:2px solid #F1E2CC;border-radius:999px;padding:5px 11px;font-family:var(--num);font-weight:700;font-size:13px;color:var(--ink)}
.sb-pill .sb-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.sb-pill b{color:var(--amber-d)}
.sb-pill small{font-family:'Noto Sans SC';font-weight:500;font-size:10.5px;color:var(--muted)}
.sb-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sb-btn{cursor:pointer;border:2px solid #F1E2CC;background:#fff;color:var(--amber-d);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;font-family:'Noto Sans SC',sans-serif;transition:.12s}
.sb-btn:hover{background:#FFF4E2}
.sb-btn.buy{border:none;color:#fff;background:linear-gradient(150deg,#FFB94D,#F5A524);box-shadow:0 4px 0 #E08A1E}
.sb-btn.buy:active{transform:translateY(2px);box-shadow:0 2px 0 #E08A1E}

/* ---------- Primary generate button ---------- */
.btn-primary{width:100%;cursor:pointer;border:none;border-radius:16px;padding:14px;margin-top:8px;font-family:var(--disp);font-size:17px;color:#fff;background:linear-gradient(150deg,var(--blue-g1),var(--blue));box-shadow:0 5px 0 var(--blue-d);transition:transform .1s, box-shadow .1s}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--blue-d)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:0 5px 0 #C3CAD4;background:linear-gradient(150deg,#c9d4e6,#aeb9cc)}
.status{font-size:12px;color:var(--muted);min-height:16px;margin-top:10px;text-align:center}

/* ---------- Preview panes ---------- */
.reset-btn{cursor:pointer;border:2px solid #CBDBF5;background:#fff;color:var(--blue);border-radius:11px;padding:6px 12px;font-size:12.5px;font-weight:700;font-family:var(--num)}
.reset-btn:hover{background:#EEF4FE}
.panes{display:flex;flex-wrap:wrap;gap:14px}
.pane{flex:1 1 200px}
.pane-cap{font-size:12.5px;font-weight:700;margin-bottom:7px;text-align:center}
.pane-cap.orig{color:var(--body)} .pane-cap.bead{color:var(--blue-d)}
.pane-frame{aspect-ratio:1/1;border-radius:18px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}
.pane-frame.orig{background:var(--soft2)}
.pane-frame.bead{background:var(--board);border-color:#DDE6F0}
.pane-frame img,.pane-frame canvas{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.pane-empty{color:var(--faint);font-size:12.5px;text-align:center;padding:10px}
.pane-empty .ic{font-size:26px;display:block;margin-bottom:6px}

/* ---------- Stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.stat{background:var(--soft2);border:2px solid var(--line2);border-radius:14px;padding:10px 8px;text-align:center}
.stat .n{font-family:var(--num);font-weight:800;font-size:17px;line-height:1.1}
.stat .l{font-size:11px;color:var(--muted);margin-top:3px}
.stat.blue .n{color:var(--blue)} .stat.amber .n{color:var(--amber-d)} .stat.green .n{color:var(--green2)}

/* ---------- Chart / pattern ---------- */
.chart-tools{display:none;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.chart-tools .spacer{flex:1}
.tool-btn{cursor:pointer;border:2px solid var(--line2);background:#fff;color:var(--label);border-radius:11px;padding:6px 12px;font-size:13px;font-weight:700;font-family:var(--num)}
.tool-btn:hover{border-color:#9CC0F5}
.chart-wrap{display:none;max-height:520px;overflow:auto;border:2px solid var(--line);border-radius:16px;background:#fff;padding:10px;text-align:center}
.chart-wrap canvas{image-rendering:pixelated;display:inline-block}
.chart-note{font-size:12px;color:var(--muted);margin-top:9px}

/* ---------- Empty placeholders ---------- */
.empty{border:2.5px dashed #D5DBE3;border-radius:16px;background:var(--soft2);padding:34px 16px;text-align:center;color:var(--faint)}
.empty .ic{font-size:30px;display:block;margin-bottom:8px}
.empty .tx{font-size:13px}

/* ---------- Color chips ---------- */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.chip{background:var(--soft2);border:2px solid var(--line2);border-radius:16px;padding:10px;display:flex;align-items:center;gap:10px}
.chip-sw{width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:var(--num);font-weight:800;font-size:12px;border:2px solid rgba(0,0,0,.06);box-shadow:inset 0 -2px 4px rgba(0,0,0,.10)}
.chip-info{flex:1;min-width:0}
.chip-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.chip-name{font-size:13px;color:var(--label);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-code{font-family:var(--num);font-weight:700;font-size:11px;color:var(--muted);flex:0 0 auto}
.chip-barwrap{height:6px;border-radius:999px;background:#E9EEF5;margin:6px 0 4px;overflow:hidden}
.chip-bar{height:100%;border-radius:999px}
.chip-count{font-family:var(--num);font-weight:800;font-size:16px;color:var(--ink)}
.chip-count small{font-size:11px;font-weight:500;color:var(--muted);margin-left:2px}

/* ---------- Export card ---------- */
.export-card{background:linear-gradient(#F3F6FA,#EEF2F7)}
.export-grid{display:none;flex-wrap:wrap;gap:12px}
.btn3d{cursor:pointer;border:none;border-radius:14px;padding:12px 16px;font-family:var(--disp);font-size:15px;color:#fff;transition:transform .1s, box-shadow .1s;flex:1 1 150px}
.btn3d:active{transform:translateY(3px)}
.btn3d.blue{background:linear-gradient(150deg,var(--blue-g1),var(--blue));box-shadow:0 5px 0 var(--blue-d)}
.btn3d.blue:active{box-shadow:0 2px 0 var(--blue-d)}
.btn3d.violet{background:linear-gradient(150deg,#8E7BF0,var(--violet));box-shadow:0 5px 0 var(--violet-d)}
.btn3d.violet:active{box-shadow:0 2px 0 var(--violet-d)}
.btn3d.green{background:linear-gradient(150deg,#77DEB6,var(--green2));box-shadow:0 5px 0 var(--green-d)}
.btn3d.green:active{box-shadow:0 2px 0 var(--green-d)}
.btn3d.neutral{background:#fff;color:#475569;border:2px solid #CBD5E1;box-shadow:0 5px 0 #E2E8F0}
.btn3d.neutral:active{box-shadow:0 2px 0 #E2E8F0}

.footnote{color:var(--muted);font-size:12px;margin-top:14px;line-height:1.6}