.wcbd{margin:24px 0;padding:22px;border:1px solid #e5e7eb;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgb(17 24 39 / .07);font-family:inherit}.wcbd *{box-sizing:border-box}.wcbd__header,.wcbd__toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.wcbd__header h3{margin:3px 0 0;font-size:25px}.wcbd__eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;font-weight:700}.wcbd__total{padding:10px 14px;border-radius:12px;background:#f3f4f6;white-space:nowrap}.wcbd__toolbar{margin:20px 0}.wcbd__toolbar label{display:flex;align-items:center;gap:10px;font-weight:700}.wcbd__toolbar input{width:82px;min-height:42px;border:1px solid #d1d5db;border-radius:9px;padding:6px 10px}.wcbd__layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);gap:22px}.wcbd__preview-panel,.wcbd__stones-panel{border:1px solid #eceff3;border-radius:15px;padding:16px;background:#fafafa}.wcbd__hint,.wcbd__mobile-note{margin:0 0 10px;color:#6b7280;font-size:13px;line-height:1.45}.wcbd__mobile-note{display:none;margin-top:12px}.wcbd__bracelet{position:relative;width:100%;max-width:410px;margin:0 auto;background:radial-gradient(circle at center,#fff 0 34%,#f4f4f5 35% 35.7%,transparent 36%);border-radius:50%}.wcbd__slot{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:2px dashed #cbd5e1;background:#fff;color:#64748b;padding:0;display:grid;place-items:center;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}.wcbd__slot span{font-size:10px;font-weight:700}.wcbd__slot:hover,.wcbd__slot.is-over{transform:translate(-50%,-50%) scale(1.12);border-color:#111827;box-shadow:0 5px 18px rgb(15 23 42 / .17)}.wcbd__slot.is-filled{border-style:solid;border-color:rgb(0 0 0 / .14);background:radial-gradient(circle at 35% 30%,rgb(255 255 255 / .78),transparent 25%),var(--slot-color);color:#fff;box-shadow:inset -6px -7px 12px rgb(0 0 0 / .18),0 5px 12px rgb(15 23 42 / .18);cursor:grab}.wcbd__slot.is-filled:active{cursor:grabbing}.wcbd__progress{text-align:center;font-size:13px;font-weight:700;color:#475569}.wcbd.is-complete .wcbd__progress{color:#15803d}.wcbd__stones-panel h4{margin:0 0 12px}.wcbd__stones{display:grid;gap:9px}.wcbd__stone{width:100%;display:flex;align-items:center;gap:11px;text-align:left;border:1px solid #dfe3e8;border-radius:12px;background:#fff;padding:10px 12px;cursor:grab;transition:border-color .15s,transform .15s,box-shadow .15s}.wcbd__stone:hover,.wcbd__stone.is-selected{border-color:#111827;transform:translateY(-1px);box-shadow:0 7px 18px rgb(15 23 42 / .09)}.wcbd__stone.is-selected{outline:2px solid #111827}.wcbd__stone span:last-child{display:flex;justify-content:space-between;align-items:center;gap:8px;flex:1}.wcbd__stone small{color:#6b7280}.wcbd__stone-dot{width:30px;height:30px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 35% 30%,rgb(255 255 255 / .75),transparent 28%),var(--stone-color);box-shadow:inset -4px -5px 7px rgb(0 0 0 / .2)}@media(max-width:800px){.wcbd{padding:15px}.wcbd__header,.wcbd__toolbar{align-items:flex-start;flex-direction:column}.wcbd__layout{grid-template-columns:1fr}.wcbd__stones{grid-template-columns:repeat(2,minmax(0,1fr))}.wcbd__mobile-note{display:block}.wcbd__slot{width:38px;height:38px}.wcbd__stone span:last-child{display:block}.wcbd__stone small{display:block;margin-top:2px}}@media(max-width:480px){.wcbd__stones{grid-template-columns:1fr}.wcbd__total{width:100%;text-align:center}}