.may-diy-studio{--ink:#302a29;--muted:#817773;--paper:#f7f3ef;--white:#fffdfb;--line:#dfd7d1;--wine:#76505a;--wine-dark:#55363e;--wine-soft:#efe2e5;}
.may-diy-studio,.may-diy-studio *{box-sizing:border-box}.may-diy-studio{margin:0;color:var(--ink);background:#f8f5f2;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}.may-diy-studio button,.may-diy-studio input{font:inherit}button:focus-visible,input:focus-visible{outline:3px solid #b28691;outline-offset:2px}
.picker-shell{min-height:100vh}.picker-header{height:78px;padding:0 2.6vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;background:#fffdfbf0;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;backdrop-filter:blur(16px)}.picker-brand strong,.picker-brand span{display:block}.picker-brand strong{font-size:18px}.picker-brand span{color:var(--muted);font-size:9px;letter-spacing:.13em;margin-top:2px}.header-steps{display:flex;align-items:center;gap:7px;color:#8e8480;font-size:10px}.header-steps b{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:var(--wine);color:#fff}.header-steps i{width:30px;height:1px;background:var(--line);margin:0 4px}.demo-label{justify-self:end;border:1px solid #d7c4c9;border-radius:99px;color:var(--wine);font-size:9px;letter-spacing:.08em;padding:6px 10px}
.picker-layout{display:grid;grid-template-columns:210px minmax(560px,1fr) 330px;min-height:calc(100vh - 78px)}
.filter-rail{background:#fff;border-right:1px solid var(--line);padding:24px 0 30px;position:sticky;top:78px;height:calc(100vh - 78px);overflow:auto}.rail-title{padding:0 18px 18px}.rail-title span{display:block;color:var(--wine);font-size:9px;font-weight:800;letter-spacing:.12em}.rail-title strong{display:block;font-size:12px;margin-top:5px}.category-group{border-top:1px solid #eee8e4}.category-button{width:100%;min-height:49px;border:0;background:#fff;color:#5f5653;display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:8px;padding:8px 15px;text-align:left;cursor:pointer}.category-button i{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#f5f1ee;color:var(--wine);font-size:10px;font-style:normal}.category-button span{font-size:11px;font-weight:650}.category-button b{color:#aa9e99}.category-button:hover,.category-button.is-active{background:#f7eff1;color:var(--wine-dark)}.category-button.is-active{box-shadow:inset 3px 0 var(--wine)}.category-button.is-active i{background:var(--wine);color:#fff}.sub-options{background:#fbf8f6;border-top:1px solid #eee7e2;max-height:272px;overflow:auto;padding:5px 0}.sub-options button{width:100%;min-height:36px;border:0;background:transparent;color:#746965;display:flex;justify-content:space-between;align-items:center;padding:7px 18px 7px 49px;text-align:left;cursor:pointer;font-size:10px}.sub-options button:hover{background:#f3e8ea}.sub-options button.is-selected{color:var(--wine-dark);font-weight:800;background:#efe1e4}.sub-options button b{color:var(--wine)}.filter-rail>p{color:#9a908c;font-size:8px;line-height:1.7;padding:17px 18px;margin:0;border-top:1px solid #eee8e4}
.bead-browser{padding:24px 2.4vw 50px;min-width:0}.browser-top{display:flex;gap:10px}.search-box{height:43px;flex:1;border:1px solid var(--line);border-radius:99px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 14px}.search-box span{color:var(--wine);font-size:18px}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:11px}.filter-count{border:1px solid #d7c7cb;border-radius:99px;background:var(--wine-soft);color:var(--wine-dark);padding:0 14px;font-size:9px}.active-filter-bar{min-height:52px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}.active-filter-bar>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.active-filter-bar span{color:var(--muted);font-size:9px;margin-right:3px}.active-filter-bar em{color:#aaa09b;font-size:9px;font-style:normal}.active-filter-bar button{border:1px solid #d8c8cc;border-radius:99px;background:#fff;color:var(--wine-dark);padding:5px 8px;font-size:8px;cursor:pointer}.active-filter-bar>button{border:0;background:none;color:var(--wine);white-space:nowrap}.result-title{display:flex;align-items:end;justify-content:space-between;margin:24px 0 16px}.result-title p{margin:0 0 5px;color:var(--wine);font-size:8px;font-weight:800;letter-spacing:.16em}.result-title h1{margin:0;font-family:"Noto Serif TC","Songti TC",serif;font-size:29px;font-weight:600}.result-title>span{color:var(--muted);font-size:9px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:10px}.product-card{min-height:292px;position:relative;border:1px solid #e3dad5;border-radius:18px;background:#fff;padding:13px 13px 44px;text-align:center;display:flex;flex-direction:column;align-items:center}.recommended{position:absolute;top:10px;left:10px;background:var(--wine-dark);color:#fff;border-radius:99px;padding:4px 7px;font-size:7px}.product-orb{height:104px;width:100%;display:grid;place-items:center;background:radial-gradient(circle,#fbf8f5 0 48%,transparent 49%)}.product-orb i{display:block;border-radius:50%;transition:.2s ease}.product-card h2{font-size:12px;margin:3px 0 8px}.size-prices{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.size-prices button{min-height:35px;border:1px solid #e4dcd7;border-radius:9px;background:#faf8f6;color:#736a66;display:flex;align-items:center;justify-content:space-between;padding:5px 7px;cursor:pointer}.size-prices button span{font-size:8px}.size-prices button strong{font-size:9px;color:#a9742e}.size-prices button.is-selected{border-color:var(--wine);background:var(--wine-soft);box-shadow:inset 0 0 0 1px var(--wine)}.size-prices button.is-selected span,.size-prices button.is-selected strong{color:var(--wine-dark);font-weight:800}.product-card .current-variant{width:100%;color:var(--muted);font-size:8px;margin:8px 0 0;text-align:left}.current-variant strong{display:block;color:#bd8733;font-size:10px;margin-top:2px}.product-card>button{position:absolute;right:12px;bottom:12px;width:29px;height:29px;border:0;border-radius:50%;background:var(--wine);color:#fff;cursor:pointer;font-size:16px}.product-card>button:hover{background:var(--wine-dark);transform:scale(1.05)}.data-note{color:#9c928e;font-size:8px;line-height:1.7;margin:14px 0 0}.empty-result{min-height:360px;border:1px dashed #d6cbc5;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff}.empty-result>span{font-size:30px;color:#b1979e}.empty-result h2{font-size:16px;margin:11px 0 4px}.empty-result p{color:var(--muted);font-size:10px}.empty-result button{border:0;border-radius:10px;background:var(--wine);color:#fff;padding:10px 14px;font-size:10px;cursor:pointer}
.bracelet-panel{background:linear-gradient(145deg,#f3ece7,#eae0d9);border-left:1px solid var(--line);padding:26px 24px;position:sticky;top:78px;height:calc(100vh - 78px);display:flex;flex-direction:column}.panel-heading{display:flex;align-items:flex-end;justify-content:space-between}.panel-heading p{margin:0;color:var(--wine);font-size:8px;font-weight:800;letter-spacing:.15em}.panel-heading h2{margin:3px 0 0;font-family:"Noto Serif TC","Songti TC",serif;font-size:26px;font-weight:600}.panel-heading button{border:0;background:none;color:var(--wine);font-size:9px;cursor:pointer}.mini-bracelet{width:270px;height:270px;position:relative;margin:34px auto 26px}.mini-string{position:absolute;width:205px;height:205px;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid #a9989150;border-radius:50%}.mini-slot{width:32px;height:32px;padding:0;position:absolute;left:50%;top:50%;border-radius:50%;cursor:pointer;z-index:2}.mini-slot.is-empty{border:1px dashed #ad9c95;background:#fff8;color:#9f8e87}.mini-slot.has-bead{border:0}.mini-slot.is-selected{outline:3px solid var(--wine);outline-offset:3px;z-index:4}.mini-slot span{font-size:11px}.mini-center{width:91px;height:91px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #ded2cc;border-radius:50%;background:#fffaf6dd;display:flex;flex-direction:column;align-items:center;justify-content:center}.mini-center small{color:var(--muted);font-size:8px}.mini-center strong{color:var(--wine-dark);font:700 22px Georgia,serif}.mini-center em{color:var(--muted);font-size:8px;font-style:normal}.slot-hint{text-align:center;color:var(--muted);font-size:9px;margin:0}.ai-mini{margin-top:22px;border:1px solid #d5c3c7;border-radius:14px;background:#fff9;padding:12px}.ai-mini span{color:var(--wine);font-size:9px;font-weight:800}.ai-mini p{margin:5px 0 0;color:#6e6265;font-size:9px;line-height:1.6}.panel-total{margin-top:auto;border-top:1px solid #d7cbc5;padding:17px 0 12px;display:flex;align-items:flex-end;justify-content:space-between}.panel-total span small,.panel-total span strong{display:block}.panel-total small{color:var(--muted);font-size:8px}.panel-total strong{font-size:12px;margin-top:3px}.panel-total em{color:var(--wine-dark);font-style:normal;font-size:24px;font-weight:800}.finish-button{width:100%;min-height:48px;border:0;border-radius:12px;background:var(--wine-dark);color:#fff;font-size:10px;font-weight:750;cursor:pointer}.finish-button:disabled{opacity:.4;cursor:not-allowed}
.finish-layer{position:fixed;inset:0;background:#241a1bc7;backdrop-filter:blur(8px);z-index:50;display:grid;place-items:center;padding:20px}.finish-card{width:min(420px,100%);border-radius:25px;background:var(--white);padding:32px;text-align:center}.finish-card>span{width:52px;height:52px;display:grid;place-items:center;margin:0 auto 16px;border-radius:50%;background:var(--wine-soft);color:var(--wine);font-size:21px}.finish-card>p{color:var(--wine);font-size:8px;font-weight:800;letter-spacing:.16em}.finish-card h2{font-family:"Noto Serif TC","Songti TC",serif;font-size:25px;font-weight:600}.finish-card>div{display:flex;justify-content:space-between;padding:14px 0;margin:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.finish-card small{color:var(--muted)}.finish-card strong{color:var(--wine)}.finish-card>button{width:100%;min-height:48px;border:0;border-radius:12px;background:var(--wine-dark);color:#fff;cursor:pointer}
@media(max-width:1120px){.picker-layout{grid-template-columns:190px 1fr}.bracelet-panel{position:relative;top:0;height:auto;grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}.mini-bracelet{margin-block:20px}.panel-total{margin-top:20px}.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.picker-header{height:68px;padding:0 15px;grid-template-columns:1fr auto}.header-steps{display:none}.picker-brand strong{font-size:15px}.picker-layout{display:block}.filter-rail{position:relative;top:0;height:auto;padding:16px 0 0;border-right:0}.rail-title{padding-inline:15px}.filter-rail nav{display:flex;overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.category-group{border:0;flex:0 0 auto}.category-button{min-width:94px;min-height:55px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:5px 9px;text-align:center}.category-button b{display:none}.category-button.is-active{box-shadow:inset 0 -3px var(--wine)}.category-button i{width:22px;height:22px}.sub-options{position:absolute;left:0;right:0;top:118px;z-index:10;display:flex;overflow:auto;max-height:none;padding:8px 12px;border-bottom:1px solid var(--line)}.sub-options button{width:auto;min-height:31px;white-space:nowrap;padding:5px 10px;border-radius:99px;background:#f5f0ed;margin-right:5px}.filter-rail>p{display:none}.bead-browser{padding:58px 15px 32px}.browser-top{display:block}.filter-count{display:none}.active-filter-bar{align-items:flex-start}.result-title h1{font-size:25px}.product-grid{grid-template-columns:1fr 1fr}.product-card{min-height:283px;padding:8px 8px 42px}.product-orb{height:94px;transform:scale(.88)}.size-prices{gap:3px}.size-prices button{padding:4px;display:block}.size-prices button span,.size-prices button strong{display:block}.size-prices button strong{margin-top:2px}.bracelet-panel{padding:24px 18px}.mini-bracelet{transform:scale(.9);margin:6px auto}.finish-button{position:sticky;bottom:10px}.data-note{font-size:8px}}

.bead-image-button{border:0;background:transparent;padding:0;border-radius:50%;cursor:pointer}.bead-image-button:hover{transform:scale(1.04)}.match-reason{width:100%;margin:4px 0 0;color:var(--wine);font-size:8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:10px}.slot-actions button{min-height:28px;border:1px solid #d5c3c7;border-radius:8px;background:#fff9;color:var(--wine-dark);font-size:8px;cursor:pointer}.slot-actions button:disabled{opacity:.35;cursor:not-allowed}
.engraving-module{margin-top:14px;border:1px solid #d5c3c7;border-radius:14px;background:#fff9;padding:12px}.engraving-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.engraving-heading span{color:var(--wine);font-size:8px;font-weight:800;letter-spacing:.1em}.engraving-heading h3{margin:3px 0 0;font-size:14px}.engraving-heading>strong{color:var(--wine-dark);font-size:9px}.engraving-options{display:flex;gap:14px;margin-top:10px}.engraving-options label{display:flex;align-items:center;gap:5px;color:#62585a;font-size:9px;cursor:pointer}.engraving-options input{accent-color:var(--wine)}.engraving-fields{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:11px}.engraving-text>span,.engraving-quantity>span{display:block;margin-bottom:5px;color:#62585a;font-size:9px;font-weight:700}.engraving-text input{width:100%;height:36px;border:1px solid #d8cbc7;border-radius:8px;background:#fff;padding:0 9px;color:var(--ink);font-size:10px}.engraving-text input[aria-invalid="true"]{border-color:#a54444}.engraving-text small,.engraving-quantity small{display:block;margin-top:4px;color:var(--muted);font-size:7px}.engraving-text em{display:block;min-height:11px;margin-top:2px;color:#a54444;font-size:8px;font-style:normal}.engraving-quantity>div{height:36px;display:flex;align-items:center;border:1px solid #d8cbc7;border-radius:8px;background:#fff;overflow:hidden}.engraving-quantity button{width:28px;height:100%;border:0;background:#f5efec;color:var(--wine-dark);cursor:pointer}.engraving-quantity button:disabled{opacity:.35;cursor:not-allowed}.engraving-quantity strong{min-width:24px;text-align:center;font-size:10px}.engraving-fee{display:flex;justify-content:space-between;margin-top:9px;padding-top:8px;border-top:1px solid #e3d9d4;color:var(--muted);font-size:9px}.engraving-fee strong{color:var(--wine-dark)}
.bracelet-panel{overflow-y:auto}.engraving-toggle{display:flex;align-items:center;gap:6px;margin-top:10px;color:#62585a;font-size:9px;cursor:pointer}.engraving-toggle input{accent-color:var(--wine)}.engraving-selected-slot{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding:9px;border:1px solid #dfd2cf;border-radius:10px;background:#fffaf7}.engraving-selected-slot small{color:var(--muted);font-size:8px}.engraving-selected-slot strong{color:var(--wine-dark);font-size:10px}.engraving-selected-slot em{color:var(--wine);font-size:9px;font-style:normal;font-weight:700}.engraving-module>.engraving-text{display:block;margin-top:10px}.engraving-confirm{width:100%;min-height:34px;margin-top:7px;border:0;border-radius:8px;background:var(--wine);color:#fff;font-size:9px;font-weight:700;cursor:pointer}.engraving-list{display:grid;gap:6px;margin-top:10px}.engraving-list>span{color:var(--muted);font-size:8px}.engraving-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border:1px solid #e2d7d2;border-radius:9px;background:#fff}.engraving-item span,.engraving-item b,.engraving-item small{display:block}.engraving-item b{color:var(--ink);font-size:9px}.engraving-item small{margin-top:2px;color:var(--wine);font-size:9px}.engraving-item button{border:0;background:transparent;color:var(--wine);font-size:8px;cursor:pointer}.engraving-selected{position:relative}.engraving-badge{position:absolute;top:-8px;right:-8px;width:18px;height:18px;display:flex!important;align-items:center;justify-content:center;border-radius:50%;background:#8b5a68;color:#fff;font-size:12px!important;line-height:1;box-shadow:0 2px 7px #55363e40;pointer-events:none}.engraving-selected img{transform:scale(1.08);transition:transform .2s ease}.engraving-selected::after{content:"已刻字\A" attr(data-engraving-text);white-space:pre;position:absolute;left:50%;bottom:calc(100% + 13px);transform:translateX(-50%);min-width:72px;padding:6px 8px;border-radius:7px;background:var(--wine-dark);color:#fff;font-size:8px;line-height:1.5;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease;box-shadow:0 4px 12px #302a2940}.engraving-selected:hover::after,.engraving-selected:focus-visible::after{opacity:1;visibility:visible}.mini-slot.has-bead{overflow:visible}
@media(max-width:410px){.product-grid{grid-template-columns:1fr 1fr;gap:7px}.product-card h2{font-size:11px}.product-card>button{right:8px;bottom:8px}.active-filter-bar>button{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}