:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#252c27;background:#f7f8f5;font-synthesis:none;--green:#315b46;--green-dark:#244633;--muted:#848b80;--line:#e7e9e1;--pale:#eef2e9}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,label.file-label{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #94b29b;outline-offset:3px}button{color:inherit}button,input,select{min-width:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.site-header{height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 4vw;background:#fcfdfa}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:600;letter-spacing:2px}.brand-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;white-space:nowrap}.brand-name{display:block;font-family:"Songti SC","STSong","SimSun",serif;font-weight:400;line-height:1;letter-spacing:3px}.brand-mark{display:grid;place-items:center;flex-shrink:0;overflow:hidden;background:#000;width:42px;height:42px;border-radius:11px}.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(1.6) translate(-1.8%,-.3%)}.brand small{display:block;font-size:8px;font-weight:500;line-height:1;letter-spacing:1.5px;margin:0;color:#727b71}.header-right{display:flex;align-items:center;gap:24px;font-size:12px}.environment{display:flex;gap:7px;align-items:center;color:#687662}.environment i{width:6px;height:6px;border-radius:100%;background:#789c64}.text-button{border:0;background:none;padding:4px 0;color:var(--green);font-size:13px}.text-button.small{font-size:11px}.workspace{max-width:1460px;margin:auto;padding:36px 4vw 24px}
.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}.preview-panel{min-width:0}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.mode-switch{display:inline-flex;background:#e9ede5;padding:4px;border-radius:10px;gap:3px}.mode-switch button{padding:9px 19px;border:0;border-radius:7px;font-size:12px;color:#737e6f;background:none}.mode-switch button[aria-pressed=true]{color:#264a35;background:#fff;box-shadow:0 1px 5px #344a3610}.cube-icon{font-size:17px;line-height:12px;vertical-align:-1px;margin-right:4px}.history-controls{display:flex;gap:6px}.icon-button{border:1px solid var(--line);background:#fff;border-radius:8px;font-size:19px;width:32px;height:32px;line-height:24px;font-family:sans-serif}.stage{position:relative;height:475px;background:radial-gradient(ellipse at 50% 38%,#f6f5ee 0%,#efeee6 55%,#e9e9df 100%);border-radius:17px;overflow:hidden;border:1px solid #e7e7dc}.stage-surface{position:absolute;inset:0}.stage-surface>canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.stage-surface>canvas:active{cursor:grabbing}.stage-kicker,.stage-bottom{position:absolute;z-index:1;left:24px;right:24px;display:flex;justify-content:space-between;gap:12px;pointer-events:none;color:#8d9484;font-size:9px;letter-spacing:1.5px}.stage-kicker{top:23px}.stage-kicker span:last-child{letter-spacing:.7px;font-variant-numeric:tabular-nums}.stage-bottom{bottom:22px;letter-spacing:.5px;font-size:10px}.material-caption{color:#93998c}.planar{display:flex;align-items:center;justify-content:center;padding:70px 45px}.design-board{position:relative;max-width:100%;max-height:100%;box-shadow:0 18px 27px -15px #30412a55}.design-board canvas{display:block;width:100%;height:100%;touch-action:none;cursor:move}.safe-line{position:absolute;inset:4px;border:1px dashed #ffffffe6;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px #2b3e3740}.view-toolbar,.edit-toolbar{display:flex;align-items:center;justify-content:center;gap:6px;padding:15px 0 14px;flex-wrap:wrap}.view-toolbar button,.edit-toolbar button{border:0;border-radius:7px;background:none;padding:8px 13px;font-size:11px;color:#7e8877}.view-toolbar button[aria-pressed=true],.edit-toolbar button[aria-pressed=true]{background:#e6ecdf;color:#365139}.view-divider{height:16px;border-left:1px solid #dce1d5;margin:0 5px}.view-toolbar #zoom-in,.view-toolbar #zoom-out{padding:5px 10px;font-size:17px}.edit-toolbar>span,.check-label{font-size:11px;color:#7a8474}.check-label{display:flex;align-items:center;gap:4px;margin-left:10px}.check-label input{accent-color:var(--green)}.design-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 0 19px;font-size:11px;border-bottom:1px solid var(--line);color:#6f7b67;font-variant-numeric:tabular-nums}.design-summary span:last-child{font-size:10px;color:#989e91;text-align:right}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:15px}.section-heading h2{font-size:13px;font-weight:500;margin:0;letter-spacing:.3px}.section-heading h2>span{font-size:10px;color:#9ca68f;margin-right:8px;letter-spacing:1px}.section-heading>span{color:#929b89;font-size:10px}.preview-note{font-size:10px;color:#a0a697;line-height:1.6;margin-top:20px}
.settings-panel{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.setting-section{padding:21px;border-bottom:1px solid #edf0e8}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px}.preset-grid button{font-size:10px;padding:9px 5px;background:#fff;border:1px solid #e2e7db;border-radius:6px;color:#78826e;font-variant-numeric:tabular-nums}.preset-grid button[aria-pressed=true]{color:#3c5a2f;border-color:#7f946b;background:#f1f5eb}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px}.field-row label{display:block;font-size:10px;color:#7f8977}.field-row label>span{float:right;color:#b1b7a9;font-size:9px}.field-row input,.field-row select{display:block;width:100%;margin-top:7px;padding:10px 10px;border:1px solid #e5e9de;background:#fcfdfb;border-radius:6px;color:#424d39;font-size:12px}.slider-label{display:block;font-size:10px;color:#7f8977;margin-top:16px}.slider-label output{float:right;font-variant-numeric:tabular-nums;color:#5b714b}.slider-label input[type=range]{display:block;width:100%;accent-color:#567348;margin:10px 0 2px;height:14px}.upload-zone{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;border:1px dashed #b7c5a8;border-radius:8px;background:#f8faf5;padding:17px 8px;color:#53664a;cursor:pointer;overflow:hidden}.upload-zone:focus-within{outline:3px solid #a2b695;outline-offset:2px}.upload-zone.dragging{background:#e8f2df;border-color:#456a31}.upload-symbol{font-size:22px;font-weight:300;color:#668251;margin-bottom:3px}.upload-zone strong{font-size:12px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-zone>span:last-of-type{font-size:9px;color:#a0aa94;margin-top:7px}.upload-zone input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.color-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#7f8977;gap:10px;margin-top:14px}.color-row input{padding:2px;border:1px solid #dde3d5;border-radius:5px;width:33px;height:23px;background:#fff;cursor:pointer}.alignment-buttons{display:flex;gap:5px;margin-top:12px;flex-wrap:wrap}.alignment-buttons button{border:1px solid #e1e7da;border-radius:5px;background:#fff;padding:6px 7px;font-size:10px;color:#718064}.text-input{display:block;width:100%;border:1px solid #e4e8dc;background:#fcfdf9;border-radius:6px;padding:11px 10px;font-size:11px}.text-input::placeholder{color:#b0b7a6}.text-options{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}.text-options .color-row{margin:0}.save-area{padding:20px}.primary-button,.secondary-button{display:block;width:100%;padding:13px 16px;border-radius:8px;font-size:12px}.primary-button{color:#fff;border:1px solid var(--green);background:var(--green)}.primary-button:hover{background:var(--green-dark)}.secondary-button{margin-top:9px;border:1px solid #dde4d4;background:#fff;color:#6d7c5f}.secondary-button span{margin-left:8px}.file-actions{display:flex;justify-content:space-between;gap:12px;margin-top:15px}.file-label{position:relative;cursor:pointer;overflow:hidden}.file-label input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.save-area p{font-size:9px;line-height:1.6;color:#9aa58e;margin:14px 0 0}.site-footer{max-width:1460px;margin:0 auto;padding:24px 4vw 30px;display:flex;justify-content:space-between;font-size:10px;color:#a1aa99;gap:20px}.toast{position:fixed;z-index:100;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 21px;background:#243d2eeF;color:#fff;border-radius:10px;box-shadow:0 8px 25px #18341f20;font-size:13px;max-width:calc(100% - 36px);line-height:1.6}.render-error{position:absolute;top:58px;left:24px;right:24px;color:#685d40;background:#fff9e5;padding:9px 12px;border-radius:6px;font-size:11px}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
@media(min-width:1450px){.stage{height:540px}}
@media(max-width:1050px){.workspace{padding-top:26px}.editor-grid{grid-template-columns:minmax(0,1fr) 280px;gap:18px}.setting-section{padding:18px}.stage{height:420px}.view-toolbar{gap:0}.view-toolbar button{padding:8px 10px}.stage-kicker,.stage-bottom{left:18px;right:18px}.planar{padding:65px 25px}}
@media(max-width:760px){.site-header{height:76px;padding:0 20px}.brand{font-size:18px;gap:10px}.brand-copy{gap:5px}.brand small{font-size:7px;letter-spacing:1.4px}.brand-mark{width:35px;height:35px;border-radius:9px}.header-right{gap:15px}.environment{display:none}.workspace{padding:18px 18px 10px}.editor-grid{grid-template-columns:1fr;gap:20px}.stage{height:365px}.settings-panel{display:grid;grid-template-columns:1fr 1fr}.save-area{align-self:end}.setting-section{border-right:1px solid var(--line)}.preview-note{margin-bottom:0}.site-footer{padding:22px 18px}.site-footer span:last-child{display:none}}
@media(max-width:450px){.workspace{padding-left:14px;padding-right:14px}.stage{height:320px}.settings-panel{display:block}.stage-kicker{font-size:8px}.stage-bottom{font-size:9px}.stage-bottom .material-caption{display:none}.mode-switch button{padding:8px 14px}.view-toolbar button{padding:8px 9px;font-size:10px}.design-summary{align-items:flex-start}.design-summary span:first-child{white-space:nowrap}.field-row input,.field-row select,.text-input{font-size:16px}.preset-grid button{min-height:42px;font-size:12px}.alignment-buttons button{min-height:40px;font-size:11px}.setting-section{padding:20px}.slider-label,.color-row,.field-row label{font-size:12px}.slider-label input[type=range]{height:26px}.upload-zone{padding:22px 8px}.upload-zone strong{font-size:14px}.upload-zone>span:last-of-type{font-size:11px}.section-heading h2{font-size:14px}.text-button.small{font-size:12px}.primary-button,.secondary-button{min-height:46px;font-size:14px}.save-area p{font-size:11px}.file-actions label,.file-actions button{padding:8px 0}}
/* Keep the workspace usable on narrow phones and around display cutouts. */
@media(max-width:760px){
  .site-header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .workspace{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .stage{height:clamp(260px,82vw,380px)}
  .mode-switch button,.view-toolbar button,.edit-toolbar button,.history-controls button{min-height:44px}
  .mode-switch button{font-size:13px;padding:10px 14px}
  .history-controls button{width:44px}
  .view-toolbar{gap:2px}.view-toolbar button{padding:8px;font-size:12px}
  .view-toolbar #zoom-in,.view-toolbar #zoom-out{min-width:44px;padding:8px}
  .view-divider{display:none}
  .design-summary{font-size:12px;flex-wrap:wrap}.design-summary span:last-child{font-size:11px}
  
  .preview-note{font-size:11px}.section-heading>span{font-size:11px}
  .save-area{padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .toast{bottom:max(20px,env(safe-area-inset-bottom))}
  .header-right>.text-button{min-height:44px}
}
@media(max-width:360px){
  .mode-switch button{font-size:12px;padding:9px 10px}
  .history-controls{gap:3px}.history-controls button{width:38px}
  .stage-kicker,.stage-bottom{left:14px;right:14px}
  .view-toolbar button{font-size:11px;padding:8px 7px}
  .view-toolbar #zoom-in,.view-toolbar #zoom-out{min-width:38px}
  .section-heading{align-items:flex-start}.section-heading>span{max-width:116px;text-align:right;line-height:1.5}
}
@media(max-width:360px){.view-toolbar{gap:0}.view-toolbar button{padding:8px 6px}.view-toolbar #zoom-in,.view-toolbar #zoom-out{min-width:36px}}
.custom-size-button{width:100%;min-height:42px;margin:0 0 14px;border:1px dashed #acbda0;border-radius:7px;background:#f6f9f1;color:#48683c;font-size:12px}
.custom-size-button[aria-pressed=true]{background:#eaf2e2;border-style:solid;border-color:#7d966b}
.custom-size-fields{padding:13px 12px 10px;margin-bottom:14px;background:#f6f8f2;border:1px solid #e2e8db;border-radius:9px}
.custom-size-fields .field-row{margin-bottom:10px}
.apply-size-button{width:100%;min-height:42px;border:0;border-radius:6px;background:#42663c;color:white;font-size:12px}
.size-helper{font-size:10px;line-height:1.7;color:#7d8973;margin:9px 0 0}
.size-error{font-size:12px;line-height:1.6;color:#9c4e2b;margin:9px 0 0}
.model-size-note{margin:0 0 17px}
@media(max-width:760px){.preset-grid button{min-height:44px}.custom-size-button,.apply-size-button{min-height:44px;font-size:13px}.size-helper{font-size:11px}}

.palette-panel{padding-top:18px}.palette-heading{display:flex;align-items:center;gap:12px;margin-bottom:14px}.fill-mode{border:1px solid var(--line);border-radius:7px;padding:8px 18px;background:#fff;color:var(--green);font-size:13px;min-height:40px}.fill-mode[aria-pressed=true]{background:#e6ecdf;border-color:#91a184}.palette-picker{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--green);cursor:pointer}.palette-picker input{width:44px;height:38px;border:1px solid #cbd4c4;border-radius:8px;padding:3px;background:#fff;cursor:pointer}.color-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,44px));gap:10px}.color-swatch{height:44px;border-radius:50%;border:1px solid #26352a26;background:var(--swatch);position:relative}.color-swatch[aria-pressed=true]{outline:2px solid var(--green);outline-offset:3px}.color-swatch[aria-pressed=true]::after{content:"";position:absolute;inset:calc(50% - 4px);border:1px solid #fff;border-radius:50%;background:#243d2e;width:8px;height:8px}.color-swatch:focus-visible{outline:3px solid #94b29b;outline-offset:3px}
@media(max-width:450px){.color-swatches{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.color-swatch{height:auto;aspect-ratio:1}.palette-heading{gap:8px}.palette-picker{font-size:12px}.palette-heading .text-button{font-size:11px}.fill-mode{padding:8px 13px}}

.fixed-spec{display:flex;justify-content:space-between;gap:12px;margin:16px 0 0;font-size:12px;color:#7f8977}.fixed-spec output{color:#5b714b;font-variant-numeric:tabular-nums}

/* Print layout includes physical bleed; the inset outline is the finished cut. */
.design-board{overflow:hidden;border-radius:0}
.safe-line{inset:auto;box-sizing:border-box;box-shadow:0 0 0 100vmax #3a272c38}
.bleed-note{margin:0 0 10px;color:#7a8474;font-size:11px;line-height:1.7}
.edge-color-field{margin-top:14px}
.edge-color-field>label{display:block;margin-bottom:7px;font-size:11px;color:#7a8474}
.edge-color-field>select{width:100%;padding:10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font:inherit;font-size:12px}

/* Allow the full material name and specification to wrap on narrow screens. */
.design-summary #spec-summary{white-space:normal;line-height:1.6}

.fabric-intro{margin-top:10px;padding:12px;background:#f4f6f0;border:1px solid #e7ebdf;border-radius:8px}.fabric-group{display:inline-block;font-size:10px;color:#48633c;background:#e5ecdd;padding:3px 7px;border-radius:4px}.fabric-intro p{margin:8px 0 0;font-size:12px;line-height:1.8;color:#687360}.fabric-unavailable{margin:8px 0 0;font-size:11px;line-height:1.7;color:#8a9283}.fabric-unavailable summary{cursor:pointer}.fabric-unavailable p{margin:8px 0}.fabric-field option:disabled{color:#9aa091}
@media(max-width:450px){.edge-color-field>select{font-size:16px}.fabric-intro p{font-size:13px}}

.image-adjustments{margin:0 0 16px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:10px}.image-adjustment-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--green)}.image-adjustment-heading span{font-size:11px;color:#7a8474}.image-adjustment-sliders{display:grid;grid-template-columns:1fr 1fr;gap:24px}.image-adjustments .slider-label{font-size:12px}.image-adjustments .slider-label input[type=range]{height:28px}.image-adjustments .alignment-buttons button{min-height:40px;font-size:12px;padding:8px 10px}.image-adjustments .alignment-buttons{gap:8px}@media(max-width:450px){.image-adjustments{padding:12px}.image-adjustment-sliders{gap:16px}.image-adjustments .alignment-buttons{display:grid;grid-template-columns:1fr 1fr}.image-adjustments .alignment-buttons button{min-height:44px}}

/* Editing guides sit above all artwork without intercepting drag/zoom gestures. */
.design-board{isolation:isolate}
.design-board #view2d{position:relative;z-index:0}
.design-board #stitch-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;cursor:inherit}
.design-board .safe-line{z-index:3;border-style:solid;box-shadow:0 0 0 1px #16251c99,0 0 0 100vmax #f2f0e780}

/* Shared monochrome UI. Product artwork is never tinted or filtered. */
:root[data-theme]{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;color-scheme:light;--ui-bg:#f5f5f7;--ui-card:#fff;--ui-soft:#f5f5f7;--ui-input:#fff;--ui-text:#1d1d1f;--ui-muted:#666b72;--ui-line:#dedee2;--ui-border:#d2d2d7;--ui-selected:#ececef;--ui-accent:#111;--ui-accent-hover:#2c2c2c;--ui-on-accent:#fff;--ui-focus:#777;--ui-header:#ffffffde;--ui-stage:radial-gradient(ellipse at 50% 35%,#fff 0%,#f5f5f7 70%,#eeeef0 100%);--ui-toast:#1d1d1ff0;--ui-toast-text:#fff;--green:var(--ui-accent);--green-dark:var(--ui-accent-hover);--muted:var(--ui-muted);--line:var(--ui-line);--pale:var(--ui-soft);background:var(--ui-bg);color:var(--ui-text)}
:root[data-theme=dark]{color-scheme:dark;--ui-bg:#111214;--ui-card:#1b1c1f;--ui-soft:#24262a;--ui-input:#202226;--ui-text:#f2f2f4;--ui-muted:#b0b3bb;--ui-line:#34363b;--ui-border:#51545c;--ui-selected:#36393f;--ui-accent:#ededf0;--ui-accent-hover:#d5d5da;--ui-on-accent:#151618;--ui-focus:#aeb4bf;--ui-header:#191a1de8;--ui-stage:radial-gradient(ellipse at 50% 35%,#2b2e33 0%,#23252a 65%,#1b1d21 100%);--ui-toast:#eeeef2f5;--ui-toast-text:#191a1d}
[data-theme] .site-header{height:80px;background:var(--ui-header);border-color:var(--ui-line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
[data-theme] .workspace{padding-top:32px}
[data-theme] .stage{background:var(--ui-stage);border:1px solid var(--ui-line);border-radius:24px}
[data-theme] .settings-panel{background:var(--ui-card);border-color:var(--ui-line);border-radius:22px;box-shadow:0 4px 24px #00000004}
[data-theme] .setting-section{padding:24px;border-color:var(--ui-line)}
[data-theme] .section-heading h2{font-size:16px;font-weight:600;letter-spacing:-.3px;color:var(--ui-text)}
[data-theme] .section-heading h2>span{color:var(--ui-muted);letter-spacing:0}
[data-theme] :is(.mode-switch button,.view-toolbar button,.edit-toolbar button,.section-heading>span,.brand small,.environment,.stage-kicker,.stage-bottom,.material-caption,.design-summary,.design-summary span:last-child,.preview-note,.slider-label,.color-row,.field-row label,.slider-label output,.fixed-spec,.fixed-spec output,.size-helper,.bleed-note,.edge-color-field>label,.fabric-unavailable,.fabric-intro p,.image-adjustment-heading span,.check-label,.edit-toolbar>span,.site-footer,.save-area p){color:var(--ui-muted)}
[data-theme] .environment i{background:var(--ui-muted)}
[data-theme] .mode-switch{background:var(--ui-selected);border-radius:16px;padding:4px}
[data-theme] .mode-switch button{border-radius:12px;font-size:13px;padding:10px 20px}
[data-theme] .mode-switch button[aria-pressed=true]{background:var(--ui-card);color:var(--ui-text);box-shadow:0 2px 5px #0000000d}
[data-theme] .theme-toggle{border:1px solid var(--ui-border);border-radius:12px;color:var(--ui-text);background:var(--ui-card);min-height:36px;padding:9px 14px;font-size:12px;white-space:nowrap}
[data-theme] .icon-button{border-radius:10px;background:var(--ui-card);color:var(--ui-text);border-color:var(--ui-line)}
[data-theme] .preset-grid{gap:8px}
[data-theme] .preset-grid button{border-radius:10px;padding:12px 5px;font-size:11px;color:var(--ui-text);background:var(--ui-input);border-color:var(--ui-border)}
[data-theme] :is(.preset-grid button[aria-pressed=true],.fill-mode[aria-pressed=true],.custom-size-button[aria-pressed=true]){border-color:var(--ui-accent);box-shadow:inset 0 0 0 1px var(--ui-accent);background:var(--ui-selected);color:var(--ui-text)}
[data-theme] :is(.view-toolbar button[aria-pressed=true],.edit-toolbar button[aria-pressed=true]){color:var(--ui-text);background:var(--ui-selected);border-radius:12px}
[data-theme] :is(.field-row input,.field-row select,.text-input,.edge-color-field>select){border-color:var(--ui-border);background:var(--ui-input);color:var(--ui-text);border-radius:10px;padding:12px;font-size:13px}
[data-theme] :is(input,textarea)::placeholder{color:var(--ui-muted);opacity:.8}
[data-theme] :is(.fabric-intro,.custom-size-fields){border-color:transparent;background:var(--ui-soft);border-radius:12px}
[data-theme] .fabric-group{background:var(--ui-selected);color:var(--ui-text)}
[data-theme] .custom-size-button{color:var(--ui-accent);background:var(--ui-input);border-color:var(--ui-border);border-radius:10px}
[data-theme] .upload-zone{background:var(--ui-soft);border-color:var(--ui-border);color:var(--ui-text);border-radius:14px;padding:22px 10px}
[data-theme] .upload-zone.dragging{background:var(--ui-selected);border-color:var(--ui-accent)}
[data-theme] .upload-symbol{color:var(--ui-accent)}
[data-theme] .upload-zone>span:last-of-type{color:var(--ui-muted)}
[data-theme] :is(.primary-button,.apply-size-button){background:var(--ui-accent);color:var(--ui-on-accent);border-color:var(--ui-accent);border-radius:12px;min-height:44px;font-size:14px}
[data-theme] :is(.primary-button,.apply-size-button):hover{background:var(--ui-accent-hover)}
[data-theme] .secondary-button{border-color:var(--ui-accent);color:var(--ui-accent);border-radius:12px;background:var(--ui-card);font-size:13px}
[data-theme] .alignment-buttons button{border-radius:12px;color:var(--ui-text);border-color:var(--ui-border);background:var(--ui-input)}
[data-theme] .image-adjustments{border-color:var(--ui-line);background:var(--ui-card);border-radius:18px}
[data-theme] .image-adjustment-heading{color:var(--ui-text);font-weight:500}
[data-theme] .slider-label input[type=range]{accent-color:var(--ui-accent)}
[data-theme] :is(.price-note,.save-area .price-note){background:var(--ui-soft);color:var(--ui-text);border-radius:12px}
[data-theme] .fill-mode{border-radius:12px;background:var(--ui-card);color:var(--ui-text);border-color:var(--ui-line)}
[data-theme] .fill-mode[aria-pressed=true]{background:var(--ui-selected);border-color:var(--ui-accent)}
[data-theme] .palette-picker{color:var(--ui-muted)}
[data-theme] :is(.palette-picker input,.color-row input){background:var(--ui-input);border-color:var(--ui-border)}
[data-theme] .color-swatch{border-color:var(--ui-border)}
[data-theme] .color-swatch[aria-pressed=true]::after{background:var(--ui-accent);border-color:var(--ui-on-accent)}
[data-theme] .toast{background:var(--ui-toast);color:var(--ui-toast-text);border-radius:14px}
[data-theme] .submit-dialog{background:var(--ui-card);color:var(--ui-text);border-color:var(--ui-line);border-radius:24px;box-shadow:0 24px 80px #00000026}
[data-theme] .submit-dialog code{background:var(--ui-soft);color:var(--ui-text)}
[data-theme] .checkout-block a{color:var(--ui-accent)}
[data-theme] .design-summary{border-color:var(--ui-line)}
[data-theme] :is(button,a,input,select):focus-visible{outline-color:var(--ui-focus)}
[data-theme=dark] .submit-dialog::backdrop{background:#000a}
[data-theme=dark] .local-note{background:#302a1e;color:#ead2a0}
[data-theme=dark] :is(.form-error,.render-error){background:#382522;color:#ffb7a5}
[data-theme=dark] .size-error{color:#ffb7a5}
[data-theme=dark] .preset-stock{color:#efb49b}
[data-theme=dark] .preset-grid button[aria-pressed=true] .preset-stock{color:#efb49b}
[data-theme=dark] .brand-mark{box-shadow:0 0 0 1px #42444a}
[data-theme=dark] button:disabled{opacity:.45}
@media(max-width:760px){[data-theme] .site-header{height:76px}[data-theme] .workspace{padding-top:20px}[data-theme] .setting-section{padding:20px}}
@media(max-width:450px){[data-theme] .mode-switch button{padding:9px 14px;font-size:12px}[data-theme] :is(.field-row input,.field-row select,.text-input,.edge-color-field>select){font-size:16px}.header-right{gap:10px}[data-theme] .theme-toggle{font-size:11px;padding:8px 10px}.header-right #restore-draft{font-size:11px}.site-header{gap:12px}}

/* Editor-only transform controls live outside the clipped print board. */
.transform-frame{position:absolute;z-index:5;border:1px solid #3282fa;box-shadow:0 0 0 1px #fff8;transform-origin:center;pointer-events:none}
.transform-handle{position:absolute;width:22px;height:22px;padding:0;border:0;background:transparent;pointer-events:auto;touch-action:none;transform:translate(-50%,-50%)}
.transform-handle::after{content:'';position:absolute;inset:6px;border:1.5px solid #3282fa;background:#fff;border-radius:2px;box-shadow:0 1px 3px #0004}
.handle-nw{left:0;top:0;cursor:nwse-resize}.handle-n{left:50%;top:0;cursor:ns-resize}.handle-ne{left:100%;top:0;cursor:nesw-resize}.handle-e{left:100%;top:50%;cursor:ew-resize}.handle-se{left:100%;top:100%;cursor:nwse-resize}.handle-s{left:50%;top:100%;cursor:ns-resize}.handle-sw{left:0;top:100%;cursor:nesw-resize}.handle-w{left:0;top:50%;cursor:ew-resize}
.transform-frame .handle-rotate{left:50%;top:-28px;width:24px;height:24px;border:1px solid #3282fa;border-radius:50%;background:#fff;color:#1765cf;font-size:18px;line-height:22px;cursor:grab}
.handle-rotate::after{inset:auto;left:10px;top:23px;width:1px;height:16px;border:0;background:#3282fa;box-shadow:none;border-radius:0;pointer-events:none}
@media(pointer:coarse){.transform-handle{width:32px;height:32px}.transform-handle::after{inset:10px}.transform-frame .handle-rotate{width:30px;height:30px;line-height:28px;top:-32px}.handle-rotate::after{inset:auto;left:13px;top:29px;height:17px}}

.text-adjustments .text-input{margin-top:12px}
.text-adjustment-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin-top:10px}
.text-adjustment-options .color-row,.text-adjustment-options .slider-label{margin:0;font-size:12px}
.text-adjustment-options .color-row{justify-content:flex-start;gap:12px}
.text-adjustment-options .color-row input{width:40px;height:30px}
.text-adjustments .image-adjustment-heading .text-button{padding:0;font-size:12px}
@media(max-width:450px){.text-adjustment-options{gap:16px}.text-adjustment-options .color-row input{width:44px;height:36px}}

.text-font-row{display:flex;align-items:flex-end;gap:12px;margin-top:14px}.font-select-label{flex:1;display:grid;gap:6px;font-size:12px;color:var(--ui-muted)}.text-font-row select,.text-style-options select{width:100%;border:1px solid var(--ui-border);border-radius:10px;padding:10px;background:var(--ui-input);color:var(--ui-text);min-height:40px}.font-import{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:40px;padding:10px 14px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-soft);font-size:12px;cursor:pointer;white-space:nowrap}.font-import input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.font-import:focus-within{outline:3px solid var(--ui-focus);outline-offset:3px}.font-note{font-size:11px;line-height:1.7;color:var(--ui-muted);margin:8px 0 14px}.text-style-options{display:flex;align-items:center;gap:22px;margin-top:14px}.text-style-options>label:first-child{display:flex;align-items:center;gap:12px;flex:1;font-size:12px;white-space:nowrap;color:var(--ui-muted)}.text-style-options select{max-width:180px}.text-style-options .check-label{margin:0}.text-outline-options{padding-top:14px;margin-top:14px;border-top:1px solid var(--ui-line)}
@media(max-width:450px){.text-font-row{gap:8px}.text-font-row select,.text-style-options select{font-size:16px}.font-import{padding:10px;font-size:12px}.font-note{font-size:11px}.text-style-options{gap:16px}}
/* Material reference photos remain separate from the user's print artwork. */
.material-photo-button{display:block;width:100%;padding:0;margin:12px 0 0;border:1px solid var(--ui-line);border-radius:12px;overflow:hidden;background:var(--ui-card);color:var(--ui-text);cursor:zoom-in;text-align:left}
.material-photo-button img{display:block;width:100%;height:156px;object-fit:contain;background:var(--ui-soft)}
.material-photo-button span{display:block;padding:8px 12px;font-size:12px;color:var(--ui-muted)}
#fabric-description,#backing-description{white-space:pre-line;overflow-wrap:anywhere}
.material-image-dialog{width:min(780px,calc(100% - 28px));max-height:90dvh;padding:20px;background:var(--ui-card);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:18px}
.material-image-dialog::backdrop{background:#0009}
.material-image-dialog>img{display:block;max-width:100%;max-height:60dvh;object-fit:contain;margin:auto}
.material-image-dialog>button{width:auto;float:right;margin:0}
.material-image-dialog h2{font-size:20px;margin:10px 0 20px}
.material-image-dialog p{white-space:pre-line;font-size:14px;line-height:1.7}

/* Layer controls share the editor's light/dark palette. */
.layer-panel{margin:20px 0 14px;padding:18px;border:1px solid var(--ui-line);border-radius:18px;background:var(--ui-card);color:var(--ui-text)}
.layer-heading,.layer-heading>div,.layer-add{display:flex;align-items:center;gap:12px}.layer-heading{justify-content:space-between;flex-wrap:wrap}.layer-heading strong{font-size:14px}.layer-heading #layer-count{color:var(--ui-muted);font-size:12px}.layer-add .secondary-button{width:auto;margin:0;padding:9px 12px;font-size:12px}.layer-help{font-size:11px;color:var(--ui-muted);line-height:1.7;margin:10px 0}.layer-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}.layer-item{padding:11px 12px;border:1px solid var(--ui-line);border-radius:9px;text-align:left;background:var(--ui-input);color:var(--ui-text);font:inherit;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.layer-item[aria-pressed=true]{border-color:var(--ui-accent);background:var(--ui-selected);box-shadow:inset 3px 0 0 var(--ui-accent)}.layer-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}.layer-actions button{border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-input);color:var(--ui-text);font:inherit;font-size:11px;padding:8px 11px}.layer-actions button:disabled{opacity:.4;cursor:default}.layer-item:focus-visible,.layer-actions button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
@media(max-width:520px){.layer-panel{padding:14px}.layer-heading{gap:10px}.layer-add{width:100%}.layer-add .secondary-button{flex:1}.layer-actions{gap:6px}.layer-actions button{padding:8px 10px}}
.export-options{margin-top:18px;padding-top:16px;border-top:1px solid var(--ui-line)}
.export-options>label{display:block;font-size:12px;color:var(--ui-muted);margin-bottom:8px}
.export-options>select{width:100%;min-height:42px;border:1px solid var(--ui-border);border-radius:10px;padding:10px;background:var(--ui-input);color:var(--ui-text);font:inherit;font-size:12px}
.export-options #export-status{overflow-wrap:anywhere}
@media(max-width:450px){.export-options>select{font-size:16px}}

.recovery-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:13px}.recovery-banner[hidden]{display:none}
.design-library{width:min(960px,calc(100% - 24px));max-height:90dvh;padding:24px;background:var(--ui-card);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:18px;overflow:auto}.design-library::backdrop{background:#0008}.design-library>p{font-size:12px;line-height:1.7;color:var(--ui-muted)}.library-toolbar,.library-actions{display:flex;gap:8px;flex-wrap:wrap}.library-toolbar .secondary-button,.library-actions .secondary-button{width:auto;margin:0;min-height:42px}.library-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.library-card{border:1px solid var(--ui-line);border-radius:12px;padding:14px;min-width:0}.library-card img{width:100%;height:130px;object-fit:contain;background:var(--ui-soft);border-radius:8px;margin-bottom:12px}.library-card input{width:100%;background:var(--ui-input);border:1px solid var(--ui-border);border-radius:8px;color:var(--ui-text);font:inherit;padding:10px}.library-card p{font-size:11px;color:var(--ui-muted);line-height:1.6}.library-actions .secondary-button{padding:8px 12px;font-size:12px}#autosave-status{overflow-wrap:anywhere}
@media(max-width:600px){.design-library{padding:16px}.library-list{grid-template-columns:1fr}.header-right{flex-wrap:wrap}.alignment-buttons button,.layer-actions button{min-height:44px}.layer-actions{position:sticky;bottom:0;background:var(--ui-card);padding-bottom:8px;z-index:3}.text-adjustments input,.text-adjustments select{min-height:44px}.submit-dialog{max-height:calc(100dvh - 20px)}.submit-dialog .dialog-heading{position:sticky;top:0;background:var(--ui-card);z-index:2;padding-bottom:10px}}

.site-footer{flex-wrap:wrap;justify-content:center;text-align:center}.site-footer .icp-link{flex-basis:100%;font-size:12px;line-height:1.8;color:var(--ui-muted,#686b73);text-decoration:none}.site-footer .icp-link:hover{text-decoration:underline}.site-footer .icp-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Phone controls reuse the same inputs and submission action as desktop. */
.mobile-tools,.mobile-more{display:none}
@media(max-width:760px){
  html{scroll-padding-bottom:calc(var(--purchase-bar-height,130px) + 16px)}
  body{padding-bottom:calc(var(--purchase-bar-height,130px) + 16px)}
  .mobile-tools{display:block;margin:12px 0 16px}
  .mobile-tools[data-selection=none] :is(#text-controls,#image-controls){display:none}
  .mobile-tools>.layer-add{display:flex;gap:8px;margin-bottom:10px;width:100%}
  .mobile-tools>.layer-add button{flex:1;min-width:0;min-height:44px;font-size:13px;margin:0;padding:8px}
  .mobile-tools .image-adjustments{margin-bottom:0;padding:14px}
  .mobile-tools .text-input{margin:10px 0 0;font-size:16px;min-height:44px}
  .mobile-tools .text-adjustment-options{gap:12px;margin-top:10px}
  .mobile-tools .color-row{margin:0}
  .mobile-tools .slider-label{margin-top:10px;margin-bottom:6px}
  .mobile-tools .image-adjustment-sliders{gap:14px}
  .mobile-tools .image-adjustment-heading>span{display:none}
  .mobile-tools .mobile-more{display:block;border-top:1px solid var(--ui-line);margin-top:12px}
  .mobile-more>summary{cursor:pointer;font-size:13px;color:var(--ui-text);padding:14px 0;min-height:44px}
  .mobile-more[open]>summary{margin-bottom:4px}
  .mobile-more .text-font-row{margin-top:4px}
  .mobile-more .alignment-buttons{margin-top:0}
  .stage{height:clamp(230px,34svh,310px);scroll-margin-top:12px}
  .planar{padding-top:45px;padding-bottom:45px}
  .settings-panel,.layer-panel{scroll-margin-top:12px}
  .layer-panel{margin-top:14px}
  .layer-actions{position:static}
  .purchase-bar{position:fixed;z-index:15;bottom:0;left:0;right:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(108px,38%);gap:8px 14px;padding:0 max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));border-top:1px solid var(--ui-border);background:var(--ui-card);color:var(--ui-text);box-shadow:0 -4px 24px #00000012}
  .purchase-price{min-width:0;align-self:center}
  [data-theme] .purchase-bar #design-price{margin:0;padding:0;border:0;border-radius:0;background:none;font-size:14px;line-height:1.4;color:var(--ui-text);overflow-wrap:anywhere}
  .purchase-bar #retry-price{margin:2px 0 0;min-height:36px;text-align:left}
  .purchase-bar #submit-design{width:100%;min-height:48px;margin:0;padding:10px;border-radius:12px;align-self:center;font-size:14px;overflow-wrap:anywhere}
  body.mobile-typing .purchase-bar,body:has(dialog[open]) .purchase-bar{display:none}
  .mobile-tools :is(select,input[type=text]){font-size:16px}
  .toast{bottom:calc(var(--purchase-bar-height,130px) + 16px)}
}