/* ---- Bead Studio — scoped under .bead-studio so it can't leak into the rest of the site ---- */
.bead-studio{
  --bg:#fff; --paper:#fff; --ink:#0A0A0A; --sub:#6B6B6B; --faint:#BFBFBF;
  --accent:#0A0A0A; --accentd:#000; --line:#E5E5E5; --rail:#F2F2F2;
  --shadow-card:0 2px 14px -6px rgba(0,0,0,.10);
  --shadow-soft:0 18px 40px -18px rgba(0,0,0,.22);
  --shadow-pill:0 6px 16px -6px rgba(0,0,0,.20);
  font-family:var(--font-sans), -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;
}
.bead-studio *{box-sizing:border-box}
.bead-studio button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.bead-studio input{font-family:inherit}
.bead-studio .no-sb::-webkit-scrollbar{display:none}.bead-studio .no-sb{scrollbar-width:none}

@keyframes bsPopIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.14);opacity:1}100%{transform:scale(1)}}
@keyframes bsFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(.15);opacity:0}}
@keyframes bsRingPulse{0%,100%{box-shadow:0 0 0 3px rgba(201,123,94,.9),0 0 0 8px rgba(201,123,94,.16),inset 0 -3px 6px rgba(0,0,0,.22)}50%{box-shadow:0 0 0 3px rgba(201,123,94,.9),0 0 0 11px rgba(201,123,94,.04),inset 0 -3px 6px rgba(0,0,0,.22)}}
@keyframes bsModalIn{0%{transform:translateY(16px) scale(.97);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes bsFadeBg{from{opacity:0}to{opacity:1}}
@keyframes bsToastIn{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes bsNumPop{0%{transform:scale(.8);opacity:.4}100%{transform:scale(1);opacity:1}}
@keyframes bsRingSpin{0%{transform:rotate(-360deg)}100%{transform:rotate(0deg)}}

/* topbar — mobile only. On desktop the Home link lives in the left column and
   Share/Help move into the order rail, so the whole bar (and its empty middle)
   is gone and the tray + materials sit right under the site header. */
.bead-studio .topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
@media(min-width:1024px){.bead-studio .topbar{display:none}}
.bead-studio .tbin{max-width:1320px;margin:0 auto;padding:0 16px}
.bead-studio .row1{height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.bead-studio .row2{height:44px;display:flex;align-items:center;justify-content:space-between;font-size:14px}
.bead-studio .brand{font-family:var(--font-heading),inherit;font-weight:600;letter-spacing:.04em;font-size:18px}
.bead-studio .tbtools{display:flex;gap:2px}
.bead-studio .iconbtn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--sub)}
.bead-studio .iconbtn:hover{color:var(--ink)}
.bead-studio .iconbtn.back{width:auto;padding:0 10px 0 4px;gap:2px;font-size:15px;color:var(--ink)}
.bead-studio .pill{padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-card);white-space:nowrap;font-size:13px}
.bead-studio .pill b{color:var(--accent)}
.bead-studio .price{color:var(--sub);white-space:nowrap}.bead-studio .price b{color:var(--accent);font-weight:600;font-size:16px}.bead-studio .price i{color:var(--faint);font-size:11px;font-style:normal}

/* layout */
.bead-studio main{max-width:1600px;margin:0 auto;padding:4px 16px 28px}
.bead-studio .designer-frame{background:transparent;padding:0}
/* the reference layout is a single continuous scene: the tray is the hero in
   the middle, a steps rail floats on its left, order/history/guide cards float
   on its right, and the materials panel is a wide card along the bottom —
   NOT a 50/50 split. Mobile keeps stacked cards. */
.bead-studio .designer-main{display:grid;grid-template-columns:1fr;gap:12px;background:transparent;border-radius:0;box-shadow:none}
@media(min-width:1024px){.bead-studio .designer-main{gap:6px}}
.bead-studio .card-pane{background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-card)}

