.ring-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ring-choice{display:flex;align-items:center;gap:7px;text-align:left;padding:9px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.ring-choice.selected{border-color:#9ab9b1;background:#f0f6f3}
.ring-choice i{display:block;flex:0 0 auto;width:25px;height:25px;border-radius:50%;border:3px solid #b2b4b8;box-shadow:inset 2px 2px 3px rgba(255,255,255,.9),0 2px 4px rgba(57,58,65,.14)}
.ring-choice[data-ring="elastic"] i{border-color:#889196}
.ring-choice[data-ring="silver"] i{border-color:#c5cad1}
.ring-choice[data-ring="steel"] i{border-color:#687178}
.ring-choice[data-ring="gold"] i{border-color:#cf9d51}
.ring-choice[data-ring="elastic"] i{border-style:double;border-width:5px;background:repeating-conic-gradient(from 0deg,#a6adb0 0deg 8deg,#778187 8deg 14deg)}
.ring-choice[data-ring="silver"] i{background:linear-gradient(135deg,#fff 17%,#abb3bc 50%,#f2f4f6 77%)}
.ring-choice[data-ring="steel"] i{background:linear-gradient(135deg,#e0e4e7 10%,#5e696f 54%,#c8d0d4 87%)}
.ring-choice[data-ring="gold"] i{background:linear-gradient(135deg,#f7e4ad 10%,#bd8737 53%,#f0ce83 87%)}
.ring-choice b,.ring-choice small{display:block}
.ring-choice b{font-size:10px}
.ring-choice small{font-size:8px;color:var(--muted);margin-top:3px}
.selected-hardware{display:flex;align-items:center;gap:9px;margin-top:16px;padding:13px;border-radius:15px;background:#f0f5f3}
.hardware-icon{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#75968e;font-size:17px}
.selected-hardware div{flex:1}
.selected-hardware p{font-size:9px;color:#82938e;margin:0}
.selected-hardware b,.selected-hardware small{display:block}
.selected-hardware b{font-size:11px;margin:3px 0}
.selected-hardware small{font-size:9px;line-height:1.35;color:var(--muted)}
.selected-hardware button{border:0;background:none;color:#6c8e85;font-size:10px;white-space:nowrap}
.home-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.home-product-grid article{position:relative;background:#fff;border-radius:15px;padding:8px;box-shadow:0 6px 15px rgba(64,58,55,.06);overflow:hidden}
.home-product-grid .mini-bracelet{position:static;display:block;width:100%;height:auto;border-radius:10px;background:#e6eeeb}
.home-product-grid span{position:absolute;left:13px;top:13px;border-radius:6px;background:rgba(255,255,255,.78);padding:3px 5px;color:#7d779f;font-size:8px}
.home-product-grid h3{font-size:12px;margin:9px 2px 3px}
.home-product-grid p{font-size:9px;color:var(--muted);margin:0 2px 5px}
.home-product-grid b{font-size:10px;color:#b27b7b;margin:0 2px}
.detail-meaning,.detail-materials{padding:14px 0;border-bottom:1px solid var(--line)}
.detail-meaning h3,.detail-materials h3{font-size:12px;margin:0 0 7px}
.detail-meaning p{font-size:10px;line-height:1.7;color:var(--muted);margin:0}
.detail-materials p{display:flex;align-items:center;gap:8px;font-size:10px;margin:8px 0}
.detail-materials .stone{width:16px;height:16px}
.detail-materials p i{width:16px;text-align:center;color:#8b8c93;font-style:normal;font-size:16px}
.detail-materials p b{margin-left:auto;font-size:10px;color:#77729a;font-weight:400}
.product-scroll .detail-meaning{margin-top:15px}

/* The save affordance stays quiet until the current string is a real draft. */
.topbar #save-design{width:auto;min-width:36px;height:25px;padding:0 6px;border:1px solid transparent;border-radius:13px;background:transparent;color:#6f6a92;font-size:10px;line-height:23px;letter-spacing:0}
.topbar #save-design:not(:disabled){border-color:#c9c4d8;background:#fbfaff;color:#716b98}
.topbar #save-design.saved{border-color:transparent;background:transparent;color:#9a98aa}
.topbar #save-design:disabled{color:#b9b5c4;cursor:default}
.primary:disabled,.secondary:disabled{background:#e5e4e7;color:#aaa7b1;box-shadow:none;cursor:not-allowed}
.control-title button:disabled{color:#c1bec7;cursor:not-allowed}
.canvas-stage{background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.98) 0 11%,rgba(255,255,255,.48) 25%,transparent 57%),linear-gradient(145deg,#e8e6f0,#e2eee9)}
.stage-note span:first-child{padding:4px 7px;border-radius:10px;background:rgba(255,255,255,.55)}

/* Materials use a two-level catalogue: horizontal families and vertical subfamilies. */
.material-tabs{display:flex;gap:0;overflow-x:auto;margin:14px 0 12px;scrollbar-width:none;border-bottom:1px solid var(--line)}
.material-tabs button{flex:1 0 max-content;min-width:max-content;padding:7px 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:11px;white-space:nowrap}
.material-tabs button.selected{color:#6e698f;border-color:#8f89b5}
.material-browser{display:grid;grid-template-columns:63px minmax(0,1fr);gap:11px;min-height:118px}
.material-subnav{border-right:1px solid var(--line);padding-right:9px}
.material-subgroup{display:none;gap:7px}
.material-subgroup.active{display:grid}
.material-subgroup button{min-height:29px;padding:0 4px;border:0;border-radius:12px;background:transparent;color:#8d8898;font-size:9px;white-space:nowrap}
.material-subgroup button.selected{background:#edf4f1;color:#648d83;font-weight:600}
.material-results{min-width:0;padding-top:1px}
.material-panel{display:none}
.material-panel.active{display:block}
.material-results .bead-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.material-results .bead-choice .stone{width:31px;height:31px}
.material-results .ring-grid{grid-template-columns:1fr;gap:7px}
.material-results .ring-choice{padding:10px}
.accessory-list{display:grid;gap:7px}
.accessory-list button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:10px;text-align:left}
.accessory-list button:before{content:"";width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,#f7f8f8,#aeb9b8);box-shadow:inset 2px 2px 3px rgba(255,255,255,.8);flex:0 0 auto}
.accessory-list button small{margin-left:auto;color:var(--muted);font-size:8px}
.bead-size-control{display:none;align-items:center;gap:5px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.bead-size-control.visible{display:flex}
.bead-size-control>span{margin-right:auto;color:var(--muted);font-size:9px}
.bead-size-control button{min-width:36px;height:25px;padding:0 5px;border:1px solid var(--line);border-radius:13px;background:#fff;color:#898494;font-size:9px}
.bead-size-control button.selected{border-color:#9ab9b1;background:#edf4f1;color:#668f86}

/* The preview uses a stable safe height sized for the ring, its largest beads, and the tool row. */
#manual .manual-workspace{--manual-preview-height:350px;position:relative;flex:1;min-height:0;overflow:hidden;padding:0}
#manual .manual-meta{position:absolute;z-index:2;top:0;left:0;right:0;background:rgba(255,253,251,.9)}
#manual .canvas-stage{position:absolute;top:40px;left:0;right:0;height:var(--manual-preview-height)}
#manual .canvas-stage canvas{top:50%;bottom:auto;left:50%;width:auto;height:100%;max-width:100%;transform:translate(-50%,-50%)}
#manual .canvas-tools{bottom:8px}
#manual .canvas-tools button:disabled{opacity:.42}
#manual .picker.material-drawer{position:absolute;z-index:3;left:0;right:0;bottom:73px;height:calc(100% - var(--manual-preview-height) - 113px);margin:0;padding:0 16px 14px;border-radius:22px 22px 0 0;background:rgba(255,253,251,.98);box-shadow:0 -9px 25px rgba(53,51,64,.12);overflow:auto;transition:height .28s ease;scrollbar-width:none}
#manual .picker.material-drawer.open{height:75%}
#manual .material-drawer .picker-head{position:sticky;z-index:2;top:0;margin:0 -16px;padding:14px 16px 9px;background:rgba(255,253,251,.98);cursor:grab}
#manual .material-drawer .picker-head:before{content:"";display:block;width:30px;height:3px;margin:0 auto 9px;border-radius:4px;background:#d4d0da}
#manual .material-drawer .picker-head:after{content:"展开材料";position:absolute;right:16px;top:19px;color:#9a95ab;font-size:8px}
#manual .material-drawer.open .picker-head:after{content:"收起材料"}
#manual .material-drawer .picker-head>button{position:relative;z-index:3}
#manual .material-drawer .material-tabs{margin-top:4px}

/* Master designs remain scannable in a two-column feed instead of reducing the work to image tiles. */
#masters .master-grid{gap:11px;padding-bottom:8px}
#masters .master-grid article{display:flex;flex-direction:column;min-width:0;padding:10px;border-radius:16px;overflow:hidden}
#masters .master-grid article>span{display:none}
#masters .master-grid h3{order:1;margin:0 0 4px;font-size:13px;line-height:1.35;color:#403e4b}
#masters .master-grid .master-meaning{order:2;display:-webkit-box;min-height:30px;margin:0;color:#888392;font-size:9px;line-height:1.6;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#masters .master-grid canvas{position:static;pointer-events:none;order:3;width:100%;height:auto;aspect-ratio:1.05;object-fit:contain;margin:9px 0 8px;border-radius:11px;background:#e6eeeb}
.master-designer-card{order:4;display:flex;align-items:center;gap:6px;min-width:0;padding-top:7px;border-top:1px solid rgba(220,218,223,.75)}
.master-designer-card>span{position:static;display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;padding:0;border-radius:50%;background:#a3c5bd;color:#fff;font-size:9px}
.master-designer-card div{min-width:0;flex:1}
.master-designer-card b,.master-designer-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.master-designer-card b{font-size:9px;color:#5d5a68}
.master-designer-card small{margin-top:2px;color:#9c97a4;font-size:7px}
#masters .master-grid article>b{order:5;display:block;margin:7px 0 0;font-size:10px;color:#ad7c7b}

/* Designer profile: identity first, then an exhaustive browsable body of work. */
.designer-profile-head{display:flex;align-items:center;gap:10px;padding:11px 0 14px}
.designer-profile-avatar{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#99bdb5,#9d96be);color:#fff;font-size:19px}
.designer-profile-head div{min-width:0;flex:1}
.designer-profile-head p{margin:0;color:#8d87a7;font-size:9px}
.designer-profile-head h1{margin:2px 0;font-size:20px}
.designer-profile-head small{display:block;overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.designer-profile-head button{align-self:flex-start;border:1px solid #9ebdb5;border-radius:14px;background:#fff;color:#638b82;font-size:10px;padding:6px 9px}
.designer-profile-intro{padding:14px;border-radius:16px;background:linear-gradient(130deg,#e7efec,#eee9f1)}
.designer-profile-intro p{margin:0 0 6px;color:#5d6870;font-size:12px;font-weight:600;line-height:1.55}
.designer-profile-intro small{display:block;color:#7d7e88;font-size:9px;line-height:1.65}
.designer-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:17px 0 12px}
.designer-profile-stats div{text-align:center;border-right:1px solid var(--line)}
.designer-profile-stats div:last-child{border-right:0}
.designer-profile-stats b,.designer-profile-stats small{display:block}
.designer-profile-stats b{font-size:15px;color:#5e5a72}
.designer-profile-stats small{margin-top:3px;color:var(--muted);font-size:8px}
.profile-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.profile-tags span{padding:5px 9px;border-radius:12px;background:#edf4f1;color:#6c9188;font-size:9px}
.designer-works .section-title{margin:0 0 11px}
.designer-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding-bottom:7px}
.designer-work-grid article{display:flex;flex-direction:column;min-width:0;padding:8px;border-radius:15px;background:#fff;box-shadow:0 6px 15px rgba(64,58,55,.06)}
.designer-work-grid .mini-bracelet{position:static;display:block;order:1;width:100%;height:auto;margin-bottom:8px;border-radius:10px;background:#e6eeeb}
.designer-work-grid h3{order:2;margin:0 2px 3px;color:#484551;font-size:12px}
.designer-work-grid p{order:3;display:-webkit-box;min-height:27px;margin:0 2px 5px;color:var(--muted);font-size:8px;line-height:1.6;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.designer-work-grid b{order:4;margin:0 2px;color:#ae7d7c;font-size:10px}