:root{--ink:#262b32;--muted:#838a91;--border:#e8e9e8;--paper:#fff;--bg:#faf9f7;--accent:#6857de;--violet:#f4f0ff;--soft-shadow:0 4px 28px rgba(37,31,62,.035)}
.solid-entry{margin:0 0 24px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#f6f2ff;border:1px solid #e8e0fb;border-radius:12px}.solid-entry strong{display:block;font-size:15px;color:#5f4a9e}.solid-entry p{margin:5px 0 0;color:#7c758a;font-size:12px}.solid-entry .btn{min-height:44px}
.portrait-start{margin:0;font-size:12px}.portrait-adjustments{margin-top:4px}.portrait-adjustments .crop-sublegend{display:flex;justify-content:space-between;align-items:center;gap:8px}.portrait-adjustments label{display:flex;justify-content:space-between;align-items:center;color:#626976;font-size:11px;margin-top:12px}.portrait-adjustments output{color:#6554c7;font-weight:750;font-variant-numeric:tabular-nums}.portrait-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.portrait-card{min-width:0;padding:16px;border:1px solid #e7e5ee;border-radius:12px;background:white}.portrait-card.is-portrait{border-color:#b6a7f0;background:#fcfbff}.portrait-card h3{font-size:15px;margin:0 0 5px}.portrait-card p{color:#858a94;font-size:11px;min-height:33px;margin-bottom:12px}.portrait-preview{aspect-ratio:2/3;background:#f4f2f7;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.portrait-card canvas{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;image-rendering:pixelated}.portrait-card.is-source canvas{image-rendering:auto}.portrait-card .btn{width:100%;margin-top:12px;font-size:12px}.portrait-card .portrait-metrics{font-size:12px;min-height:24px;margin:12px 0 0;color:#6c617f}.clarity-more{margin-top:20px;border-top:1px solid #eeeaf5;padding-top:15px}.clarity-more summary{cursor:pointer;color:#7566b0;font-size:12px;font-weight:650}.portrait-comparison:empty{display:none}@media(max-width:660px){.portrait-comparison{grid-template-columns:1fr}.portrait-card{padding:12px}.portrait-preview{max-width:320px;margin:auto}.portrait-card p{min-height:0}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft Yahei",Arial,sans-serif;font-size:14px;line-height:1.5}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #b0a8ff;outline-offset:2px}a{text-decoration:none;color:inherit}h1,h2,p{margin-top:0}.app-shell{max-width:1570px;margin:auto;padding:0 38px}.site-header{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:20px}.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:800;white-space:nowrap;letter-spacing:-.6px}.brand-light{font-weight:600}.brand-icon{height:31px;width:31px;display:grid;grid-template-columns:repeat(2,12px);grid-template-rows:repeat(2,12px);gap:3px;transform:rotate(-12deg)}.brand-icon i{border-radius:50%;box-shadow:inset -2px -2px 2px #0000001a}.brand-icon i:nth-child(1){background:#c7b5ff}.brand-icon i:nth-child(2){background:#f4c8ad}.brand-icon i:nth-child(3){background:#b4dbc9}.brand-icon i:nth-child(4){background:#f2b8cd}.beta{font-size:9px;letter-spacing:1px;color:#6957d5;background:#ece9fe;border-radius:5px;padding:4px 6px;margin-left:1px}.site-header nav{display:flex;gap:35px;font-weight:600;color:#92959e;font-size:13px;height:100%;align-items:center}.site-header nav a{height:100%;display:flex;align-items:center;border-bottom:2px solid transparent}.site-header nav .nav-active{color:#4d42aa;border-color:#7465df}.header-actions{display:flex;align-items:center;gap:17px}.privacy-pill{display:flex;align-items:center;gap:7px;color:#84918c;font-size:11px;white-space:nowrap}.privacy-dot{height:6px;width:6px;background:#55b692;border-radius:50%}.btn{border:1px solid transparent;background:white;border-radius:10px;padding:11px 16px;font-weight:650;transition:transform .12s,background .12s,border .12s;white-space:nowrap}.btn:hover{transform:translateY(-1px)}.btn-sm{padding:9px 14px;font-size:12px}.btn-primary{background:#6959d9;color:white;box-shadow:0 4px 12px #6c5cdb27}.btn-primary:hover{background:#5c4bc9}.btn-secondary{color:#4b5360;background:#fff;border-color:#e0e1e5}.btn-secondary:hover{background:#f5f4fa}.btn-dark{background:#262d37;color:#fff}.btn-dark:hover{background:#414857}.btn-outline{color:#6554d3;background:white;border-color:#ddd6ff}.btn-full{width:100%;margin-top:14px}.hero{min-height:215px;display:flex;align-items:center;justify-content:space-between;padding:36px 14px 24px;position:relative;overflow:hidden}.eyebrow{color:#927fd0;letter-spacing:1.2px;font-weight:750;font-size:10px;margin-bottom:12px}.sparkle{font-size:14px}.hero h1{font-size:31px;letter-spacing:-1px;line-height:1.36;margin-bottom:10px;font-weight:850}.hero h1 span{color:#6a5bcc}.hero p{max-width:700px;color:#7b8088;margin-bottom:0;font-size:12px;line-height:1.8}.hero-decoration{width:184px;height:128px;position:relative;margin-right:70px;flex-shrink:0;transform:rotate(-13deg)}.hero-decoration span{width:31px;height:31px;border-radius:50%;position:absolute;box-shadow:inset -5px -5px 7px #0000000f,0 9px 14px #0000000a}.hero-decoration span:after{content:"";position:absolute;width:10px;height:10px;background:#faf9f7a0;border-radius:50%;top:11px;left:10px;box-shadow:inset 2px 2px 2px #00000019}.deco-b1{left:18px;top:42px;background:#ffca8a}.deco-b2{left:57px;top:13px;background:#bfa7ef}.deco-b3{left:57px;top:52px;background:#a4d8c7}.deco-b4{left:97px;top:13px;background:#e9acc1}.deco-b5{left:97px;top:52px;background:#f3d475}.deco-b6{left:136px;top:52px;background:#9dc4ed}.deco-b7{left:57px;top:91px;background:#e0bda3}.deco-b8{left:97px;top:91px;background:#a5c8eb}.deco-b9{left:136px;top:91px;background:#b4e0bc}
.workspace{display:grid;grid-template-columns:282px minmax(350px,1fr) 300px;gap:18px;align-items:stretch}.panel{background:var(--paper);border:1px solid var(--border);border-radius:15px;box-shadow:var(--soft-shadow)}.left-rail{padding:22px 19px}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:23px}.panel-title-row h2{font-size:14px;font-weight:800;display:flex;align-items:center;gap:10px;margin:0}.panel-muted{font-size:9px;font-weight:700;letter-spacing:1px;color:#bdc1c8}.step-dot{display:flex;align-items:center;justify-content:center;height:25px;width:25px;border-radius:8px;color:#7161cd;background:#efedff;font-size:11px;font-weight:850}.step-dot.green{color:#498b71;background:#e8f6ee}.step-dot.violet{color:#8c6ad5;background:#f5efff}.upload-zone{border:1.5px dashed #ddd8f2;background:#fbfaff;border-radius:13px;text-align:center;padding:24px 8px 18px;display:flex;flex-direction:column;align-items:center;gap:7px;transition:background .12s,border-color .12s;cursor:pointer}.upload-zone:hover,.upload-zone.drag-over{background:#f4f0ff;border-color:#9b8ee1}.upload-icon{font-size:22px;color:#907eeb;background:#eeeafe;border-radius:11px;width:41px;height:41px;display:flex;align-items:center;justify-content:center;margin-bottom:7px}.upload-zone strong{font-size:12px}.upload-zone small{font-size:10px;color:#a0a0af}.upload-zone .btn{margin-top:7px}.sample-line{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#a2a2aa;padding:12px 1px}.text-button{border:0;background:none;color:#7566db;padding:2px;font-size:11px;font-weight:750}.text-button:hover{text-decoration:underline}.divider{height:1px;background:#ececee;margin:17px 0}.section-label{font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:space-between;margin:17px 0 9px}.section-value{color:#7462d6;font-weight:800}input[type=range]{display:block;accent-color:#7462d8;width:100%;height:15px;margin:4px 0;cursor:pointer}.range-labels{font-size:10px;color:#abaeb4;display:flex;justify-content:space-between;margin:3px 0 10px}.form-field{width:100%;background:white;border:1px solid #e4e6e9;border-radius:8px;padding:10px 10px;color:#333942;font-size:12px;min-width:0}.form-field:focus{border-color:#b4a9f0}.hint{font-size:10px;color:#a0a4aa;line-height:1.6;margin-top:7px}.check-row{display:flex;gap:7px;align-items:center;color:#737781;font-size:11px;margin-top:12px}.check-row input,.toggle-inline input{accent-color:#7565dc}.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.tool{border:1px solid #e9e9ed;background:#fff;border-radius:9px;padding:8px 3px 6px;display:flex;align-items:center;gap:2px;flex-direction:column}.tool.active{border-color:#a69bfa;background:#f3f0ff;color:#6555c8}.tool span{font-size:19px;line-height:1.2}.tool small{font-size:10px}.color-heading{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.selected-color{font-size:10px;color:#958baf}.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:3px 0}.swatch{aspect-ratio:1;width:100%;border:1px solid #dddddf;border-radius:7px;padding:2px;background:white;position:relative}.swatch:before{content:"";display:block;width:100%;height:100%;border-radius:4px;background:var(--sw)}.swatch.selected{outline:2px solid #725cda;outline-offset:1px}.editor-hint{font-size:10px;color:#9ea0aa;margin-top:11px;line-height:1.6}
.canvas-panel{display:flex;flex-direction:column;padding:23px 24px 18px;min-width:0}.canvas-topbar{display:flex;align-items:start;justify-content:space-between;gap:10px;margin-bottom:16px}.canvas-label{letter-spacing:1.2px;font-size:9px;font-weight:850;color:#afa8c7}.canvas-topbar h2{font-size:18px;margin:4px 0 0;letter-spacing:-.3px}.dirty-flag{font-size:10px;font-weight:600;color:#aa9cb0;background:#f6f3f6;padding:4px 6px;border-radius:6px;margin-left:8px;vertical-align:middle}.canvas-actions{display:flex;gap:6px}.icon-btn{border:1px solid #e9eaf0;background:white;color:#69717c;border-radius:8px;min-width:32px;height:32px;font-size:22px;line-height:1}.icon-btn:hover{background:#f5f3ff}.icon-btn.text-ico{font-size:11px;min-width:42px}.canvas-stage{background:#f9f8fb;border:1px solid #f0eef4;border-radius:12px;min-height:580px;display:flex;align-items:center;justify-content:center;padding:28px 18px;overflow:hidden}.canvas-inner{width:min(100%,520px);box-shadow:0 18px 40px #6b658918,0 0 0 1px #dedde4;background:#fff;aspect-ratio:1}.canvas-inner canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.canvas-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 2px}.canvas-display{display:flex;gap:14px}.toggle-inline{white-space:nowrap;font-size:11px;color:#80848b;display:flex;align-items:center;gap:4px}.scale-label{font-size:10px;color:#a4a5af}.export-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.export-actions .btn{font-size:12px;padding:12px 6px}.mini-caption{font-size:10px;color:#acafb8;margin:12px 0 0;line-height:1.6}
.right-rail{display:flex;flex-direction:column;gap:17px;min-width:0}.right-rail .panel{padding:22px 18px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{background:#f8faf9;border-radius:12px;padding:15px 13px 12px;min-width:0}.stat:nth-child(2){background:#f8f6fc}.stat small{font-size:10px;color:#888f95;display:block;margin-bottom:6px}.stat strong{font-size:25px;font-weight:850;letter-spacing:-.8px}.stat span{font-size:10px;color:#a2a4ab;margin-left:4px}.board-line{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;padding:17px 0;color:#878c96;font-size:11px}.board-line strong{color:#474d5a}.list-head{display:flex;align-items:center;justify-content:space-between;margin-top:19px;margin-bottom:10px}.list-head strong{font-size:12px}.color-list{display:flex;flex-direction:column;gap:11px;max-height:255px;overflow:auto;padding-right:3px}.color-item{display:flex;align-items:center;gap:8px;font-size:11px}.color-dot{height:16px;width:16px;flex-shrink:0;border-radius:5px;border:1px solid #00000012;background:var(--dot)}.color-name{color:#68727d;flex:1}.color-id{color:#a7aab1;font-size:10px}.color-count{font-weight:700;color:#424a55}.pro-tag{color:#8d75d0;background:#f4eefa;letter-spacing:.5px;font-size:9px;border-radius:6px;padding:5px 7px;font-weight:800;white-space:nowrap}.quote-explainer{font-size:11px;color:#9397a1;line-height:1.7;margin:-5px 0 15px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 9px}.form-grid label,.order-grid label{font-size:10px;color:#7e848e;display:flex;flex-direction:column;gap:6px;font-weight:650}.quote-slider{margin-top:19px}.quote-summary{background:#f6f3ff;border:1px solid #e9e4ff;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 13px;margin:18px 0 12px}.quote-summary div{display:flex;flex-direction:column;gap:6px}.quote-summary span{font-size:10px;color:#8b849c}.quote-summary strong{font-size:15px}.quote-summary .quote-price{font-size:23px;color:#6553d4}.quote-summary .quote-divider{height:37px;width:1px;background:#dcd5f6;flex-shrink:0}.quote-summary>div:last-child{align-items:flex-end}
.orders{margin-top:18px;padding:24px 28px}.orders-heading{display:flex;align-items:start;justify-content:space-between;gap:18px}.orders-heading h2{font-size:20px;margin:5px 0 6px}.orders-heading p{font-size:12px;color:#999da7;margin:0}.not-live{font-size:10px;color:#8d8a9f;background:#f6f5f8;padding:7px 10px;border-radius:16px;white-space:nowrap}.order-grid{display:grid;grid-template-columns:1.3fr 1.3fr .9fr auto;gap:12px;align-items:end;margin-top:25px}.order-cta{display:flex;align-items:end}.order-cta .btn{font-size:12px;padding:11px}.order-summary{margin-top:14px}.saved-order{display:flex;align-items:center;justify-content:space-between;background:#fafafc;border:1px solid #edecf1;border-radius:9px;padding:11px 14px;margin-top:7px;gap:12px}.saved-order strong{font-size:12px}.saved-order small{font-size:10px;color:#999}.saved-order .order-meta{display:flex;align-items:center;gap:15px}.order-meta button{background:transparent;border:0;color:#8475cd;font-size:11px}.order-empty{font-size:11px;color:#aaa;border:1px dashed #e5e4eb;padding:16px 12px;margin-top:16px;border-radius:9px}.backup-row{display:flex;gap:18px;margin-top:8px}footer{display:flex;justify-content:space-between;align-items:center;padding:25px 1px 35px;color:#a5a6ae;font-size:10px}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);padding:11px 19px;background:#272d39;border-radius:9px;color:white;font-size:12px;box-shadow:0 9px 26px #00000025;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:3}.toast.show{opacity:1;transform:translate(-50%,0)}
.size-status{font-size:10px;color:#748078;background:#f5f8f6;border:1px solid #e5ece8;border-radius:7px;padding:7px 9px;margin-top:7px;line-height:1.5}.size-status.pending{color:#846c2f;background:#fff9e8;border-color:#f1e2b2}.canvas-stage{overflow:auto}.canvas-inner{max-width:100%}
.palette-metadata{font-size:10px;line-height:1.55;color:#6f737c;background:#f8f6ff;border:1px solid #e8e3ff;border-radius:8px;padding:9px 10px;margin-top:7px}.palette-meta-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}.palette-meta-heading strong{color:#6554c7;background:#ece8ff;border-radius:10px;padding:2px 7px;font-size:9px}.palette-meta-heading span{color:#77738a}.palette-warning{color:#8a6b28;margin-top:5px;padding-top:5px;border-top:1px solid #ece2c7}
.crop-panel{margin-bottom:18px;padding:22px 24px}.crop-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:16px}.crop-heading h2{font-size:18px;margin:4px 0 5px}.crop-heading p{font-size:11px;color:#8e929b;margin:0;max-width:760px}.crop-source-status{font-size:10px;color:#846c2f;background:#fff9e8;border:1px solid #f1e2b2;border-radius:16px;padding:6px 10px;white-space:nowrap}.crop-source-status.ready{color:#39785f;background:#eef9f3;border-color:#cee9da}.crop-layout{display:grid;grid-template-columns:minmax(360px,1.55fr) minmax(260px,.9fr) minmax(220px,.8fr);gap:20px;align-items:start}.crop-editor-stage{height:360px;position:relative;overflow:hidden;border:1px solid #e2e1e8;border-radius:12px;background-color:#23262c;background-image:linear-gradient(45deg,#2d3037 25%,transparent 25%),linear-gradient(-45deg,#2d3037 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2d3037 75%),linear-gradient(-45deg,transparent 75%,#2d3037 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;touch-action:none;user-select:none}.crop-editor-stage.is-disabled{background:#f4f3f6}.crop-editor-stage canvas{display:block;width:100%;height:100%}.crop-selection{position:absolute;border:2px solid #fff;box-shadow:0 0 0 1px #6959d9,0 0 0 9999px rgba(21,23,29,.58);cursor:move;touch-action:none;outline:0}.crop-selection:focus-visible{box-shadow:0 0 0 2px #b9afff,0 0 0 9999px rgba(21,23,29,.58)}.crop-grid-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.48) 33.2%,rgba(255,255,255,.48) 33.7%,transparent 33.7%,transparent 66.2%,rgba(255,255,255,.48) 66.2%,rgba(255,255,255,.48) 66.7%,transparent 66.7%),linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.48) 33.2%,rgba(255,255,255,.48) 33.7%,transparent 33.7%,transparent 66.2%,rgba(255,255,255,.48) 66.2%,rgba(255,255,255,.48) 66.7%,transparent 66.7%)}.crop-handle{position:absolute;width:22px;height:22px;border:2px solid #fff;background:#6959d9;border-radius:50%;box-shadow:0 2px 8px #0008;touch-action:none}.crop-handle:after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}.crop-handle-nw{left:-12px;top:-12px;cursor:nwse-resize}.crop-handle-ne{right:-12px;top:-12px;cursor:nesw-resize}.crop-handle-se{right:-12px;bottom:-12px;cursor:nwse-resize}.crop-handle-sw{left:-12px;bottom:-12px;cursor:nesw-resize}.crop-empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:#888d96;font-size:12px;line-height:1.7}.crop-empty-state[hidden],.crop-preview-stage span[hidden]{display:none}.crop-help{font-size:10px;color:#979aa3;margin:8px 2px 0}.crop-controls fieldset{border:0;padding:0;margin:0;min-width:0}.crop-controls fieldset:disabled{opacity:.52}.crop-controls legend{font-size:11px;font-weight:800;padding:0;margin:0 0 9px}.crop-sublegend{padding-top:16px!important}.crop-presets{display:grid;grid-template-columns:1fr 1fr;gap:7px}.crop-preset{border:1px solid #e3e2e8;background:#fff;border-radius:8px;padding:8px 6px;color:#656b74;font-size:11px}.crop-preset.active{border-color:#9d91ee;background:#f3f0ff;color:#5f50c3;font-weight:750}.crop-number-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.crop-number-grid label{font-size:10px;color:#7e848e;display:flex;flex-direction:column;gap:4px}.crop-number-grid .form-field{padding:8px}.fit-options{display:grid;gap:7px}.fit-options label{display:flex;align-items:center;gap:8px;border:1px solid #e5e4ea;border-radius:9px;padding:8px 9px;cursor:pointer}.fit-options label:has(input:checked){border-color:#a99df1;background:#f6f3ff}.fit-options input{accent-color:#6959d9}.fit-options span{display:flex;flex-direction:column}.fit-options strong{font-size:11px}.fit-options small{font-size:9px;color:#9699a2}.crop-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}.crop-actions .btn{padding:9px 10px;font-size:10px}.crop-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;font-size:11px}.crop-preview-heading span{font-size:9px;color:#888d98}.crop-preview-stage{position:relative;width:100%;max-height:360px;aspect-ratio:1;background-color:#f6f5f8;background-image:linear-gradient(45deg,#eceaf0 25%,transparent 25%),linear-gradient(-45deg,#eceaf0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eceaf0 75%),linear-gradient(-45deg,transparent 75%,#eceaf0 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;border:1px solid #e2e1e8;border-radius:12px;overflow:hidden}.crop-preview-stage canvas{display:block;width:100%;height:100%}.crop-preview-stage span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#999da6;font-size:11px}.crop-pending-status{font-size:10px;line-height:1.5;color:#6d766f;background:#f2f7f4;border:1px solid #e0ebe4;border-radius:8px;padding:8px 9px;margin-top:9px}.crop-pending-status.pending{color:#846c2f;background:#fff9e8;border-color:#f1e2b2}
.crop-sublegend{padding-top:16px!important;font-size:11px;font-weight:800;margin-bottom:9px}.crop-handle-nw{left:-2px;top:-2px}.crop-handle-ne{right:-2px;top:-2px}.crop-handle-se{right:-2px;bottom:-2px}.crop-handle-sw{left:-2px;bottom:-2px}
.clarity-panel{margin-top:18px;padding:24px 28px}.clarity-heading{display:flex;align-items:start;justify-content:space-between;gap:18px}.clarity-heading h2{font-size:20px;margin:5px 0 6px}.clarity-heading p{font-size:11px;color:#9297a0;margin:0}.clarity-status{font-size:10px;color:#6d766f;background:#f2f7f4;border:1px solid #e0ebe4;border-radius:8px;padding:8px 10px;margin-top:16px}.clarity-status.pending{color:#846c2f;background:#fff9e8;border-color:#f1e2b2}.clarity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.clarity-card{border:1px solid #e7e5ee;border-radius:12px;padding:12px;background:#fff}.clarity-card h3{font-size:13px;margin:0 0 3px}.clarity-card small{display:block;color:#969aa3;font-size:10px;margin-bottom:9px}.clarity-card canvas{display:block;width:100%;height:auto;aspect-ratio:3 / 4;background:#f8f7fa;border:1px solid #eeeef2;border-radius:8px;image-rendering:auto}.clarity-metrics{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0;font-size:10px;color:#7c818a}.clarity-metrics span{background:#f8f8fa;border-radius:6px;padding:5px 6px}.clarity-metrics strong{display:block;color:#363b45;font-size:12px}.clarity-card .btn{width:100%;font-size:10px;padding:8px 7px}.clarity-empty{font-size:11px;color:#9a9da5;border:1px dashed #e3e2e8;border-radius:9px;padding:18px;text-align:center;grid-column:1/-1}@media(max-width:900px){.clarity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:660px){.clarity-panel{padding:19px 14px}.clarity-heading{flex-direction:column}.clarity-heading .btn{align-self:flex-end}.clarity-grid{grid-template-columns:1fr}}
.feasibility-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.feasibility-grid>div{background:#f8faf9;border-radius:9px;padding:9px 10px}.feasibility-grid small{display:block;font-size:9px;color:#8f959c;margin-bottom:4px}.feasibility-grid strong{font-size:17px;color:#343a44}.feasibility-status{font-size:10px;line-height:1.55;color:#6d766f;background:#f2f7f4;border:1px solid #e0ebe4;border-radius:8px;padding:8px 9px;margin-top:10px}.feasibility-status.warning{color:#846c2f;background:#fff9e8;border-color:#f1e2b2}.feasibility-status.good{color:#39785f;background:#eef9f3;border-color:#cee9da}
.inventory-explainer{margin:0 0 12px;color:#737580;font-size:12px;line-height:1.6}.inventory-summary{padding:9px 10px;border-radius:10px;background:#f4f4f7;color:#676a75;font-size:12px;line-height:1.4;margin-bottom:10px}.inventory-summary.is-ready{background:#e8f7ee;color:#26744c}.inventory-summary.is-missing{background:#fff4df;color:#9b5b00}.inventory-list{display:grid;gap:6px;margin-bottom:12px}.inventory-item{display:grid;grid-template-columns:14px minmax(0,1fr) 76px auto;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid #efeff2}.inventory-item:last-child{border-bottom:0}.inventory-color{display:grid;gap:2px;min-width:0}.inventory-color strong{font-size:12px;color:#40424b}.inventory-color small{font-size:10px;color:#999ca7}.inventory-input{width:76px;border:1px solid #dedee5;border-radius:7px;padding:6px 7px;background:#fff;color:#363842;font:inherit;font-size:12px}.inventory-status{font-size:10px;white-space:nowrap;color:#b06600}.inventory-item.is-ready .inventory-status{color:#39825b}.inventory-panel .hint{margin-top:8px}
.tools{grid-template-columns:repeat(5,minmax(0,1fr))}.progress-track{height:9px;background:#ececf1;border-radius:99px;overflow:hidden;margin:2px 0 8px}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7e6be4,#4d9d70);border-radius:inherit;transition:width .15s ease}.progress-summary{font-size:12px;font-weight:750;color:#6d7180}.progress-summary.is-complete{color:#39825f}.progress-explainer{font-size:11px;line-height:1.65;color:#9397a1;margin:8px 0 12px}.projects{margin-top:18px;padding:24px 28px}.projects-heading{display:flex;align-items:start;justify-content:space-between;gap:18px}.projects-heading h2{font-size:20px;margin:5px 0 6px}.projects-heading p{font-size:12px;color:#999da7;margin:0}.projects-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.project-count{font-size:11px;color:#8c909a}.project-list{display:grid;gap:8px;margin-top:12px}.project-card{display:grid;grid-template-columns:minmax(0,1.5fr) 150px auto;align-items:center;gap:16px;padding:13px 14px;border:1px solid #edecf1;border-radius:10px;background:#fcfcfd}.project-info{display:grid;gap:4px;min-width:0}.project-info strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-info small{font-size:10px;color:#999da7}.project-progress{display:grid;gap:5px;font-size:10px;color:#777c87}.project-progress-track{height:6px;background:#ededf2;border-radius:99px;overflow:hidden}.project-progress-track i{display:block;height:100%;background:#7a6cdb;border-radius:inherit}.project-actions{display:flex;align-items:center;gap:12px}.project-empty{font-size:11px;color:#aaa;border:1px dashed #e5e4eb;padding:16px 12px;border-radius:9px}
@media(max-width:660px){.projects{padding:19px 14px}.projects-heading{flex-direction:column}.projects-toolbar{align-items:stretch;flex-direction:column}.project-card{grid-template-columns:1fr;gap:10px}.project-actions{justify-content:space-between}}
.hero-start-actions{display:flex;align-items:center;gap:10px;margin-top:18px}.hero-start-actions a{text-decoration:none}.hero .hero-start-note{font-size:11px;margin-top:10px;color:#858894}.creation-guide{margin:0 0 20px;padding:18px 20px;background:#fff;border:1px solid #e8e5ef;border-radius:14px}.creation-guide-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.creation-guide-heading h2{font-size:15px;margin:0}.creation-guide-heading p{font-size:11px;color:#808592;margin:0}.creation-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}.creation-steps a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 7px;padding:12px 9px;border-radius:9px;color:#454451;background:#f8f7fc;text-decoration:none}.creation-steps a:hover{background:#f0ecfc}.creation-steps a:focus-visible,.hero-start-actions a:focus-visible{outline:2px solid #7565d7;outline-offset:3px}.creation-steps span{grid-row:1/3;font-size:12px;font-weight:800;color:#7864c6}.creation-steps strong{font-size:12px}.creation-steps small{font-size:10px;line-height:1.6;color:#858392}#creationSettings,#inventoryPanel,#compositionPanel,#projects,#uploadZone{scroll-margin-top:18px}@media(max-width:900px){.creation-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:660px){.creation-guide{padding:15px 12px}.creation-guide-heading{gap:7px}.creation-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.creation-steps a{padding:10px 8px}.hero-start-actions{margin-top:16px;flex-wrap:wrap}.hero .hero-start-note{font-size:10px}}@media print{.creation-guide{display:none!important}}
.generation-make{display:block;margin-top:9px;text-decoration:none;text-align:center}.making-plan{font-size:12px;font-weight:700;line-height:1.8;color:#615283;margin:10px 0 0}.making-save-note{margin-top:5px}.assembly-print-readiness{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:15px 0 0;padding:11px 13px;background:#f6f3fc;border:1px solid #e6def4;border-radius:9px}.assembly-print-summary{font-size:12px;line-height:1.8;font-weight:650;color:#675389;margin:0}.assembly-print-readiness button[hidden]{display:none}.assembly-print-readiness button{white-space:nowrap}#assemblyTitle:focus-visible{outline:2px solid #9280ce;outline-offset:5px;border-radius:2px}
.project-persistence{margin-top:15px;padding:14px 16px;border:1px solid #e4def0;border-radius:10px;background:#faf8ff;scroll-margin-top:18px}.project-persistence>.check-row{margin:0;font-size:12px;color:#575166;font-weight:700}.source-save-status{font-size:12px;line-height:1.8;margin:9px 0;color:#6d7080;overflow-wrap:anywhere}.source-save-status[data-state=saved]{color:#367452}.source-save-status[data-state=error]{color:#a15e2d}.source-save-status[data-state=saving],.source-save-status[data-state=restoring]{color:#8d712e}.project-persistence .backup-row{align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}.project-persistence button:disabled{opacity:.5;cursor:not-allowed}.project-persistence .btn{white-space:normal}@media(max-width:660px){.project-persistence{padding:13px 12px}.project-persistence .backup-row{align-items:flex-start;flex-direction:column;gap:14px}}@media print{.project-persistence{display:none!important}}
#restoreSourceBtn[hidden]{display:none}
.assembly-link{display:block;margin-top:13px;color:#6a58cb;font-size:11px;font-weight:700;line-height:1.7}.assembly-link:hover{text-decoration:underline}
.assembly-export-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.assembly-export-actions .btn{white-space:nowrap}.assembly-export-actions .btn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:660px){.assembly-export-actions{width:100%;justify-content:flex-start}}
.assembly-panel{padding:24px 28px;margin-top:18px;scroll-margin-top:20px}.assembly-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.assembly-heading h2{font-size:20px;margin:5px 0 6px}.assembly-heading p{font-size:12px;color:#7e8490;margin:0;line-height:1.7}.assembly-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;margin-top:20px}.assembly-controls{min-width:0}.assembly-controls>.section-label:first-child{margin-top:0}.assembly-sections{display:grid;gap:6px}.assembly-section{border:1px solid #e0ddeb;border-radius:8px;background:#faf9fd;color:#6d7380;min-height:42px;font-size:12px;font-weight:700}.assembly-section:hover{border-color:#ab9ce8;background:#f4f0ff}.assembly-section.active{border-color:#8068d5;background:#ece6ff;color:#6046b4;box-shadow:inset 0 0 0 1px #8068d5}.assembly-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.assembly-nav .btn{padding:8px 6px}.assembly-colors{display:grid;gap:8px;max-height:330px;overflow:auto;padding-right:5px}.assembly-detail{min-width:0}.assembly-detail h3{font-size:15px;margin:0 0 4px;color:#383d48}.assembly-bounds{font-size:11px;color:#868c96;line-height:1.7;margin:0 0 12px}.assembly-canvas-stage{background:#f8f7fb;border:1px solid #e6e2ee;border-radius:10px;overflow:auto;max-height:620px;overscroll-behavior:contain}.assembly-canvas-stage canvas{display:block;max-width:none;flex-shrink:0}.assembly-row-controls{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:16px;flex-wrap:wrap}.assembly-row-controls label{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px;color:#6d7380}.assembly-row-controls select{width:72px;padding:7px}.assembly-row-controls .btn{font-size:11px;padding:8px 10px}.assembly-row-runs{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;max-height:260px;overflow:auto}.assembly-run{border:1px solid #e9e5f0;background:#fcfbfe;border-radius:9px;padding:8px 10px}.assembly-run small{display:block;font-size:10px;color:#8e92a0;margin-bottom:4px}.assembly-run strong{display:flex;gap:6px;align-items:center;font-size:12px;color:#454956}.assembly-run .color-dot{width:12px;height:12px;flex-basis:12px}
@media(max-width:660px){.assembly-panel{padding:19px 14px}.assembly-heading{flex-direction:column}.assembly-heading>.btn{align-self:flex-end}.assembly-layout{grid-template-columns:1fr;gap:18px}.assembly-colors{grid-template-columns:repeat(2,minmax(0,1fr));max-height:180px}.assembly-canvas-stage{max-height:440px}.assembly-row-controls{justify-content:center}}
@media print{.assembly-panel,.assembly-link{display:none!important}}
.view-mode-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px 0;border-top:1px solid #eeeef2}.view-mode-label{font-size:11px;font-weight:750;color:#707581}.view-mode-tabs{display:flex;gap:5px;flex-wrap:wrap}.view-mode-tab{border:1px solid #e5e4eb;background:#fff;border-radius:7px;padding:6px 10px;color:#777c87;font-size:10px}.view-mode-tab:hover{background:#f7f5ff}.view-mode-tab.active{border-color:#a69bfa;background:#f3f0ff;color:#6555c8;font-weight:750}.view-mode-hint{font-size:10px;color:#9b9ea7;line-height:1.5;margin:5px 2px 10px}
@media(max-width:660px){.view-mode-row{align-items:flex-start;flex-direction:column;gap:7px}.view-mode-tabs{width:100%}.view-mode-tab{flex:1}}
@media(max-width:1300px){.app-shell{padding:0 24px}.workspace{grid-template-columns:260px minmax(340px,1fr) 277px;gap:12px}.canvas-panel{padding:22px 17px 16px}.canvas-stage{min-height:490px;padding:15px}.right-rail .panel{padding:20px 15px}.hero-decoration{margin-right:30px}}
@media(max-width:1060px){.crop-layout{grid-template-columns:minmax(340px,1.3fr) minmax(260px,1fr)}.crop-preview-column{grid-column:1/-1}.crop-preview-stage{width:min(100%,320px)}.workspace{grid-template-columns:265px minmax(320px,1fr)}.right-rail{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.canvas-stage{min-height:530px}.order-grid{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.app-shell{padding:0 12px}.site-header{height:66px}.brand{font-size:17px}.brand-icon{transform:scale(.83) rotate(-12deg)}.beta,.site-header nav,.privacy-pill{display:none}.hero{padding:25px 5px;min-height:unset}.hero h1{font-size:25px}.hero p{font-size:11px}.hero-decoration{display:none}.crop-panel{padding:17px 14px}.crop-heading{flex-direction:column;gap:8px}.crop-layout{display:flex;flex-direction:column}.crop-layout>*{width:100%}.crop-editor-stage{height:290px}.crop-preview-stage{margin:auto;width:min(100%,300px)}.workspace{display:flex;flex-direction:column;gap:12px}.left-rail,.canvas-panel,.right-rail .panel{padding:17px 15px}.canvas-panel{order:0}.left-rail{order:1}.right-rail{order:2;display:flex}.canvas-stage{min-height:unset;padding:16px 10px}.canvas-bottom{flex-wrap:wrap}.export-actions{grid-template-columns:1fr 1fr}.swatches{grid-template-columns:repeat(12,minmax(0,1fr))}.orders{padding:19px 14px}.orders-heading{flex-direction:column}.order-grid{grid-template-columns:1fr 1fr}.order-cta{grid-column:1/-1}.order-cta .btn{width:100%}footer{gap:12px;flex-wrap:wrap}.hero h1 br{display:none}}
@media print{body{background:white}.site-header,.hero,.crop-panel,.left-rail,.canvas-actions,.canvas-bottom,.export-actions,.right-rail .stats-panel,.quote-panel button,.quote-panel .hint,.orders,footer,.toast,.mini-caption{display:none!important}.app-shell{max-width:100%;padding:0}.workspace{display:block}.canvas-panel,.right-rail .quote-panel{box-shadow:none;border:0}.canvas-stage{min-height:unset;max-width:600px;margin:auto}.right-rail .quote-panel{page-break-inside:avoid}.right-rail .quote-panel .form-grid{display:grid;grid-template-columns:1fr 1fr}.quote-panel{margin-top:20px}.quote-panel .quote-summary{max-width:600px}.canvas-topbar .canvas-label:after{content:" · 拼豆定制报价单"}}

@media print{.clarity-panel{display:none!important}}

.crop-advanced{margin-top:16px;border-top:1px solid #eeeaf5;padding-top:12px}.crop-advanced summary{font-size:11px;font-weight:650;color:#7466ac;cursor:pointer}
.first-trial-entry{display:flex;align-items:center;gap:5px 10px;flex-wrap:wrap;font-size:11px;color:#8a8096;margin:12px 0 0;line-height:1.8}.first-trial-entry a{display:inline-flex;align-items:center;min-height:44px;color:#7157b4;font-weight:700;text-decoration:none}.first-trial-entry a:hover{text-decoration:underline}.first-trial-entry a:focus-visible{outline:2px solid #927ad2;outline-offset:3px}

.assembly-progress-summary{font-size:12px;line-height:1.8;color:#605571;margin:0 0 12px}
.assembly-row-workspace{position:sticky;top:8px;z-index:3;background:#fff;border:1px solid #e5dff0;border-radius:11px;padding:12px;box-shadow:0 4px 14px #54426f0c}
.assembly-row-workspace .assembly-row-controls{margin-top:0;flex-wrap:nowrap;gap:6px}
.assembly-row-controls select{width:116px;max-width:100%;min-height:44px}
.assembly-row-workspace .btn,.assembly-nav .btn{min-height:44px}
.assembly-row-progress{font-size:12px;line-height:1.7;font-weight:700;color:#635572;margin:10px 0}
.assembly-row-progress[data-state=complete]{color:#347450}
.assembly-row-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.assembly-row-actions .btn{font-size:12px;padding:10px 6px;white-space:normal}
.assembly-row-workspace button:disabled{opacity:.45;cursor:not-allowed}
.assembly-save-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px}
.assembly-save-status{font-size:11px;line-height:1.7;color:#7d7488;margin:4px 0;overflow-wrap:anywhere}
.assembly-save-status[data-state=saved]{color:#397452}
.assembly-save-status[data-state=pending]{color:#8b6e29}
.assembly-save-status[data-state=error]{color:#9b432c;font-weight:700}
.assembly-save-row .text-button{flex-shrink:0;min-height:44px}
.assembly-row-workspace button:focus-visible,.assembly-row-controls select:focus-visible{outline:2px solid #7854d6;outline-offset:3px}
@media(max-width:660px){.assembly-row-workspace{padding:10px;top:4px}.assembly-row-controls .btn{padding:8px 6px;font-size:11px;flex-shrink:0}.assembly-row-controls label{gap:4px;font-size:11px}.assembly-row-controls select{width:105px;padding:7px 4px}.assembly-row-controls{justify-content:space-between}.assembly-canvas-stage{max-height:min(440px,55svh)}}
@media(max-width:360px){.assembly-row-controls label{font-size:0;gap:0}.assembly-row-controls select{font-size:12px;width:102px}}

.palette-import{margin-top:12px;border:1px solid #e8e3f5;border-radius:9px;padding:10px;background:#fcfbff}.palette-import summary{font-size:11px;color:#6957c7;font-weight:700;cursor:pointer}.palette-file-label{display:block;margin-top:12px;font-size:11px;color:#5f6170}.palette-file-label input{display:block;width:100%;max-width:100%;margin-top:7px;font-size:10px}.palette-file-label input::file-selector-button{border:1px solid #ddd6f2;border-radius:6px;padding:7px;color:#6252b3;background:#f5f2ff;cursor:pointer}.palette-import-status{font-size:10px;line-height:1.6;margin:12px 0 0;color:#49715a;overflow-wrap:anywhere}.palette-import-status.error{color:#a23f39}.color-id,.assembly-run strong,.inventory-color strong{overflow-wrap:anywhere}

/* Keep the diagram and its controls in separate panes when following on screen. */
body.screen-assembly-open{overflow:hidden}
.project-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.project-toolbar-actions .btn{min-height:44px}
.practice-copy-hint{font-size:11px;line-height:1.8;color:#898090;margin:10px 0 0;overflow-wrap:anywhere}
.practice-copy-status{font-size:12px;line-height:1.8;color:#776487;margin:8px 0 0;overflow-wrap:anywhere}
.practice-copy-status:empty{display:none}
.practice-copy-status[data-state=pending]{color:#8b6e29}
.practice-copy-status[data-state=saved]{color:#397452}
.practice-copy-status[data-state=error]{color:#9b432c;font-weight:650}
.practice-project-badge{justify-self:start;font-size:10px;font-weight:750;line-height:1.6;padding:2px 7px;border:1px solid #d9cbea;border-radius:5px;background:#f4edfc;color:#71538e}
@media(max-width:430px){.projects-toolbar{align-items:flex-start;flex-direction:column}.project-toolbar-actions{width:100%;justify-content:flex-start}.project-toolbar-actions .btn{font-size:11px;padding:9px 10px;flex:1}}
.screen-assembly{width:calc(100vw - 32px);max-width:1380px;height:calc(100vh - 32px);height:calc(100dvh - 32px);max-height:980px;max-width:min(1380px,calc(100vw - 32px));padding:0;border:1px solid #e3ddec;border-radius:18px;color:var(--ink);background:#fff;box-shadow:0 24px 90px #27203840;overflow:hidden}
.screen-assembly[open]{display:flex;flex-direction:column}
.screen-assembly::backdrop{background:#262032a6}
.screen-assembly .btn,.screen-assembly .form-field,.screen-assembly .text-button{min-height:44px}
.screen-assembly-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #eeebf2;flex-shrink:0}
.screen-assembly-header>div{min-width:0}
.screen-assembly-header h2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:20px;margin:0 0 2px;letter-spacing:-.5px}
.screen-location{font-size:12px;font-weight:600;letter-spacing:0;color:#705b8b;white-space:nowrap}
.screen-assembly-header p{font-size:12px;color:#7a7485;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen-assembly-header .btn{flex-shrink:0}
.screen-assembly-toolbar{display:flex;align-items:center;gap:10px;padding:10px 20px;background:#fcfbfe;flex-shrink:0}
.screen-assembly-toolbar .btn{font-size:12px;padding:8px 12px}
.screen-assembly-toolbar .btn[aria-pressed=true]{border-color:#9780d6;background:#f0eafa;color:#6645b8}
.screen-zoom-controls{display:flex;align-items:center;gap:6px}
.screen-zoom-controls .btn{width:44px;padding:8px;font-size:18px}
.screen-zoom-controls output{width:48px;text-align:center;font-size:12px;font-weight:750;font-variant-numeric:tabular-nums;color:#655778}
.screen-assembly-toolbar p{margin:0 0 0 auto;font-size:11px;line-height:1.7;color:#777081}
.screen-color-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;padding:0 20px 12px;flex-shrink:0}
.screen-color-controls{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 430px}
.screen-color-controls label{font-size:12px;font-weight:700;color:#665477;white-space:nowrap}
.screen-color-controls select{min-width:0;flex:1;width:160px;font-size:12px;padding:8px}
.screen-color-controls .btn{font-size:12px;padding:8px 12px;flex-shrink:0}
.screen-color-controls .color-dot{width:16px;height:16px;flex-basis:16px}
.screen-color-controls .color-dot[hidden]{display:none}
.screen-color-stats{font-size:12px;line-height:1.7;font-weight:600;color:#6b5b7c;margin:0;overflow-wrap:anywhere}
.screen-row-runs .assembly-run.is-color-match{border-color:#8d73d3;background:#f0eafa;box-shadow:inset 0 0 0 1px #8d73d3}
.screen-row-runs .assembly-run.is-color-muted{opacity:.45}
.screen-assembly-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;min-height:0;flex:1;padding:0 20px 20px}
.screen-assembly-stage{position:relative;min-height:0;min-width:0;padding:8px;overflow:auto;overscroll-behavior:contain;border:1px solid #e4deec;border-radius:12px;background:#f6f4fa;touch-action:pan-x pan-y;scrollbar-gutter:stable}
.screen-assembly-stage canvas{display:block;margin:0 auto;max-width:none;flex-shrink:0}
.screen-assembly-guide{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 4px 4px 0}
.screen-field{display:block;font-size:12px;font-weight:700;color:#5f536e}
.screen-field select{display:block;width:100%;margin-top:7px;min-width:0}
.screen-bounds{font-size:11px;line-height:1.7;color:#8a8393;margin:8px 0}
.screen-assembly-guide .assembly-progress-summary{font-size:12px;margin-bottom:16px}
.screen-row-navigation{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:end}
.screen-row-navigation .btn{padding:8px 9px;font-size:11px}
.screen-row-navigation label{min-width:0}
.screen-field-label{display:block;font-size:10px;color:#8a8393;margin-bottom:4px}
.screen-row-navigation select{width:100%;min-width:0;padding:7px 5px;font-size:12px}
.screen-assembly-guide .assembly-row-progress{font-size:14px;margin:14px 0 10px}
.screen-runs-label{font-size:11px;color:#8a8393;margin:0 0 8px}
.screen-row-runs{display:flex;flex-wrap:wrap;gap:7px}
.screen-row-runs .assembly-run{background:#f8f6fc;padding:10px 12px;max-width:100%;min-width:100px}
.screen-row-runs .assembly-run small{font-size:11px;color:#7a6c8b}
.screen-row-runs .assembly-run strong{font-size:15px;line-height:1.6}
.screen-row-runs .color-dot{height:16px;width:16px;flex-basis:16px}
.screen-row-hint{font-size:11px;color:#898090;line-height:1.8;margin:16px 0 10px}
.screen-row-color-panel{margin-top:14px;padding:12px;border:1px solid #d8cdec;border-radius:10px;background:#f8f5ff}
.screen-row-color-panel[hidden]{display:none}
.screen-row-color-progress{font-size:13px;font-weight:750;line-height:1.8;color:#68518a;margin:0 0 5px;overflow-wrap:anywhere}
.screen-row-color-progress[data-state=complete]{color:#347450}
.screen-row-color-hint{font-size:11px;line-height:1.8;color:#82728f;margin:0 0 10px;overflow-wrap:anywhere}
.screen-row-color-actions{display:grid;gap:8px}
.screen-row-color-actions .btn{width:100%;font-size:12px;white-space:normal;overflow-wrap:anywhere}
.screen-next-incomplete-hint{font-size:11px;line-height:1.8;color:#82728f;margin:10px 0 0;overflow-wrap:anywhere}
.screen-next-incomplete-status{font-size:12px;line-height:1.8;font-weight:650;color:#5d4b7b;margin:8px 0 0;overflow-wrap:anywhere}
.screen-next-incomplete-status:empty{display:none}
.screen-row-actions{display:grid;gap:8px}
.screen-row-actions .btn{width:100%;font-size:13px;white-space:normal}
.screen-assembly-guide .assembly-save-row{gap:8px;margin-top:10px}
.screen-assembly-guide .assembly-save-status{font-size:11px}
.screen-assembly-guide .text-button{font-size:11px;flex-shrink:0}
.screen-assembly-stage:focus-visible{outline:3px solid #b0a8ff;outline-offset:-3px}
@media(max-width:760px){
  .screen-assembly{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .screen-assembly-header{padding:10px 14px}
  .screen-assembly-header h2{font-size:18px}
  .screen-assembly-toolbar{padding:8px 12px;gap:8px;flex-wrap:wrap}
  .screen-assembly-toolbar p{width:100%;margin:0;font-size:10px}
  .screen-color-toolbar{padding:0 12px 10px;gap:6px}
  .screen-color-controls{flex:1 1 100%;gap:6px}
  .screen-color-controls label{font-size:11px}
  .screen-color-controls .btn{padding:8px;font-size:11px}
  .screen-color-stats{font-size:11px}
  .screen-assembly-body{display:flex;flex-direction:column;gap:12px;padding:0 12px max(12px,env(safe-area-inset-bottom));min-height:0}
  .screen-assembly-stage{height:30dvh;min-height:110px;flex-shrink:0}
  .screen-assembly-guide{flex:1;padding-right:3px}
  .screen-assembly-guide .assembly-progress-summary{margin-bottom:12px}
  .screen-row-actions{grid-template-columns:1fr 1fr}
}
@media(max-height:520px) and (min-width:620px){
  .screen-assembly-body{display:grid;grid-template-columns:minmax(0,1fr) 290px}
  .screen-assembly-stage{height:auto;min-height:0}
  .screen-assembly-toolbar p{width:auto;margin-left:auto}
}
@media print{.screen-assembly{display:none!important}}

.reference-palette{margin-top:12px;padding:11px;border:1px solid #e6ddfb;border-radius:10px;background:#faf8ff}.reference-palette>strong{font-size:12px;color:#55458e}.reference-palette p{font-size:10px;line-height:1.6;color:#8a8199;margin:5px 0}.reference-palette .btn{margin:7px 0;font-size:11px;padding:9px}.reference-links{display:flex;justify-content:space-between;gap:7px;font-size:10px;color:#7665bb}.reference-links .text-button{font-size:10px}.palette-metadata a{color:#6957c7;text-decoration:underline}.palette-metadata{overflow-wrap:anywhere}#toggleSwatchesBtn{margin-top:8px}
.generation-panel{padding:24px 28px;margin-bottom:20px;scroll-margin-top:18px}.generation-heading{display:flex;justify-content:space-between;align-items:start;gap:16px}.generation-heading h2{font-size:20px;margin:5px 0 7px}.generation-heading p{font-size:12px;color:#7c8290;line-height:1.7;margin:0}.generation-heading>a{text-decoration:none;white-space:nowrap}.generation-layout{display:grid;grid-template-columns:1fr 1fr 1.08fr;gap:24px;margin-top:23px}.generation-column{min-width:0}.generation-column h3{font-size:14px;margin:0 0 16px;display:flex;gap:8px;align-items:center}.generation-column h3>span{display:flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;background:#efeafd;color:#7155be;font-size:12px}.generation-column .section-label{margin-top:14px;margin-bottom:7px}.generation-help{font-size:11px;color:#858392;line-height:1.7;margin:10px 0}.generation-state{padding:14px;background:#f1f8f4;border:1px solid #d3e6d9;border-radius:10px;overflow-wrap:anywhere}.generation-state>strong{font-size:15px;color:#397151}.generation-state p{font-size:11px;line-height:1.8;margin:9px 0 0;color:#667a6e}.generation-state[data-state=pending]{background:#fff8e9;border-color:#edd9a8}.generation-state[data-state=pending]>strong{color:#8d6620}.generation-state[data-state=pending] p{color:#8a7953}.generation-state .generation-state-message{padding-top:9px;border-top:1px solid #dce7df;font-weight:650}.generation-state[data-state=pending] .generation-state-message{border-top-color:#eddfc0}.generation-result .generation-submit{margin-top:14px;white-space:normal;line-height:1.6}.generation-view{display:block;margin-top:8px;text-align:center;text-decoration:none}.generation-source-note{font-size:11px;line-height:1.7;color:#986731;background:#fff7e9;border-radius:7px;padding:9px;margin-top:10px}.generation-palette-details{margin-top:12px;font-size:11px}.generation-palette-details>summary{cursor:pointer;color:#7460ba;font-weight:700}.generation-palette-details .reference-links{flex-wrap:wrap;margin-top:10px}.generation-advanced{margin-top:20px;padding-top:14px;border-top:1px solid #eeeaf4}.generation-advanced>summary{font-size:12px;color:#6f61a4;cursor:pointer;font-weight:700}.generation-advanced-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 14px}.generation-panel .form-field{font-size:12px}.generation-panel .palette-import{padding:8px 10px}.generation-panel .reference-palette{margin-top:10px}.generation-panel .reference-palette .btn{margin-bottom:0}#patternPanel{scroll-margin-top:18px}@media(max-width:900px){.generation-layout{grid-template-columns:1fr 1fr;gap:20px}.generation-result{grid-column:1/-1}.generation-result .generation-state{max-width:none}}@media(max-width:660px){.generation-panel{padding:18px 14px}.generation-heading{flex-direction:column;gap:11px}.generation-heading h2{font-size:19px}.generation-layout{grid-template-columns:1fr;gap:18px;margin-top:20px}.generation-column+.generation-column{border-top:1px solid #edeaf4;padding-top:18px}.generation-column h3{margin-bottom:12px}.generation-result{grid-column:auto}.generation-advanced-layout{grid-template-columns:1fr;gap:0}.generation-help{margin-top:8px}.generation-state p{font-size:12px}.generation-view{display:block}}@media print{.generation-panel{display:none!important}}