:root{--jd-bg:#faf8f4;--jd-surface:#fff;--jd-surface2:#f5f1f0;--jd-text:#2f2c30;--jd-text-soft:#6c666b;--jd-text-mute:#a6a0a4;--jd-border:#dfd7d9;--jd-hair:#ebe4e5;--jd-btn:#2f2c30;--jd-btn-hover:#45414a;--jd-btn-ink:#faf8f4;--jd-accent:#c9afbe;--jd-accent-ink:#84657c;--jd-accent-soft:#ece3e8;--jd-r-lg:22px;--jd-r-md:16px;--jd-r-sm:12px;--jd-r-xs:8px;--jd-r-pill:999px;--jd-shadow-sm:0 4px 14px -6px rgba(47,44,48,.12);--jd-shadow-md:0 16px 30px -16px rgba(47,44,48,.17);--jd-font:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif;--jd-font-head:"Quicksand","PingFang SC",system-ui,sans-serif;--jd-ease:cubic-bezier(.4,.05,.2,1);--jd-dur:.22s}
.diy-jd-app{font-family:var(--jd-font);font-size:14px;color:var(--jd-text);background:var(--jd-bg);min-height:600px;display:flex;flex-direction:column}
.diy-jd-app *,.diy-jd-app ::before,.diy-jd-app ::after{box-sizing:border-box;margin:0;padding:0}
.diy-jd-topbar{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--jd-surface);border-bottom:1px solid var(--jd-hair);flex-shrink:0;z-index:10}
.diy-jd-logo{font-family:var(--jd-font-head);font-weight:700;font-size:18px;color:var(--jd-text);white-space:nowrap}
.diy-jd-logo span{color:var(--jd-accent-ink)}
.diy-jd-design-name{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--jd-bg);border-radius:var(--jd-r-pill);border:1px solid var(--jd-hair)}
.diy-jd-design-name input{border:none;background:none;font-family:var(--jd-font-head);font-size:14px;font-weight:600;color:var(--jd-text);outline:none;width:180px;text-align:center}
.diy-jd-spacer{flex:1}
.diy-jd-topbar-actions{display:flex;gap:8px}
.diy-jd-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:var(--jd-r-pill);font-family:var(--jd-font);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all var(--jd-dur) var(--jd-ease);white-space:nowrap}
.diy-jd-btn-primary{background:var(--jd-btn);color:var(--jd-btn-ink)}.diy-jd-btn-primary:hover{background:var(--jd-btn-hover)}
.diy-jd-btn-ghost{background:transparent;color:var(--jd-text-soft);border:1px solid var(--jd-border)}.diy-jd-btn-ghost:hover{background:var(--jd-bg)}
.diy-jd-btn-accent{background:var(--jd-accent-ink);color:#fff}.diy-jd-btn-accent:hover{opacity:.9}
.diy-jd-btn-sm{padding:5px 12px;font-size:12px}
.diy-jd-btn-full{width:100%;justify-content:center}
.diy-jd-main{display:flex;flex:1;overflow:hidden}
.diy-jd-stage-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative}
.diy-jd-stage-info{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;background:var(--jd-surface);border-bottom:1px solid var(--jd-hair);flex-shrink:0;gap:16px}
.diy-jd-info-wrist{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.diy-jd-info-wrist span:first-child{color:var(--jd-text-mute);font-size:12px}
.diy-jd-info-wrist span:nth-child(2){font-family:var(--jd-font-head);font-size:18px;font-weight:700;color:var(--jd-text)}
.diy-jd-info-wrist input[type=range]{width:100px;accent-color:var(--jd-accent-ink)}
.diy-jd-info-total{display:flex;align-items:center;gap:8px}
.diy-jd-info-total span:first-child{color:var(--jd-text-mute);font-size:12px}
.diy-jd-info-total span:last-child{font-family:var(--jd-font-head);font-size:20px;font-weight:700;color:var(--jd-accent-ink)}
.diy-jd-stage-wrap{flex:1 1 0%;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.diy-jd-stage-wrap canvas{display:block;touch-action:none}
.diy-jd-zoom-bar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:var(--jd-surface);border-radius:var(--jd-r-pill);padding:4px 8px;box-shadow:var(--jd-shadow-md)}
.diy-jd-zoom-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--jd-text-soft);font-size:18px;transition:all var(--jd-dur) var(--jd-ease)}
.diy-jd-zoom-btn:hover{background:var(--jd-bg);color:var(--jd-text)}
.diy-jd-catalog{flex:1 1 0%;min-height:0;background:var(--jd-surface);border-top:1px solid var(--jd-hair);display:flex;flex-direction:column;overflow:hidden}
.diy-jd-color-tabs{display:flex;gap:2px;padding:8px 12px 0;overflow-x:auto}
.diy-jd-color-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;border:none;background:none;cursor:pointer;border-radius:var(--jd-r-xs);transition:all var(--jd-dur) var(--jd-ease);min-width:42px;flex-shrink:0;font-size:11px;font-weight:600;color:var(--jd-text-mute)}
.diy-jd-color-tab:hover{background:var(--jd-bg)}
.diy-jd-color-tab.active{background:var(--jd-bg);color:var(--jd-text)}
.diy-jd-color-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--jd-border)}
.diy-jd-dot-rainbow{background:conic-gradient(#e8e4df 0 45deg,#9e9a9a 45deg 90deg,#c4625e 90deg 135deg,#d4b45e 135deg 180deg,#7da88c 180deg 225deg,#6e9bb8 225deg 270deg,#9378a8 270deg 315deg,#dda9b4 315deg 360deg)}
.diy-jd-tag-pills{display:flex;gap:6px;padding:8px 12px;flex-wrap:wrap;border-bottom:1px solid var(--jd-hair)}
.diy-jd-tag-btn{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--jd-r-xs);font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--jd-hair);background:var(--jd-surface);color:var(--jd-text-soft);transition:all var(--jd-dur) var(--jd-ease)}
.diy-jd-tag-btn:hover{border-color:var(--jd-border)}
.diy-jd-tag-btn.active{background:var(--jd-text);color:#fff;border-color:var(--jd-text)}
.diy-jd-bead-grid{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;overflow-y:auto;touch-action:pan-y}
.diy-jd-tile{display:flex;flex-direction:column;border-radius:var(--jd-r-sm);background:var(--jd-bg);cursor:pointer;transition:all var(--jd-dur) var(--jd-ease);overflow:hidden;border:1.5px solid transparent;width:90px;flex-shrink:0}
.diy-jd-tile:hover{border-color:var(--jd-border);box-shadow:var(--jd-shadow-sm)}
.diy-jd-tile.selected{border-color:var(--jd-accent-ink);background:var(--jd-accent-soft)}
.diy-jd-tile-thumb{aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.diy-jd-bead-dot{width:36px;height:36px;border-radius:50%;box-shadow:inset -3px -3px 6px rgba(0,0,0,.15),inset 3px 3px 6px rgba(255,255,255,.3);position:relative}
.diy-jd-bead-dot::after{content:'';position:absolute;top:8%;left:20%;width:30%;height:30%;background:rgba(255,255,255,.35);border-radius:50%}
.diy-jd-tile-info{padding:4px 6px 6px;text-align:center}
.diy-jd-tile-name{font-size:11px;font-weight:600;color:var(--jd-text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diy-jd-tile-price{font-weight:600;color:var(--jd-accent-ink);font-size:11px;margin-top:2px}
.diy-jd-tile-sizes{display:flex;gap:2px;margin-top:3px;justify-content:center}
.diy-jd-sz-btn{padding:1px 5px;border-radius:3px;border:1px solid var(--jd-hair);background:var(--jd-surface);font-size:10px;font-weight:600;cursor:pointer;color:var(--jd-text-mute)}
.diy-jd-sz-btn:hover{border-color:var(--jd-accent-ink);color:var(--jd-accent-ink)}
.diy-jd-sz-btn.active{background:var(--jd-accent-ink);color:#fff;border-color:var(--jd-accent-ink)}
.diy-jd-empty{width:100%;text-align:center;padding:24px;color:var(--jd-text-mute);font-size:13px}
.diy-jd-side-panel{position:absolute;top:42px;right:0;width:220px;max-height:calc(100% - 42px);background:var(--jd-surface);border-left:1px solid var(--jd-hair);border-bottom:1px solid var(--jd-hair);border-radius:0 0 0 var(--jd-r-md);display:flex;flex-direction:column;padding:16px;gap:12px;overflow-y:auto;z-index:5;box-shadow:var(--jd-shadow-md)}
.diy-jd-total-size{text-align:center;padding:8px 0}
.diy-jd-total-num{font-family:var(--jd-font-head);font-size:28px;font-weight:700;color:var(--jd-text)}
.diy-jd-total-unit{font-size:14px;color:var(--jd-text-mute);margin-left:2px}
.diy-jd-total-cm{font-size:13px;color:var(--jd-text-soft);margin-top:2px}
.diy-jd-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--jd-text);color:var(--jd-btn-ink);padding:10px 24px;border-radius:var(--jd-r-pill);font-size:13px;font-weight:500;box-shadow:0 26px 50px -22px rgba(47,44,48,.24);z-index:1000;opacity:0;transition:opacity var(--jd-dur) var(--jd-ease);pointer-events:none}
.diy-jd-toast.show{opacity:1}
@media(max-width:768px){.diy-jd-main{flex-direction:column}.diy-jd-side-panel{position:static;width:100%;max-height:200px;border-radius:0;border-left:none;border-top:1px solid var(--jd-hair)}}

@media(max-width:768px){
  .diy-jd-tile{width:80px}
  .diy-jd-sz-btn{padding:3px 6px;font-size:11px}
  .diy-jd-color-tab{padding:8px 10px;min-width:44px}
  .diy-jd-tag-btn{padding:5px 12px;font-size:13px}
  .diy-jd-btn-sm{padding:6px 14px;font-size:13px}
  .diy-jd-topbar{padding:8px 12px;gap:8px}
  .diy-jd-design-name input{width:120px}
  .diy-jd-side-panel{width:180px;padding:12px}
  .diy-jd-stage-info{padding:6px 12px}
  .diy-jd-info-wrist input[type=range]{width:80px}
}
@media(max-width:480px){
  .diy-jd-main{flex-direction:column}
  .diy-jd-side-panel{position:static;width:100%;max-height:150px;border-radius:0;border-left:none;border-top:1px solid var(--jd-hair)}
  .diy-jd-catalog{max-height:180px}
  .diy-jd-stage-wrap{min-height:250px}
  .diy-jd-topbar-actions{gap:4px}
  .diy-jd-topbar-actions .diy-jd-btn-sm{padding:4px 8px;font-size:11px}
}