*{box-sizing:border-box}body{margin:0;background:#edf3f5;color:#344a57;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:white;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #226b91;outline-offset:2px}button:disabled{opacity:.45;cursor:not-allowed}h1,h2,h3,p{margin:0}h2{font-size:20px}h3{font-size:16px}small,.muted{color:#8a9ba5}input,select,textarea{min-width:0;border:1px solid #dce6ed;border-radius:12px;background:#fff;padding:12px;color:#344a57}input,textarea{width:100%}.desktop-note{position:fixed;left:max(5vw,calc(50vw - 550px));top:22vh;width:350px}.eyebrow{letter-spacing:4px;font-size:11px;color:#6e9ba9}.desktop-note h1{font-family:Georgia,'SimSun',serif;font-size:45px;font-weight:400;line-height:1.5;margin:25px 0;color:#476876}.desktop-note p{line-height:2.2;color:#82959f}.note-links{margin-top:50px;display:grid;gap:18px}.note-links a{color:#4c91b3}.note-links span{font-size:12px;color:#98aab5}#app{width:430px;min-height:100vh;margin-left:calc(50% + 100px);background:#f6f9fc;box-shadow:0 0 70px #41678115;position:relative;padding-bottom:82px}.topbar{height:63px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;position:sticky;top:0;z-index:5}.topbar strong{font-size:17px}.capsule{border:1px solid #e5ebef;padding:2px 12px;border-radius:20px;letter-spacing:3px}.hero{min-height:190px;background:radial-gradient(ellipse at 70% 55%,#fafdff 0,transparent 35%),linear-gradient(135deg,#eff1e5,#cde5ef 60%,#f8fafa);padding:27px 23px;position:relative;overflow:hidden;background-size:cover;background-position:center}.hero h2{font-family:Georgia,'SimSun',serif;font-size:26px;font-weight:400;color:#5c8a95;position:relative;z-index:1}.hero p{margin-top:8px;font-size:11px;letter-spacing:3px;position:relative;z-index:1}.hero .ring-preview{position:absolute;width:180px;height:180px;right:4px;top:30px;opacity:.85}.badge{font-size:10px;background:#e9f4f8;color:#6a9caf;padding:4px 8px;border-radius:12px}.section{padding:20px 16px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.profile{background:#fff;padding:22px 18px;display:flex;gap:12px;align-items:center}.avatar{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(140deg,#daedf5,#f4e9ed);font-size:24px;color:#779cae}.profile small{display:block;margin-top:5px}.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 20px;background:white}.entry{padding:20px 10px;text-align:center;border-radius:18px;background:linear-gradient(140deg,#eef7f7,#f5f2fa)}.entry .symbol{font-size:44px;color:#91b5c9}.entry strong{display:block;font-size:21px}.quick{display:flex;justify-content:space-around;background:white;padding:10px 0 22px}.quick button{display:grid;gap:8px;font-size:12px}.quick span{font-size:25px;color:#89b5ca}.topic{padding:24px;margin-bottom:14px;border-radius:18px;background:linear-gradient(125deg,#e0edf4,#f6f3eb);height:133px;position:relative;overflow:hidden}.topic h3{font-size:23px;font-weight:400;font-family:serif;letter-spacing:3px;margin-bottom:12px}.topic::after{content:'✧';position:absolute;right:22px;top:-20px;font-size:120px;color:#fff9}.nav{position:fixed;bottom:0;width:430px;background:#fffc;backdrop-filter:blur(15px);border-top:1px solid #e8eef2;display:flex;z-index:10;padding:8px 0 max(9px,env(safe-area-inset-bottom))}.nav button{flex:1;background:transparent;font-size:11px;color:#9aa8af;display:grid;gap:2px}.nav button span{font-size:22px}.nav button.active{color:var(--accent,#73bce0);font-weight:600}.chips{display:flex;gap:8px;padding:13px 16px;overflow:auto;white-space:nowrap}.chips button{background:transparent;padding:6px 8px;color:#8f9fa9}.chips .active{color:#466a7c;border-bottom:2px solid var(--accent)}.grid{padding:0 14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.card{background:white;border-radius:16px;overflow:hidden;position:relative}.card-img{height:185px;background:linear-gradient(160deg,#fff,#f2f7f8);display:grid;place-items:center}.card-img img{width:100%;height:100%;object-fit:contain}.card-body{padding:12px}.price{color:#68a9cb;font-weight:700;font-size:18px}.card .row{margin-top:8px}.row{display:flex;align-items:center;justify-content:space-between;gap:9px}.round{border-radius:50%;width:28px;height:28px;background:var(--accent);color:white;font-size:22px;line-height:1}.ring-preview{width:160px;height:160px;position:relative}.ring-preview::before,.stage-ring{content:'';position:absolute;border:1px solid #c7b77566;border-radius:50%;inset:14%}.bead{position:absolute;border-radius:50%;background:radial-gradient(circle at 29% 23%,#ffffffed 0,transparent 24%),radial-gradient(circle at 38% 33%,var(--bead),var(--bead) 35%,#0006 120%);box-shadow:inset -2px -3px 4px #0002,inset 1px 2px 3px #fff9,1px 3px 3px #4a697526;transform:translate(-50%,-50%);padding:0;display:grid;place-items:center;color:#6d7682;font-size:11px}.bead img{width:100%;height:100%;object-fit:contain;pointer-events:none}.bead.has-image{background:transparent;box-shadow:none}.bead.selected{outline:2px solid #bf9e52;outline-offset:4px}.bead.heart{border-radius:30% 30% 45% 45%;}.bead.letter{border-radius:15%}.bead.flower{border:3px dotted #e7eff2}.diy{padding-bottom:0!important;height:100dvh;min-height:680px;display:flex;flex-direction:column}.stage{position:relative;aspect-ratio:1/1.06;min-height:310px;max-height:52dvh;background:radial-gradient(circle at 70% 38%,#f7fbff99,transparent 36%),linear-gradient(125deg,#f6f2e7,#e1eff2 55%,#c9dce7);background-size:cover;background-position:center;overflow:hidden;flex:1}.stage::after{content:'✧';position:absolute;color:#ffffff60;font-size:280px;right:-25px;top:30px;pointer-events:none;z-index:0}.stage-head{position:absolute;top:16px;left:15px;right:15px;display:flex;align-items:start;justify-content:space-between;z-index:3}.stage-head>button{border-radius:50%;width:34px;height:34px}.seg{display:flex;justify-content:center;background:#fff9;border-radius:20px;padding:3px;font-size:12px}.seg button{border-radius:18px;padding:4px 13px;background:transparent}.seg button.active{background:var(--accent);color:white}.stage-center{position:absolute;inset:42px 10px 32px;touch-action:none;z-index:1}.stage-brand{position:absolute;top:47%;width:100%;text-align:center;font-family:serif;color:#779997;letter-spacing:4px;font-size:19px;pointer-events:none}.stage-center .bead{z-index:2}.tools{position:absolute;bottom:13px;left:12px;right:12px;z-index:3;display:flex;gap:5px;justify-content:center}.tools button{border-radius:16px;background:#fffe;padding:7px 11px;font-size:11px}.diy-tabs{display:flex;background:#fff;overflow:auto;flex-shrink:0}.diy-tabs button{flex:1;padding:12px 6px;white-space:nowrap;color:#8199a6}.diy-tabs .active{color:var(--accent);border-bottom:3px solid var(--accent);font-weight:700}.picker{display:flex;background:#fff;min-height:190px;flex:0 0 30dvh;overflow:hidden}.subcats{width:80px;background:#eaf5fa;overflow:auto;flex-shrink:0}.subcats button{width:100%;background:transparent;min-height:58px;font-size:11px;color:#7f9ca9}.subcats .active{background:#fff;color:var(--accent);border-left:2px solid var(--accent)}.materials{flex:1;overflow:auto;padding:9px 8px}.hint{font-size:11px;color:#8babbb;padding:5px;background:#eff8fb;border:1px solid #e3f0e8;border-radius:6px;margin-bottom:8px}.material-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 6px}.material{position:relative;text-align:center;padding:2px;background:transparent;min-height:90px}.swatch{height:47px;position:relative;width:100%;margin-bottom:5px}.swatch .bead{left:50%;top:50%;width:42px;height:42px}.material small{font-size:10px;display:block;line-height:1.3}.material em{font-size:10px;position:absolute;top:0;right:0;background:var(--accent);color:white;font-style:normal;padding:0 3px}.material b{font-size:11px;color:#69a6c2}.summary{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:12px;background:white;box-shadow:0 -5px 20px #6b8aa00d;flex-shrink:0}.summary span{font-size:9px;text-align:center;color:#95a4ad}.summary b{display:block;font-size:15px;color:#42616f}.primary{background:var(--accent,#73bce0);color:#fff;border-radius:24px;padding:12px 20px;font-weight:600}.secondary{background:#34586b;color:white;border-radius:24px;padding:12px 18px}.summary .primary{padding:10px 18px}.summary .price{font-size:17px}.notice{font-size:11px;padding:9px 16px;background:#f4eedf;color:#9f8650}.panel{background:white;border-radius:18px;padding:18px;margin:14px}.panel h3{border-left:3px solid var(--accent);padding-left:9px;margin-bottom:15px}.field{display:block;margin:12px 0}.field>span{display:block;margin-bottom:6px;font-size:12px;color:#8298a5}.option{width:100%;padding:14px;margin-top:9px;border-radius:12px;text-align:left;background:#f7f8fb;border:1px solid transparent}.option.active{border-color:#add1e3;background:#f0f9fc}.option .price{font-size:14px}.bottom-action{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#fff;padding:14px;gap:10px;z-index:7}.empty{padding:70px 20px;text-align:center;color:#9aabb5}.full{width:100%}.stack{display:grid;gap:10px}.line-item{padding:10px 0;border-bottom:1px solid #eef2f6;font-size:12px}.order{padding:17px;background:white;border-radius:14px;margin:12px 14px}.order .row{margin:8px 0}.text-button{color:#6ca3bc;padding:5px}.search{padding:15px}.modal-backdrop{position:fixed;inset:0;background:#253e5266;z-index:50;display:grid;place-items:center;padding:20px}.modal{background:#fff;width:100%;max-width:390px;max-height:85dvh;overflow:auto;border-radius:24px;padding:24px;box-shadow:0 20px 80px #273d4433}.modal h2{margin-bottom:18px}.modal .chips{padding:10px 0;flex-wrap:wrap}.modal .chips button{background:#f2f7fa;border-radius:9px}#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:#284453ed;color:#fff;border-radius:12px;padding:12px 20px;z-index:100;display:none;max-width:90vw;font-size:13px}.floating-edit{position:absolute;bottom:54px;left:15px;right:15px;z-index:4;background:#fff;border-radius:15px;padding:8px;display:flex;align-items:center;justify-content:space-between;font-size:11px}.floating-edit button{padding:7px;background:#edf7fb;border-radius:9px}.tutorial{white-space:pre-line;color:#7f94a0;line-height:1.9}.divider{height:1px;background:#eef2f5;margin:15px 0}.back{background:transparent;font-size:22px}.tag{position:absolute;left:9px;top:9px;z-index:2;background:#476777bd;color:white;font-size:10px;border-radius:12px;padding:2px 7px}.fit{font-size:10px;background:#f7f9eb;color:#889573;text-align:center;padding:3px}.mini-button{border-radius:12px;background:#edf6fa;padding:7px 12px;font-size:12px}@media(max-width:1000px){.desktop-note{display:none}#app{margin:0 auto}}@media(max-width:460px){#app,.nav{width:100%}#app{margin:0;box-shadow:none}.diy{min-height:620px}.card-img{height:170px}.stage{max-height:51dvh}}@media(prefers-reduced-motion:no-preference){.card,.primary{transition:transform .15s}.primary:active,.card:active{transform:scale(.98)}}
.stage-center{inset:auto;left:50%;top:50%;width:min(95%,calc(52dvh - 80px));aspect-ratio:1;transform:translate(-50%,-50%)} .stage-center .bead{height:auto!important;aspect-ratio:1}
.diy{min-height:0!important}.diy .stage{min-height:200px}
.source-label{display:block;font-size:9px;color:#a39170;line-height:1.2;margin-bottom:3px}.bead.pending-image{background:#e9eef0!important;box-shadow:none;border:1px dashed #aabdc8}.bead.pending-image::after{content:"?";color:#a2b4be;font-size:12px}

.product-gallery{margin-bottom:20px}.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:#f8f7f5;border-radius:16px}.gallery-track>img{display:block;flex:0 0 100%;width:100%;height:350px;object-fit:contain;scroll-snap-align:start}.gallery-hint{text-align:center;font-size:12px}.gallery-thumbs{display:flex;gap:8px;overflow-x:auto}.gallery-thumbs button{flex:0 0 56px;padding:2px;border:1px solid #ddd;border-radius:8px;background:#fff}.gallery-thumbs img{width:50px;height:50px;object-fit:contain}.product-description{white-space:pre-wrap;line-height:1.7}

.shop-banner{padding:24px;background:linear-gradient(120deg,#eaf1e8,#d3eaf5)}.shop-banner h2{margin:0 0 8px;font-size:24px;font-weight:500}.shop-banner p{margin:0;color:#658391}