:root,:host{--bg: #f5f4f2;--ink: #2b2a33;--muted: #6f6b78;--panel: #ffffff;--border: #e7e5e1;--accent: #c4623d;--accent-ink: #a44e2e;--accent-soft: rgba(196, 98, 61, .12);--danger: #c0392b;--radius: 12px;--shadow: 0 1px 2px rgba(20, 18, 25, .04), 0 8px 24px rgba(20, 18, 25, .06);--fp-dur-fast: .18s;--fp-dur: .28s;--fp-dur-slow: .5s;--fp-t-route: .42s;--fp-ease: cubic-bezier(.4, 0, .2, 1);--fp-ease-out: cubic-bezier(.22, .61, .36, 1);--fp-ease-spring: cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box}html,body{margin:0;background:linear-gradient(180deg,#faf8f5,#ece9e3);background-attachment:fixed;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}:host{display:block;background:linear-gradient(180deg,#faf8f5,#ece9e3);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app{max-width:1340px;margin:0 auto;padding:20px 20px 40px}.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}.brand{display:flex;align-items:center;gap:12px}.brand .logo{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;font-size:22px}.brand h1{margin:0;font-size:20px;letter-spacing:-.01em}.brand .tagline{margin:2px 0 0;color:var(--muted);font-size:13px}.header-actions{display:flex;gap:10px}button{font:inherit;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--ink);padding:8px 14px;border-radius:9px;transition:background .12s ease,border-color .12s ease,transform .05s ease}button:hover{background:#faf9f7;border-color:#dcd9d4}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover:not(:disabled){background:var(--accent-ink);border-color:var(--accent-ink)}button.danger{color:var(--danger)}.icon-btn{padding:4px 7px;border-radius:7px;line-height:1}.workspace{display:grid;grid-template-columns:240px 1fr;gap:16px;justify-content:center;align-items:start}.col{display:flex;flex-direction:column;gap:16px}.workspace>*{min-width:0}@media (max-width: 1120px){.workspace{grid-template-columns:1fr;justify-items:center}.col,.stage-area{width:100%;max-width:600px}.stage-area{order:1}.col.left{order:2}}@media (max-width: 640px){.app{padding:12px 12px 28px}.app-header{margin-bottom:12px;gap:10px}.brand .logo{width:38px;height:38px;font-size:19px}.brand h1{font-size:18px}.header-actions{width:100%;gap:8px}.exports{width:100%}.exports button{flex:1 1 0;min-width:0;padding:9px 6px;font-size:12px}.order-btn{width:100%}.preview3d{height:340px}.stage-split{gap:12px}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 14px 16px;width:100%}.panel h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:8px}.panel .count{background:var(--accent-soft);color:var(--accent-ink);border-radius:20px;padding:1px 8px;font-size:12px}.empty{color:var(--muted);font-size:13px;margin:4px 0 0;line-height:1.5}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid var(--border);cursor:pointer}.swatch:hover{transform:scale(1.08)}.swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.swatch.custom{display:grid;place-items:center;overflow:hidden;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.swatch.custom input{opacity:0;width:100%;height:100%;cursor:pointer}.upload-zone{background:var(--panel);border:1.5px dashed #cfccc6;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:border-color .12s ease,background .12s ease}.upload-zone:hover,.upload-zone.dragging{border-color:var(--accent);background:var(--accent-soft)}.upload-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:18px}.upload-zone strong{font-size:14px}.upload-sub{color:var(--muted);font-size:12px;line-height:1.5;max-width:22ch}.upload-zone:not(:hover):not(.dragging) .upload-icon{margin-bottom:-2px}.upload-icon svg{width:18px;height:18px}.prints h3{display:flex;align-items:center;gap:6px}.layer-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}.layer-list li{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:9px;cursor:pointer;border:1px solid transparent}.layer-list li:hover{background:#faf9f7}.layer-list li.sel{border-color:var(--accent);background:var(--accent-soft)}.layer-list .nm{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-list .acts{display:flex;gap:3px;opacity:0;transition:opacity .12s}.layer-list li:hover .acts,.layer-list li.sel .acts,.layer-list li:focus-within .acts{opacity:1}@media (hover: none),(pointer: coarse){.layer-list .acts{opacity:1}}.ico{display:grid;place-items:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer}.ico:hover{background:#14121912;color:var(--ink)}.ico.danger:hover{background:#c0392b1f;color:var(--danger)}@media (pointer: coarse){.ico{width:38px;height:38px}.layer-list .acts{gap:5px}}:where(button,[role=button],input,a,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ico:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.sel-tools{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}.sel-tools .op{flex:1;accent-color:var(--accent)}.stage{display:flex;justify-content:center}.stage-area{display:flex;flex-direction:column;align-items:stretch;gap:12px}.stage-split{display:flex;gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap}.split-pane{display:flex;flex-direction:column;gap:8px;min-width:0}.split-pane.board-pane{flex:0 1 auto;max-width:600px}.split-pane.grow{flex:1 1 340px;min-width:280px}.pane-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0 4px;display:flex;align-items:center;justify-content:space-between}.zone-toggle{display:inline-flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0;cursor:pointer}.part-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px;flex-wrap:wrap}.parts{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--border);border-radius:9px;padding:3px;box-shadow:var(--shadow)}.parts button{border:none;background:transparent;color:var(--muted);padding:5px 11px;border-radius:6px;font-size:12px;text-transform:none;letter-spacing:0;cursor:pointer}.parts button:hover:not(:disabled){background:#faf9f7}.parts button.active{background:var(--accent);color:#fff}.parts button:disabled{opacity:.4;cursor:not-allowed}.zone-toggle input{accent-color:var(--accent)}.region-guide{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:6}.view-tabs{display:inline-flex;background:#fff;border:1px solid var(--border);border-radius:10px;padding:4px;gap:4px;box-shadow:var(--shadow)}.view-tabs button{border:none;background:transparent;padding:7px 18px;border-radius:7px;font-size:13px;color:var(--muted)}.view-tabs button:hover{background:#faf9f7}.view-tabs button.active{background:var(--accent);color:#fff}.stage-controls{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}.side-tabs{display:inline-flex;background:#fff;border:1px solid var(--border);border-radius:10px;padding:4px;gap:4px;box-shadow:var(--shadow)}.side-tabs button{border:none;background:transparent;padding:7px 16px;border-radius:7px;font-size:13px;color:var(--muted)}.side-tabs button:hover{background:#faf9f7}.side-tabs button.active{background:var(--ink);color:#fff}.stage-host{position:relative}.preview3d{width:100%;height:520px;position:relative;background:radial-gradient(ellipse 85% 75% at 50% 30%,#fff,#ece8e2 68%,#e3ded7)}.preview3d canvas{display:block;border-radius:var(--radius);touch-action:none}.loading3d{display:grid;place-items:center;color:var(--muted);font-size:14px}.board{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}.board-loading{display:grid;place-items:center;min-height:320px;color:var(--muted)}.zone-nav{display:flex;gap:4px;width:100%;max-width:600px;background:#fff;border:1px solid var(--border);border-radius:11px;padding:4px;box-shadow:var(--shadow);flex-wrap:wrap;justify-content:center}.zone-nav button{flex:1 1 auto;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted);padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}.zone-nav button:hover{background:#faf9f7;color:var(--ink)}.zone-nav button.active{background:var(--accent);color:#fff}.board-wrap{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#f3f1ec;box-shadow:var(--shadow);touch-action:none;overscroll-behavior:contain}.board-guide{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.board-wrap .canvas-container{position:relative;z-index:1;width:100%!important;height:100%!important;touch-action:none}.board-wrap .canvas-container canvas{width:100%!important;height:100%!important;touch-action:none}.board-hint{margin:0;font-size:12px;color:var(--muted);text-align:center}.header-actions{align-items:center;flex-wrap:wrap}.lang-switch{display:inline-flex;gap:2px;background:#fff;border:1px solid var(--border);border-radius:9px;padding:3px}.lang-switch button{border:none;background:transparent;color:var(--muted);padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer}.lang-switch button:hover{background:#faf9f7}.lang-switch button.active{background:var(--ink);color:#fff}.exports{display:inline-flex;gap:8px;flex-wrap:wrap}.exports button,.order-btn{min-width:158px;padding:9px 14px}.order-btn{font-weight:600}.preview3d-hint{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:#2b2a33a8;color:#fff;font-size:12px;padding:5px 12px;border-radius:20px;pointer-events:none}@media (max-width: 1120px){.preview3d{width:100%;max-width:600px}}.canvas-wrap{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.canvas-wrap .canvas-container{position:relative!important}.print-area-guide{position:absolute;border:2px dashed rgba(196,98,61,.7);border-radius:4px;pointer-events:none;z-index:5}.print-area-guide span{position:absolute;top:-10px;left:8px;background:var(--bg);padding:0 6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}.notice{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff7ed;border:1px solid #f3d8bf;color:#8a4b22;padding:10px 12px;border-radius:10px;font-size:13px;margin-bottom:16px}@keyframes fpInUp{0%{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}@keyframes fpInDown{0%{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}@keyframes fpDraw{to{stroke-dashoffset:0}}@keyframes fpRouteIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fpFadeOut{0%{opacity:1}to{opacity:0}}.fp-route{animation:fpRouteIn var(--fp-t-route) var(--fp-ease-out) both}@keyframes fpPop{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes fpBadgePop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes fpSlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes fpMenuIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fpChipIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fpChipOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.fp-pop{animation:fpPop var(--fp-dur) var(--fp-ease-spring) both}.fp-badge-pop{animation:fpBadgePop var(--fp-dur-slow) var(--fp-ease-spring) both}.fp-slide-down{animation:fpSlideDown var(--fp-dur) var(--fp-ease-out) both}.fp-menu-in{animation:fpMenuIn var(--fp-dur) var(--fp-ease-out) both}.fp-reveal{opacity:0;transform:translateY(26px);transition:opacity var(--fp-dur-slow) var(--fp-ease-out),transform var(--fp-dur-slow) var(--fp-ease-out);transition-delay:var(--d, 0ms)}.fp-reveal:not(.is-in){will-change:opacity,transform}.fp-reveal.is-in{opacity:1;transform:none}.fp-stagger>*{opacity:0;transform:translateY(22px);transition:opacity var(--fp-dur-slow) var(--fp-ease-out),transform var(--fp-dur-slow) var(--fp-ease-out);transition-delay:var(--d, 0ms)}.fp-stagger.is-in>*{opacity:1;transform:none}@keyframes fpMarquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.fp-marquee-track{animation:fpMarquee 38s linear infinite;will-change:transform}.fp-pressable{transition:color var(--fp-dur-fast) var(--fp-ease),background-color var(--fp-dur-fast) var(--fp-ease),border-color var(--fp-dur-fast) var(--fp-ease),transform var(--fp-dur-fast) var(--fp-ease),box-shadow var(--fp-dur-fast) var(--fp-ease)}.fp-pressable:hover{transform:translateY(-1px)}.fp-pressable:active{transform:translateY(1px)}.fp-pressable:focus-visible{outline:2px solid #FCAC45;outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.fp-marquee-track{animation:none!important}.fp-reveal,.fp-stagger>*{opacity:1!important;transform:none!important}}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}@media (max-width: 860px){html,body{background-attachment:scroll}}@keyframes fp-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes fpPing{0%{transform:scale(1);opacity:.5}to{transform:scale(2.6);opacity:0}}@keyframes fpFloatY{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes fpFloatA{0%,to{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-10px)}}@keyframes fpFloatB{0%,to{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(5px)}}@keyframes fpFloatC1{0%,to{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-9px)}}@keyframes fpFloatC2{0%,to{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-12px)}}@keyframes fpFloatC3{0%,to{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-7px)}}@keyframes fpZoomIn{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes fpCtaGlow{0%,to{box-shadow:0 10px 24px #15120d29,0 0 #fcac4500}50%{box-shadow:0 14px 30px #15120d38,0 0 0 8px #fcac4533}}.fp-float{animation:fpFloatY 5s ease-in-out infinite}.fp-cta-glow{animation:fpCtaGlow 3s var(--fp-ease) infinite}.fp-logo-chip{transition:transform .3s var(--fp-ease-out),box-shadow .3s var(--fp-ease-out)}.fp-logo-chip:hover{transform:translateY(-4px);box-shadow:0 12px 24px #15120d21}.b2b-method:hover img,.b2b-bento>*:hover img,.b2b-grid-collapse>*:hover img{transform:scale(1.07)}input:focus-visible,textarea:focus-visible{border-color:#fcac45!important;box-shadow:0 0 0 3px #fcac4538!important}@media (pointer: coarse){.fp-lang-btn{padding:12px 15px!important}}