:root {
  color-scheme:dark;
  --bg:#101112;
  --surface:#191a1c;
  --surface2:#222326;
  --line:#343539;
  --txt:#f6f4f0;
  --muted:#a6a7ab;
  --dim:#86888e;
  --pink:#ff6289;
  --ok:#7bd4ac;
  --warn:#eac177;
  --bad:#ff8a9f
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
[hidden] {
  display:none!important
}
body {
  background:var(--bg);
  color:var(--txt);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:13px;
  -webkit-font-smoothing:antialiased;
  height:100vh;
  height:100dvh;
  overflow:hidden
}
button,input,select {
  font:inherit
}
button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.38;
  cursor:not-allowed
}
a {
  color:inherit;
  text-decoration:none
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.sheetwrap:focus-visible {
  outline:2px solid var(--pink);
  outline-offset:3px
}
header {
  height:72px;
  border-bottom:1px solid #303134;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 22px;
  background:#151617
}
.brandlink {
  display:flex;
  align-items:center;
  gap:7px;
  flex-shrink:0
}
.brandlink img {
  object-fit:contain;
  width:36px;
  height:36px
}
.brandlink>span {
  font-size:16px;
  font-weight:850;
  letter-spacing:-.6px
}
.brandlink small {
  display:block;
  font-size:7px;
  letter-spacing:1.4px;
  color:var(--dim);
  margin-top:4px;
  font-weight:500
}
.flow {
  display:flex;
  gap:15px;
  align-items:center;
  font-size:10px;
  color:#8d8f94
}
.flow>span {
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}
.flow b {
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#2b2c30;
  font-size:10px;
  font-weight:600
}
.flow .on {
  color:#fff
}
.flow .on b {
  background:var(--pink);
  color:#151515
}
.flow i {
  font-style:normal;
  color:#606167
}
.headerActions {
  display:flex;
  align-items:center;
  gap:9px
}
.cartLink,.wa {
  display:inline-flex;
  align-items:center;
  min-height:35px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:5px;
  font-size:10px;
  font-weight:650
}
.cartLink {
  min-height:42px;
  gap:8px;
  padding:9px 15px;
  border-color:#4b4e55;
  background:#202125;
  color:#fff;
  font-size:11px;
  transition:border-color .18s,background .18s,transform .18s
}
.cartLink:hover {
  border-color:var(--pink);
  background:#292125;
  transform:translateY(-1px)
}
.cartLink svg {
  width:21px;
  height:21px;
  flex:0 0 auto;
  color:var(--pink)
}
.wa {
  color:#ddd
}
#draftStatus {
  font-size:9px;
  color:#93969b;
  margin-right:10px;
  max-width:180px;
  line-height:1.5
}
.workspace {
  height:calc(100vh - 72px);
  height:calc(100dvh - 72px);
  display:grid;
  grid-template-columns:252px minmax(260px,1fr) 340px
}
.library,.panel {
  min-width:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#444 transparent;
  background:#191a1c
}
.library {
  border-right:1px solid #303134;
  padding:24px 18px;
  display:flex;
  flex-direction:column
}
.panel {
  border-left:1px solid #303134;
  padding:24px 20px 28px
}
.eyebrow {
  display:block;
  font-size:8px;
  letter-spacing:.14em;
  color:#b2b3b7;
  font-weight:650
}
.panelTitle h1 {
  font-size:25px;
  line-height:1.09;
  letter-spacing:-1px;
  margin:13px 0
}
.panelTitle p,.sectionHint {
  font-size:11px;
  line-height:1.7;
  color:#a3a4aa
}
.drop {
  width:100%;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:7px;
  border:1px dashed #727078;
  background:#242427;
  border-radius:7px;
  color:#fff;
  padding:23px 10px;
  margin-top:22px;
  transition:background .15s,border-color .15s
}
.drop:hover,.drop.on {
  border-color:var(--pink);
  background:#ff62890b
}
.uploadPlus {
  font-size:27px;
  color:var(--pink);
  line-height:1.2
}
.drop b {
  font-size:13px
}
.drop small {
  font-size:10px;
  color:#aaa
}
.fileFormats {
  font-size:8px;
  letter-spacing:.11em;
  color:#888;
  margin-top:5px
}
.uploadNote {
  font-size:9px;
  color:#8f9197;
  line-height:1.7;
  margin:11px 0 15px
}
.readyDrop {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:64px;
  border:1px solid var(--line);
  border-radius:6px;
  background:transparent;
  text-align:left;
  color:#f3f3f3;
  padding:12px;
  width:100%
}
.readyDrop>span:first-child {
  font-size:22px;
  color:var(--pink)
}
.readyDrop b {
  font-size:10px;
  display:block;
  font-weight:600
}
.readyDrop small {
  font-size:9px;
  line-height:1.6;
  color:#999;
  display:block;
  margin-top:4px
}
.readyDrop:hover,.readyDrop.focus {
  border-color:var(--pink);
  background:#ff628909
}
#listWrap {
  margin-top:26px
}
.listHeading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.listHeading h2 {
  font-size:11px;
  font-weight:600
}
.listHeading>span {
  background:#303135;
  border-radius:4px;
  font-size:9px;
  padding:3px 6px;
  color:#ccc
}
.listHeading+.sectionHint {
  font-size:9px;
  margin:8px 0 11px
}
.list {
  display:flex;
  flex-direction:column;
  gap:7px
}
.row {
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 8px;
  background:#202124;
  border:1px solid #36373b;
  border-radius:6px;
  cursor:pointer;
  min-height:60px
}
.row:hover {
  background:#292a2d
}
.row.sel {
  border-color:var(--pink);
  background:#ff628909
}
.th {
  width:37px;
  height:39px;
  border-radius:3px;
  flex-shrink:0;
  background:#d9d9d9 center/contain no-repeat
}
.nm {
  min-width:0;
  flex:1;
  line-height:1.6
}
.nm b {
  font-weight:600;
  font-size:10px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  display:block
}
.nm span {
  font-size:8px;
  color:#9ea0a6;
  display:block
}
.x {
  border:0;
  background:transparent;
  padding:7px 4px;
  color:#999;
  font-size:17px;
  min-height:32px;
  min-width:24px
}
.x:hover {
  color:var(--pink)
}
.libraryFooter {
  padding-top:28px;
  margin-top:auto;
  font-size:9px;
  line-height:1.7;
  color:#92959b
}
.libraryFooter b {
  color:#c1c2c7;
  font-size:10px;
  font-weight:500
}
.libraryFooter p {
  margin:6px 0 12px
}
.libraryFooter a {
  font-size:9px;
  color:#d0d1d5;
  text-decoration:underline;
  text-underline-offset:3px
}
.stage {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:20px 18px 12px;
  overflow:hidden;
  background-color:#101112;
  background-image:radial-gradient(#ffffff13 .7px,transparent .7px);
  background-size:12px 12px
}
.stageTitle {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  min-height:40px;
  margin-bottom:12px
}
.stageTitle b {
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.2px
}
.stageTitle span {
  display:block;
  font-size:9px;
  margin-top:5px;
  color:#8c8f95
}
.tb {
  border:1px solid var(--line);
  background:#222326;
  color:#d8d9dd;
  border-radius:4px;
  padding:7px 10px;
  min-height:33px;
  font-size:10px;
  white-space:nowrap
}
.tb:hover:not(:disabled) {
  border-color:#8d747e;
  background:#303033
}
.tb.ico {
  width:33px;
  padding:5px;
  font-size:18px
}
.tb.danger {
  color:#e9acb8
}
.stageTitle .tb {
  font-size:8px;
  padding-inline:8px
}
.toolbar {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  background:#191a1ce8;
  border:1px solid #343539;
  padding:6px 8px;
  border-radius:6px;
  margin:0 auto 12px;
  max-width:100%
}
.toolGroup {
  display:flex;
  align-items:center;
  gap:4px
}
.toolGroup+.toolGroup {
  border-left:1px solid #3b3c40;
  padding-left:7px;
  margin-left:3px
}
.sheetwrap {
  min-height:0;
  flex:1;
  overflow:auto;
  overscroll-behavior:contain;
  padding:12px 26px 18px;
  scrollbar-width:thin;
  scrollbar-color:#686a70 #171819
}
.sheetcol {
  width:max-content;
  padding-left:30px;
  padding-right:6px;
  margin:0 auto
}
.ruler {
  position:relative;
  height:32px;
  margin-bottom:5px;
  color:#b7b9be;
  border-bottom:1px solid #5c5e62
}
.ruler .cap {
  position:absolute;
  top:0;
  left:0;
  right:0;
  text-align:center;
  font-size:7px;
  color:#797c82;
  letter-spacing:.08em
}
.ruler .tk {
  position:absolute;
  bottom:0;
  width:1px;
  background:#5b5d64
}
.ruler .tk.b {
  background:#999ca2
}
.ruler .lb {
  position:absolute;
  bottom:9px;
  transform:translateX(-50%);
  font-size:8px;
  color:#a7aab1;
  white-space:nowrap
}
.ruler .lb.end {
  transform:translateX(-100%);
  font-weight:600;
  color:#ff91ad
}
.sheet {
  position:relative;
  flex:none;
  contain:layout style;
  border:1px solid #999;
  box-shadow:0 12px 55px #0007;
  background-color:#fff;
  background-image:linear-gradient(45deg,#e7e7e7 25%,transparent 25%),linear-gradient(-45deg,#e7e7e7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7e7e7 75%),linear-gradient(-45deg,transparent 75%,#e7e7e7 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0
}
.sheet.dark {
  background-color:#24262b;
  background-image:linear-gradient(45deg,#31343b 25%,transparent 25%),linear-gradient(-45deg,#31343b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#31343b 75%),linear-gradient(-45deg,transparent 75%,#31343b 75%)
}
.vruler {
  position:absolute;
  left:-30px;
  top:0;
  width:27px;
  height:100%;
  pointer-events:none
}
.vt {
  position:absolute;
  right:0;
  height:1px;
  background:#5a5c64
}
.vt.b {
  background:#9a9da3
}
.vl {
  position:absolute;
  right:6px;
  transform:translateY(-50%);
  font-size:8px;
  color:#a7aab1;
  white-space:nowrap
}
.mline {
  position:absolute;
  left:0;
  right:0;
  border-top:1px dashed var(--pink)
}
.mlab {
  position:absolute;
  right:4px;
  font-size:9px;
  color:#d3466a
}
.tagprev {
  position:absolute;
  left:0;
  top:0;
  font-size:10px;
  color:#333;
  background:#ffffffb3;
  padding:2px 8px;
  pointer-events:none;
  z-index:9
}
.empty {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:13px;
  box-sizing:border-box;
  padding:clamp(130px,26vh,250px) 14px 40px;
  border:0;
  background:#ffffff9c;
  color:#313238;
  cursor:pointer
}
.empty>span {
  font-size:36px;
  line-height:1;
  color:#d53b64
}
.empty>b {
  font-size:clamp(15px,1.6vw,23px);
  line-height:1.12;
  letter-spacing:-.8px;
  font-weight:750
}
.empty>small {
  font-size:9px;
  line-height:1.7;
  color:#777980;
  max-width:180px
}
.empty>em {
  font-size:7px;
  color:#92949b;
  font-style:normal;
  line-height:1.6
}
.dark .empty {
  background:#202127d9;
  color:#eee
}
.dark .empty small {
  color:#aaa
}
.canvasFooter {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding-top:12px;
  min-height:42px;
  color:#8f929a;
  font-size:8px
}
.zoomTools {
  display:flex;
  align-items:center;
  gap:5px
}
.zoomTools .tb {
  min-height:28px;
  font-size:8px;
  padding:5px 8px
}
.zoomTools .tb.ico {
  width:27px;
  font-size:15px
}
.zl {
  font-size:9px;
  color:#bbb;
  min-width:32px;
  text-align:center
}
.it {
  position:absolute;
  left:0;
  top:0;
  cursor:grab;
  background-repeat:no-repeat;
  background-size:100% 100%;
  touch-action:none;
  will-change:transform;
  transform-origin:50% 50%
}
.it.sel {
  outline:2px solid #ff4d7e;
  outline-offset:2px;
  z-index:5
}
.it.low:not(.sel) {
  outline:1px dashed #cfa53b
}
.it.drag {
  opacity:.8
}
.it .hd {
  position:absolute;
  right:-9px;
  bottom:-9px;
  width:18px;
  height:18px;
  border-radius:3px;
  background:#ff6289;
  border:2px solid #242429;
  cursor:nwse-resize;
  display:none
}
.it .rt {
  position:absolute;
  left:50%;
  top:-28px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#ff6289;
  border:2px solid #242429;
  margin-left:-9px;
  cursor:grab;
  display:none
}
.it .rt:after {
  content:'';
  position:absolute;
  left:7px;
  top:15px;
  height:11px;
  width:1px;
  background:#ff6289
}
.it.sel .hd,.it.sel .rt {
  display:block
}
.inspectorTop h2 {
  font-size:19px;
  letter-spacing:-.6px;
  line-height:1.2;
  margin:13px 0 9px
}
.inspectorTop .sectionHint {
  font-size:10px
}
#sizeBox {
  margin-top:18px
}
.selectedPreview {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:14px
}
.selectedPreview img {
  width:45px;
  height:47px;
  object-fit:contain;
  flex-shrink:0;
  background:#e6e6e6;
  border-radius:4px
}
.selectedPreview>div {
  min-width:0
}
.selectedPreview b {
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:11px;
  font-weight:600
}
.selectedPreview span {
  display:block;
  font-size:9px;
  color:#b4b6bc;
  margin-top:6px;
  line-height:1.5
}
.sized {
  display:grid;
  grid-template-columns:1fr 1fr .8fr;
  gap:7px
}
.sized label {
  font-size:8px;
  color:#9a9da5;
  display:block;
  margin-bottom:7px
}
.sized input,.field input,.smartHeading select {
  width:100%;
  background:#111214;
  border:1px solid #44464c;
  border-radius:4px;
  padding:10px 8px;
  color:#fff;
  font-size:13px;
  min-height:38px
}
.sized input {
  min-width:0
}
.proportionHint {
  font-size:8px;
  color:#92959e;
  margin-top:10px;
  line-height:1.6
}
.minirow {
  display:flex;
  margin-top:11px
}
.minirow button {
  width:100%;
  border:1px solid #3b3d42;
  background:#232428;
  border-radius:4px;
  color:#c7c9cf;
  font-size:9px;
  padding:9px
}
.smartActions {
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid #36373b
}
.smartHeading {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px;
  margin-bottom:12px
}
.smartHeading>b {
  grid-column:1/-1;
  font-size:12px;
  font-weight:600;
  margin-bottom:6px
}
.smartHeading label {
  font-size:9px;
  color:#a5a7ae
}
.smartHeading select {
  font-size:9px;
  min-height:30px;
  width:76px;
  padding:5px 8px
}
.smartPrimary {
  display:flex;
  width:100%;
  align-items:center;
  gap:9px;
  padding:14px 10px;
  background:#ff62890c;
  border:1px solid #9b4b61;
  border-radius:5px;
  color:#ffd0dc;
  text-align:left
}
.smartPrimary>span:first-child {
  font-size:25px;
  line-height:1
}
.smartPrimary>span:nth-child(2) {
  flex:1
}
.smartPrimary b {
  font-size:10px;
  display:block;
  line-height:1.5;
  font-weight:600
}
.smartPrimary small {
  font-size:8px;
  color:#b6a3a9;
  display:block;
  line-height:1.6;
  margin-top:4px
}
.smartSecondary {
  display:block;
  width:100%;
  margin-top:8px;
  padding:12px 11px;
  text-align:left;
  background:#222326;
  color:#e0e1e5;
  border:1px solid #414247;
  border-radius:5px
}
.smartSecondary b {
  display:block;
  font-size:10px;
  font-weight:500
}
.smartSecondary small {
  display:block;
  font-size:8px;
  color:#999da5;
  line-height:1.6;
  margin-top:4px
}
.reviewSummary {
  margin-top:25px;
  padding-top:22px;
  border-top:1px solid #36373b
}
.summaryHeading h2 {
  font-size:14px;
  font-weight:600;
  letter-spacing:-.3px;
  margin:11px 0 16px
}
.sum {
  padding:0;
  background:transparent
}
.sl {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
  font-size:10px;
  color:#aaaeb5
}
.sl b {
  font-size:11px;
  font-weight:500;
  color:#e1e2e5;
  text-align:right
}
.occbar {
  height:4px;
  border-radius:4px;
  background:#383a40;
  margin:6px 0 8px;
  overflow:hidden
}
.occbar>span {
  display:block;
  height:100%;
  width:0;
  background:var(--pink)
}
.areaNote {
  display:block;
  font-size:7px;
  color:#848892;
  line-height:1.7
}
.sl.tot {
  padding-top:15px;
  margin-top:12px;
  border-top:1px solid #36383d
}
.sl.tot b {
  font-size:26px;
  letter-spacing:-1px;
  color:#f6f6f6;
  font-weight:600
}
.pixhint {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:9px;
  color:#a5a9b2;
  margin-top:6px
}
.pixhint b {
  font-size:13px;
  color:#ff9bb5;
  font-weight:500
}
.tierbar {
  font-size:9px;
  line-height:1.7;
  color:#aaaeb6;
  margin-top:15px;
  padding:10px;
  border:1px solid #3a3c42;
  border-radius:4px;
  background:#222327
}
.tierbar b {
  font-weight:500;
  color:#dedfe4
}
.shippingNote {
  font-size:8px;
  color:#888c96;
  margin-top:9px
}
.alerts {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:15px
}
.al {
  border-radius:4px;
  padding:10px;
  font-size:9px;
  line-height:1.75
}
.al.w {
  background:#eac1770b;
  border:1px solid #eac17745;
  color:#dccaab
}
.al.e {
  background:#ff62890c;
  border:1px solid #ff62894d;
  color:#f1b1c2
}
.al.o {
  background:#7bd4ac0b;
  border:1px solid #7bd4ac40;
  color:#b5d8c9
}
.al b {
  font-weight:600;
  color:inherit
}
.cta {
  width:100%;
  display:block;
  min-height:44px;
  padding:12px;
  border-radius:5px;
  font-size:11px;
  border:0;
  margin-top:12px;
  line-height:1.5;
  font-weight:650
}
.cta.g {
  background:var(--pink);
  color:#181819
}
.cta.g:hover:not(:disabled) {
  background:#ff83a2
}
.cta.p {
  border:1px solid #484a51;
  background:#24262b;
  color:#ddd
}
.cta.s {
  background:transparent;
  color:#e6a6b6;
  font-size:10px
}
.checkoutHint {
  font-size:8px;
  color:#9398a1;
  text-align:center;
  margin-top:10px;
  line-height:1.6
}
.advancedPanel {
  margin-top:22px;
  padding-top:17px;
  border-top:1px solid #36373d
}
.advancedPanel summary {
  font-size:9px;
  color:#b4b7c0;
  cursor:pointer;
  line-height:1.7;
  padding:5px 0
}
.field {
  margin-top:13px
}
.field>label {
  display:block;
  font-size:9px;
  color:#a9aeb8;
  margin-bottom:9px
}
.field label b {
  font-weight:400;
  color:#7e838e
}
.field input {
  font-size:11px;
  margin-bottom:8px
}
.chk {
  display:flex!important;
  align-items:flex-start;
  gap:8px;
  line-height:1.7;
  margin-top:9px
}
.chk input {
  width:15px;
  height:15px;
  min-height:0;
  margin-top:2px;
  flex-shrink:0;
  accent-color:var(--pink)
}
.chk small {
  font-size:8px;
  color:#848994;
  display:block;
  margin-top:5px
}
.keys {
  font-size:8px;
  color:#9299a5;
  line-height:1.8;
  margin-top:12px
}
.keys p {
  margin:6px 0
}
kbd {
  font-family:inherit;
  color:#c4c8cf;
  font-size:8px
}
.help {
  display:block;
  margin-top:23px;
  padding-top:16px;
  border-top:1px solid #36373d;
  font-size:9px;
  color:#c4c6cb;
  line-height:1.7
}
.mobileTabs,.mobilePay,.mobileAdjust {
  display:none
}
.tip {
  position:fixed;
  z-index:90;
  display:none;
  background:#151619;
  border:1px solid var(--pink);
  border-radius:4px;
  color:#eee;
  font-size:11px;
  padding:7px 11px;
  pointer-events:none;
  white-space:nowrap;
  line-height:1.5;
  box-shadow:0 5px 20px #0005
}
.tip small {
  display:block;
  color:#aaa;
  font-size:9px
}
#busy {
  position:fixed;
  inset:0;
  background:#101113e8;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:15px;
  z-index:100;
  padding:24px;
  text-align:center
}
#busy .s {
  width:36px;
  height:36px;
  border:2px solid #555;
  border-top-color:var(--pink);
  border-radius:50%;
  animation:spin .8s linear infinite
}
#busy p {
  font-size:12px;
  color:#bcbec5
}
#toast {
  position:fixed;
  left:50%;
  bottom:25px;
  max-width:calc(100% - 36px);
  width:max-content;
  transform:translateX(-50%);
  z-index:110;
  color:#f4f4f4;
  background:#24262b;
  border:1px solid #64666e;
  border-radius:5px;
  padding:12px 17px;
  font-size:12px;
  line-height:1.5;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s
}
#toast.on {
  opacity:1
}
dialog {
  margin:auto;
  width:min(570px,calc(100% - 32px));
  max-height:calc(100dvh - 40px);
  overflow:auto;
  background:#1b1c1f;
  color:#f4f2ee;
  border:1px solid #51535b;
  border-radius:10px;
  padding:26px;
  box-shadow:0 25px 100px #000a
}
dialog::backdrop {
  background:#090a0bd1;
  backdrop-filter:blur(4px)
}
.dialogHead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.dialogHead .eyebrow {
  font-size:7px;
  color:#b3b6bf
}
.dialogHead>button {
  border:0;
  background:transparent;
  color:#ccc;
  font-size:23px;
  min-width:32px;
  min-height:32px
}
dialog h2 {
  font-size:25px;
  letter-spacing:-.8px;
  line-height:1.15;
  margin:15px 0 16px
}
#dialogBody {
  font-size:12px;
  line-height:1.8;
  color:#b2b5be
}
.dialogArt {
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:20px;
  padding:14px;
  background:#242529;
  border:1px solid #3d3f46;
  border-radius:5px
}
.dialogArt img {
  width:48px;
  height:52px;
  object-fit:contain;
  background:#e5e5e5;
  border-radius:3px
}
.dialogArt b {
  display:block;
  color:#f3f3f3;
  font-size:12px;
  overflow-wrap:anywhere
}
.dialogArt span {
  font-size:10px
}
.dialogOptions {
  display:flex;
  flex-direction:column;
  gap:8px
}
.dialogOptions label {
  padding:13px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#222328;
  border:1px solid #44464e;
  border-radius:5px;
  cursor:pointer;
  line-height:1.6
}
.dialogOptions input {
  margin-top:4px;
  accent-color:var(--pink)
}
.dialogOptions b {
  display:block;
  font-size:11px;
  color:#eee;
  font-weight:600
}
.dialogOptions small {
  display:block;
  font-size:10px;
  color:#9399a6
}
.planResult {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:17px 0
}
.planResult>div {
  border:1px solid #49434a;
  border-radius:5px;
  padding:13px;
  background:#ff628908
}
.planResult strong {
  display:block;
  color:#ff9bb5;
  font-size:26px;
  letter-spacing:-1px;
  line-height:1.3
}
.planResult span {
  font-size:9px;
  color:#b4abb0
}
.planNote {
  font-size:10px;
  line-height:1.8;
  color:#b0b2bd
}
.planError {
  border:1px solid #ec7e9c55;
  padding:11px;
  color:#ffb1c7;
  font-size:11px;
  border-radius:5px;
  line-height:1.8;
  margin-top:16px
}
.reviewCanvas {
  display:block;
  width:112px;
  max-height:390px;
  object-fit:contain;
  margin:10px auto 20px;
  background-color:#e4e4e4;
  background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0
}
.reviewCheck {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:16px;
  font-size:11px;
  color:#e2e4e9;
  cursor:pointer
}
.reviewCheck input {
  accent-color:var(--pink);
  margin-top:5px;
  flex-shrink:0
}
.dialogFooter {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:23px;
  padding-top:20px;
  border-top:1px solid #3c3f45
}
.dialogFooter button {
  border-radius:5px;
  padding:12px 16px;
  min-height:43px;
  font-size:11px;
  font-weight:600
}
.dialogCancel {
  background:transparent;
  border:1px solid #555963;
  color:#ddd
}
.dialogConfirm {
  background:var(--pink);
  color:#171717;
  border:1px solid transparent
}
.dialogConfirm:disabled {
  opacity:.38
}
.downloadNote {
  font-size:9px!important;
  color:#8e94a1!important;
  line-height:1.7;
  margin-top:13px
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@media (min-width:1600px) {
  .workspace {
    grid-template-columns:280px minmax(260px,1fr) 370px
  }
  .library {
    padding:28px 23px
  }
  .panel {
    padding:28px 25px
  }
  .panelTitle h1 {
    font-size:29px
  }
  .panelTitle p {
    font-size:12px
  }
  .stage {
    padding:24px 28px 16px
  }
  .stageTitle b {
    font-size:15px
  }
  .stageTitle span {
    font-size:10px
  }
  .tb {
    font-size:11px;
    min-height:36px
  }
  .smartPrimary b,.smartSecondary b {
    font-size:11px
  }
  .smartPrimary small,.smartSecondary small {
    font-size:9px
  }
  .al {
    font-size:10px
  }
  .sl {
    font-size:11px
  }
  .cta {
    font-size:12px
  }
}
@media (max-width:1150px) {
  .workspace {
    grid-template-columns:210px minmax(230px,1fr) 300px
  }
  .library {
    padding:20px 14px
  }
  .panel {
    padding:20px 15px
  }
  .panelTitle h1 {
    font-size:23px
  }
  .flow {
    gap:8px;
    font-size:9px
  }
  .flow>span {
    gap:5px
  }
  #draftStatus {
    display:none
  }
  .toolbar {
    padding:5px
  }
  .tb {
    padding-inline:7px;
    font-size:9px
  }
  .toolGroup+.toolGroup {
    padding-left:5px;
    margin-left:0
  }
  .stage {
    padding:16px 12px 10px
  }
  .canvasFooter {
    justify-content:center
  }
  .canvasFooter>span {
    display:none
  }
  .zoomTools {
    gap:4px
  }
  .zoomTools .tb {
    font-size:7px;
    padding-inline:6px
  }
  .stageTitle {
    gap:8px
  }
  .stageTitle b {
    font-size:12px
  }
  .stageTitle span {
    font-size:8px
  }
}
@media (max-width:900px) {
  header {
    height:62px;
    padding:0 15px;
    gap:10px
  }
  .brandlink img {
    width:31px;
    height:31px
  }
  .brandlink>span {
    font-size:15px
  }
  .brandlink small {
    font-size:6px;
    letter-spacing:1px
  }
  .flow {
    display:none
  }
  .headerActions {
    gap:6px
  }
  .cartLink,.wa {
    font-size:10px;
    min-height:34px;
    padding:7px 10px
  }
  .cartLink {
    min-height:40px;
    gap:7px;
    padding-inline:12px
  }
  .cartLink svg {
    width:20px;
    height:20px
  }
  .mobileTabs {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding:0 12px;
    background:#1b1c1f;
    border-bottom:1px solid #3a3c42;
    height:46px
  }
  .mobileTabs button {
    background:transparent;
    border:0;
    border-bottom:2px solid transparent;
    font-size:11px;
    color:#979ca6;
    padding:10px;
    min-height:44px
  }
  .mobileTabs button[aria-pressed=true] {
    border-bottom-color:var(--pink);
    color:#ffe6ed
  }
  .workspace {
    display:block;
    height:calc(100vh - 187px);
    height:calc(100dvh - 187px - env(safe-area-inset-bottom));
    min-height:200px;
    overflow:hidden
  }
  .library,.stage,.panel {
    display:none;
    height:100%;
    border:0
  }
  .library {
    padding:25px 22px
  }
  .panel {
    padding:24px 22px 32px
  }
  .stage {
    padding:15px 13px 12px
  }
  .workspace[data-view=library] .library {
    display:flex
  }
  .workspace[data-view=canvas] .stage {
    display:flex
  }
  .workspace[data-view=inspector] .panel {
    display:block
  }
  .panelTitle h1 {
    font-size:29px
  }
  .panelTitle h1 br {
    display:none
  }
  .panelTitle p {
    font-size:13px;
    margin-top:12px
  }
  .drop {
    padding:25px 16px;
    margin-top:21px
  }
  .drop b {
    font-size:15px
  }
  .drop small {
    font-size:12px
  }
  .fileFormats {
    font-size:9px
  }
  .uploadNote {
    font-size:10px;
    margin-block:13px 18px
  }
  .readyDrop {
    min-height:70px;
    padding:15px
  }
  .readyDrop b {
    font-size:13px
  }
  .readyDrop small {
    font-size:11px
  }
  .libraryFooter {
    font-size:10px
  }
  .libraryFooter b {
    font-size:11px
  }
  .libraryFooter a {
    font-size:11px
  }
  .listHeading h2 {
    font-size:13px
  }
  .listHeading+.sectionHint {
    font-size:11px
  }
  .row {
    min-height:68px;
    padding:10px
  }
  .th {
    width:43px;
    height:43px
  }
  .nm b {
    font-size:12px
  }
  .nm span {
    font-size:10px
  }
  .x {
    min-height:44px;
    min-width:34px;
    font-size:21px
  }
  .stageTitle {
    margin-bottom:12px;
    min-height:40px
  }
  .stageTitle b {
    font-size:14px
  }
  .stageTitle span {
    font-size:9px
  }
  .stageTitle .tb {
    font-size:9px;
    min-height:36px
  }
  .toolbar {
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    width:100%;
    max-width:none;
    gap:4px;
    flex-shrink:0;
    min-height:49px;
    margin-bottom:12px
  }
  .toolGroup {
    flex-shrink:0
  }
  .tb {
    min-height:36px;
    font-size:10px;
    padding-inline:10px
  }
  .tb.ico {
    width:34px
  }
  .toolbar #bReset {
    display:none
  }
  .mobileAdjust {
    display:block;
    flex-shrink:0
  }
  .sheetwrap {
    padding:13px 16px 20px;
    min-height:140px
  }
  .sheetcol {
    padding-left:25px
  }
  .canvasFooter {
    padding-top:11px;
    justify-content:center
  }
  .zoomTools {
    gap:6px
  }
  .zoomTools .tb {
    font-size:9px;
    min-height:34px;
    padding-inline:8px
  }
  .zoomTools .tb.ico {
    width:30px;
    font-size:17px
  }
  .zl {
    min-width:32px;
    font-size:9px
  }
  .empty>b {
    font-size:18px
  }
  .empty>small {
    font-size:10px
  }
  .empty>em {
    font-size:8px
  }
  .it .hd {
    width:23px;
    height:23px;
    right:-11px;
    bottom:-11px
  }
  .it .rt {
    width:23px;
    height:23px;
    top:-33px;
    margin-left:-11px
  }
  .it .rt:after {
    left:9px;
    top:20px
  }
  .inspectorTop h2 {
    font-size:23px
  }
  .eyebrow {
    font-size:9px
  }
  .inspectorTop .sectionHint {
    font-size:12px
  }
  .selectedPreview {
    margin-bottom:20px
  }
  .selectedPreview img {
    width:55px;
    height:58px
  }
  .selectedPreview b {
    font-size:14px
  }
  .selectedPreview span {
    font-size:11px
  }
  .sized {
    gap:9px
  }
  .sized label {
    font-size:10px
  }
  .sized input {
    font-size:16px;
    min-height:44px
  }
  .proportionHint {
    font-size:10px;
    margin-top:12px
  }
  .minirow button {
    font-size:11px;
    min-height:42px
  }
  .smartHeading>b {
    font-size:15px
  }
  .smartHeading label {
    font-size:11px
  }
  .smartHeading select {
    width:88px;
    font-size:12px;
    min-height:40px
  }
  .smartPrimary {
    padding:16px 13px;
    gap:12px
  }
  .smartPrimary b {
    font-size:12px
  }
  .smartPrimary small {
    font-size:10px
  }
  .smartSecondary {
    padding:15px 13px;
    margin-top:10px
  }
  .smartSecondary b {
    font-size:12px
  }
  .smartSecondary small {
    font-size:10px
  }
  .summaryHeading h2 {
    font-size:19px
  }
  .sl {
    font-size:12px;
    padding-block:8px
  }
  .sl b {
    font-size:13px
  }
  .sl.tot b {
    font-size:31px
  }
  .areaNote {
    font-size:9px
  }
  .pixhint {
    font-size:11px
  }
  .pixhint b {
    font-size:15px
  }
  .tierbar {
    font-size:11px
  }
  .shippingNote {
    font-size:10px
  }
  .al {
    font-size:11px;
    padding:12px
  }
  .reviewSummary>.cta.g {
    display:none
  }
  .checkoutHint {
    font-size:10px;
    margin-top:15px
  }
  .advancedPanel summary {
    font-size:11px;
    min-height:43px;
    padding-block:11px
  }
  .field>label {
    font-size:12px
  }
  .field input {
    font-size:16px;
    min-height:44px
  }
  .chk input {
    width:18px;
    height:18px;
    min-height:0
  }
  .chk small {
    font-size:10px
  }
  .cta {
    font-size:13px;
    min-height:46px
  }
  .cta.s {
    font-size:12px
  }
  .keys,.keys kbd {
    font-size:10px
  }
  .help {
    font-size:12px
  }
  .mobilePay {
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:80;
    min-height:79px;
    gap:15px;
    align-items:center;
    justify-content:space-between;
    padding:13px 20px calc(13px + env(safe-area-inset-bottom));
    background:#18191cf5;
    border-top:1px solid #45474f
  }
  .mobilePay small {
    display:block;
    font-size:9px;
    color:#a8abb4
  }
  .mobilePay strong {
    display:block;
    font-size:20px;
    letter-spacing:-.7px;
    margin-top:3px
  }
  .mobilePay button {
    border:0;
    background:var(--pink);
    color:#191919;
    border-radius:5px;
    font-size:12px;
    font-weight:650;
    min-height:45px;
    padding:12px 17px
  }
  .mobilePay button:disabled {
    opacity:.5
  }
  .mobilePay #mobileCount {
    font-size:8px;
    color:#a5a9b3;
    display:block;
    margin-top:3px
  }
  #toast {
    bottom:94px;
    font-size:11px
  }
  dialog {
    padding:22px;
    max-height:calc(100dvh - 30px)
  }
  dialog h2 {
    font-size:24px
  }
  .dialogHead .eyebrow {
    font-size:6px;
    letter-spacing:.08em
  }
  .dialogFooter {
    flex-direction:column-reverse
  }
  .dialogFooter button {
    width:100%;
    min-height:46px;
    font-size:12px
  }
  .dialogOptions label {
    padding:12px
  }
  .dialogOptions b {
    font-size:12px
  }
  .dialogOptions small {
    font-size:10px
  }
  .reviewCheck {
    font-size:12px
  }
  .reviewCheck input {
    width:17px;
    height:17px
  }
  .planNote {
    font-size:11px
  }
}
@media (max-width:360px) {
  header {
    padding-inline:10px
  }
  .brandlink>span {
    font-size:13px
  }
  .brandlink img {
    width:28px;
    height:28px
  }
  .headerActions {
    gap:4px
  }
  .cartLink,.wa {
    font-size:9px;
    padding-inline:8px
  }
  .cartLink {
    min-width:40px;
    justify-content:center
  }
  .cartLink span {
    display:none
  }
  .library,.panel {
    padding-inline:17px
  }
  .stage {
    padding-inline:9px
  }
  .stageTitle b {
    font-size:12px
  }
  .stageTitle span {
    font-size:8px
  }
  .stageTitle .tb {
    font-size:8px;
    padding-inline:7px
  }
  .zoomTools {
    gap:4px
  }
  .zoomTools .tb {
    font-size:8px;
    padding-inline:6px
  }
  .mobilePay {
    padding-inline:16px;
    gap:12px
  }
  .mobilePay button {
    font-size:11px;
    padding-inline:14px
  }
  .smartPrimary {
    gap:8px;
    padding-inline:10px
  }
  .smartPrimary b {
    font-size:11px
  }
  .planResult {
    gap:8px
  }
}
@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
@media (min-width:901px) {
  .eyebrow {
    font-size:9px
  }
  .panelTitle p,.sectionHint {
    font-size:12px
  }
  .drop b {
    font-size:14px
  }
  .drop small {
    font-size:11px
  }
  .uploadNote {
    font-size:10px
  }
  .readyDrop b {
    font-size:12px
  }
  .readyDrop small {
    font-size:10px
  }
  .listHeading h2 {
    font-size:12px
  }
  .listHeading+.sectionHint {
    font-size:10px
  }
  .nm b {
    font-size:11px
  }
  .nm span {
    font-size:9px
  }
  .libraryFooter,.libraryFooter a {
    font-size:10px
  }
  .stageTitle b {
    font-size:14px
  }
  .stageTitle span {
    font-size:10px
  }
  .tb {
    font-size:11px
  }
  .stageTitle .tb {
    font-size:9px
  }
  .inspectorTop .sectionHint {
    font-size:11px
  }
  .selectedPreview b {
    font-size:12px
  }
  .selectedPreview span {
    font-size:10px
  }
  .sized label {
    font-size:9px
  }
  .proportionHint {
    font-size:9px
  }
  .minirow button {
    font-size:10px
  }
  .smartHeading label {
    font-size:10px
  }
  .smartPrimary b {
    font-size:11px
  }
  .smartPrimary small,.smartSecondary small {
    font-size:9px
  }
  .smartSecondary b {
    font-size:11px
  }
  .summaryHeading h2 {
    font-size:16px
  }
  .sl {
    font-size:11px
  }
  .sl b {
    font-size:12px
  }
  .pixhint {
    font-size:10px
  }
  .pixhint b {
    font-size:14px
  }
  .tierbar {
    font-size:10px
  }
  .al {
    font-size:10px
  }
  .cta {
    font-size:12px
  }
  .checkoutHint,.advancedPanel summary,.help {
    font-size:10px
  }
}