/* canvas */
.bead-studio .canvas-pane{padding:12px}
@media(min-width:1024px){.bead-studio .canvas-pane{display:flex;gap:20px;align-items:flex-start;justify-content:center;padding:2px 0 0;background:transparent;border:none;box-shadow:none}
.bead-studio .canvas-pane .cv-row{flex:1;min-width:0;justify-content:center;max-width:900px}}
.bead-studio .cv-row{display:flex;gap:12px;align-items:stretch}
.bead-studio .cv-col{flex:1;min-width:0}
/* left steps rail + right order/history/guide rail — desktop only, floating
   beside the large centered tray. Mobile keeps the stacked-card flow, where
   the top bar's Total/Wrist pill already covers the essentials. */
.bead-studio .steps-col{display:none}
.bead-studio .order-side{display:none}
.bead-studio .wrist-guide{display:none}
.bead-studio .left-col{display:none}
/* the "materials in use" drawer and the old Total/Wrist pill bar both predate
   the order-side panel and now just duplicate it — on desktop they were
   stealing width from the tray itself, so they're mobile-only from here on. */
@media(min-width:1024px){
  .bead-studio .bom{display:none}
  .bead-studio .row2{display:none}
  .bead-studio .left-col{display:flex;flex-direction:column;width:184px;flex-shrink:0}
  .bead-studio .back-link{display:inline-flex;align-items:center;gap:2px;align-self:flex-start;margin:0 0 14px 4px;padding:5px 10px 5px 6px;border-radius:999px;font-size:13px;color:var(--ink);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-card)}
  .bead-studio .back-link:hover{background:var(--rail)}
  .bead-studio .steps-col{display:block}
  .bead-studio .steps-t{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--faint);margin:0 0 8px 12px}
  .bead-studio .step-it{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-radius:16px;color:var(--sub)}
  .bead-studio .step-it.on{background:var(--ink);color:#fff}
  .bead-studio .step-n{width:20px;height:20px;flex-shrink:0;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:10px;margin-top:1px}
  .bead-studio .step-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
  .bead-studio .step-tx b{font-size:13px;font-weight:500}
  .bead-studio .step-tx i{font-style:normal;font-size:11px;opacity:.72;line-height:1.35}
  .bead-studio .wrist-guide{display:block;text-align:left;margin:0 0 14px 12px;min-height:32px}
  .bead-studio .wg-t{display:block;font-size:9px;font-weight:600;letter-spacing:.22em;color:var(--faint);margin-bottom:2px}
  .bead-studio .wg-v{font-size:12px;color:var(--sub);line-height:1.35}
  .bead-studio .order-side{display:block;width:230px;flex-shrink:0}
  .bead-studio .order-box{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow-card)}
  .bead-studio .order-help{position:absolute;top:10px;right:10px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--faint)}
  .bead-studio .order-help:hover{color:var(--ink);background:var(--rail)}
  .bead-studio .order-label{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin:0 0 6px}
  .bead-studio .order-price{font-size:23px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
  .bead-studio .order-price i{font-size:11px;color:var(--sub);font-style:normal;margin-left:2px}
  .bead-studio .order-row{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);padding:4px 0}
  .bead-studio .order-row b{color:var(--ink);font-weight:500}
  .bead-studio .order-box .mbtn{height:38px;font-size:13px;border-radius:12px}
  .bead-studio .history-box{margin-top:8px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:10px 10px 6px;box-shadow:var(--shadow-card)}
  .bead-studio .history-head{display:flex;align-items:center;justify-content:space-between;margin:0 4px 2px}
  .bead-studio .history-head .order-label{margin:0}
  .bead-studio .hist-share{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--sub)}
  .bead-studio .hist-share:hover{color:var(--accent);background:var(--rail)}
  .bead-studio .hist-it{display:flex;align-items:center;gap:4px;width:100%;border-radius:12px}
  .bead-studio .hist-it:hover{background:var(--rail)}
  .bead-studio .hist-open{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:8px;text-align:left}
  .bead-studio .hist-open .preview{flex-shrink:0;pointer-events:none}
  .bead-studio .hist-del{flex-shrink:0;width:28px;height:28px;margin-right:6px;border-radius:50%;color:var(--faint);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
  .bead-studio .hist-it:hover .hist-del{opacity:1}
  .bead-studio .hist-del:hover{color:#e0245e;background:rgba(224,36,94,.08)}
  .bead-studio .hist-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
  .bead-studio .hist-meta b{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bead-studio .hist-meta span{font-size:11px;color:var(--sub)}
  .bead-studio .guide-box{margin-top:8px;background:#161616;color:#d7d7d7;border-radius:18px;padding:12px;font-size:12px}
  .bead-studio .guide-head{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:600;letter-spacing:.16em;color:#7c7c7c;margin-bottom:8px}
  .bead-studio .g-nav{display:flex;align-items:center;gap:4px;font-size:10px;letter-spacing:0}
  .bead-studio .g-nav button{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:13px}
  .bead-studio .g-nav button:hover{color:#fff;background:rgba(255,255,255,.08)}
  .bead-studio .guide-box b{display:block;font-size:13px;font-weight:600;color:#fff;margin-bottom:4px}
  .bead-studio .guide-box p{margin:0;line-height:1.55;color:#a8a8a8}
}
.bead-studio .canvas-wrap{position:relative;width:100%;max-width:min(570px,57vh);margin:0 auto;aspect-ratio:1/1;background:url('/images/bead-tray.png') center/98% no-repeat;touch-action:none}
@keyframes bsTrayShake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-12px) rotate(-1.4deg)}30%{transform:translateX(11px) rotate(1.2deg)}45%{transform:translateX(-9px) rotate(-1deg)}60%{transform:translateX(7px) rotate(.7deg)}80%{transform:translateX(-4px) rotate(0)}}
.bead-studio .canvas-wrap.shaking{animation:bsTrayShake .52s cubic-bezier(.36,.07,.19,.97)}
@media(min-width:1024px){.bead-studio .canvas-wrap{max-width:min(840px,70.5vh)}}
.bead-studio .track{position:absolute;border-radius:50%;border:1px solid var(--line);transition:opacity .5s ease}
.bead-studio .center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;width:62%}
.bead-studio .center .bf{color:var(--sub);font-size:12px;letter-spacing:.04em;margin:0}
.bead-studio .center .wn{font-weight:600;letter-spacing:-.02em;color:var(--ink);font-size:34px;line-height:1.05;margin:2px 0 0}
.bead-studio .center .wn span{font-size:15px;color:var(--sub)}
.bead-studio .center .wn.small{font-size:18px;color:var(--sub)}
.bead-studio .center .win{color:var(--sub);font-size:13px;margin:0;line-height:1.1}
.bead-studio .center .per{color:var(--faint);font-size:11px;margin:4px 0 0}
.bead-studio .center .bmk{margin:0 auto}
.bead-studio .center .bname{font-weight:600;color:rgba(58,51,43,.8);font-size:15px;margin:4px 0 0}
.bead-studio .center .btag{color:var(--faint);font-size:10px;letter-spacing:.25em;margin:3px 0 0}
.bead-studio .layer{position:absolute;inset:0;-webkit-user-select:none;user-select:none}
.bead-studio .bead{position:absolute;left:0;top:0;touch-action:none;cursor:grab;transition:transform .62s cubic-bezier(.32,.72,0,1),opacity .45s cubic-bezier(.32,.72,0,1);will-change:transform}
.bead-studio .bead:active{cursor:grabbing}
.bead-studio .layer.dragging .bead{transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .2s ease}
/* while the drop/bounce physics sim is driving the beads (or a loose bead is
   being pushed around), transforms are set every frame — any CSS transition
   would smear the motion, so kill it. Removed the moment we gather into a ring,
   which re-enables the .62s glide-into-place transition above. */
.bead-studio .layer.sim .bead{transition:none}
.bead-studio .beadi{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:inset 0 -3px 6px rgba(0,0,0,.22),0 4px 10px -3px rgba(58,51,43,.4)}
.bead-studio .bead.sel .beadi{animation:bsRingPulse 1.6s ease-in-out infinite}
.bead-studio .beadi.pop{animation:bsPopIn .5s cubic-bezier(.34,1.56,.5,1)}
.bead-studio .bead.out .beadi{animation:bsFadeOut .3s ease forwards}
.bead-studio .gloss{position:absolute;left:22%;top:16%;width:42%;height:34%;background:radial-gradient(closest-side,rgba(255,255,255,.92),rgba(255,255,255,0));border-radius:50%;filter:blur(.4px);pointer-events:none}
.bead-studio .cemoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* canvas stage: tray + a toolbar of small round buttons that sit OUTSIDE the
   tray (to its right on desktop, below it on mobile) instead of overlaid on
   top of the canvas corners. */
.bead-studio .cv-stage{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px}
@media(max-width:639px){.bead-studio .cv-stage{flex-direction:column}}
.bead-studio .cv-tools{display:flex;flex-direction:row;gap:10px;align-items:center}
@media(min-width:640px){.bead-studio .cv-tools{flex-direction:column;justify-content:center}}
.bead-studio .toolbtn{width:40px;height:40px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--sub);box-shadow:var(--shadow-pill);display:flex;align-items:center;justify-content:center;transition:transform .1s,color .15s}
.bead-studio .toolbtn:hover{color:var(--accent)}.bead-studio .toolbtn:active{transform:scale(.9)}
.bead-studio .toolbtn.danger:hover{color:#e0245e}
/* the main tools live in one white pill strip beside the tray (like the
   reference); undo stays as its own round button just below the strip */
.bead-studio .tool-strip{display:flex;flex-direction:row;gap:2px;background:var(--paper);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-pill);padding:4px}
@media(min-width:640px){.bead-studio .tool-strip{flex-direction:column}}
.bead-studio .tool-strip .toolbtn{width:38px;height:38px;background:none;border:none;box-shadow:none}
/* gather button sits just below the tray, centred (like the reference's 收拢成串
   pill under the plate). It can't overlap the tray now that beads drop and pile
   against the lower edge. */
.bead-studio .gatherbtn{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px auto 0;height:38px;padding:0 22px;border-radius:999px;background:var(--accent);color:#fff;font-size:14px;font-weight:500;box-shadow:var(--shadow-pill);transition:background .15s,opacity .15s,transform .12s}
.bead-studio .gatherbtn:hover{background:var(--accentd)}
.bead-studio .gatherbtn:active{transform:scale(.96)}
.bead-studio .gatherbtn:disabled{opacity:.4;cursor:default}
.bead-studio .gatherbtn.is-done{background:var(--rail);color:var(--sub);box-shadow:none}
.bead-studio .selbar{margin-top:8px;display:flex;align-items:center;justify-content:center}
.bead-studio .selbar:empty{display:none}
.bead-studio .seltools{display:flex;align-items:center;gap:6px;background:rgba(58,51,43,.04);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 16px;animation:bsPopIn .3s}
.bead-studio .seltools .nm{font-size:13px;margin-right:4px}.bead-studio .seltools .nm span{color:var(--sub)}
.bead-studio .stbtn{width:32px;height:32px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:rgba(58,51,43,.7);display:flex;align-items:center;justify-content:center}
.bead-studio .stbtn:hover{color:var(--accent)}
.bead-studio .stbtn.del{background:var(--accent);color:#fff;border:none}.bead-studio .stbtn.del:hover{background:var(--accentd)}

/* BOM drawer */
.bead-studio .bom{flex-shrink:0;transition:width .3s;overflow:hidden}
.bead-studio .bom.open{width:160px}.bead-studio .bom.closed{width:36px}
.bead-studio .bom-in{height:100%;background:transparent;display:flex;flex-direction:column}
.bead-studio .bom-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:500;font-size:14px}
.bead-studio .bom-list{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:6px}
.bead-studio .bom-it{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px}
.bead-studio .bom-it .nm{flex:1;min-width:0}.bead-studio .bom-it .nm b{font-size:12px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bead-studio .bom-it .nm i{font-size:10px;color:var(--sub);font-style:normal}
.bead-studio .bom-it .q{color:var(--accent);font-weight:600;font-size:12px}
.bead-studio .bom-f{padding:8px 12px;border-top:1px solid var(--line);font-size:11px;color:var(--sub);display:flex;justify-content:space-between}
.bead-studio .bom-collapsed{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--sub)}
.bead-studio .bom-collapsed span{writing-mode:vertical-rl;font-size:12px;letter-spacing:.1em}
.bead-studio .bom-empty{color:var(--sub);font-size:12px;text-align:center;padding:30px 6px;line-height:1.6}

/* material panel */
.bead-studio .mpanel{display:flex;flex-direction:column;overflow:hidden}
.bead-studio .mhead{flex-shrink:0;padding:12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
@media(min-width:1024px){.bead-studio .mhead{padding:6px 14px}}
.bead-studio .tabs{display:flex;gap:4px;background:var(--rail);padding:4px;border-radius:999px}
.bead-studio .tab{padding:6px 14px;border-radius:999px;font-size:14px;color:var(--sub);transition:.15s}
.bead-studio .tab.on{background:var(--ink);color:#fff;box-shadow:var(--shadow-card)}
.bead-studio .randbtn{flex-shrink:0;height:32px;padding:0 12px;border-radius:999px;background:rgba(201,123,94,.12);color:var(--accent);display:flex;align-items:center;gap:5px;font-size:13px;font-weight:500}
.bead-studio .randbtn:hover{background:rgba(201,123,94,.22)}
.bead-studio .donebtn{margin-left:auto;flex-shrink:0;height:36px;padding:0 16px;border-radius:999px;background:var(--accent);color:#fff;box-shadow:var(--shadow-pill);display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500}
.bead-studio .donebtn:hover{background:var(--accentd)}.bead-studio .donebtn:active{transform:scale(.96)}
.bead-studio .msearch{flex-shrink:0;margin:6px 12px 5px;padding:6px 12px;display:flex;align-items:center;gap:8px;background:var(--rail);border-radius:12px;color:var(--faint)}
.bead-studio .msearch input{flex:1;min-width:0;background:none;border:none;font-size:13px;color:var(--ink)}
.bead-studio .msearch input::placeholder{color:var(--faint)}
.bead-studio .msearch input:focus{outline:none}
.bead-studio .twopane{display:flex;height:clamp(16rem,50vh,34rem)}
@media(min-width:1024px){.bead-studio .twopane{height:clamp(15rem,32vh,24rem)}}
.bead-studio .rail{width:104px;flex-shrink:0;background:var(--rail);border-right:1px solid var(--line);overflow:auto;overscroll-behavior:contain;height:100%;padding:4px 0}
@media(min-width:1024px){.bead-studio .rail{width:190px}}
.bead-studio .railitem{position:relative;width:100%;text-align:left;padding:12px;font-size:13px;line-height:1.2;color:var(--sub)}
@media(min-width:1024px){.bead-studio .railitem{padding:12px 16px;font-size:14px}}
.bead-studio .railitem.on{color:var(--ink);font-weight:500;background:var(--paper)}
.bead-studio .railitem.on:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:20px;border-radius:999px;background:var(--accent)}
.bead-studio .gridcol{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.bead-studio .countline{flex-shrink:0;padding:8px 12px 4px;display:flex;align-items:center;gap:4px;color:var(--faint);font-size:11px}
@media(min-width:1024px){.bead-studio .countline{display:none}}
.bead-studio .gridscroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 12px 12px}
.bead-studio .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
@media(min-width:1024px){.bead-studio .cards{gap:8px}}
.bead-studio .cards.cords{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.bead-studio .card{position:relative;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column;align-items:center;transition:.15s}
@media(min-width:1024px){
  .bead-studio .card{padding:6px 8px 6px}
  .bead-studio .card-add .swatch{width:36px!important;height:36px!important}
  .bead-studio .card .nm{margin-top:3px}
  .bead-studio .card .meta{margin-top:2px}
  .bead-studio .cstock{margin-top:2px;font-size:9px}
}
.bead-studio .card:hover{box-shadow:var(--shadow-card);border-color:rgba(201,123,94,.5)}
.bead-studio .card.has{border-color:rgba(201,123,94,.6)}
/* the whole top of the card (bead + name + price + blank sides) is one big Add
   button, so a tap anywhere up there drops a bead; the −/＋ stepper sits below it */
.bead-studio .card-add{display:flex;flex-direction:column;align-items:center;width:100%;background:none;border:none;padding:0;cursor:pointer}
.bead-studio .card-add:active{transform:scale(.97)}
.bead-studio .swatchbtn{display:flex}
.bead-studio .card .nm{display:block;font-size:12px;font-weight:500;margin-top:8px;text-align:center;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.bead-studio .card .meta{display:flex;justify-content:space-between;width:100%;margin-top:6px;font-size:11px}
.bead-studio .card .meta .d{color:var(--sub)}.bead-studio .card .meta .p{color:var(--accent);font-weight:500}
.bead-studio .cstock{display:block;width:100%;text-align:center;margin-top:4px;font-size:10px;color:var(--faint);letter-spacing:.01em}
.bead-studio .cstock.mid{color:var(--sub)}
.bead-studio .cstock.low{color:#e0245e}
/* count now lives as a small badge in the card's top-right corner (no more stepper
   row, so cards are shorter and more rows fit). Tap the card to add; tap the badge
   to remove one. */
.bead-studio .cbadge{position:absolute;top:-6px;right:-6px;z-index:3;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pill)}
.bead-studio .cbadge:hover{background:#e0245e}
.bead-studio .cbadge:active{transform:scale(.9)}
.bead-studio .cbadge[hidden]{display:none}
.bead-studio .cbadge.pp{animation:bsNumPop .35s cubic-bezier(.34,1.56,.5,1)}
.bead-studio .cord-cur{display:inline-flex;align-items:center;gap:3px;color:var(--accent);font-weight:600}
.bead-studio .badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pill);z-index:2}
.bead-studio .badge.pp{animation:bsNumPop .35s cubic-bezier(.34,1.56,.5,1)}
.bead-studio .stepper{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:6px;gap:4px}
.bead-studio .stepbtn{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--sub);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bead-studio .stepbtn:hover{color:var(--accent);border-color:var(--accent)}
.bead-studio .stepbtn:active{transform:scale(.9)}
.bead-studio .stepn{font-size:12px;font-weight:600;color:var(--ink);min-width:14px;text-align:center}
.bead-studio .stepn.pp{animation:bsNumPop .35s cubic-bezier(.34,1.56,.5,1)}
.bead-studio .stepbtn:disabled{opacity:.35;cursor:default}
.bead-studio .cordcard{text-align:left;align-items:stretch}
.bead-studio .cordcard.on{border-color:var(--accent);background:rgba(201,123,94,.08)}
.bead-studio .swatch{position:relative;border-radius:50%;flex-shrink:0;overflow:hidden;box-shadow:inset 0 -3px 5px rgba(0,0,0,.2),0 3px 8px -3px rgba(58,51,43,.4)}
.bead-studio .swatch .cemoji{font-size:18px}
.bead-studio .empty-note{color:var(--sub);font-size:14px;text-align:center;padding:40px 0}

/* HOME */
.bead-studio .home{max-width:1100px;margin:0 auto;padding:8px 16px 40px}
.bead-studio .hero{text-align:center;padding:26px 0 18px}
.bead-studio .hero h1{font-family:var(--font-heading),inherit;font-weight:600;letter-spacing:-.01em;font-size:30px;margin:0}
.bead-studio .hero p{color:var(--sub);margin:8px 0 16px}
.bead-studio .btn-primary{background:var(--accent);color:#fff;border-radius:999px;padding:10px 22px;font-size:15px;font-weight:500;box-shadow:var(--shadow-pill);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.bead-studio .btn-primary:hover{background:var(--accentd)}.bead-studio .btn-primary:active{transform:scale(.97)}
.bead-studio .home-sec{margin-bottom:26px}
.bead-studio .sec-t{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--sub);text-transform:uppercase;margin:0 0 12px}
.bead-studio .home-tabs{display:flex;gap:6px;justify-content:center;margin:6px 0 18px}
.bead-studio .htab{padding:8px 18px;border-radius:999px;font-size:15px;color:var(--sub);background:var(--paper);border:1px solid var(--line)}
.bead-studio .htab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bead-studio .dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.bead-studio .dcard{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.bead-studio .dcard-top{padding:18px;display:flex;justify-content:center;background:#F5F5F5;cursor:pointer;position:relative}
.bead-studio .preview{position:relative}
.bead-studio .preview.spin{animation:bsRingSpin 1s cubic-bezier(.22,.61,.36,1) both}
.bead-studio .pdot{position:absolute;border-radius:50%;box-shadow:inset 0 -1px 2px rgba(0,0,0,.25)}
.bead-studio .pdot.pop{animation:bsPopIn .5s cubic-bezier(.34,1.56,.5,1) both}
.bead-studio .dcard-body{padding:12px 14px 6px}
.bead-studio .dcard-title{font-weight:600;letter-spacing:-.01em;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bead-studio .dcard-author{color:var(--faint);font-size:12px;margin-top:1px}
.bead-studio .dcard-stats{margin-top:8px;font-size:13px;color:var(--sub)}.bead-studio .dcard-stats b{color:var(--ink)}
.bead-studio .dcard-recipe{margin-top:4px;font-size:11px;color:var(--faint);line-height:1.4;height:31px;overflow:hidden}
.bead-studio .dcard-foot{display:flex;align-items:center;gap:8px;padding:8px 12px 12px;margin-top:auto;flex-wrap:wrap}
.bead-studio .like{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:var(--rail);border:1px solid var(--line);color:var(--sub);font-size:13px}
.bead-studio .like.on{color:#e0245e;border-color:rgba(224,36,94,.4);background:rgba(224,36,94,.06)}
.bead-studio .like:active{transform:scale(.94)}
.bead-studio .like.pop{animation:bsNumPop .35s cubic-bezier(.34,1.56,.5,1)}
.bead-studio .mini{margin-left:auto;padding:6px 14px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;font-weight:500}
.bead-studio .mini.ghost{background:var(--rail);color:var(--ink);border:1px solid var(--line)}
.bead-studio .mini.danger{background:transparent;color:var(--sub);border:1px solid var(--line)}
.bead-studio .mini.danger:hover{color:#e0245e;border-color:rgba(224,36,94,.4)}
.bead-studio .mini.icon{padding:6px 9px}
.bead-studio .feat-badge{position:absolute;top:8px;left:8px;background:rgba(58,51,43,.78);color:#fff;font-size:10px;font-weight:600;padding:3px 8px;border-radius:999px;letter-spacing:.03em;z-index:2}
.bead-studio .sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bead-studio .sec-head .sec-t{margin:0}
.bead-studio .sort-toggle{display:flex;gap:4px;background:var(--rail);padding:3px;border-radius:999px}
.bead-studio .sort-btn{font-size:12px;padding:4px 12px;border-radius:999px;color:var(--sub)}
.bead-studio .sort-btn.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-card)}

/* modal / toast / ghost — toast & ghost are appended to document.body, not inside .bead-studio,
   so these two rules are intentionally left unscoped (plain IDs, low collision risk). */
.bead-studio .overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:16px}
.bead-studio .scrim{position:absolute;inset:0;background:rgba(58,51,43,.45);backdrop-filter:blur(4px);animation:bsFadeBg .25s}
.bead-studio .modal{position:relative;width:100%;max-width:460px;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-soft);max-height:88vh;overflow:auto;animation:bsModalIn .4s cubic-bezier(.22,1,.36,1)}
.bead-studio .modal.lg{max-width:520px}
.bead-studio .modal-x{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--rail);color:var(--sub);display:flex;align-items:center;justify-content:center}
.bead-studio .mpad{padding:24px}
.bead-studio .mtitle{font-family:var(--font-heading),inherit;font-weight:600;letter-spacing:-.01em;font-size:24px;text-align:center;margin:0}
.bead-studio .msub{color:var(--sub);font-size:14px;text-align:center;margin:6px 0 0}
.bead-studio .ti{width:100%;margin-top:16px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;font-size:15px;background:var(--rail)}
.bead-studio .ti:focus{outline:none;border-color:var(--accent)}
.bead-studio .statg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.bead-studio .stat{background:var(--rail);border-radius:16px;padding:12px 6px;text-align:center}
.bead-studio .stat .k{color:var(--sub);font-size:11px}.bead-studio .stat .v{font-weight:600;font-size:16px;margin-top:2px}.bead-studio .stat .s{color:var(--faint);font-size:10px}
.bead-studio .rbox{background:var(--rail);border-radius:16px;padding:14px;margin-top:14px}
.bead-studio .rrow{display:flex;justify-content:space-between;font-size:14px;padding:2px 0}.bead-studio .rrow .s{color:var(--sub)}
.bead-studio .mbtn{width:100%;height:48px;margin-top:10px;border-radius:16px;font-weight:500;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px}
.bead-studio .mbtn.primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-soft)}.bead-studio .mbtn.primary:hover{background:var(--accentd)}
.bead-studio .mbtn.ghost{background:var(--rail);color:var(--ink)}
.bead-studio .mbtn.line{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.bead-studio .mbtn.text{height:40px;color:var(--sub)}
/* share menu: social targets */
.bead-studio .share-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.bead-studio .share-ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:66px;border-radius:14px;background:var(--rail);border:1px solid var(--line);color:var(--ink);font-size:11px;text-decoration:none}
.bead-studio .share-ic:hover{background:var(--paper);box-shadow:var(--shadow-card)}
.bead-studio .share-ic:active{transform:scale(.96)}
.bead-studio .share-ic.sx:hover{color:#000}
.bead-studio .share-ic.sfb:hover{color:#1877F2}
.bead-studio .share-ic.sig:hover{color:#E1306C}
.bead-studio .share-note{font-size:11px;color:var(--faint);line-height:1.5;margin:12px 0 0;text-align:center}
/* guide popup (the ? on the ORDER card) */
.bead-studio .guide-list{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.bead-studio .guide-item{display:flex;gap:12px}
.bead-studio .guide-num{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
.bead-studio .guide-tx b{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.bead-studio .guide-tx p{margin:0;font-size:13px;color:var(--sub);line-height:1.5}
#toast{position:fixed;left:50%;bottom:40px;z-index:90;transform:translateX(-50%);background:#0A0A0A;color:#fff;font-size:14px;padding:10px 16px;border-radius:999px;box-shadow:0 18px 40px -18px rgba(0,0,0,.22);max-width:88vw;text-align:center;animation:bsToastIn .3s cubic-bezier(.22,1,.36,1);font-family:system-ui,sans-serif}
#ghost{position:fixed;z-index:80;border-radius:50%;overflow:hidden;pointer-events:none;box-shadow:inset 0 -3px 6px rgba(0,0,0,.2),0 14px 28px -8px rgba(58,51,43,.55)}

/* admin rows */
.bead-studio .adrow{display:flex;align-items:center;gap:12px;background:var(--rail);border:1px solid var(--line);border-radius:16px;padding:10px}
.bead-studio .adrow .nm{flex:1;min-width:0}.bead-studio .adrow .nm b{font-size:14px;font-weight:500;display:block}.bead-studio .adrow .nm i{font-size:11px;color:var(--sub);font-style:normal}
.bead-studio .upbtn{flex-shrink:0;font-size:12px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 10px;color:var(--accent);display:flex;align-items:center;gap:4px;cursor:pointer}
.bead-studio .upbtn:hover{background:var(--accent);color:#fff}
.bead-studio .grp-t{color:var(--sub);font-size:12px;font-weight:500;margin:0 0 8px}
.bead-studio .ti2{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px;background:var(--paper)}
.bead-studio .ti2:focus{outline:none;border-color:var(--accent)}
.bead-studio .ti2.num{width:62px;text-align:center}