@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800&display=swap');:root{--ink:#231f38;--muted:#817b99;--panel:rgba(255,255,255,.82);--line:#ebe7f4;--purple:#7c3aed;--pink:#ec4899;--cream:#f8f7fc;--shadow:0 16px 50px rgba(77,55,125,.11)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Nunito,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:linear-gradient(145deg,#fbfaff,#f7f4ff 50%,#fff8f4);overflow:hidden}button,input{font:inherit}.aurora{position:fixed;width:42vw;height:42vw;border-radius:50%;filter:blur(90px);opacity:.2;pointer-events:none}.a1{background:#c4b5fd;left:-16vw;top:-20vw}.a2{background:#f9a8d4;right:-14vw;bottom:-16vw}.topbar{position:relative;height:68px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.76);backdrop-filter:blur(18px);border-bottom:1px solid rgba(124,58,237,.09);z-index:10}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.brand-mark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 35% 30%,#fff 0 10%,#a78bfa 12% 35%,#7c3aed 37%);box-shadow:0 7px 18px #7c3aed40}.brand b{display:block;font-size:18px;line-height:18px}.brand small{font-size:9px;letter-spacing:2px;color:var(--muted)}.top-actions{display:flex;gap:7px}.btn,.wide-btn{border:0;border-radius:12px;padding:9px 13px;cursor:pointer;font-weight:800;transition:.2s}.btn.ghost{background:#f5f2fa;color:#666078}.btn.ghost:hover{background:#eee8fa;transform:translateY(-1px)}.btn.primary{color:#fff;background:linear-gradient(135deg,#8b5cf6,#ec4899);box-shadow:0 7px 18px #8b5cf640}.import-label{display:inline-flex;align-items:center}.import-label input,#projectInput{display:none}.app-shell{position:relative;height:calc(100vh - 68px);display:grid;grid-template-columns:265px minmax(420px,1fr) 284px;gap:14px;padding:14px;z-index:1}.rail{overflow:auto;padding-right:3px}.rail::-webkit-scrollbar{width:5px}.rail::-webkit-scrollbar-thumb{background:#d8d0e8;border-radius:9px}.card{background:var(--panel);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:15px;margin-bottom:12px;box-shadow:var(--shadow)}.hero-card{padding:20px;background:linear-gradient(145deg,#fff,#f1eaff)}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--purple);font-weight:800}.hero-card h1{font-size:25px;line-height:1.17;margin:7px 0}.hero-card h1 i{font-style:normal;color:var(--purple)}.hero-card p{font-size:12px;color:var(--muted);margin:0}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title b{font-size:14px}.section-title span{font-size:10px;color:#a49eb5}.text-btn{border:0;background:none;color:var(--purple);font-size:10px;font-weight:800;cursor:pointer}.text-btn.danger{color:#ef476f}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.tool{position:relative;border:1px solid var(--line);background:#fff;border-radius:13px;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#716b84;cursor:pointer;transition:.18s}.tool strong{font-size:20px}.tool span{font-size:10px;font-weight:800}.tool kbd{position:absolute;right:5px;top:4px;font-size:8px;color:#b4aec2;background:none}.tool:hover{border-color:#c4b5fd;transform:translateY(-2px)}.tool.active{color:#fff;border-color:transparent;background:linear-gradient(145deg,#8b5cf6,#7c3aed);box-shadow:0 8px 16px #7c3aed38}.tool.active kbd{color:#ddd6fe}.switch-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:10px 12px;border-radius:13px;background:#f8f6fc;font-size:12px;font-weight:800}.switch-row small{display:block;color:var(--muted);font-weight:500}.switch-row input{display:none}.switch-row i{width:38px;height:22px;border-radius:30px;background:#d8d4e1;position:relative;transition:.2s}.switch-row i:after{content:"";position:absolute;width:16px;height:16px;top:3px;left:3px;border-radius:50%;background:#fff;transition:.2s}.switch-row input:checked+i{background:var(--purple)}.switch-row input:checked+i:after{left:19px}.color-current{display:flex;align-items:center;gap:9px;background:#f7f5fb;border-radius:14px;padding:9px}.color-current>span{width:31px;height:31px;border-radius:50%;background:#7c3aed;box-shadow:inset 0 2px 3px #ffffff77}.color-current div{flex:1}.color-current small,.color-current b{display:block}.color-current small{font-size:9px;color:var(--muted)}.color-current b{font-size:11px}.color-current code{font-size:10px;color:var(--muted)}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-top:12px}.swatch{aspect-ratio:1;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 6px #34294b22;cursor:pointer;transition:.15s}.swatch:hover{transform:scale(1.18)}.swatch.active{outline:2px solid var(--purple);outline-offset:2px}.custom-color{display:flex;align-items:center;gap:7px;margin-top:12px}.custom-color label{font-size:10px;color:var(--muted)}.custom-color input{width:34px;height:26px;padding:0;border:0;background:none}.custom-color button{flex:1;border:0;background:#f1edfa;color:var(--purple);border-radius:9px;padding:6px;font-size:10px;font-weight:800}.workspace{min-width:0;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.62);border:1px solid #fff;box-shadow:var(--shadow)}.workspace-head{height:58px;flex:none;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#ffffffa8}.workspace-head>div:first-child{display:flex;align-items:center;gap:7px}.workspace-head b{font-size:13px}.workspace-head small{font-size:9px;color:#9c95ad}.live-dot{width:8px;height:8px;background:#45d3a1;border-radius:50%;box-shadow:0 0 0 4px #45d3a122}.canvas-stats{display:flex;gap:13px}.canvas-stats span{font-size:9px;color:var(--muted)}.canvas-stats b{color:var(--ink)}.canvas-stage{position:relative;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#eeeaf5;background-image:radial-gradient(#d6cfe5 1px,transparent 1px);background-size:18px 18px}.tip{position:absolute;top:12px;padding:7px 12px;border-radius:20px;background:#ffffffd9;box-shadow:0 5px 15px #51436c18;color:var(--muted);font-size:10px;z-index:3}.canvas-wrap{transform-origin:center;transition:transform .15s;filter:drop-shadow(0 18px 28px #4b3f6530)}#beadCanvas{display:block;border-radius:10px;touch-action:none;cursor:crosshair;max-width:none}.zoom-bar{position:absolute;bottom:12px;display:flex;align-items:center;gap:7px;padding:6px 9px;background:#fffffff0;border:1px solid #fff;border-radius:14px;box-shadow:0 7px 20px #42365520}.zoom-bar button{border:0;background:#f0ecf7;border-radius:8px;min-width:25px;height:25px;color:#645d74;cursor:pointer}.zoom-bar input{width:90px;accent-color:var(--purple)}.zoom-bar span{font-size:9px;min-width:31px}.size-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.size-presets button,.templates button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 3px;font-size:10px;color:var(--muted);cursor:pointer}.size-presets button.active{background:#ede9fe;color:var(--purple);border-color:#c4b5fd;font-weight:800}.two-inputs{display:flex;gap:8px;margin-top:10px}.two-inputs label{font-size:9px;color:var(--muted)}.two-inputs input{width:100%;margin-top:4px;border:1px solid var(--line);border-radius:9px;padding:7px;background:#fbfaff}.wide-btn{width:100%;margin-top:8px;background:#ede9fe;color:var(--purple)}.toggle-pair{display:flex;gap:6px;margin-top:9px}.toggle-pair label{flex:1}.toggle-pair input{display:none}.toggle-pair span{display:block;text-align:center;padding:7px;border-radius:9px;background:#f4f1f8;color:#9a94a8;font-size:10px}.toggle-pair input:checked+span{background:#e8fff7;color:#159b72;font-weight:800}.templates{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.templates i{font-style:normal;display:block;font-size:20px;color:#8b5cf6}.templates span{font-size:9px}.templates button:hover{transform:translateY(-2px);border-color:#d8b4fe}.drop-zone{border:1.5px dashed #c8bddb;border-radius:15px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;background:#fbfaff}.drop-zone.drag{border-color:var(--purple);background:#f1eafe}.drop-zone input{display:none}.drop-zone strong{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#ede9fe;color:var(--purple);font-size:20px}.drop-zone b{font-size:11px;margin-top:6px}.drop-zone small{font-size:8px;color:var(--muted)}.image-options{margin-top:10px}.image-options label{font-size:9px;color:var(--muted)}.image-options input[type=range]{width:100%;accent-color:var(--pink)}.image-options .check{display:flex;align-items:center;gap:5px;margin-top:5px}.stats-card{min-height:110px}.empty{text-align:center;color:#aaa3b9;font-size:10px;padding:10px}.stat{display:grid;grid-template-columns:16px 1fr auto;gap:7px;align-items:center;padding:4px 0;font-size:10px}.stat i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 1px 2px #fff8}.stat b{font-size:10px}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;z-index:30;background:#2b263b;color:#fff;border-radius:12px;padding:10px 16px;font-size:11px;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.modal{position:fixed;inset:0;display:grid;place-items:center;background:#211a38aa;backdrop-filter:blur(8px);z-index:50}.modal.hidden{display:none}.modal-box{width:min(520px,90vw);background:#fff;border-radius:22px;padding:18px;box-shadow:0 25px 100px #150d2a88}.modal-head{display:flex;justify-content:space-between}.modal-head button{border:0;background:#f2eff7;border-radius:8px;width:28px;height:28px}.modal-box canvas{display:block;max-width:100%;max-height:46vh;margin:14px auto;border-radius:12px}.modal-box p{color:var(--muted);font-size:10px}.modal-actions{display:flex;justify-content:flex-end;gap:8px}@media(max-width:1100px){.app-shell{grid-template-columns:230px minmax(380px,1fr) 245px}.hero-card{display:none}.top-actions .btn span,.import-label span{display:none}}@media(max-width:820px){body{overflow:auto}.topbar{position:sticky;top:0}.app-shell{height:auto;display:flex;flex-direction:column;padding:9px}.workspace{height:68vh;order:1}.left-rail{order:2;overflow:visible}.right-rail{order:3;overflow:visible}.rail{padding:0}.hero-card{display:block}.top-actions{gap:4px}.top-actions .btn{padding:8px}.canvas-stats span:nth-child(n+2){display:none}.palette{grid-template-columns:repeat(12,1fr)}}:root{--ink:#20352a;--muted:#718478;--panel:rgba(250,255,250,.88);--line:#dfeadf;--purple:#2f855a;--pink:#84a98c;--cream:#f4f8f1;--shadow:0 16px 50px rgba(38,80,55,.12)}body{background:linear-gradient(145deg,#f5f8ef,#eaf4e8 55%,#f8f3e8)}body:before,body:after{content:"";position:fixed;pointer-events:none;z-index:0;opacity:.32;filter:blur(.2px)}body:before{width:240px;height:420px;left:-70px;bottom:-100px;background:radial-gradient(ellipse at 60% 80%,#79a86b 0 16%,transparent 17%),radial-gradient(ellipse at 35% 65%,#aac89d 0 13%,transparent 14%),radial-gradient(ellipse at 70% 48%,#5f9364 0 12%,transparent 13%),linear-gradient(78deg,transparent 48%,#6c9663 49% 51%,transparent 52%);transform:rotate(-12deg)}body:after{width:270px;height:380px;right:-80px;top:90px;background:radial-gradient(ellipse at 40% 25%,#9bbc86 0 14%,transparent 15%),radial-gradient(ellipse at 68% 42%,#5d956d 0 13%,transparent 14%),radial-gradient(ellipse at 35% 62%,#bad1a8 0 16%,transparent 17%),linear-gradient(105deg,transparent 49%,#799b6c 50% 52%,transparent 53%);transform:rotate(16deg)}.a1{background:#b7d5a8}.a2{background:#e9d8a6}.topbar{border-bottom-color:#dfe9dc;background:rgba(250,255,248,.82)}.brand-mark{background:radial-gradient(circle at 35% 30%,#fff 0 10%,#86b77b 12% 35%,#2f855a 37%);box-shadow:0 7px 18px #2f855a40}.btn.primary{background:linear-gradient(135deg,#3b8d61,#7aa86f);box-shadow:0 7px 18px #2f855a40}.hero-card{background:linear-gradient(145deg,#fff,#edf6e9)}.hero-card h1 i{color:#2f855a}.tool.active{background:linear-gradient(145deg,#5f9b6d,#2f855a);box-shadow:0 8px 16px #2f855a38}.switch-row input:checked+i{background:#2f855a}.swatch.active{outline-color:#2f855a}.wide-btn{background:#e7f2e4;color:#2f855a}.canvas-stage{background-color:#e9efe6;background-image:radial-gradient(#c9d9c6 1px,transparent 1px);background-size:18px 18px}.live-dot{background:#71a96b;box-shadow:0 0 0 4px #71a96b22}.zoom-bar input,.image-options input[type=range]{accent-color:#2f855a}.view-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.view-switch button{border:1px solid var(--line);background:#f8fbf6;border-radius:13px;padding:8px 4px;color:#718478;cursor:pointer;transition:.18s}.view-switch button:hover{transform:translateY(-2px);border-color:#a9c6a4}.view-switch button.active{color:#236b45;background:#e4f1e2;border-color:#91b98c;box-shadow:0 6px 14px #5c8c6030}.view-switch span{display:block;font-size:9px;font-weight:800;margin-top:4px}.view-bead{display:block;width:36px;height:30px;margin:auto;background:radial-gradient(ellipse at 42% 38%,transparent 0 18%,#67a66f 20% 50%,#2f6d46 76%);border-radius:50%;box-shadow:0 4px 7px #244b3036}.view-bead.left{transform:perspective(50px) rotateY(28deg) rotateX(11deg)}.view-bead.right{transform:perspective(50px) rotateY(-28deg) rotateX(11deg)}.view-hint{font-size:9px;line-height:1.5;color:var(--muted);margin:9px 1px 0}.swatch[data-transparent="1"]{background:linear-gradient(45deg,#dfe8dc 25%,transparent 25%),linear-gradient(-45deg,#dfe8dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe8dc 75%),linear-gradient(-45deg,transparent 75%,#dfe8dc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#fff}.swatch[data-transparent="1"]:after{content:"T";font-size:9px;color:#2f855a;font-weight:900}.view-lefttop{}.view-righttop{}.canvas-wrap{transition:transform .25s ease}.canvas-wrap.view-lefttop,.canvas-wrap.view-righttop{filter:drop-shadow(0 24px 30px #29463338)}.crop-modal-box{width:min(940px,94vw);max-height:94vh;overflow:auto}.modal-head>div small{display:block;margin-top:3px;color:var(--muted);font-size:9px;font-weight:500}.crop-workbench{display:grid;grid-template-columns:minmax(320px,1.35fr) minmax(230px,.65fr);gap:14px;margin-top:14px}.crop-stage{position:relative;min-height:390px;overflow:hidden;border-radius:16px;background-color:#dde5dc;background-image:linear-gradient(45deg,#edf2eb 25%,transparent 25%),linear-gradient(-45deg,#edf2eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf2eb 75%),linear-gradient(-45deg,transparent 75%,#edf2eb 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;cursor:grab;touch-action:none}.crop-stage.dragging{cursor:grabbing}.crop-stage #previewCanvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0}.crop-frame-ui{position:absolute;inset:18px;border:2px solid #f8fff7;border-radius:8px;box-shadow:0 0 0 9999px rgba(24,51,34,.46),0 0 0 1px #2f855a;pointer-events:none}.crop-frame-ui:before,.crop-frame-ui:after{content:"";position:absolute;width:24px;height:24px;border-color:#9ee0a8}.crop-frame-ui:before{left:-3px;top:-3px;border-left:4px solid;border-top:4px solid}.crop-frame-ui:after{right:-3px;bottom:-3px;border-right:4px solid;border-bottom:4px solid}.crop-frame-ui .g{position:absolute;background:rgba(255,255,255,.58)}.crop-frame-ui .v1,.crop-frame-ui .v2{top:0;bottom:0;width:1px}.crop-frame-ui .v1{left:33.333%}.crop-frame-ui .v2{left:66.666%}.crop-frame-ui .h1,.crop-frame-ui .h2{left:0;right:0;height:1px}.crop-frame-ui .h1{top:33.333%}.crop-frame-ui .h2{top:66.666%}.bead-preview-panel{display:flex;flex-direction:column;min-width:0;padding:12px;border:1px solid #dce8d8;border-radius:16px;background:#f8fbf6}.preview-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.preview-label b{font-size:11px}.preview-label span,.bead-preview-panel small{font-size:8px;color:var(--muted)}#beadPreviewCanvas{width:100%;aspect-ratio:1;height:auto;max-width:330px;align-self:center;margin:0;border-radius:10px;background:#e8eee5;image-rendering:auto}.bead-preview-panel small{text-align:center;margin-top:8px}.crop-controls{display:grid;grid-template-columns:minmax(220px,1fr) auto auto auto;gap:8px;align-items:center;margin-top:12px}.crop-controls label{display:grid;grid-template-columns:auto 1fr 42px;gap:8px;align-items:center;font-size:9px;color:var(--muted)}.crop-controls input{width:100%;accent-color:#2f855a}.crop-controls output{text-align:right;color:#2f855a;font:800 9px ui-monospace,monospace}.crop-tool{border:1px solid #dce8d8;border-radius:10px;padding:8px 10px;background:#eef5eb;color:#47664f;font-size:9px;font-weight:800;cursor:pointer}.crop-tool:hover{background:#dfeeda}.crop-help{margin:8px 0 0!important;font-size:9px!important;color:var(--muted)!important}@media(max-width:700px){.crop-workbench{grid-template-columns:1fr}.crop-stage{min-height:320px}.bead-preview-panel{max-width:360px;width:100%;justify-self:center}.crop-controls{grid-template-columns:1fr 1fr 1fr}.crop-controls label{grid-column:1/-1}}.startup-splash{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#f7faF2,#e8f2e5 60%,#f7f1e5);transition:opacity .28s ease,visibility .28s ease}.startup-splash.hide{opacity:0;visibility:hidden;pointer-events:none}.splash-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:#9fc79a55;filter:blur(55px)}.splash-logo{position:relative;display:flex;align-items:center;gap:14px;padding:18px 24px;border:1px solid #ffffffcc;border-radius:24px;background:#ffffffa8;box-shadow:0 20px 60px #2f694433;backdrop-filter:blur(16px)}.splash-bead{width:58px;height:58px;display:grid;place-items:center;border-radius:19px;color:white;font-size:18px;background:radial-gradient(circle at 35% 30%,#fff 0 9%,#94c38b 11% 34%,#2f855a 36% 70%,#1f5f3d 72%);box-shadow:0 10px 22px #2f855a42}.splash-logo b{display:block;color:#274734;font-size:25px;letter-spacing:2px}.splash-logo small{display:block;margin-top:2px;color:#6d8574;font-size:9px;letter-spacing:3px}.startup-splash p{position:relative;margin:19px 0 11px;color:#6d8574;font-size:11px}.splash-progress{position:relative;width:220px;height:6px;overflow:hidden;border-radius:999px;background:#dbe8d8;box-shadow:inset 0 1px 2px #45624a22}.splash-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2f855a,#8fbd7e,#d4b878);box-shadow:0 0 12px #4d9e6788;transition:width .08s linear}.performance-badge{position:absolute;right:12px;top:12px;z-index:4;padding:5px 8px;border-radius:12px;background:#264f38dd;color:#eaffef;font-size:8px;box-shadow:0 4px 12px #1f3d2b33}.performance-badge.hidden{display:none}#undo:disabled,#redo:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}#undo:not(:disabled),#redo:not(:disabled){opacity:1}.canvas-stage{overscroll-behavior:contain}.zoom-bar:after{content:"滚轮缩放";margin-left:3px;color:#7e9182;font-size:8px;white-space:nowrap}