.rowSelect {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
  min-height: 40px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

/* Compact library: one thumbnail per artwork, with an expandable copy list. */
.artGroup {
  border: 1px solid #3c3e44;
  border-radius: 7px;
  overflow: hidden;
  background: #202124;
}
.artGroup.selected { border-color: #e45d82; }
.artGroupSelect {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 11px;
  border: 0;
  background: transparent;
  text-align: left;
  color: #f1f2f5;
}
.artGroupSelect:hover { background: #ffffff05; }
.groupThumb {
  display: block;
  width: 49px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 4px;
  background: #e5e5e5 center / contain no-repeat;
}
.groupInfo { display: block; min-width: 0; flex: 1; }
.groupInfo b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.groupInfo>span { display: block; font-size: 11px; color: #dadce2; margin-top: 5px; }
.groupInfo small { display: block; font-size: 9px; color: #969ba5; margin-top: 6px; line-height: 1.6; }
.artGroup.selected .groupInfo small { color: #ffa7c0; }
.artGroupToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 37px;
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid #383a41;
  background: #191b1f;
  color: #c4c9d3;
  font-size: 10px;
  text-align: left;
}
.artGroupToggle:hover { color: #fff; background: #292b30; }
.artGroupToggle>span { font-size: 16px; }
.groupCopies {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 246px;
  overflow: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: #626670 #191b1f;
  border-top: 1px solid #383a41;
  background: #17181b;
}
.groupCopies .row { min-height: 55px; padding: 7px 8px; }
.copyIndex {
  display: grid;
  place-items: center;
  width: 25px;
  min-height: 28px;
  color: #9ba0ac;
  font-size: 10px;
  flex-shrink: 0;
}
.groupCopies .nm b { font-size: 11px; }
.groupCopies .nm>span { font-size: 9px; }
.list { gap: 12px; }

/* Quantity always means copies of the selected artwork inside this one metre. */
.copyQuantity {
  margin-top: 19px;
  padding: 15px 12px;
  background: #ff628908;
  border: 1px solid #75515e;
  border-radius: 6px;
}
.copyQuantityHeading label { display: block; color: #f5dce5; font-size: 11px; font-weight: 600; line-height: 1.6; }
.copyQuantityHeading>span { display: block; font-size: 10px; color: #a9a4ae; margin-top: 5px; }
.quantityStepper {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 8px;
  margin-top: 13px;
}
.quantityStepper button {
  border: 1px solid #58515d;
  background: #2a262d;
  color: #ffbfd2;
  border-radius: 4px;
  min-height: 39px;
  font-size: 22px;
}
.quantityStepper input {
  min-width: 0;
  width: 100%;
  border: 1px solid #69606d;
  border-radius: 4px;
  background: #151417;
  color: #fff;
  text-align: center;
  padding: 7px;
  font-size: 17px;
  font-weight: 600;
  appearance: textfield;
  -moz-appearance: textfield;
}
.quantityStepper input::-webkit-inner-spin-button,.quantityStepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.applyCopies {
  display: block;
  width: 100%;
  min-height: 39px;
  padding: 10px;
  margin-top: 10px;
  background: #ff6289;
  color: #181619;
  border: 0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.copyQuantity p { font-size: 9px; color: #b7adb7; line-height: 1.8; margin-top: 10px; }
#copyQuantityFeedback { color: #f1c9d9; }
#copyQuantityFeedback:empty { display: none; }
.canvasFooter { flex-shrink: 0; min-height: 58px; gap: 10px; }
.zoomTools { justify-content: center; flex-wrap: wrap; gap: 7px; }
.zoomTools .tb { min-height: 38px; font-size: 11px; padding: 9px 12px; }
.zoomTools .tb.ico { width: 38px; font-size: 20px; padding: 6px; }
.zoomTools .tb[aria-pressed=true] { border-color: #c56683; color: #ffd5e1; background: #ff62890c; }
.zoomLabel { font-size: 11px; font-weight: 600; color: #b9bec8; margin: 0 1px 0 8px; }
.zoomTools .zl { min-width: 42px; font-size: 11px; color: #dddfe5; }
@media (max-width:900px) {
  .groupThumb { width: 55px; height: 59px; }
  .groupInfo b { font-size: 13px; }
  .groupInfo>span { font-size: 12px; }
  .groupInfo small { font-size: 10px; }
  .artGroupToggle { font-size: 12px; min-height: 44px; }
  .groupCopies .row { min-height: 62px; }
  .groupCopies .nm b { font-size: 12px; }
  .groupCopies .nm>span { font-size: 10px; }
  .copyQuantity { padding: 17px 14px; }
  .copyQuantityHeading label { font-size: 13px; }
  .copyQuantityHeading>span { font-size: 11px; }
  .quantityStepper { grid-template-columns: 44px minmax(0,1fr) 44px; }
  .quantityStepper button,.quantityStepper input { min-height: 44px; }
  .applyCopies { font-size: 12px; min-height: 46px; }
  .copyQuantity p { font-size: 11px; }
  .canvasFooter { padding-top: 10px; min-height: 58px; }
  .zoomTools { gap: 6px; }
  .zoomTools .tb { min-height: 40px; font-size: 10px; padding: 9px 11px; }
  .zoomTools .tb.ico { width: 38px; font-size: 20px; }
  .zoomLabel,.zoomTools .zl { font-size: 10px; }
}


/* TERMOSILK editor · mobile usability refinement (keeps the printing geometry untouched) */
.privacyInEditor{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:max-content;
  max-width:100%;
  min-height:40px;
  margin-top:12px;
  padding:7px 0;
  color:#d9b7c3;
  font-size:11px;
  font-weight:650;
  background:transparent;
  border:0;
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
}
.privacyInEditor:hover{color:#ffb2c9}
.privacyInspector{margin-top:8px}
@media(max-width:900px){
  /* The three screen regions exactly match the available mobile viewport. */
  header{height:62px;padding:0 12px;gap:8px}
  .brandlink{min-width:0;gap:6px}
  .brandlink>span{font-size:clamp(12px,3.55vw,15px);white-space:nowrap;letter-spacing:-.035em}
  .brandlink small{font-size:6px;letter-spacing:.08em}
  .headerActions{flex-shrink:0;gap:6px}
  .cartLink,.wa{min-height:44px;border-radius:9px}
  .cartLink{min-height:44px;padding:10px 11px}
  .wa{padding:10px 11px}
  .mobileTabs{height:50px;padding:0 9px;gap:3px}
  .mobileTabs button{min-height:48px;padding:10px 4px;font-size:12px;font-weight:650;white-space:nowrap}
  .workspace{
    height:calc(100vh - 197px);
    height:calc(100dvh - 197px - env(safe-area-inset-bottom));
    min-height:160px;
  }
  .library,.panel{
    padding:22px 18px 105px;
    -webkit-overflow-scrolling:touch;
    scroll-padding-bottom:80px;
  }
  .panelTitle .eyebrow{font-size:10px;letter-spacing:.13em}
  .panelTitle h1{
    font-size:clamp(26px,7.4vw,34px);
    line-height:1.15;
    letter-spacing:-.035em;
    margin:13px 0 0;
    text-wrap:balance;
    overflow-wrap:normal;
  }
  .panelTitle h1 br{display:none}
  .panelTitle p{font-size:13px;line-height:1.65;margin-top:14px;max-width:36ch}
  .drop{
    margin-top:19px;
    padding:21px 15px;
    min-height:165px;
    gap:8px;
    border-radius:12px;
  }
  .uploadPlus{font-size:32px;line-height:1.05}
  .drop b{font-size:16px}
  .drop small{font-size:12px}
  .fileFormats{font-size:10px;letter-spacing:.07em}
  .uploadNote{font-size:11px;line-height:1.7;margin:13px 0 17px;color:#b1b2bc}
  .readyDrop{min-height:78px;border-radius:12px;padding:15px 16px;gap:13px}
  .readyDrop>span:first-child{font-size:24px}
  .readyDrop b{font-size:14px;font-weight:750}
  .readyDrop small{font-size:11px;line-height:1.5}
  .libraryFooter{margin-top:26px;padding-top:18px;padding-bottom:20px;border-top:1px solid #303238;line-height:1.7}
  .libraryFooter b{font-size:12px;color:#ebebf0;font-weight:700}
  .libraryFooter p{font-size:11px;margin:7px 0 13px;line-height:1.75}
  .libraryFooter a{display:block;min-height:38px;font-size:11px}
  .privacyInEditor{min-height:44px;font-size:11px;margin-top:5px}
  .stage{padding:14px 11px 12px}
  .stageTitle{gap:8px}
  .stageTitle b{font-size:14px}
  .toolbar{margin-bottom:9px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .toolbar .tb{min-height:42px;font-size:11px}
  .toolbar .tb.ico{width:42px}
  .sheetwrap{padding:12px 13px 16px;min-height:150px}
  .canvasFooter{justify-content:center;gap:9px;min-height:70px;align-content:center}
  .canvasFooter>span{width:100%;text-align:center;font-size:10px}
  .zoomTools{width:100%;max-width:100%;justify-content:center;gap:4px;flex-wrap:wrap}
  .zoomTools .tb{min-height:36px;font-size:10px;padding:6px 7px}
  .zoomTools .tb.ico{width:35px}
  .zoomLabel{display:none}
  .panel .sectionHint{line-height:1.7}
  .mobilePay{
    min-height:85px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    gap:10px;
  }
  .mobilePay>div{min-width:0}
  .mobilePay small{font-size:10px}
  .mobilePay strong{font-size:22px;line-height:1.15}
  .mobilePay #mobileCount{font-size:10px;margin-top:5px}
  .mobilePay button{
    min-height:48px;
    padding:11px 16px;
    font-size:12px;
    font-weight:800;
    border-radius:9px;
    white-space:nowrap;
  }
  .mobilePay button:disabled{opacity:.55;filter:saturate(.65)}
  #toast{bottom:calc(99px + env(safe-area-inset-bottom))}
  dialog{width:min(560px,calc(100% - 20px));padding:20px 17px;border-radius:14px}
  .dialogFooter button{min-height:48px}
}
@media(max-width:420px){
  .library,.panel{padding-inline:16px}
  .panelTitle h1{font-size:clamp(26px,7.25vw,31px)}
  .panelTitle p{font-size:12.5px}
  .mobilePay{padding-inline:12px}
  .mobilePay button{padding-inline:12px}
  .canvasFooter .zoomTools .tb{font-size:9px;padding-inline:6px}
  .brandlink img{width:29px;height:29px}
}
@media(max-width:350px){
  .brandlink>span{font-size:12px}
  .brandlink small{letter-spacing:0}
  .cartLink{padding-inline:9px}
  .cartLink span{display:none}
  .wa{padding-inline:9px}
  .library,.panel{padding-inline:13px}
  .mobileTabs button{font-size:11px}
  .mobilePay button{font-size:11px;padding-inline:10px}
  .mobilePay strong{font-size:19px}
}
@media(max-width:900px) and (max-height:620px){
  .library,.panel{padding-top:14px}
  .panelTitle h1{margin-top:9px}
  .drop{min-height:138px;padding:13px}
  .readyDrop{min-height:65px}
}