:root{--paper:#fcfaf6;--ink:#293c34;--muted:#7d877f;--line:#e9e9e0;--green:#3d6952;--soft:#edf2e9;--orange:#d99069}*{box-sizing:border-box}body{margin:0;background:var(--paper);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);font-size:14px}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer;border:0;transition:background .18s,transform .18s}button:disabled{opacity:.42;cursor:not-allowed}button:not(:disabled):hover{filter:brightness(.97)}button:focus-visible,a:focus-visible,summary:focus-visible,.upload-zone:focus-visible{outline:3px solid #a8c9b2;outline-offset:3px}button,input,select{border-radius:9px}[hidden]{display:none!important}.topbar{height:84px;border-bottom:1px solid var(--line);padding:0 4%;display:flex;align-items:center;gap:34px;background:#ffffffa8}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:24px;font-weight:800;letter-spacing:2px}.brand-mark{display:grid;grid-template-columns:repeat(2,10px);gap:3px;transform:rotate(-8deg)}.brand-mark i{width:10px;height:10px;border-radius:3px;background:var(--green)}.brand-mark i:nth-child(2){background:#d6a980}.brand-mark i:nth-child(3){background:#b6ca99}.brand-en{font-size:9px;font-weight:500;letter-spacing:2px;margin-left:5px;color:var(--muted)}nav{display:flex;gap:7px;margin:auto}.nav-button{background:none;padding:12px 18px;color:#788479}.nav-button.active{background:var(--soft);color:var(--green);font-weight:700}#historyCount{padding:2px 5px;border-radius:5px;background:#e4eadd;margin-left:4px;font-size:10px}.local-badge{font-size:11px;color:#738678;display:flex;align-items:center;gap:7px}.local-badge i{width:6px;height:6px;background:#88a376;border-radius:50%}main{max-width:1550px;margin:auto;padding:0 4%}.intro{display:flex;align-items:center;justify-content:space-between;padding:42px 0 32px}.eyebrow{font-size:10px;letter-spacing:2.6px;color:#829475;margin:0 0 12px}h1{font-size:clamp(25px,2.5vw,36px);letter-spacing:1px;font-weight:700;margin:0 0 10px}h1 span{color:var(--orange)}.intro-copy{color:var(--muted);margin:0;font-size:13px}.intro-note{display:flex;align-items:center;gap:18px;padding:12px 20px;border-left:1px solid #dfe5d7}.intro-note>span{font-size:35px;color:#b6cba0}.intro-note p{font-size:12px;line-height:1.8;color:#809277;margin:0}.intro-note strong{font-weight:400;color:#586a54}.workspace{display:grid;grid-template-columns:278px minmax(0,1fr) 242px;gap:18px;align-items:start}.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 20px #34483703}.settings{padding:20px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:24px}.panel-heading h2{font-size:16px;margin:0;font-weight:700}.panel-heading>span{font-size:9px;letter-spacing:1px;color:#8b9887}h3{font-size:13px;margin:18px 0 13px;font-weight:650}h3 b{font-size:10px;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;margin-right:6px;border-radius:50%;background:var(--soft);color:var(--green)}.upload-zone{border:1px dashed #bacbb1;background:#f7f9f3;border-radius:12px;display:flex;flex-direction:column;align-items:center;padding:18px 6px;gap:7px;cursor:pointer}.upload-zone.dragover{background:#e5efdb;border-color:var(--green)}.upload-icon{font-size:25px;color:#70945e;background:#edf3e5;width:39px;height:39px;text-align:center;line-height:38px;border-radius:10px}.upload-zone strong{font-size:12px;font-weight:600}.upload-zone small{font-size:9px;color:#909b8a}.source-block{display:flex;gap:10px;align-items:center;margin-top:12px}.source-block img{width:54px;height:54px;object-fit:contain;border-radius:8px;background:#f2f4ee}.source-block>div{min-width:0}.source-block strong{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:155px}.source-block small{display:block;color:var(--muted);font-size:10px;margin:4px 0}.text-button{background:none;color:var(--green);padding:0;font-size:11px}.sample-heading{font-size:10px;color:#879381;margin-top:14px}.sample-list{display:flex;gap:6px;margin-top:8px}.sample-list button{font-size:10px;padding:8px;background:#f5f3ee;color:#6e7967;flex:1}.divider{height:1px;background:var(--line);margin:22px 0}.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.sizes button{padding:9px 3px;background:#f8f8f4;border:1px solid #efefe8;color:#6e7b71;font-size:11px}.sizes button.selected{border-color:#86a079;color:var(--green);background:#eff4e9;font-weight:700}.dimensions{display:flex;align-items:center;gap:9px;margin:13px 0 16px}.dimensions label{min-width:0;flex:1;color:#7b887b;font-size:10px}.dimensions span{margin-top:15px;color:#a0aa9a}.dimensions input{display:block;width:100%;padding:8px 10px;border:1px solid var(--line);margin-top:6px;outline:none;color:var(--ink)}.field-label{display:block;color:#737f70;font-size:11px;margin:12px 0 7px}select{width:100%;padding:10px 8px;border:1px solid var(--line);background:#fff;color:#56694f;font-size:11px}.palette-brand{display:flex;align-items:center;gap:10px;background:#f9f8f4;border-radius:9px;padding:10px}.palette-dots{color:#b7c796;font-size:10px;white-space:nowrap}.palette-brand strong{font-size:11px;display:block}.palette-brand small{font-size:9px;color:var(--muted);display:block;margin-top:4px}.special-details{margin-top:14px}.special-details summary{cursor:pointer;font-size:11px;color:#73806c}.special-details summary span{float:right;color:#a0a596;font-size:9px}#specialSeries{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:10px;margin-top:12px}#specialSeries label{display:flex;align-items:center;gap:4px}input[type=checkbox]{accent-color:var(--green)}.palette-note{font-size:10px;color:#9a9e91;line-height:1.7;margin:14px 0}.primary-button{width:100%;background:var(--green);color:#fff;padding:13px 15px;font-size:12px;display:flex;align-items:center;justify-content:space-between}.primary-button span{font-size:18px}.status{font-size:10px;color:#82907e;line-height:1.7;margin:10px 0 0;min-height:17px}.status.error{color:#bd6752}.preview{overflow:hidden;padding:22px;min-width:0}.preview .panel-heading{margin-bottom:18px}.live-tag{font-size:8px;background:#eef4e9;color:#819377;padding:3px 6px;border-radius:4px;letter-spacing:1px;vertical-align:middle;margin-left:4px}.mode-tabs{display:flex;background:#f4f5ef;border-radius:8px;padding:3px}.mode-tabs button{font-size:10px;background:none;color:#83907e;padding:7px 10px;border-radius:6px}.mode-tabs button.active{background:#fff;color:var(--green);box-shadow:0 1px 5px #2437230c}.preview-toolbar{display:flex;gap:14px;align-items:center;margin-bottom:16px;font-size:10px;color:#78866f}.preview-toolbar label{display:flex;align-items:center;gap:3px;white-space:nowrap}.zoom-control{display:flex;gap:6px;align-items:center;margin-left:auto;font-size:9px}.zoom-control button{background:#f6f7f2;color:#6c7c61;width:24px;height:25px}.zoom-control #fitZoom{width:35px;font-size:9px}.canvas-stage{border:1px solid #e5e9df;border-radius:12px;min-height:440px;height:clamp(380px,43vw,610px);overflow:auto;display:flex;align-items:center;justify-content:center;background-color:#f2f4ec;background-image:radial-gradient(#cbd4c1 .6px,transparent .6px);background-size:12px 12px;position:relative;padding:28px}.canvas-stage.zoomed{display:block}#patternCanvas{display:block;flex-shrink:0;box-shadow:0 6px 24px #34402810;border-radius:2px}#originalCanvasPreview{max-width:100%;max-height:100%;object-fit:contain}.empty-state{text-align:center;color:#8e9a82}.empty-art{margin:0 auto 28px;width:110px;height:105px;display:grid;place-items:center;background:#e7eddc;transform:rotate(-8deg);border:7px solid #fff;box-shadow:8px 8px 0 #dee7d2;border-radius:9px}.empty-art span{font-size:67px;color:#bd8d79;transform:rotate(8deg)}.empty-state h3{font-size:13px;color:#76876d}.empty-state p{font-size:11px;line-height:2}.cell-info{font-size:10px;color:#8c9884;min-height:15px;margin:13px 0 20px}.result-metrics{display:grid;grid-template-columns:repeat(4,1fr);padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:10px}.result-metrics>div{border-right:1px solid var(--line);padding-left:4px}.result-metrics>div:last-child{border:0}.result-metrics span{display:block;font-size:9px;color:#97a08b}.result-metrics strong{display:block;font-size:18px;margin-top:7px;font-weight:600;letter-spacing:-.4px}.preview-actions{display:flex;gap:10px;margin-top:20px}.secondary-button{padding:12px 16px;border:1px solid #dde5d5;color:var(--green);background:#fff;font-size:12px}.dark-button{background:#293f31;color:#fff;padding:12px 16px;font-size:12px;flex:1}.micro-note{font-size:9px;color:#a4ab9a;margin:14px 0 0}.materials{padding:20px}.materials .panel-heading{margin-bottom:20px}#materialTag{background:var(--soft);padding:4px 7px;border-radius:5px;letter-spacing:0}.material-overview{background:#f3f5ed;border:1px solid #e9edde;border-radius:11px;padding:17px;text-align:center}.material-overview>span{font-size:10px;color:#859477}.material-overview strong{display:block;font-size:34px;font-weight:600;margin-top:8px;color:#466341}.material-overview strong small{font-size:11px;font-weight:400;margin-left:6px}.material-overview p{font-size:10px;line-height:1.9;color:#899581;margin-bottom:0}.material-list-head{display:flex;justify-content:space-between;color:#9ba38f;font-size:10px;padding:20px 0 9px;border-bottom:1px solid var(--line)}.material-list{max-height:440px;overflow:auto}.material-row{width:100%;display:flex;align-items:center;gap:9px;padding:11px 2px;border-radius:0;background:#fff;border-bottom:1px solid #f0f1e9;text-align:left}.material-row.highlighted{background:#f1f5e8}.swatch{width:30px;height:30px;border-radius:8px;border:1px solid #0000000b;flex-shrink:0;position:relative}.swatch:after{content:'';width:7px;height:7px;background:#ffffff8c;border-radius:50%;position:absolute;left:11px;top:11px}.material-code{font-size:12px;font-weight:650}.material-code small{display:block;font-weight:400;font-size:9px;color:#9ca492;margin-top:3px}.material-amount{margin-left:auto;color:#536a4c;font-size:12px}.material-amount small{font-size:9px;color:#9aa38d;margin-left:3px}.list-placeholder{font-size:11px;color:#a0a893;line-height:2;padding:25px 0}.material-tip{display:flex;gap:10px;padding:15px 12px;background:#fbf7ee;border-radius:9px;margin-top:20px}.material-tip>span{font-size:23px;color:#c8a685}.material-tip p{font-size:10px;color:#a38d71;line-height:1.9;margin:0}.material-tip strong{font-size:9px;font-weight:400}#clearHighlight{margin-top:13px}.how-it-works{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:42px 12px}.how-it-works>div{position:relative;padding-left:36px}.how-it-works span{position:absolute;left:0;top:4px;font-size:11px;color:#b4bea6;font-style:italic}.how-it-works h3{margin:0 0 8px;font-size:12px}.how-it-works p{margin:0;font-size:10px;color:#929f88;line-height:1.8}footer{border-top:1px solid var(--line);padding:25px 4%;display:flex;justify-content:space-between;align-items:center;color:#94a087;font-size:10px}.footer-brand{font-size:16px;color:#62745a;font-weight:650}.footer-brand small{font-size:8px;margin-left:12px;letter-spacing:1.3px;font-weight:400}.history-heading{display:flex;justify-content:space-between;align-items:center;margin:10px 0 25px}.history-heading h2{font-size:24px}.history-heading p{color:var(--muted);font-size:12px}.history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;min-height:350px}.history-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}.history-thumb{height:165px;background:#f0f3e9;display:flex;align-items:center;justify-content:center;border-radius:10px}.history-thumb img{max-width:90%;max-height:90%;image-rendering:pixelated}.history-card h3{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-card p{font-size:11px;color:#8b987e}.history-card button{padding:9px 12px;background:var(--soft);color:var(--green);font-size:11px;margin-right:8px}.history-card .delete-work{background:#faf0ed;color:#ac786c}.empty-history{grid-column:1/-1;text-align:center;padding:80px;color:#889781}.export-fallback{margin-top:15px;padding:14px;background:#f5f7ef;border-radius:10px}.export-fallback a{color:var(--green);font-size:12px}.export-fallback img{display:block;max-width:100%;max-height:250px;object-fit:contain;margin-top:12px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:13px 22px;background:#294330;color:#fff;border-radius:12px;box-shadow:0 7px 30px #172b2530;z-index:20;font-size:12px;max-width:90vw}
@media(min-width:1550px){.canvas-stage{height:610px}}@media(max-width:1150px){.workspace{grid-template-columns:245px minmax(0,1fr)}.materials{grid-column:2}.materials .material-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-height:250px}.material-overview{display:none}.materials .panel-heading{margin-bottom:10px}.material-list-head{padding-top:0}.material-tip{display:none}.preview{grid-row:span 1}.history-grid{grid-template-columns:repeat(3,1fr)}.intro-note{display:none}.result-metrics strong{font-size:16px}.preview-toolbar{gap:7px}}
@media(max-width:720px){.topbar{height:69px;padding:0 18px;gap:10px;flex-wrap:wrap}.brand{font-size:21px}.brand-en,.local-badge{display:none}nav{margin-left:auto;margin-right:0;gap:0}.nav-button{font-size:11px;padding:10px}.intro{padding:29px 0 25px}main{padding:0 16px}.eyebrow{font-size:8px}h1{font-size:25px;letter-spacing:0}.intro-copy{font-size:11px}.workspace{display:flex;flex-direction:column;gap:16px}.card{width:100%;border-radius:13px}.settings{padding:18px}.settings .panel-heading{margin-bottom:12px}.settings h3{margin-top:16px}.upload-zone{padding:14px}.divider{margin:18px 0}.sizes{grid-template-columns:repeat(3,1fr)}.dimensions{max-width:100%}.dimensions input{font-size:16px}.settings select{font-size:13px;min-height:42px}.primary-button{min-height:46px;font-size:13px}.preview{padding:17px}.preview .panel-heading{flex-wrap:wrap}.mode-tabs button{padding:8px 9px}.canvas-stage{height:350px;min-height:300px;padding:15px}.preview-toolbar{font-size:11px;gap:10px}.zoom-control{gap:4px}.result-metrics{grid-template-columns:repeat(2,1fr);row-gap:18px}.result-metrics>div:nth-child(2){border:0}.result-metrics strong{font-size:20px}.result-metrics span{font-size:10px}.materials{padding:17px}.materials .material-list{grid-template-columns:repeat(2,1fr);max-height:400px}.material-code{font-size:12px}.material-row{padding:12px 3px}.how-it-works{gap:16px;padding:30px 0;grid-template-columns:1fr}.how-it-works h3{font-size:12px}.how-it-works p{font-size:11px}footer{padding:20px 16px;flex-direction:column;gap:12px;align-items:flex-start}.footer-brand small{font-size:7px}.history-grid{grid-template-columns:repeat(2,1fr);gap:12px}.history-heading{flex-wrap:wrap}.history-heading h2{font-size:22px}.history-heading .secondary-button{margin-top:10px}.history-thumb{height:120px}.history-card{padding:10px}.history-card button{padding:9px;font-size:10px;margin-right:4px}.history-card p{font-size:10px}.empty-history{padding:60px 10px}.status{font-size:11px}.micro-note{line-height:1.8}}

/* Actual bead-grid presets */
.sizes{grid-template-columns:repeat(2,1fr)}.sizes button[data-size=custom]{grid-column:1/-1}.grid-size-hint{font-size:10px;line-height:1.7;color:#879381;margin:9px 0 0}