:root {
  color-scheme: light;
  --bg: #fffdfa;
  --panel: #fffdfa;
  --panel-2: #fff7f7;
  --ink: #000000;
  --muted: #655f5a;
  --line: #eee4df;
  --teal: #e14121;
  --teal-dark: #b92f18;
  --coral: #ff5b64;
  --navy: #151515;
  --sun: #d7c970;
  --aqua: #cfdcd7;
  --clay: #c98254;
  --leaf: #6f7d2d;
  --shadow: 0 18px 42px rgba(29, 18, 12, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.shop-ribbon {
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 10px 24px;
  background: #e63d22;
  color: #fffdfa;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: 252px 1fr;
}

.workflow {
  background: #fffdfa;
  color: #000000;
  border-right: 1px solid var(--line);
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 30px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #fff7c7;
  color: #e14121;
  font-weight: 800;
  border: 1px solid #f0df9a;
  border-radius: 50%;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-family: Raleway, "Open Sans", ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
}

.brand span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.step {
  border: 1px solid transparent;
  border-radius: 0;
  padding: 14px 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: transparent;
  color: #000000;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
}

.step span {
  color: #e14121;
  font-size: 12px;
  width: 24px;
}

.step.is-active,
.step:hover {
  background: #fff4f1;
  border-color: #f0d6cf;
  color: #e14121;
}

.step.is-active span,
.step:hover span {
  color: #e14121;
}

.studio {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.toolbar {
  min-height: 72px;
  padding: 14px 20px;
  background: #fffdfa;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.toolbar label {
  color: var(--muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

input[type="number"],
select {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  background: white;
  color: var(--ink);
}

input[type="number"] {
  width: 72px;
}

.file-button,
.primary-button,
.secondary-button,
.ghost-button,
.icon-button {
  border: 1px solid transparent;
  border-radius: 4px;
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.file-button input {
  display: none;
}

.file-button,
.primary-button {
  background: var(--teal);
  color: #fffdfa;
}

#pesButton {
  background: #000000;
}

#pesButton:hover {
  background: #0f2323;
}

.primary-button:hover,
.file-button:hover {
  background: var(--teal-dark);
}

.secondary-button {
  width: 100%;
  background: var(--navy);
  color: #fffdfa;
}

.ghost-button,
.icon-button {
  background: white;
  color: var(--navy);
  border-color: var(--line);
}

.ghost-button:hover,
.icon-button:hover {
  border-color: #e6b5a8;
  background: #fff4ed;
}

.icon-button {
  width: 40px;
  padding: 0;
  font-size: 20px;
}

.workspace {
  min-height: 0;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.canvas-panel,
.inspector {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.canvas-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(360px, 1fr) auto;
}

.canvas-header {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-family: Raleway, "Open Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

h2 {
  font-family: Raleway, "Open Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.2;
}

.canvas-header p {
  color: var(--muted);
  margin-top: 6px;
  font-size: 14px;
}

.view-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
  gap: 3px;
  flex: 0 0 auto;
}

.view-toggle button {
  min-width: 96px;
  height: 34px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.view-toggle button.is-active {
  background: var(--brand);
  color: #ffffff;
}

.metrics {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.metrics div {
  min-width: 96px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
  background: var(--panel-2);
}

.metrics span {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.canvas-wrap {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  background: #fffdfa;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  color: var(--muted);
  pointer-events: none;
}

.empty-state strong {
  color: var(--ink);
  font-size: 24px;
  font-family: Raleway, "Open Sans", ui-sans-serif, system-ui, sans-serif;
}

.sew-order {
  border-top: 1px solid var(--line);
  padding: 14px 18px 16px;
}

.timeline-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 11px;
}

.timeline-head strong {
  color: var(--ink);
}

.sew-player {
  display: grid;
  grid-template-columns: 36px 36px 36px minmax(110px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.player-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.player-button:hover,
.player-button.is-active {
  border-color: var(--brand);
  background: #fff1ed;
}

.play-icon {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  margin-left: 2px;
}

.pause-icon {
  width: 13px;
  height: 15px;
  background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 9px, currentColor 9px 13px);
}

.stop-icon {
  width: 13px;
  height: 13px;
  background: currentColor;
}

.player-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #efe7e3;
}

.player-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 120ms linear;
}

#playerStatus {
  min-width: 142px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.timeline {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.timeline-item {
  min-width: 122px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
  display: grid;
  gap: 5px;
  font-size: 12px;
}

.thread-line {
  height: 5px;
  border-radius: 999px;
}

.inspector {
  min-width: 0;
  overflow-y: auto;
}

.panel-section {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.panel-section label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}

.panel-section input[type="range"] {
  grid-column: 1 / 2;
  accent-color: var(--teal);
}

.panel-section label span {
  grid-row: 2;
  grid-column: 2;
  color: var(--ink);
  font-weight: 700;
}

.panel-section label > .setting-label-text,
.layer-card label > .setting-label-text {
  grid-row: 1;
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: inherit;
  font-weight: inherit;
}

.panel-section .help-tip {
  position: relative;
  z-index: 4;
  width: 18px;
  height: 18px;
  display: inline-grid;
  flex: 0 0 18px;
  place-items: center;
  border: 1px solid #b9d2cf;
  border-radius: 50%;
  background: #edf5f3;
  color: #0d6667;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}

.help-tip::after {
  content: attr(data-help);
  position: absolute;
  right: -8px;
  bottom: calc(100% + 9px);
  z-index: 80;
  width: 230px;
  padding: 10px 11px;
  border-radius: 6px;
  background: #163f42;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(20, 53, 55, 0.24);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.help-tip:hover::after,
.help-tip:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.help-tip:focus-visible {
  outline: 2px solid rgba(13, 102, 103, 0.3);
  outline-offset: 2px;
}

.centerline-text-button {
  width: 100%;
  min-height: 38px;
  margin-top: 16px;
  border: 1px solid var(--brand);
  border-radius: 5px;
  background: #ffffff;
  color: var(--brand);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.centerline-text-button:hover,
.centerline-text-button:focus-visible {
  background: #fff4ed;
}

.alignment-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.alignment-controls button {
  min-width: 0;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.alignment-controls button:hover,
.alignment-controls button:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
}

.alignment-controls button.is-primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.position-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.panel-section .position-grid label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin-top: 0;
}

.panel-section .position-input-wrap {
  grid-row: auto;
  grid-column: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-weight: 700;
}

.position-input-wrap input {
  min-width: 0;
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
}

.panel-section .position-input-wrap .position-unit {
  grid-row: auto;
  grid-column: auto;
  color: var(--muted);
  font-size: 11px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.layers-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.layer-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
  padding: 12px;
}

.layer-card.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(255, 111, 34, 0.12);
}

.layer-top {
  cursor: pointer;
}

.layer-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.object-color-input {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0;
  overflow: hidden;
  background: transparent;
  flex: 0 0 auto;
  cursor: pointer;
}

.object-thumbnail {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 1px solid rgba(3, 78, 88, 0.13);
  border-radius: 7px;
  background: #fbf6ee;
}

.object-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.object-color-input::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}

.layer-name {
  min-width: 0;
  flex: 1;
}

.layer-name input,
.layer-name span {
  display: block;
}

.layer-name input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.layer-name input:focus {
  border-bottom-color: var(--brand);
  outline: 0;
}

.layer-name input:disabled {
  opacity: 1;
  -webkit-text-fill-color: var(--ink);
}

.object-order-actions {
  display: grid;
  grid-template-columns: repeat(2, 42px);
  gap: 4px;
  flex: 0 0 auto;
}

.object-order-actions button {
  min-width: 42px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 5px;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.object-order-actions .object-lock-toggle,
.object-order-actions .object-delete-button {
  grid-column: span 1;
  width: 100%;
}

.object-order-actions .object-lock-toggle.is-active {
  border-color: var(--brand);
  background: rgba(255, 111, 34, 0.1);
  color: var(--brand);
}

.object-order-actions .object-delete-button {
  color: #a13b31;
}

.object-order-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

@media (max-width: 620px) {
  .layer-top {
    display: grid;
    grid-template-columns: auto 48px 28px minmax(0, 1fr);
  }

  .object-thumbnail {
    width: 48px;
    height: 48px;
  }

  .object-order-actions {
    grid-column: 2 / -1;
    grid-template-columns: repeat(4, minmax(42px, 1fr));
  }
}

.layer-name input {
  font-size: 14px;
}

.layer-name span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.layer-card select,
.layer-card input[type="range"] {
  width: 100%;
}

.layer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.layer-grid label {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.layer-advanced {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.object-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 1fr);
  align-items: end;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid rgba(255, 111, 34, 0.25);
}

.object-editor > strong {
  align-self: center;
  color: var(--brand);
  font-size: 12px;
}

.object-editor label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.layer-advanced label {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.layer-advanced select {
  width: 100%;
}

.stitch-angle-control {
  grid-column: 1 / -1;
}

.layer-advanced .edge-finish-control {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--ink);
  font-weight: 700;
}

.edge-finish-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.density-value {
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
}

.note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.wide-action {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.wide-action:hover,
.wide-action:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
}

.safety-badge {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.safety-badge.is-ready {
  color: #177245;
}

.safety-badge.is-review {
  color: #b43d2c;
}

.safety-badge.is-busy {
  color: #9b5a08;
}

.design-check-result {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.machine-proof {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.machine-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.machine-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.machine-proof-grid span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fbfaf8;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.machine-proof-grid strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.production-panel {
  background: #fbfcfa;
}

.engine-badge {
  padding: 4px 7px;
  border: 1px solid #cfd9d4;
  border-radius: 999px;
  background: #ffffff;
  color: #597168;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.engine-badge.is-ready {
  border-color: #16825b;
  background: #eaf7f1;
  color: #116746;
}

.engine-badge.is-busy {
  border-color: #e69b39;
  background: #fff6e8;
  color: #9b5a08;
}

.production-action {
  width: 100%;
  min-height: 42px;
  margin-top: 16px;
  border: 0;
  border-radius: 6px;
  background: #167567;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.production-action:hover,
.production-action:focus-visible {
  background: #0f6256;
}

.production-action:disabled {
  cursor: progress;
  opacity: 0.65;
}

.production-action-icon {
  font-size: 15px;
}

.panel-section .inline-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

@media (max-width: 1040px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .workflow {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
  }

  .brand {
    padding: 0 14px 0 0;
  }

  .step {
    min-width: 112px;
  }

  .workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .toolbar,
  .canvas-header,
  .metrics {
    align-items: stretch;
    flex-direction: column;
  }

  .view-toggle {
    width: 100%;
  }

  .view-toggle button {
    min-width: 0;
  }

  .sew-player {
    grid-template-columns: 36px 36px 36px 1fr;
  }

  #playerStatus {
    grid-column: 1 / -1;
    min-width: 0;
    text-align: left;
  }

  .workspace {
    padding: 12px;
  }

  .metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metrics div {
    min-width: 0;
  }
}

/* Editor-style workspace inspired by the Replit mockup. */
.editor-body {
  --bg: #f6f7f8;
  --panel: #ffffff;
  --panel-2: #f6f3ef;
  --line: #e8e3de;
  --ink: #342f2b;
  --muted: #8a8078;
  --brand: #ff6f22;
  --brand-dark: #e55f17;
  background: #f6f7f8;
  color: var(--ink);
}

.editor-body .shop-ribbon,
.editor-body .workflow,
.editor-body .studio,
.editor-body .workspace,
.editor-body .canvas-header,
.editor-body .sew-order,
.editor-body .metrics {
  all: unset;
}

.editor-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 72px 1fr 34px;
  background: #f7f8fa;
}

.editor-topbar {
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.topbar-left,
.topbar-center,
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar-center {
  justify-content: center;
}

.topbar-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.back-button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 34px;
  line-height: 1;
}

.brand-chip {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--brand);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(255, 111, 34, 0.18);
}

.design-title-wrap {
  min-width: 180px;
}

.design-name {
  width: min(280px, 28vw);
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: Raleway, "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.design-name:focus {
  outline: 0;
  box-shadow: inset 0 -2px 0 var(--brand);
}

.app-name {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.editor-body .step {
  height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.editor-body .step span {
  display: none;
}

.editor-body .step.is-active,
.editor-body .step:hover {
  background: #fff2ea;
  border-color: #ffd6c4;
  color: var(--brand);
}

.topbar-actions label {
  color: var(--muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.machine-format-control select {
  width: 190px;
}

#exportButton {
  white-space: nowrap;
}

.editor-body input[type="number"],
.editor-body select {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
}

.editor-main {
  min-height: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 360px;
}

.tool-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 12px;
  border-right: 1px solid var(--line);
  background: #ffffff;
}

.tool-button {
  position: relative;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

.tool-button .upload-tool-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.tool-button:hover,
.tool-button:focus-visible,
.tool-button.is-active {
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(255, 111, 34, 0.22);
}

.tool-button:focus-visible {
  outline: 2px solid rgba(255, 111, 34, 0.34);
  outline-offset: 3px;
}

.tool-button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  z-index: 20;
  min-width: max-content;
  padding: 7px 9px;
  border-radius: 6px;
  background: #1f1f1f;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-2px, -50%);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

.tool-button[data-tooltip]::before {
  content: "";
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  z-index: 21;
  border: 6px solid transparent;
  border-right-color: #1f1f1f;
  opacity: 0;
  pointer-events: none;
  transform: translate(-2px, -50%);
  transition: opacity 120ms ease, transform 120ms ease;
}

.tool-button[data-tooltip]:hover::after,
.tool-button[data-tooltip]:hover::before,
.tool-button[data-tooltip]:focus-visible::after,
.tool-button[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}

.empty-upload-button {
  justify-self: center;
  margin-top: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--brand);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 18px rgba(255, 111, 34, 0.2);
}

.empty-upload-button:hover,
.empty-upload-button:focus-visible {
  background: var(--brand-dark);
}

.view-mode-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #cad8e6;
  border-radius: 6px;
  background: rgba(247, 251, 255, 0.92);
  color: #35526c;
  font-size: 11px;
  text-transform: uppercase;
}

.view-mode-badge > span[aria-hidden="true"] {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #4c789f;
}

.view-mode-badge[data-mode="real"] {
  border-color: #e4d8ce;
  background: rgba(255, 252, 248, 0.92);
  color: #6d5141;
}

.view-mode-badge[data-mode="real"] > span[aria-hidden="true"] {
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 111, 34, 0.14);
}

.tool-divider {
  width: 40px;
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

.tool-spacer {
  flex: 1;
}

.editor-body .canvas-panel {
  min-width: 0;
  border: 0;
  box-shadow: none;
  background: #f7f8fa;
}

.editor-body .canvas-wrap {
  min-height: calc(100vh - 106px);
  height: 100%;
  background: #f7f8fa;
}

.editor-body canvas {
  width: 100%;
  height: 100%;
}

.editor-body canvas[data-tool="select"] {
  cursor: default;
}

.editor-body canvas[data-tool="satin"],
.editor-body canvas[data-tool="fill"] {
  cursor: crosshair;
}

.editor-body .empty-state strong {
  font-size: 22px;
}

.editor-body .inspector {
  min-width: 0;
  border-left: 1px solid var(--line);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  box-shadow: none;
  background: #ffffff;
}

.inspector-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 16px 16px 0;
  padding: 6px;
  border-radius: 7px;
  background: #f0ede9;
}

.hoop-mockup-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.hoop-mockup-option {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #f2ece4;
  cursor: pointer;
}

.hoop-mockup-option img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hoop-mockup-option::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  pointer-events: none;
}

.hoop-mockup-option.is-active {
  border-color: var(--iw-coral-dark, #c55747);
  box-shadow: 0 0 0 3px rgba(218, 102, 82, 0.18);
}

.hoop-mockup-option:focus-visible {
  outline: 3px solid var(--iw-teal, #236b6d);
  outline-offset: 2px;
}

.mockup-loading {
  grid-column: 1 / -1;
  margin: 8px 0;
  color: var(--iw-muted, #6f716e);
  font-size: 13px;
}

@media (max-width: 1180px) {
  .inspector-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.inspector-tabs button {
  height: 34px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.inspector-tabs button.is-active {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(31, 24, 18, 0.08);
}

.editor-body .panel-section {
  padding: 18px 18px 20px;
  border-bottom: 1px solid var(--line);
}

.editor-body .primary-button,
.editor-body .ghost-button,
.editor-body .secondary-button {
  height: 42px;
  border-radius: 6px;
}

.editor-body .primary-button {
  background: var(--brand);
  color: #ffffff;
}

.editor-body .primary-button.alt {
  background: #1f1f1f;
}

.editor-body .ghost-button {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}

.editor-body .view-toggle {
  height: 42px;
  border-radius: 6px;
  background: #f0ede9;
}

.editor-body .view-toggle button {
  height: 34px;
}

.editor-body .view-toggle button.is-active {
  background: #ffffff;
  color: var(--brand);
  box-shadow: 0 2px 8px rgba(31, 24, 18, 0.08);
}

.editor-body .unit-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  flex: 0 0 auto;
  height: 42px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f0ede9;
}

.editor-body .unit-toggle button {
  min-width: 40px;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.editor-body .unit-toggle button.is-active {
  background: #ffffff;
  color: var(--brand);
  box-shadow: 0 2px 8px rgba(31, 24, 18, 0.08);
}

.editor-body .timeline {
  display: grid;
  gap: 8px;
  overflow: visible;
}

.editor-body .timeline-item {
  min-width: 0;
}

.worksheet-panel {
  display: block;
}

.sheet-badge {
  min-width: 36px;
  padding: 4px 7px;
  border-radius: 4px;
  background: #fff0e8;
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.worksheet-panel .worksheet-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.worksheet-panel .worksheet-field input,
.worksheet-panel .worksheet-field select,
.worksheet-panel .worksheet-field textarea {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
}

.worksheet-panel .worksheet-field input,
.worksheet-panel .worksheet-field select {
  height: 38px;
  padding: 0 10px;
}

.worksheet-panel .worksheet-field textarea {
  min-height: 96px;
  padding: 9px 10px;
  resize: vertical;
  line-height: 1.45;
}

.worksheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.worksheet-options {
  min-width: 0;
  margin: 18px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfaf8;
}

.worksheet-options legend {
  padding: 0 5px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.worksheet-option-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px 10px;
}

.worksheet-panel .worksheet-check {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 34px;
  margin-top: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.worksheet-panel .worksheet-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.worksheet-panel .worksheet-check span {
  grid-row: auto;
  grid-column: auto;
  color: inherit;
  font-weight: inherit;
}

.worksheet-color-summary {
  margin-top: 16px;
  padding: 10px 11px;
  border-left: 3px solid var(--brand);
  background: #fff8f4;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.production-panel .production-value-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
}

.production-panel .production-value-control > .production-value-head {
  grid-row: auto;
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.production-panel .production-value-head > .setting-label-text {
  grid-row: auto;
  grid-column: auto;
  min-width: 0;
}

.production-panel .production-value-head > .production-exact-value {
  grid-row: auto;
  grid-column: auto;
  display: grid;
  grid-template-columns: 72px auto;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.production-panel .production-exact-value > span {
  grid-row: auto;
  grid-column: auto;
  color: var(--muted);
}

.production-panel .production-value-control > input[type="range"] {
  grid-row: auto;
  grid-column: 1;
  width: 100%;
  margin: 0;
}

.production-panel .production-exact-value input {
  width: 72px;
  height: 32px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  text-align: right;
}

.production-panel .production-exact-value input:focus {
  border-color: var(--brand);
  outline: 2px solid rgba(233, 66, 36, 0.14);
  outline-offset: 1px;
}

.text-tool-dialog {
  width: min(92vw, 460px);
  padding: 0;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: var(--iw-paper);
  color: var(--iw-ink);
  box-shadow: 0 24px 70px rgba(45, 38, 31, 0.25);
}

.text-tool-dialog::backdrop {
  background: rgba(21, 42, 42, 0.34);
  backdrop-filter: blur(3px);
}

.text-tool-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--iw-line);
}

.text-tool-heading > div {
  display: grid;
  gap: 2px;
}

.text-tool-heading span {
  color: var(--iw-coral-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.text-tool-heading h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 23px;
}

.text-tool-heading button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-size: 24px;
}

.text-tool-fields {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.text-tool-fields label {
  display: grid;
  gap: 6px;
  color: var(--iw-muted);
  font-size: 12px;
  font-weight: 800;
}

.text-tool-fields input[type="text"],
.text-tool-fields input[type="number"],
.text-tool-fields select {
  width: 100%;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--iw-line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--iw-ink);
  font: inherit;
}

.text-tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.text-tool-fields input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 4px;
  border: 1px solid var(--iw-line);
  border-radius: 7px;
  background: #ffffff;
}

.text-tool-measurement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.text-tool-measurement > span {
  color: var(--iw-muted);
  font-size: 11px;
}

.text-tool-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 20px;
}

.text-tool-actions button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-weight: 900;
}

.text-tool-actions button.is-primary {
  border-color: var(--iw-teal);
  background: var(--iw-teal);
  color: #ffffff;
}

#videoButton.is-recording,
#transparentVideoButton.is-recording {
  border-color: var(--brand);
  background: #fff0e8;
  color: var(--brand);
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border-top: 1px solid var(--line);
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
}

.status-bar span:first-child {
  min-width: 0;
  flex: 1;
}

.status-bar strong {
  color: var(--ink);
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.access-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 64px clamp(28px, 7vw, 116px);
  background-color: #fffdfa;
  background-image: url("assets/strawberry-sample.png");
  background-repeat: no-repeat;
  background-position: right -2vw center;
  background-size: min(56vw, 780px) auto;
  overflow: hidden;
}

.access-copy {
  width: min(520px, 48vw);
  position: relative;
  z-index: 1;
}

.access-brand,
.gallery-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.access-brand > span {
  color: #615c57;
  font-weight: 800;
}

.access-copy h1 {
  max-width: 520px;
  margin: 30px 0 12px;
  font-family: Raleway, "Open Sans", sans-serif;
  font-size: 52px;
  line-height: 1.03;
  letter-spacing: 0;
}

.access-copy > p {
  color: #5e5751;
  font-size: 18px;
  line-height: 1.5;
}

.newsletter-form {
  width: min(440px, 100%);
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.newsletter-form > label:not(.newsletter-consent) {
  display: grid;
  gap: 7px;
  color: #342f2b;
  font-size: 13px;
  font-weight: 800;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"],
.newsletter-form input[type="password"] {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #dcd4ce;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  color: #211f1d;
  font: inherit;
}

.password-input-wrap {
  position: relative;
  display: block;
}

.password-input-wrap input {
  padding-right: 72px;
}

.password-visibility-button {
  position: absolute;
  top: 50%;
  right: 7px;
  min-width: 56px;
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: #f5e7e5;
  color: #8e2d1f;
  font: 800 12px "Nunito Sans", sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
}

.password-visibility-button:hover,
.password-visibility-button:focus-visible {
  background: #efd6d2;
  outline: 2px solid rgba(228, 71, 40, 0.24);
  outline-offset: 1px;
}

.newsletter-form input:focus {
  outline: 2px solid rgba(255, 111, 34, 0.28);
  border-color: #ff6f22;
}

.verification-heading {
  display: grid;
  gap: 5px;
}

.verification-heading > span,
.preview-code-panel span {
  color: #77813f;
  font: 900 11px "Nunito Sans", sans-serif;
  text-transform: uppercase;
}

.verification-heading h2 {
  margin: 0;
  color: #292623;
  font: 800 28px "Fraunces", Georgia, serif;
}

.verification-heading p {
  margin: 0;
  color: #5e5751;
  font: 600 14px/1.45 "Nunito Sans", sans-serif;
}

.preview-code-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid #d3d8b7;
  border-radius: 6px;
  background: #f4f6e8;
}

.preview-code-panel[hidden] {
  display: none;
}

.preview-code-panel strong {
  color: #495021;
  font: 900 22px "Nunito Sans", sans-serif;
}

.verification-actions {
  align-items: center;
  flex-wrap: wrap;
}

.newsletter-actions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.newsletter-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  color: #5e5751;
  font-size: 12px;
  line-height: 1.45;
}

.newsletter-consent input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #e14121;
}

.newsletter-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
}

.gallery-new-button,
.gallery-sample-button,
.save-project-button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #e14121;
  color: #ffffff;
  font-weight: 800;
}

.gallery-new-button:hover,
.gallery-sample-button:hover,
.save-project-button:hover {
  background: #b92f18;
}

.subscriber-link {
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #342f2b;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.newsletter-status {
  min-height: 20px;
  color: #b92f18;
  font-size: 13px;
  font-weight: 700;
}

.newsletter-status[data-tone="success"] {
  color: #57621f;
}

.gallery-view {
  min-height: 100vh;
  background: #f5f6f7;
}

.gallery-topbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid #e5e0db;
  background: #ffffff;
}

.gallery-brand > div:last-child {
  display: grid;
  gap: 2px;
}

.gallery-brand strong {
  font-family: Raleway, "Open Sans", sans-serif;
  font-size: 16px;
}

.gallery-brand span {
  color: #837a73;
  font-size: 12px;
}

.gallery-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-search input {
  width: 240px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid #e1dbd5;
  border-radius: 6px;
  background: #f8f7f5;
  color: #342f2b;
  font: inherit;
}

.gallery-signout-button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #655f5a;
  font-weight: 800;
}

.gallery-main {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: 46px 0 70px;
}

.gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.gallery-heading h1 {
  font-size: 30px;
  letter-spacing: 0;
}

.gallery-heading span {
  display: block;
  margin-top: 5px;
  color: #837a73;
  font-size: 13px;
}

.gallery-sample-button {
  border-color: #e3ddd7;
  background: #ffffff;
  color: #342f2b;
}

.gallery-sample-button:hover {
  border-color: #e14121;
  background: #fff4f1;
  color: #b92f18;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.new-project-card,
.project-card {
  min-width: 0;
  min-height: 290px;
  border: 1px solid #e3ddd7;
  border-radius: 7px;
  background: #ffffff;
  overflow: hidden;
}

.new-project-card {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: #342f2b;
}

.new-project-card span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0e8;
  color: #e14121;
  font-size: 30px;
}

.new-project-card:hover {
  border-color: #e14121;
  background: #fffaf8;
}

.project-card {
  display: grid;
  grid-template-rows: 190px auto auto;
}

.project-open {
  width: 100%;
  height: 190px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #e8e2dc;
  background: #eef0f2;
  overflow: hidden;
}

.project-open img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-open:hover img {
  transform: scale(1.015);
}

.project-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #c7bdb5;
  font-size: 34px;
  font-weight: 800;
}

.project-details {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 14px 14px 8px;
}

.project-details strong {
  overflow: hidden;
  color: #342f2b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-details span {
  color: #837a73;
  font-size: 12px;
}

.project-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px 12px;
}

.project-card-actions button {
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: #655f5a;
  font-size: 12px;
  font-weight: 800;
}

.project-card-actions button:hover {
  background: #f3f0ed;
}

.project-card-actions .is-danger {
  color: #b92f18;
}

.save-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}

.save-state {
  min-width: 54px;
  color: #837a73;
  font-size: 11px;
  text-align: right;
}

.save-project-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

@media (max-width: 1580px) {
  .editor-topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 10px 14px;
  }

  .topbar-center {
    justify-content: flex-end;
    overflow-x: auto;
  }

  .topbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .topbar-actions::-webkit-scrollbar,
  .topbar-center::-webkit-scrollbar {
    display: none;
  }

  .topbar-actions > * {
    flex: 0 0 auto;
  }

  .editor-shell {
    grid-template-rows: auto 1fr 34px;
  }
}

@media (max-width: 860px) {
  .access-view {
    align-items: flex-start;
    padding: 36px 22px 460px;
    background-position: center calc(100% + 100px);
    background-size: 520px auto;
  }

  .access-copy {
    width: 100%;
  }

  .access-copy h1 {
    font-size: 40px;
  }

  .gallery-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .gallery-actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .project-search input {
    width: 190px;
  }

  .gallery-main {
    width: min(100% - 28px, 1480px);
    padding-top: 28px;
  }

  .gallery-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .editor-topbar {
    grid-template-columns: 1fr;
  }

  .topbar-center {
    display: none;
  }

  .app-name {
    display: none;
  }

  .design-title-wrap {
    min-width: 0;
  }

  .design-name {
    width: min(300px, calc(100vw - 245px));
  }

  .save-controls {
    margin-left: auto;
  }

  .editor-main {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .editor-body .inspector {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .tool-rail {
    padding-inline: 7px;
  }

  .tool-button {
    width: 38px;
    height: 38px;
  }
}

/* Ignite Wonder craft studio visual direction. */
.editor-body {
  --bg: #f7f1f2;
  --panel: #fffdf9;
  --panel-2: #f8e9ea;
  --line: #ded7d1;
  --ink: #292623;
  --muted: #746c65;
  --brand: #e44728;
  --brand-dark: #bd351d;
  --studio-pink: #f5dfe3;
  --studio-butter: #f1d982;
  --studio-sage: #77813f;
  --studio-mist: #dce7e3;
  --studio-blue: #5f7882;
  --studio-wood: #d69a64;
  background: var(--studio-mist);
  color: var(--ink);
  font-family: "Nunito Sans", "Open Sans", ui-sans-serif, system-ui, sans-serif;
}

.editor-shell {
  grid-template-rows: 78px minmax(0, 1fr) 38px;
  background: var(--studio-mist);
}

.editor-topbar {
  position: relative;
  z-index: 10;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 4px solid var(--studio-butter);
  background: #fffdf9;
  box-shadow: 0 8px 26px rgba(63, 48, 39, 0.08);
}

.topbar-left {
  gap: 9px;
}

.back-button {
  color: var(--studio-sage);
  transition: color 140ms ease, transform 140ms ease;
}

.back-button:hover,
.back-button:focus-visible {
  color: var(--brand);
  transform: translateX(-2px);
}

.brand-chip {
  width: 44px;
  height: 44px;
  border: 2px solid #fff8eb;
  border-radius: 8px;
  background: var(--brand);
  box-shadow: 4px 4px 0 var(--studio-butter);
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 800;
}

.design-name {
  height: 28px;
  color: #211f1d;
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
  font-weight: 800;
}

.app-name {
  color: var(--studio-sage);
  font-size: 11px;
  font-weight: 800;
}

.save-state {
  color: var(--studio-sage);
  font-weight: 800;
}

.save-project-button {
  border-color: #c9361d;
  border-radius: 7px;
  background: var(--brand);
  box-shadow: 0 4px 0 #b6311c;
}

.save-project-button:active {
  box-shadow: none;
  transform: translateY(2px);
}

.topbar-center {
  gap: 2px;
  padding: 5px;
  border: 1px solid #ead0d4;
  border-radius: 8px;
  background: var(--studio-pink);
}

.editor-body .step {
  min-width: 62px;
  height: 32px;
  padding: 0 9px;
  border-radius: 6px;
  color: #765e60;
  font-size: 11px;
  text-align: center;
}

.editor-body .step.is-active,
.editor-body .step:hover {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--brand);
  box-shadow: 0 3px 8px rgba(91, 47, 48, 0.1);
}

.topbar-actions {
  gap: 7px;
}

.topbar-actions label {
  color: #625b55;
  font-weight: 800;
}

.editor-body input[type="number"],
.editor-body select {
  height: 39px;
  border-color: #d9d0c9;
  border-radius: 7px;
  background: #ffffff;
}

.editor-body input[type="number"]:focus,
.editor-body select:focus {
  outline: 2px solid rgba(228, 71, 40, 0.22);
  border-color: var(--brand);
}

.editor-body .unit-toggle,
.editor-body .view-toggle {
  height: 39px;
  border-color: #ded3cd;
  border-radius: 7px;
  background: #eee9e4;
}

.editor-body .unit-toggle button,
.editor-body .view-toggle button {
  height: 31px;
  border-radius: 5px;
}

.editor-body .unit-toggle button.is-active,
.editor-body .view-toggle button.is-active {
  color: var(--brand);
  box-shadow: 0 2px 7px rgba(60, 41, 31, 0.1);
}

.editor-body .primary-button,
.editor-body .ghost-button,
.editor-body .secondary-button {
  height: 39px;
  border-radius: 7px;
}

.editor-body .primary-button {
  background: var(--brand);
  box-shadow: 0 4px 0 #b6311c;
}

.editor-body .primary-button:hover {
  background: var(--brand-dark);
}

.editor-body .primary-button:active {
  box-shadow: none;
  transform: translateY(2px);
}

.editor-body .ghost-button {
  min-width: 42px;
  padding: 0 11px;
  border-color: #d9d0c9;
  background: #fffdf9;
}

.editor-body .ghost-button:hover {
  border-color: var(--studio-sage);
  background: #f4f6ec;
  color: #515b27;
}

.editor-main {
  grid-template-columns: 64px minmax(0, 1fr) 348px;
  background: var(--studio-mist);
}

.tool-rail {
  gap: 10px;
  padding: 18px 10px;
  border-right-color: #d6cec7;
  background: #fff8f5;
}

.tool-button {
  width: 42px;
  height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #5d6550;
  font-size: 20px;
}

.tool-button:hover,
.tool-button:focus-visible {
  border-color: #d5bd98;
  background: #fff4dc;
  color: #68533b;
  box-shadow: 0 7px 16px rgba(91, 63, 42, 0.11);
}

.tool-button.is-active {
  border-color: var(--brand-dark);
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 7px 0 rgba(185, 49, 27, 0.22);
}

.tool-divider {
  background: #dccfc8;
}

.editor-body .canvas-panel,
.editor-body .canvas-wrap {
  background: var(--studio-mist);
}

.editor-body .canvas-wrap {
  min-height: calc(100vh - 116px);
  isolation: isolate;
}

.editor-body canvas {
  display: block;
}

.view-mode-badge {
  top: 20px;
  left: 22px;
  padding: 8px 11px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 253, 249, 0.94);
  color: var(--studio-blue);
  box-shadow: 0 7px 20px rgba(47, 65, 61, 0.12);
  font-size: 10px;
  font-weight: 900;
}

.view-mode-badge[data-mode="real"] {
  border: 0;
  background: rgba(255, 250, 242, 0.95);
  color: #70543f;
}

.view-mode-badge > span[aria-hidden="true"] {
  background: var(--studio-blue);
}

.view-mode-badge[data-mode="real"] > span[aria-hidden="true"] {
  background: var(--brand);
}

.empty-state {
  width: min(420px, calc(100% - 40px));
  padding: 30px;
  border: 1px solid rgba(127, 102, 82, 0.2);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.9);
  box-shadow: 0 14px 34px rgba(69, 54, 42, 0.12);
}

.editor-body .empty-state strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
}

.empty-upload-button {
  border: 1px solid var(--brand-dark);
  border-radius: 7px;
  background: var(--brand);
  box-shadow: 0 4px 0 #b6311c;
}

.editor-body .inspector {
  border-left-color: #d8d0ca;
  background: #fffdf9;
}

.inspector-tabs {
  gap: 3px;
  margin: 14px 14px 0;
  padding: 5px;
  border: 1px solid #e8d4d7;
  border-radius: 8px;
  background: var(--studio-pink);
}

.inspector-tabs button {
  border-radius: 6px;
  color: #795f61;
}

.inspector-tabs button.is-active {
  color: var(--brand-dark);
  box-shadow: 0 2px 7px rgba(75, 45, 43, 0.1);
}

.editor-body .panel-section {
  padding: 17px 17px 19px;
  border-bottom-color: #e7dfd8;
}

.editor-body .panel-section h2 {
  color: #282522;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
}

.production-panel {
  border-left: 4px solid var(--studio-sage);
  background: #f5f7ee;
}

.engine-badge.is-ready {
  border-color: var(--studio-sage);
  background: #ffffff;
  color: #58612e;
}

.production-action {
  border: 1px solid #59622e;
  border-radius: 7px;
  background: var(--studio-sage);
  box-shadow: 0 4px 0 #545c2d;
}

.production-action:hover,
.production-action:focus-visible {
  background: #626c34;
}

.wide-action {
  border-color: #d8cec7;
  border-radius: 7px;
  background: #ffffff;
}

.wide-action:hover,
.wide-action:focus-visible {
  border-color: var(--studio-sage);
  color: #535d2a;
}

.machine-proof-grid span {
  border-radius: 6px;
  background: #f7f3ef;
}

.layer-card {
  border-color: #e0d7d1;
  border-radius: 8px;
  background: #fffdf9;
}

.deferred-layer-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #b8d4ce;
  border-radius: 8px;
  background: var(--iw-teal-soft);
  color: var(--iw-ink);
}

.deferred-layer-card div {
  display: grid;
  gap: 4px;
}

.deferred-layer-card strong {
  font-size: 13px;
}

.deferred-layer-card span {
  color: #42676a;
  font-size: 12px;
  line-height: 1.45;
}

.deferred-layer-card button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: var(--iw-teal);
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.deferred-layer-card button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.swatch {
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(41, 38, 35, 0.16);
}

.status-bar {
  gap: 16px;
  border-top: 0;
  background: #35453e;
  color: #dbe6e1;
  font-size: 12px;
}

.status-bar strong {
  color: #ffffff;
}

.status-bar span:first-child {
  color: #fff3d0;
  font-weight: 700;
}

.access-view {
  background-color: #fff7f2;
}

.access-copy h1,
.gallery-heading h1 {
  font-family: "Fraunces", Georgia, serif;
}

.access-copy h1 {
  color: #28231f;
}

.access-copy > p {
  color: #655c54;
}

.gallery-view {
  background: #f6eff0;
}

.gallery-topbar {
  min-height: 78px;
  border-bottom: 4px solid var(--studio-butter);
  background: #fffdf9;
  box-shadow: 0 7px 24px rgba(64, 43, 36, 0.06);
}

.gallery-brand strong {
  color: #28231f;
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
}

.gallery-brand span {
  color: var(--studio-sage);
  font-weight: 800;
}

.project-search input {
  border-color: #d9d0c9;
  border-radius: 7px;
  background: #ffffff;
}

.gallery-signout-button {
  color: #6d655e;
}

.gallery-new-button,
.gallery-sample-button {
  border-radius: 7px;
}

.gallery-new-button {
  border-color: var(--brand-dark);
  background: var(--brand);
  box-shadow: 0 4px 0 #b6311c;
}

.gallery-main {
  padding-top: 42px;
}

.gallery-heading {
  margin-bottom: 28px;
}

.gallery-heading h1 {
  margin: 0;
  color: #2a2724;
  font-size: 36px;
}

.gallery-heading span {
  color: #756c65;
  font-weight: 700;
}

.gallery-sample-button {
  border-color: #c9cfaa;
  background: #f7f8ef;
  color: #515b28;
  box-shadow: 0 4px 0 #d9dfbd;
}

.gallery-sample-button:hover {
  border-color: var(--studio-sage);
  background: #ffffff;
  color: #4f5927;
}

.project-grid {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px;
}

.new-project-card,
.project-card {
  min-height: 320px;
  border-color: #dfd2cd;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(74, 52, 45, 0.08);
}

.new-project-card {
  border: 2px dashed #d5b8b4;
  background: #fff9f6;
}

.new-project-card span {
  background: var(--studio-butter);
  color: #8f4a2e;
}

.project-card {
  grid-template-rows: 214px auto auto;
  border-top: 5px solid var(--studio-sage);
  background: #fffdf9;
}

.project-card:nth-child(3n + 2) {
  border-top-color: var(--brand);
}

.project-card:nth-child(3n + 3) {
  border-top-color: var(--studio-butter);
}

.project-open {
  height: 214px;
  padding: 12px;
  border-bottom-color: #eadfda;
  background: #edf2ee;
}

.project-open img {
  object-fit: contain;
  background: #fffaf7;
}

.project-details {
  padding: 15px 16px 8px;
}

.project-details strong {
  color: #2c2825;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
}

.project-card-actions {
  padding-inline: 14px;
}

.project-card-actions button {
  border-radius: 5px;
}

@media (max-width: 1580px) {
  .editor-topbar {
    padding: 10px 14px 12px;
  }

  .topbar-center {
    justify-self: end;
  }

  .topbar-actions {
    padding-top: 3px;
  }

  .editor-shell {
    grid-template-rows: auto minmax(0, 1fr) 38px;
  }

  .editor-body .canvas-wrap {
    min-height: calc(100vh - 176px);
  }
}

@media (max-width: 1040px) {
  .editor-main {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .editor-body .inspector {
    grid-column: 1 / -1;
    border-top: 1px solid #d8d0ca;
    border-left: 0;
  }

  .editor-body .canvas-wrap {
    min-height: 68vh;
  }

  .status-bar {
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 680px) {
  .editor-topbar {
    padding-inline: 10px;
  }

  .topbar-actions {
    width: calc(100vw - 20px);
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 2px 0 7px;
    scrollbar-width: none;
  }

  .topbar-actions::-webkit-scrollbar {
    display: none;
  }

  .topbar-actions > * {
    flex: 0 0 auto;
  }

  .design-name {
    width: min(230px, calc(100vw - 220px));
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gallery-heading h1 {
    font-size: 30px;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }
}

/* Stable canvas sizing across desktop, iPad rotation, and phones. */
.editor-body .canvas-panel {
  display: block;
  grid-template-rows: none;
  overflow: hidden;
}

@media (min-width: 1041px) {
  .editor-shell {
    width: 100%;
    height: 100dvh;
    min-height: 640px;
    overflow: hidden;
  }

  .editor-main {
    min-height: 0;
    overflow: hidden;
  }

  .editor-body .canvas-panel,
  .editor-body .canvas-wrap {
    height: 100%;
    min-height: 0;
  }

  .editor-body .inspector,
  .tool-rail {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 1040px) {
  .editor-shell {
    min-height: 100dvh;
    height: auto;
  }

  .editor-main {
    grid-template-rows: minmax(540px, 68dvh) auto;
    align-items: stretch;
  }

  .editor-body .canvas-panel,
  .editor-body .canvas-wrap {
    height: 100%;
    min-height: 0;
  }

  .tool-rail {
    grid-row: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tool-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    touch-action: manipulation;
  }

  .editor-body .inspector {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 1100px) {
  .editor-topbar {
    grid-template-columns: 1fr;
  }

  .topbar-center {
    display: none;
  }

  .app-name {
    display: none;
  }
}

@media (max-width: 680px) {
  .editor-main {
    grid-template-rows: minmax(500px, 66dvh) auto;
  }

  .tool-rail {
    gap: 8px;
    padding: 14px 7px;
  }

  .tool-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    touch-action: manipulation;
  }

  .editor-body button,
  .editor-body select,
  .editor-body input {
    touch-action: manipulation;
  }
}

/* Ignite Wonder mobile studio */
:root {
  --iw-ivory: #f6f1e9;
  --iw-paper: #fffdf8;
  --iw-teal: #526f82;
  --iw-teal-soft: #dbe7ed;
  --iw-coral: #c47b68;
  --iw-coral-dark: #a95443;
  --iw-peach: #dfc7bc;
  --iw-gold: #dc9a36;
  --iw-lilac: #c7b8cf;
  --iw-sky: #a9c2d2;
  --iw-leaf: #747446;
  --iw-ink: #292a27;
  --iw-muted: #62645f;
  --iw-line: #d9cec3;
  --iw-shadow: 0 12px 30px rgba(41, 42, 39, 0.12);
  --iw-soft-shadow: 0 5px 16px rgba(41, 42, 39, 0.09);
}

body[data-account-theme="sunshine"] {
  --iw-teal: #9a451c;
  --iw-teal-soft: #fff0a8;
  --iw-coral: #f47c20;
  --iw-coral-dark: #c94e18;
  --iw-gold: #f6c945;
}

body[data-account-theme="berry"] {
  --iw-teal: #71305e;
  --iw-teal-soft: #f6dbea;
  --iw-coral: #df4f83;
  --iw-coral-dark: #b42c67;
  --iw-gold: #f3bd4c;
}

body[data-account-theme="cobalt"] {
  --iw-teal: #234fa8;
  --iw-teal-soft: #dce8ff;
  --iw-coral: #ef6474;
  --iw-coral-dark: #c64258;
  --iw-gold: #f4ca4f;
}

body[data-account-theme="lilac"] {
  --iw-teal: #67479b;
  --iw-teal-soft: #e7dcff;
  --iw-coral: #ec668b;
  --iw-coral-dark: #bb426d;
  --iw-gold: #efc956;
}

/* Whimsical stitched trails carry the welcome-screen energy through Studio. */
.gallery-main,
.home-studio-intro,
.section-page-heading,
.profile-panel,
.detail-hoop-stage,
.detail-information,
.editor-topbar,
.new-design-dialog,
.profile-edit-dialog,
.studio-action-dialog,
.analysis-review-dialog,
.operation-status {
  position: relative;
}

.gallery-main::before,
.home-studio-intro::before,
.section-page-heading::after,
.profile-panel::before,
.detail-hoop-stage::before,
.detail-hoop-stage::after,
.detail-information::before,
.editor-topbar::after,
.new-design-dialog::before,
.profile-edit-dialog::before,
.studio-action-dialog::before,
.analysis-review-dialog::before,
.operation-status::after {
  content: "";
  position: absolute;
  width: 154px;
  height: 74px;
  border: 2px dashed color-mix(in srgb, var(--iw-coral) 58%, transparent);
  border-color: color-mix(in srgb, var(--iw-coral) 58%, transparent) transparent transparent transparent;
  border-radius: 50%;
  pointer-events: none;
}

.gallery-main::before {
  top: 112px;
  left: -78px;
  width: 210px;
  height: 112px;
  transform: rotate(31deg);
}

.home-studio-intro::before {
  left: -38px;
  bottom: 22px;
  width: 190px;
  height: 96px;
  border-color: rgba(255, 255, 255, 0.62) transparent transparent transparent;
  transform: rotate(-17deg);
}

.section-page-heading::after {
  right: 12px;
  bottom: -46px;
  width: 128px;
  height: 62px;
  border-color: color-mix(in srgb, var(--iw-gold) 82%, transparent) transparent transparent transparent;
  transform: rotate(13deg);
}

.profile-panel::before {
  top: 22px;
  left: calc(50% - 176px);
  width: 118px;
  height: 58px;
  transform: rotate(-24deg);
}

.detail-hoop-stage::before {
  top: 50px;
  left: clamp(8px, 8vw, 90px);
  width: 180px;
  height: 92px;
  transform: rotate(25deg);
}

.detail-hoop-stage::after {
  right: clamp(6px, 7vw, 84px);
  bottom: 64px;
  width: 142px;
  height: 70px;
  border-color: color-mix(in srgb, var(--iw-gold) 82%, transparent) transparent transparent transparent;
  transform: rotate(-31deg);
}

.detail-information::before {
  right: 16px;
  top: 24px;
  width: 104px;
  height: 52px;
  opacity: 0.72;
  transform: rotate(20deg);
}

.editor-topbar::after {
  left: 48%;
  top: -38px;
  width: 136px;
  height: 68px;
  opacity: 0.55;
  transform: rotate(9deg);
}

.new-design-dialog::before,
.profile-edit-dialog::before,
.studio-action-dialog::before,
.analysis-review-dialog::before {
  top: 10px;
  right: -46px;
  width: 132px;
  height: 66px;
  opacity: 0.56;
  transform: rotate(-18deg);
}

.operation-status::after {
  right: 22px;
  bottom: -29px;
  width: 102px;
  height: 50px;
  opacity: 0.58;
  transform: rotate(-15deg);
}

.gallery-main::after,
.profile-panel::after,
.detail-information::after,
.new-design-dialog::after,
.profile-edit-dialog::after,
.studio-action-dialog::after,
.analysis-review-dialog::after {
  content: "\2726  \00B7  \2661";
  position: absolute;
  color: color-mix(in srgb, var(--iw-gold) 88%, var(--iw-coral));
  font-size: 18px;
  letter-spacing: 7px;
  line-height: 1;
  pointer-events: none;
}

.gallery-main::after {
  top: 210px;
  right: -16px;
  transform: rotate(12deg);
}

.profile-panel::after {
  top: 68px;
  left: calc(50% + 90px);
  transform: rotate(8deg);
}

.detail-information::after {
  right: 22px;
  top: 82px;
  opacity: 0.7;
}

.new-design-dialog::after,
.profile-edit-dialog::after,
.studio-action-dialog::after,
.analysis-review-dialog::after {
  right: 24px;
  bottom: 18px;
  opacity: 0.48;
}

.gallery-main > *,
.home-studio-intro > *,
.section-page-heading > *,
.profile-panel > *,
.detail-information > *,
.editor-topbar > *,
.new-design-dialog > *,
.profile-edit-dialog > *,
.studio-action-dialog > *,
.analysis-review-dialog > *,
.operation-status > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .gallery-main::before {
    left: -104px;
    opacity: 0.55;
  }

  .gallery-main::after {
    right: 4px;
    top: 184px;
    opacity: 0.62;
  }

  .detail-hoop-stage::before {
    left: -70px;
    opacity: 0.55;
  }

  .detail-hoop-stage::after {
    right: -54px;
    opacity: 0.55;
  }

  .editor-topbar::after,
  .detail-information::before,
  .detail-information::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-main::before,
  .home-studio-intro::before,
  .section-page-heading::after,
  .profile-panel::before,
  .detail-hoop-stage::before,
  .detail-hoop-stage::after,
  .detail-information::before,
  .editor-topbar::after,
  .operation-status::after {
    animation: none;
  }
}

[hidden] {
  display: none !important;
}

.editor-body {
  min-width: 320px;
  background: #f5f1eb;
  color: var(--iw-ink);
  font-family: "Nunito Sans", "Open Sans", ui-sans-serif, system-ui, sans-serif;
}

.studio-icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.94);
  color: var(--iw-ink);
  box-shadow: var(--iw-soft-shadow);
  font-size: 23px;
  line-height: 1;
}

.studio-icon-button:hover,
.studio-icon-button:focus-visible {
  border-color: #e7b6a7;
  outline: 3px solid rgba(255, 112, 94, 0.14);
}

.studio-icon-button[aria-pressed="true"] {
  border-color: #f1a596;
  background: #fff0ec;
  color: var(--iw-coral-dark);
}

/* Welcome and account access */
.access-view {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.98), transparent 46%),
    var(--iw-ivory);
}

.welcome-splash {
  position: relative;
  width: min(100%, 520px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(42px, 8vh, 78px) 28px 146px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 250, 243, 0.74), rgba(255, 250, 243, 0.9)),
    repeating-linear-gradient(0deg, rgba(112, 92, 68, 0.018) 0 1px, transparent 1px 4px);
}

.welcome-stitch {
  position: absolute;
  width: 116px;
  height: 92px;
  border: 2px dashed rgba(255, 112, 94, 0.55);
  border-color: rgba(255, 112, 94, 0.55) transparent transparent transparent;
  border-radius: 50%;
}

.welcome-stitch-left {
  top: 22px;
  left: -24px;
  transform: rotate(28deg);
}

.welcome-stitch-right {
  top: 68px;
  right: -28px;
  transform: rotate(-24deg);
}

.welcome-sparkles {
  position: absolute;
  top: 48px;
  color: var(--iw-gold);
  font-size: 23px;
  letter-spacing: 14px;
}

.welcome-hoop,
.banner-hoop,
.inspiration-hoop,
.detail-hoop {
  position: relative;
  border-radius: 50%;
  background: #fff7eb;
  box-shadow:
    0 0 0 7px #aa7048,
    0 0 0 11px #e2ab73,
    var(--iw-shadow);
}

.welcome-hoop {
  width: 154px;
  height: 154px;
  flex: 0 0 154px;
  display: grid;
  place-items: center;
  margin-top: clamp(40px, 8vh, 72px);
}

.welcome-hoop::before,
.banner-hoop::before,
.detail-hoop::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(16deg, rgba(121, 94, 63, 0.035) 0 1px, transparent 1px 4px),
    #fff8ed;
}

.welcome-hoop img,
.banner-hoop img,
.inspiration-hoop img,
.detail-hoop img {
  position: relative;
  z-index: 1;
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.welcome-hoop-clasp,
.detail-hoop-clasp {
  position: absolute;
  top: -28px;
  left: 50%;
  z-index: 2;
  width: 54px;
  height: 20px;
  border: 4px solid #163f3b;
  border-radius: 6px;
  background: #2e6a5c;
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 3px #4a8877;
}

.welcome-wordmark {
  display: grid;
  margin-top: 30px;
  text-align: center;
  line-height: 0.85;
}

.welcome-wordmark strong {
  color: var(--iw-teal);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(52px, 14vw, 76px);
  font-weight: 800;
}

.welcome-wordmark strong:nth-child(2) {
  color: var(--iw-coral);
}

.welcome-wordmark span {
  margin-top: 20px;
  color: var(--iw-teal);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.welcome-product-intro {
  display: grid;
  justify-items: center;
  gap: 9px;
  margin: 24px 0 0;
  color: var(--iw-ink);
  text-align: center;
}

.welcome-product-intro h1 {
  max-width: 390px;
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(27px, 6vw, 34px);
  line-height: 1.08;
}

.welcome-product-intro p {
  max-width: 390px;
  margin: 0;
  color: #45666a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.welcome-meadow {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 164px;
  background: var(--iw-sky);
}

.welcome-meadow::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: 2px dashed rgba(255, 225, 164, 0.72);
}

.welcome-flower {
  position: absolute;
  color: #ffd36c;
  font-size: 25px;
}

.welcome-flower-one {
  top: -15px;
  left: 24%;
  color: var(--iw-coral);
}

.welcome-flower-two {
  top: 17px;
  right: 23%;
}

.welcome-flower-three {
  top: 46px;
  right: 40%;
  color: #f39a73;
}

.welcome-actions {
  position: absolute;
  right: 28px;
  bottom: 32px;
  left: 28px;
  z-index: 3;
  display: grid;
  gap: 14px;
}

.welcome-create-button {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  border: 0;
  border-radius: 8px;
  background: var(--iw-coral);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(228, 77, 58, 0.29);
  font-size: 17px;
  font-weight: 900;
}

.welcome-create-button:hover,
.welcome-create-button:focus-visible {
  background: var(--iw-coral-dark);
}

.welcome-signin-button {
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 13px;
}

.welcome-signin-button strong {
  color: #ffe0cd;
}

.access-copy {
  position: relative;
  width: min(100% - 30px, 470px);
  max-height: calc(100dvh - 30px);
  overflow-y: auto;
  padding: 58px 30px 34px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.98);
  box-shadow: 0 24px 64px rgba(67, 50, 36, 0.17);
}

.auth-back-button {
  position: absolute;
  top: 17px;
  left: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
  font-size: 28px;
}

.auth-website-link {
  position: absolute;
  top: 17px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.auth-website-link:hover {
  border-color: var(--iw-coral);
  color: var(--iw-coral-dark);
}

.auth-website-link:focus-visible {
  outline: 3px solid var(--iw-yellow);
  outline-offset: 3px;
}

.access-brand {
  display: grid;
  justify-content: center;
  gap: 0;
  margin: 0 0 24px;
  text-align: center;
}

.access-brand-main {
  color: var(--iw-teal);
  font-family: "Fraunces", Georgia, serif;
  font-size: 27px;
  font-weight: 800;
}

.access-brand-script {
  margin-top: -6px;
  color: var(--iw-coral);
  font-family: cursive;
  font-size: 24px;
  transform: rotate(-5deg);
}

.access-copy h1 {
  margin: 0 0 8px;
  color: var(--iw-ink);
  font-size: clamp(28px, 8vw, 38px);
  text-align: center;
}

.access-copy > p {
  margin: 0 auto 26px;
  max-width: 340px;
  color: var(--iw-muted);
  text-align: center;
  line-height: 1.5;
}

.newsletter-form {
  gap: 16px;
}

.newsletter-form > label {
  gap: 7px;
  color: var(--iw-ink);
  font-size: 13px;
  font-weight: 800;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"],
.newsletter-form input[type="password"] {
  min-height: 48px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
}

.newsletter-form input:focus {
  border-color: var(--iw-coral);
  outline: 3px solid rgba(255, 112, 94, 0.13);
}

.newsletter-consent {
  align-items: flex-start;
  font-weight: 600 !important;
  line-height: 1.45;
}

.newsletter-actions {
  gap: 9px;
}

.newsletter-actions .gallery-new-button {
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  background: var(--iw-teal);
  box-shadow: none;
}

.newsletter-actions .subscriber-link {
  color: var(--iw-coral-dark);
}

.password-visibility-button {
  color: var(--iw-teal);
}

.preview-code-panel {
  border-color: #e8d7ba;
  background: #fff5d9;
}

/* Home, projects, shop, and profile */
.gallery-view {
  min-height: 100dvh;
  padding-bottom: 82px;
  background:
    repeating-linear-gradient(0deg, rgba(112, 92, 68, 0.015) 0 1px, transparent 1px 4px),
    var(--iw-ivory);
}

.studio-home-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 82px;
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(18px, 4vw, 34px);
  border-bottom: 1px solid rgba(234, 223, 211, 0.78);
  background: rgba(255, 250, 243, 0.94);
  backdrop-filter: blur(16px);
}

.studio-wordmark {
  display: grid;
  justify-items: center;
  line-height: 1;
}

.studio-wordmark strong {
  color: var(--iw-teal);
  font-family: "Fraunces", Georgia, serif;
  font-size: 23px;
}

.studio-wordmark span {
  margin-top: -2px;
  color: var(--iw-coral);
  font-family: cursive;
  font-size: 20px;
  transform: rotate(-4deg);
}

.studio-account-button {
  width: 46px;
  height: 46px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--iw-line);
  border-radius: 50%;
  background: #fff;
  color: var(--iw-teal);
  font-weight: 900;
  cursor: pointer;
}

.studio-account-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-navigation-dialog {
  width: min(430px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--iw-paper);
  box-shadow: 0 24px 70px rgba(36, 43, 41, 0.24);
}

.studio-navigation-dialog::backdrop {
  background: rgba(23, 46, 45, 0.32);
  backdrop-filter: blur(3px);
}

.studio-navigation-sheet header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  border-bottom: 1px solid var(--iw-line);
}

.studio-navigation-sheet header span {
  color: var(--iw-coral-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-navigation-sheet h2 {
  margin: 4px 0 0;
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
}

.studio-navigation-sheet header button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--iw-line);
  border-radius: 50%;
  background: #fff;
  color: var(--iw-ink);
  font-size: 22px;
}

.studio-navigation-sheet nav {
  display: grid;
  gap: 4px;
  padding: 14px;
  max-height: min(68vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.studio-menu-group-label {
  margin: 10px 12px 4px;
  color: #85766d;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-menu-secondary-label {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--iw-line);
}

.studio-navigation-sheet nav button,
.studio-navigation-sheet nav a {
  min-height: 50px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--iw-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.studio-navigation-sheet nav button:hover,
.studio-navigation-sheet nav button:focus-visible,
.studio-navigation-sheet nav a:hover,
.studio-navigation-sheet nav a:focus-visible {
  border-color: var(--iw-line);
  background: #fff4eb;
}

.studio-navigation-sheet nav .studio-menu-primary {
  border-color: #f5b4a4;
  background: #fff0eb;
  color: var(--iw-coral-dark);
}

.studio-navigation-sheet nav .studio-menu-primary:hover,
.studio-navigation-sheet nav .studio-menu-primary:focus-visible {
  border-color: var(--iw-coral);
  background: #ffe5de;
}

.studio-navigation-sheet nav button.has-unread span {
  color: var(--iw-coral-dark);
}

.studio-navigation-sheet nav button:has(small) {
  grid-template-rows: auto auto;
  padding-block: 9px;
}

.studio-navigation-sheet nav button:has(small) > span {
  grid-row: 1 / 3;
}

.studio-navigation-sheet nav small {
  grid-column: 2;
  color: #81736b;
  font-size: 12px;
  line-height: 1.35;
}

.studio-waitlist-dialog {
  width: min(520px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--iw-paper);
  box-shadow: 0 24px 70px rgba(36, 43, 41, 0.24);
}

.studio-waitlist-dialog::backdrop {
  background: rgba(23, 46, 45, 0.34);
  backdrop-filter: blur(4px);
}

.studio-waitlist-dialog form {
  display: grid;
  gap: 15px;
  padding: 22px;
}

.studio-waitlist-dialog header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.studio-waitlist-dialog header span {
  color: var(--iw-coral-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-waitlist-dialog h2 {
  margin: 4px 0 0;
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
}

.studio-waitlist-dialog header button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--iw-line);
  border-radius: 50%;
  background: #fff;
  font-size: 22px;
}

.studio-waitlist-dialog label:not(.studio-waitlist-consent) {
  display: grid;
  gap: 6px;
  color: var(--iw-ink);
  font-size: 12px;
  font-weight: 900;
}

.studio-waitlist-dialog input[type="text"],
.studio-waitlist-dialog input[type="email"] {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
}

.studio-waitlist-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--iw-muted);
  font-size: 13px;
}

.studio-waitlist-consent input {
  width: 20px;
  height: 20px;
  accent-color: var(--iw-coral);
}

.gallery-main {
  width: min(100%, 1180px);
  min-height: calc(100dvh - 165px);
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 34px) 40px;
}

.studio-section {
  width: 100%;
}

.create-banner {
  position: relative;
  min-height: 180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 24px;
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(255, 112, 94, 0.97), rgba(255, 157, 116, 0.9)),
    var(--iw-coral);
  color: #ffffff;
  box-shadow: 0 13px 30px rgba(221, 96, 70, 0.21);
}

.create-banner h1 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.25;
}

.banner-new-button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--iw-teal);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(5, 69, 73, 0.22);
  font-weight: 900;
}

.banner-hoop {
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  justify-self: end;
}

.banner-hoop > span {
  position: absolute;
  top: -22px;
  left: 50%;
  width: 48px;
  height: 18px;
  border: 4px solid #16443f;
  border-radius: 5px;
  background: #377465;
  transform: translateX(-50%);
}

.banner-sparkle {
  position: absolute;
  right: 177px;
  bottom: 18px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 19px;
  letter-spacing: 7px;
}

.home-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.home-quick-button {
  position: relative;
  min-width: 0;
  min-height: 96px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 10px 4px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.95);
  color: var(--iw-ink);
  box-shadow: var(--iw-soft-shadow);
}

.home-quick-button.has-update {
  border-color: #ef9f8d;
  background: #fff6ef;
  box-shadow: 0 8px 24px rgba(218, 101, 76, 0.16);
}

.home-update-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 34px;
  padding: 3px 7px;
  border-radius: 8px;
  background: var(--iw-coral);
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-quick-button:hover,
.home-quick-button:focus-visible {
  border-color: #eab9aa;
  transform: translateY(-2px);
}

.home-quick-button strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 900;
}

.quick-heart {
  background: #fff0dc;
  color: var(--iw-coral);
}

.quick-star {
  background: #eee8f8;
  color: #856aa7;
}

.quick-shop {
  background: #e2f0ec;
  color: var(--iw-teal);
}

.home-dashboard {
  max-width: 1080px;
  margin: 0 auto;
}

.home-studio-intro {
  position: relative;
  min-height: 286px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  padding: 40px 44px;
  border: 1px solid #c9ddd8;
  border-radius: 24px;
  background: var(--iw-teal-soft);
}

.home-studio-intro::after {
  content: "✦  ·  ✧";
  position: absolute;
  right: 270px;
  bottom: 26px;
  color: rgba(6, 79, 85, 0.27);
  font-size: 20px;
}

.home-intro-copy {
  position: relative;
  z-index: 2;
  max-width: 610px;
}

.home-intro-copy > span,
.home-section-heading > div > span {
  color: var(--iw-coral-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-intro-copy h1 {
  max-width: 580px;
  margin: 7px 0 12px;
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.08;
}

.home-intro-copy p {
  max-width: 560px;
  margin: 0;
  color: #496662;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.home-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.home-primary-action,
.home-secondary-action,
.projects-new-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 900;
}

.home-primary-action,
.projects-new-button {
  border: 1px solid var(--iw-coral);
  background: var(--iw-coral);
  color: var(--iw-ink);
  box-shadow: 0 5px 16px rgba(233, 88, 72, 0.19);
}

.home-primary-action:hover,
.home-primary-action:focus-visible,
.projects-new-button:hover,
.projects-new-button:focus-visible {
  border-color: var(--iw-coral-dark);
  background: var(--iw-coral-dark);
  color: #ffffff;
}

.home-secondary-action {
  border: 1px solid #87aca7;
  background: rgba(255, 253, 249, 0.86);
  color: var(--iw-teal);
}

.home-intro-hoop {
  position: relative;
  width: 216px;
  height: 216px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 12px solid #bd8457;
  border-radius: 50%;
  background:
    repeating-linear-gradient(18deg, rgba(111, 91, 69, 0.03) 0 1px, transparent 1px 4px),
    var(--iw-paper);
  box-shadow:
    inset 0 0 0 4px #e0ac77,
    var(--iw-shadow);
}

.home-intro-hoop img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.home-hoop-clasp {
  position: absolute;
  top: -35px;
  left: 50%;
  width: 58px;
  height: 22px;
  border: 4px solid #16443f;
  border-radius: 7px;
  background: #377465;
  transform: translateX(-50%);
}

.home-plan-section {
  margin-top: 40px;
}

.home-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.home-section-heading h2 {
  margin: 3px 0 0;
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
}

.home-section-heading button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--iw-line);
  border-radius: 12px;
  background: var(--iw-paper);
  color: var(--iw-teal);
  font-weight: 900;
}

.home-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.home-plan-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--iw-line);
  border-radius: 16px;
  background: var(--iw-paper);
  box-shadow: var(--iw-soft-shadow);
}

.home-plan-card.is-current {
  border-color: #92bbb4;
  box-shadow: inset 0 4px 0 var(--iw-teal), var(--iw-soft-shadow);
}

.home-plan-badge {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--iw-teal-soft);
  color: var(--iw-teal);
  font-size: 11px;
  font-weight: 900;
}

.home-plan-badge.is-planned {
  background: #fff3c9;
  color: #7a6225;
}

.home-plan-card h3 {
  margin: 14px 0 4px;
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 23px;
  font-weight: 600;
}

.home-plan-card > strong {
  color: var(--iw-teal);
  font-size: 20px;
}

.home-plan-card > strong small {
  color: var(--iw-muted);
  font-size: 12px;
}

.home-plan-card ul {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  color: var(--iw-muted);
  font-size: 13px;
  line-height: 1.4;
  list-style: none;
}

.home-plan-card li::before {
  content: "✓";
  margin-right: 8px;
  color: var(--iw-leaf);
  font-weight: 900;
}

.home-plan-card > p {
  margin: 18px 0;
  color: var(--iw-muted);
  font-size: 13px;
  line-height: 1.55;
}

.home-credit-status {
  display: grid;
  gap: 3px;
  margin-top: 18px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #eef6f3;
}

.home-credit-status strong {
  color: var(--iw-ink);
  font-size: 14px;
}

.home-credit-status span,
.home-plan-promise {
  color: var(--iw-muted);
  font-size: 12px;
  line-height: 1.4;
}

.home-credit-status span.is-empty {
  color: #a24337;
  font-weight: 800;
}

.home-plan-promise {
  display: block;
  padding: 11px 12px;
  border-radius: 12px;
  background: #fff7dc;
  color: #68562d;
  font-weight: 800;
}

.home-account-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: var(--iw-paper);
  box-shadow: var(--iw-soft-shadow);
}

.home-account-summary > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.home-account-summary > div > span {
  color: var(--iw-coral-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-account-summary strong {
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
}

.home-account-summary small {
  color: var(--iw-muted);
  font-size: 11px;
  line-height: 1.35;
}

.home-account-summary small.is-empty {
  color: #a24337;
  font-weight: 800;
}

.home-account-summary button {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-weight: 900;
}

.home-dashboard .home-quick-actions {
  margin-top: 24px;
}

.home-dashboard .home-quick-button {
  border-radius: 16px;
}

.home-recent-heading {
  margin-top: 38px;
}

.home-recent-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-recent-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--iw-line);
  border-radius: 16px;
  background: var(--iw-paper);
  box-shadow: var(--iw-soft-shadow);
}

.home-recent-open {
  width: 100%;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--iw-ink);
  text-align: left;
}

.home-recent-card:hover,
.home-recent-card:focus-within {
  border-color: #92bbb4;
  transform: translateY(-2px);
}

.home-recent-hoop {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border: 7px solid #bd8457;
  border-radius: 50%;
  background: #fffaf3;
  box-shadow: inset 0 0 0 2px #e0ac77;
  overflow: hidden;
}

.home-recent-hoop img {
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: multiply;
  filter: brightness(1.035) contrast(1.05) saturate(1.06);
}

.home-recent-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-right: 34px;
}

.home-recent-copy strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recent-copy span {
  color: var(--iw-muted);
  font-size: 11px;
}

.home-recent-empty {
  grid-column: 1 / -1;
  min-height: 124px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px dashed #a8c6c1;
  border-radius: 16px;
  background: rgba(255, 253, 249, 0.7);
  color: var(--iw-teal);
}

.home-recent-empty span {
  color: var(--iw-muted);
  font-size: 12px;
}

.projects-panel .section-page-heading {
  margin-bottom: 22px;
}

.projects-heading-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.projects-select-button {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #87aca7;
  border-radius: 14px;
  background: #ffffff;
  color: var(--iw-teal);
  font-weight: 900;
}

.projects-select-button:hover,
.projects-select-button:focus-visible,
.projects-select-button[aria-pressed="true"] {
  border-color: var(--iw-teal);
  background: #e7f1ee;
  outline: none;
}

.projects-panel .gallery-heading {
  margin-top: 0;
}

.projects-panel .project-grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
}

.projects-panel .new-project-card,
.projects-panel .project-card {
  border-radius: 16px;
}

.project-card {
  position: relative;
}

.project-card.is-selected {
  border-color: var(--iw-teal);
  box-shadow: 0 0 0 3px rgba(6, 79, 85, 0.16), var(--iw-soft-shadow);
}

.project-select-control {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  cursor: pointer;
}

.project-select-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.project-select-control span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid #8aa9a4;
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.96);
  color: transparent;
  box-shadow: 0 5px 16px rgba(69, 57, 45, 0.12);
  font-size: 18px;
  font-weight: 900;
}

.project-select-control input:focus-visible + span {
  outline: 3px solid rgba(6, 79, 85, 0.24);
  outline-offset: 2px;
}

.project-select-control input:checked + span {
  border-color: var(--iw-teal);
  background: var(--iw-teal);
  color: #ffffff;
}

.project-grid.is-selecting .project-select-control {
  display: grid;
}

.project-grid.is-selecting .project-favorite-button,
.project-grid.is-selecting .project-card-actions {
  visibility: hidden;
  pointer-events: none;
}

.project-grid.is-selecting .project-open {
  cursor: pointer;
}

.project-favorite-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(234, 223, 211, 0.9);
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.94);
  color: var(--iw-coral-dark);
  box-shadow: 0 5px 16px rgba(69, 57, 45, 0.12);
  font-size: 21px;
  line-height: 1;
}

.project-favorite-button:hover,
.project-favorite-button:focus-visible,
.project-favorite-button[aria-pressed="true"] {
  border-color: #f1a596;
  background: #fff0ec;
  color: var(--iw-coral-dark);
}

.favorites-empty-state {
  grid-column: 1 / -1;
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  border: 1px dashed #a8c6c1;
  border-radius: 16px;
  background: rgba(255, 253, 249, 0.74);
  color: var(--iw-teal);
  text-align: center;
}

.favorites-empty-state > span {
  color: var(--iw-coral);
  font-size: 38px;
  line-height: 1;
}

.favorites-empty-state strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 21px;
}

.favorites-empty-state p {
  margin: 0;
  color: var(--iw-muted);
  font-size: 13px;
}

.favorites-empty-state button {
  min-height: 40px;
  margin-top: 6px;
  padding: 0 15px;
  border: 0;
  border-radius: 8px;
  background: var(--iw-teal);
  color: #ffffff;
  font-weight: 900;
}

.projects-panel .project-search input,
.projects-panel .project-controls select {
  min-height: 48px;
  border-radius: 14px;
}

.gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 30px 0 14px;
}

.gallery-heading h2 {
  margin: 0;
  color: var(--iw-ink);
  font-size: 18px;
}

.gallery-heading span {
  color: var(--iw-muted);
  font-size: 12px;
}

.view-all-button {
  border: 0;
  background: transparent;
  color: var(--iw-coral-dark);
  font-size: 13px;
  font-weight: 900;
}

.project-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.project-selection-bar {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 9px 10px 9px 15px;
  border: 1px solid #9bbab5;
  border-radius: 12px;
  background: #eaf3f0;
  color: var(--iw-ink);
}

.project-selection-bar[hidden] {
  display: none;
}

.project-selection-bar > strong {
  font-size: 12px;
}

.project-selection-bar > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.project-selection-bar button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #9bbab5;
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-size: 11px;
  font-weight: 900;
}

.project-selection-bar button.is-danger {
  border-color: #d58f83;
  background: #b84e43;
  color: #ffffff;
}

.project-selection-bar button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.project-filter {
  display: grid;
  grid-template-columns: repeat(2, auto);
  padding: 3px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #f5ece3;
}

.project-filter button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--iw-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.project-filter button.is-active {
  background: #ffffff;
  color: var(--iw-coral-dark);
  box-shadow: var(--iw-soft-shadow);
}

.project-search input,
.project-controls select,
.catalog-search input {
  height: 44px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
}

.project-grid {
  display: grid;
  grid-auto-columns: minmax(196px, 35%);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.projects-expanded .project-grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
}

.new-project-card,
.project-card {
  min-height: 270px;
  overflow: hidden;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: var(--iw-paper);
  box-shadow: var(--iw-soft-shadow);
  scroll-snap-align: start;
}

.new-project-card {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border-style: dashed;
  color: var(--iw-teal);
}

.new-project-card span {
  background: #e7f0ec;
  color: var(--iw-teal);
}

.project-card {
  display: grid;
  grid-template-rows: 186px auto auto;
  border-top: 1px solid var(--iw-line);
}

.project-card:nth-child(3n + 2),
.project-card:nth-child(3n + 3) {
  border-top-color: var(--iw-line);
}

.project-open {
  position: relative;
  height: 186px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 0;
  border-bottom: 1px solid var(--iw-line);
  background: #f9eee2;
}

.project-open::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 148px;
  height: 148px;
  border: 6px solid #a76e49;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #e0ac77, 0 5px 10px rgba(91, 58, 39, 0.13);
  pointer-events: none;
}

.project-hoop-preview {
  position: relative;
  z-index: 2;
  width: 138px;
  height: 138px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    repeating-linear-gradient(8deg, rgba(118, 86, 54, 0.025) 0 1px, transparent 1px 4px),
    #fff9ee;
}

.project-hoop-preview img {
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: multiply;
  filter: brightness(1.035) contrast(1.06) saturate(1.08);
  transform: none;
}

.project-open:hover .project-hoop-preview img {
  transform: none;
}

.project-placeholder {
  position: relative;
  z-index: 2;
}

.project-details {
  display: grid;
  gap: 3px;
  padding: 10px 10px 5px;
}

.project-details strong {
  overflow: hidden;
  color: var(--iw-ink);
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-details span {
  color: var(--iw-muted);
  font-size: 10px;
}

.project-card-actions {
  display: flex;
  align-items: center;
  padding: 3px 8px 9px;
}

.project-card-actions button {
  border: 0;
  background: transparent;
  color: var(--iw-teal);
  font-size: 10px;
  font-weight: 900;
}

.project-card-actions button.is-danger {
  margin-left: auto;
  color: #b75b50;
}

.inspiration-banner {
  min-height: 122px;
  display: grid;
  grid-template-columns: 1fr 132px;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 8px;
  background: #efe6f4;
  color: var(--iw-ink);
}

.inspiration-banner > div:first-child {
  display: grid;
  gap: 4px;
}

.inspiration-banner strong {
  font-size: 16px;
}

.inspiration-banner span {
  max-width: 230px;
  font-size: 12px;
  line-height: 1.4;
}

.inspiration-banner button {
  width: 26px;
  height: 26px;
  margin-top: 5px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--iw-teal);
}

.inspiration-hoop {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  justify-self: center;
}

.studio-bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  min-height: 74px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  border-top: 1px solid var(--iw-line);
  background: rgba(255, 253, 249, 0.96);
  box-shadow: 0 -8px 22px rgba(62, 52, 43, 0.08);
  backdrop-filter: blur(16px);
}

.studio-bottom-nav button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #6b7774;
}

.studio-bottom-nav button > span {
  font-size: 22px;
  line-height: 1;
}

.studio-bottom-nav button > strong {
  font-size: 10px;
}

.studio-bottom-nav button.is-active {
  color: var(--iw-coral);
}

.studio-bottom-nav .studio-create-nav {
  width: 58px;
  height: 58px;
  align-self: center;
  justify-self: center;
  margin-top: -26px;
  border-radius: 50%;
  background: var(--iw-coral);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(225, 84, 66, 0.28);
}

.section-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 6px 0 20px;
}

.section-page-heading span {
  color: var(--iw-coral-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.section-page-heading h1 {
  margin: 3px 0 0;
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(30px, 6vw, 46px);
}

.section-page-heading a {
  color: var(--iw-teal);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.shop-offer-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 15px 18px;
  border: 1px solid #f2c7b9;
  border-radius: 8px;
  background: #ffebe4;
}

.shop-offer-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.shop-offer-heading strong {
  color: var(--iw-coral-dark);
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
}

.shop-offer-heading span {
  color: var(--iw-muted);
  font-size: 10px;
}

.shop-offer-strip ol {
  display: flex;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-offer-strip li {
  min-width: 68px;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 7px 9px;
  border: 1px solid rgba(225, 65, 33, 0.18);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.8);
}

.shop-offer-strip li b {
  color: var(--iw-teal);
  font-size: 14px;
}

.shop-offer-strip li b::after {
  content: " designs";
  font-size: 8px;
  font-weight: 800;
}

.shop-offer-strip li span {
  color: var(--iw-coral-dark);
  font-size: 10px;
  font-weight: 900;
}

.shop-collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.shop-collection-tabs {
  min-width: 0;
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #f8f2ec;
}

.shop-collection-tabs button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--iw-muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.shop-collection-tabs button span {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  margin-left: 4px;
  border-radius: 8px;
  background: rgba(18, 63, 59, 0.08);
  font-size: 9px;
}

.shop-collection-tabs button.is-active {
  background: #ffffff;
  color: var(--iw-teal);
  box-shadow: 0 2px 8px rgba(46, 39, 33, 0.08);
}

.shop-bag-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--iw-teal);
  border-radius: 8px;
  background: var(--iw-teal);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.shop-bag-button b {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-size: 10px;
}

.catalog-search {
  position: relative;
  display: block;
  margin-bottom: 13px;
}

.catalog-search > span {
  position: absolute;
  top: 10px;
  left: 13px;
  z-index: 1;
  color: var(--iw-teal);
}

.catalog-search input {
  width: 100%;
  padding-left: 40px;
}

.catalog-categories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 12px;
}

.catalog-category-button {
  flex: 0 0 auto;
  min-height: 35px;
  padding: 0 14px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-size: 12px;
  font-weight: 900;
}

.catalog-category-button.is-active {
  border-color: var(--iw-coral);
  background: #fff0eb;
  color: var(--iw-coral-dark);
}

.catalog-status {
  margin: 3px 0 14px;
  color: var(--iw-muted);
  font-size: 12px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.catalog-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--iw-soft-shadow);
}

.catalog-card-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f8eee8;
}

.catalog-card-image > a {
  width: 100%;
  height: 100%;
  display: block;
}

.catalog-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 180ms ease;
}

.catalog-card:hover img {
  transform: scale(1.025);
}

.catalog-card-image > a span {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.92);
  color: var(--iw-coral-dark);
  font-size: 11px;
  font-weight: 900;
}

.catalog-favorite-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(18, 63, 59, 0.12);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.94);
  color: var(--iw-teal);
  box-shadow: 0 3px 10px rgba(45, 38, 31, 0.12);
  font-size: 18px;
}

.catalog-favorite-button.is-active {
  border-color: #f2a18f;
  background: #fff0eb;
  color: var(--iw-coral-dark);
}

.catalog-card-copy {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 11px;
}

.catalog-card-title {
  min-width: 0;
  overflow: hidden;
  color: var(--iw-ink);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-card-copy span {
  color: var(--iw-muted);
  font-size: 10px;
}

.catalog-card-copy b {
  color: var(--iw-coral-dark);
  font-size: 13px;
}

.catalog-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  padding: 0 10px 10px;
}

.catalog-card-actions a {
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
}

.catalog-card-actions button {
  min-width: 0;
  min-height: 36px;
  padding: 0 7px;
  overflow: hidden;
  border: 1px solid var(--iw-line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--iw-teal);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-card-actions .catalog-add-button {
  border-color: var(--iw-teal);
  background: var(--iw-teal);
  color: #ffffff;
}

.catalog-card-actions button.is-active {
  border-color: #b7d5ca;
  background: #eaf5ef;
  color: #315c4a;
}

.catalog-empty-state {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 28px;
  border: 1px dashed var(--iw-line);
  border-radius: 8px;
  color: var(--iw-muted);
  text-align: center;
}

.catalog-empty-state strong {
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
}

.catalog-empty-state span {
  font-size: 12px;
}

.shop-bag-dialog {
  width: min(780px, calc(100vw - 28px));
  max-height: min(820px, calc(100dvh - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: var(--iw-paper);
  color: var(--iw-ink);
  box-shadow: 0 26px 80px rgba(45, 38, 31, 0.27);
}

.shop-bag-dialog::backdrop {
  background: rgba(21, 42, 42, 0.38);
  backdrop-filter: blur(3px);
}

.shop-bag-shell {
  max-height: inherit;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.shop-bag-heading,
.shop-bag-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
}

.shop-bag-heading {
  border-bottom: 1px solid var(--iw-line);
  background: #fff3ed;
}

.shop-bag-heading > div {
  min-width: 0;
}

.shop-bag-heading span {
  color: var(--iw-coral-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.shop-bag-heading h2 {
  margin: 2px 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 27px;
}

.shop-bag-heading p {
  margin: 0;
  color: var(--iw-muted);
  font-size: 11px;
}

.shop-bag-heading > button {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
  font-size: 22px;
}

.shop-bag-body {
  overflow-y: auto;
  padding: 18px 20px;
}

.shop-bag-empty {
  min-height: 190px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--iw-muted);
  text-align: center;
}

.shop-bag-empty[hidden] {
  display: none;
}

.shop-bag-empty strong {
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 21px;
}

.shop-bag-empty span {
  max-width: 400px;
  font-size: 12px;
}

.shop-bag-items {
  display: grid;
  gap: 9px;
}

.shop-bag-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 9px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
}

.shop-bag-item > a {
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.shop-bag-item img {
  width: 62px;
  height: 62px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}

.shop-bag-item a > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shop-bag-item a strong {
  overflow: hidden;
  color: var(--iw-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-bag-item a span {
  color: var(--iw-muted);
  font-size: 10px;
}

.shop-bag-item > b {
  color: var(--iw-coral-dark);
  font-size: 12px;
}

.shop-bag-item-actions {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.shop-bag-item-actions button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--iw-teal);
  font-size: 10px;
  font-weight: 900;
}

.shop-bag-item-actions button:last-child {
  color: #9b4f47;
}

.shop-bag-summary {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #f8f2ec;
}

.shop-bag-summary[hidden],
.shop-checkout-handoff[hidden] {
  display: none;
}

.etsy-connection-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ead8c8;
  border-radius: 8px;
  background: #fffaf4;
}

.etsy-connection-panel > div:first-child {
  min-width: 0;
}

.etsy-connection-panel span,
.profile-preferences > div > span {
  display: block;
  color: #ef6d5b;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.etsy-connection-panel strong {
  display: block;
  margin-top: 3px;
  color: #064f55;
}

.etsy-connection-panel p {
  margin: 4px 0 0;
  color: #655b54;
  font-size: 0.86rem;
}

.etsy-connection-panel.is-connected {
  border-color: #a9cbc0;
  background: #f2fbf7;
}

.etsy-connection-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.etsy-connection-actions button,
.profile-newsletter-toggle {
  min-height: 44px;
}

.profile-preferences {
  width: min(100%, 780px);
  margin: 24px auto 0;
  padding: 22px;
  border: 1px solid #ead8c8;
  border-radius: 8px;
  background: #fffaf4;
}

.profile-preferences h2 {
  margin: 4px 0 6px;
  color: #064f55;
  font-size: 1.15rem;
}

.profile-preferences p {
  margin: 0;
  color: #655b54;
  line-height: 1.5;
}

.profile-newsletter-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #ead8c8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.profile-newsletter-toggle input {
  width: 20px;
  height: 20px;
  accent-color: #ef6d5b;
}

.profile-newsletter-toggle span,
.profile-newsletter-toggle strong,
.profile-newsletter-toggle small {
  display: block;
}

.profile-email-favorites-button {
  min-height: 44px;
  margin-top: 14px;
  padding: 0 16px;
  border: 1px solid #9bbab5;
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-weight: 900;
}

.profile-email-favorites-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (max-width: 640px) {
  .studio-navigation-dialog {
    width: 100vw;
    max-width: none;
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
  }
}

.profile-newsletter-toggle strong {
  color: #173f43;
}

.profile-newsletter-toggle small {
  margin-top: 2px;
  color: #776c65;
}

.newsletter-survey-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fffaf4;
  box-shadow: 0 24px 70px rgba(36, 43, 41, 0.24);
}

.newsletter-survey-dialog::backdrop {
  background: rgba(13, 50, 52, 0.38);
}

.newsletter-survey-dialog form {
  padding: 22px;
}

.newsletter-survey-dialog header,
.newsletter-survey-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.newsletter-survey-dialog header span {
  color: #ef6d5b;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.newsletter-survey-dialog h2 {
  margin: 3px 0 0;
  color: #064f55;
}

.newsletter-survey-dialog > form > p {
  color: #655b54;
}

.newsletter-survey-dialog label {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: #173f43;
  font-weight: 700;
}

.newsletter-survey-dialog label span {
  color: #776c65;
  font-weight: 400;
}

.newsletter-survey-dialog select,
.newsletter-survey-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #dacabd;
  border-radius: 6px;
  background: #fff;
  color: #263f42;
  font: inherit;
}

.newsletter-survey-dialog footer {
  justify-content: flex-end;
  margin-top: 20px;
}

@media (max-width: 640px) {
  .etsy-connection-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .etsy-connection-actions button {
    flex: 1;
  }

  .newsletter-survey-dialog {
    width: 100vw;
    max-width: none;
    margin: auto 0 0;
    border-radius: 8px 8px 0 0;
  }
}

.shop-bag-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--iw-muted);
  font-size: 11px;
}

.shop-bag-summary > div strong {
  color: var(--iw-ink);
}

.shop-bag-summary .shop-bag-estimate {
  margin-top: 3px;
  padding-top: 10px;
  border-top: 1px solid var(--iw-line);
  color: var(--iw-ink);
  font-size: 14px;
  font-weight: 900;
}

.shop-bag-summary p {
  margin: 2px 0 0;
  color: var(--iw-coral-dark);
  font-size: 10px;
  font-weight: 900;
}

.shop-bag-summary .shop-bag-checkout-note {
  padding-top: 7px;
  border-top: 1px dashed var(--iw-line);
  color: var(--iw-muted);
  font-weight: 700;
  line-height: 1.45;
}

.shop-checkout-handoff {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 4px solid var(--iw-teal);
  background: #eaf5ef;
}

.shop-checkout-handoff strong {
  color: var(--iw-teal);
  font-size: 12px;
}

.shop-checkout-handoff span {
  color: #4e625a;
  font-size: 10px;
}

.shop-bag-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--iw-line);
  background: #fffdfa;
}

.shop-bag-actions button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-size: 12px;
  font-weight: 900;
}

.shop-bag-actions .is-primary {
  border-color: var(--iw-teal);
  background: var(--iw-teal);
  color: #ffffff;
}

.shop-bag-actions button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.profile-panel {
  max-width: 1040px;
  margin: 30px auto 0;
  text-align: center;
}

.profile-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border: 6px solid #f7d7c7;
  border-radius: 50%;
  background: var(--iw-teal);
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 29px;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar span {
  display: grid;
  place-items: center;
}

.profile-panel > span {
  color: var(--iw-coral-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-panel h1 {
  margin: 5px 0;
  color: var(--iw-ink);
}

.profile-panel > p {
  margin-top: 0;
  color: var(--iw-muted);
}

.profile-edit-button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-weight: 900;
}

.profile-credit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  text-align: left;
}

.profile-credit-card > div {
  display: grid;
  gap: 4px;
}

.profile-credit-card .credit-reset {
  max-width: 360px;
  margin-top: 5px;
  color: var(--iw-teal);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.profile-credit-card .credit-reset.is-empty {
  color: #a24337;
}

.profile-credit-card span {
  color: var(--iw-muted);
  font-size: 12px;
}

.profile-credit-card strong {
  color: var(--iw-ink);
  font-size: 18px;
}

.credit-badge {
  padding: 7px 10px;
  border-radius: 8px;
  background: #e7f0ec;
  color: var(--iw-teal) !important;
  font-weight: 900;
}

.profile-credit-note {
  margin: 12px 10px 24px !important;
  line-height: 1.5;
}

.profile-membership {
  margin: 34px 0;
  padding-top: 30px;
  border-top: 1px solid var(--iw-line);
  text-align: left;
}

.profile-membership-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 18px;
}

.profile-membership-heading > div {
  display: grid;
  gap: 3px;
}

.profile-membership-heading span {
  color: var(--iw-coral-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-membership-heading h2 {
  margin: 0;
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 27px;
  font-weight: 600;
}

.profile-membership-heading p {
  max-width: 390px;
  margin: 0;
  color: var(--iw-muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.membership-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.membership-plan-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 9px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
}

.membership-plan-card.is-featured {
  border-color: #e98a77;
  box-shadow: inset 0 4px 0 var(--iw-coral);
}

.membership-plan-card.is-current {
  border-color: #70a79e;
  box-shadow: inset 0 4px 0 var(--iw-teal);
}

.membership-plan-label {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--iw-teal-soft);
  color: var(--iw-teal);
  font-size: 10px;
  font-weight: 900;
}

.membership-plan-card.is-featured .membership-plan-label {
  background: #fff0eb;
  color: var(--iw-coral-dark);
}

.membership-plan-card h3 {
  margin: 2px 0 0;
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
}

.membership-plan-card > strong {
  color: var(--iw-teal);
  font-size: 23px;
}

.membership-plan-card > strong small {
  color: var(--iw-muted);
  font-size: 11px;
}

.membership-plan-card ul {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 0;
  color: var(--iw-muted);
  font-size: 12px;
  line-height: 1.45;
  list-style: none;
}

.membership-plan-card li::before {
  content: "✓";
  margin-right: 7px;
  color: var(--iw-leaf);
  font-weight: 900;
}

.membership-plan-card button {
  min-height: 42px;
  border: 1px solid var(--iw-teal);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-weight: 900;
}

.membership-plan-card.is-featured button,
.membership-plan-card.is-current button {
  background: var(--iw-teal);
  color: #ffffff;
}

.membership-plan-card button:disabled {
  border-color: #a9b9b4;
  background: #eaf1ee;
  color: #54706a;
  cursor: default;
}

.cancel-membership-button {
  min-height: 40px;
  margin-top: 16px;
  padding: 0 13px;
  border: 1px solid #e5bbb4;
  border-radius: 8px;
  background: #ffffff;
  color: #9b4f47;
  font-weight: 900;
}

.membership-status {
  min-height: 18px;
  margin: 10px 0 0;
  color: var(--iw-muted);
  font-size: 12px;
  line-height: 1.45;
}

.profile-signout-button {
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: #9b4f47;
  font-weight: 900;
}

.profile-edit-dialog {
  width: min(92vw, 520px);
  padding: 0;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: var(--iw-paper);
  color: var(--iw-ink);
  box-shadow: 0 24px 70px rgba(45, 38, 31, 0.25);
}

.profile-edit-dialog::backdrop {
  background: rgba(21, 42, 42, 0.34);
  backdrop-filter: blur(3px);
}

.profile-edit-dialog header,
.profile-edit-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}

.profile-edit-dialog header {
  border-bottom: 1px solid var(--iw-line);
}

.profile-edit-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid var(--iw-line);
}

.profile-edit-dialog header > div {
  display: grid;
  gap: 2px;
}

.profile-edit-dialog header span {
  color: var(--iw-coral-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-edit-dialog h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
}

.profile-edit-dialog header button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--iw-line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--iw-ink);
  font-size: 22px;
}

.profile-edit-body {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.profile-edit-preview {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  overflow: hidden;
  border: 6px solid #f7d7c7;
  border-radius: 50%;
  background: var(--iw-teal);
  color: #ffffff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 31px;
}

.profile-edit-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-edit-body label {
  display: grid;
  gap: 7px;
}

.profile-edit-body label > span {
  color: var(--iw-ink);
  font-size: 12px;
  font-weight: 900;
}

.profile-color-field,
.profile-theme-field {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.profile-color-field legend,
.profile-theme-field legend {
  padding: 0 5px;
  color: var(--iw-ink);
  font-size: 12px;
  font-weight: 900;
}

.profile-color-field small,
.profile-theme-field small {
  display: block;
  margin-top: 9px;
  color: var(--iw-muted);
  font-size: 11px;
  line-height: 1.4;
}

.profile-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.profile-color-swatches label {
  position: relative;
  display: block;
}

.profile-color-swatches input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.profile-color-swatches label > span,
.profile-custom-color {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px var(--iw-line);
  cursor: pointer;
}

.profile-color-swatches input[type="radio"]:checked + span {
  box-shadow: 0 0 0 3px var(--iw-coral);
}

.profile-color-swatches input[type="radio"]:focus-visible + span,
.profile-custom-color:focus-within {
  outline: 3px solid var(--iw-gold);
  outline-offset: 2px;
}

.profile-custom-color {
  position: relative;
  color: var(--iw-ink);
  background: conic-gradient(#ff705e, #f4d87b, #67a589, #6f8fe8, #c978b7, #ff705e);
  font-size: 20px;
  font-weight: 900;
}

.profile-custom-color input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.profile-theme-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-theme-options label {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.profile-theme-options label:has(input:checked) {
  border-color: var(--iw-coral);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--iw-coral) 22%, transparent);
}

.profile-theme-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-theme-options strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--iw-ink);
  font-size: 12px;
}

.theme-dot {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--iw-line);
}

.theme-wonder { background: linear-gradient(135deg, #064f55 50%, #ff705e 50%); }
.theme-sunshine { background: linear-gradient(135deg, #f6c945 50%, #f47c20 50%); }
.theme-berry { background: linear-gradient(135deg, #71305e 50%, #df4f83 50%); }
.theme-cobalt { background: linear-gradient(135deg, #234fa8 50%, #ef6474 50%); }
.theme-lilac { background: linear-gradient(135deg, #67479b 50%, #ec668b 50%); }

.profile-edit-body input[type="text"],
.profile-edit-body input[type="file"] {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
}

.profile-edit-body input[type="text"] {
  padding: 0 12px;
}

.profile-edit-body input[type="file"] {
  padding: 8px;
}

.profile-photo-field small {
  color: var(--iw-muted);
  font-size: 11px;
  line-height: 1.45;
}

.profile-business-logo-preview {
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
}

.profile-business-logo-preview[hidden] {
  display: none;
}

.profile-business-logo-preview img {
  width: 100%;
  max-width: 260px;
  max-height: 78px;
  object-fit: contain;
  object-position: left center;
}

.profile-business-logo-preview button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: #9b4f47;
  font-weight: 800;
}

.remove-profile-photo-button {
  justify-self: start;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: #9b4f47;
  font-weight: 800;
}

.profile-edit-dialog footer button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
  font-weight: 900;
}

.profile-edit-dialog footer .profile-save-button {
  border-color: var(--iw-teal);
  background: var(--iw-teal);
  color: #ffffff;
}

.studio-updates-dialog {
  width: min(92vw, 560px);
  padding: 0;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: var(--iw-paper);
  color: var(--iw-ink);
  box-shadow: 0 24px 70px rgba(45, 38, 31, 0.25);
}

.studio-updates-dialog::backdrop {
  background: rgba(21, 42, 42, 0.32);
  backdrop-filter: blur(3px);
}

.studio-updates-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--iw-line);
}

.studio-updates-heading > div {
  display: grid;
  gap: 2px;
}

.studio-updates-heading span {
  color: var(--iw-coral-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-updates-heading h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
}

.studio-updates-heading button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-size: 24px;
}

.studio-update-list {
  display: grid;
  gap: 10px;
  padding: 18px 20px 12px;
}

.studio-update-button {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
  text-align: left;
}

.studio-update-button:hover,
.studio-update-button:focus-visible {
  border-color: #dfaa9b;
  background: #fffaf6;
}

.studio-update-button.is-unread {
  border-color: #ef9f8d;
  background: #fff4ec;
  box-shadow: 0 7px 20px rgba(218, 101, 76, 0.12);
}

.studio-update-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
}

.studio-update-icon.is-shop {
  background: #fff0dc;
  color: var(--iw-coral-dark);
}

.studio-update-icon.is-sewout {
  background: #e5f0ed;
  color: var(--iw-teal);
}

.studio-update-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.studio-update-copy strong {
  font-size: 14px;
}

.studio-update-copy > span {
  color: var(--iw-muted);
  font-size: 12px;
  line-height: 1.4;
}

.studio-update-badge {
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--iw-coral);
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-update-arrow {
  color: var(--iw-teal);
  font-size: 22px;
  font-weight: 900;
}

.studio-updates-note {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--iw-muted);
  font-size: 11px;
  text-align: center;
}

.studio-action-dialog {
  width: min(92vw, 520px);
  padding: 0;
  border: 1px solid var(--iw-line);
  border-radius: 24px;
  background: var(--iw-paper);
  color: var(--iw-ink);
  box-shadow: 0 28px 80px rgba(45, 38, 31, 0.28);
}

.studio-action-dialog::backdrop {
  background: rgba(18, 50, 52, 0.44);
  backdrop-filter: blur(4px);
}

.studio-action-dialog form {
  margin: 0;
}

.studio-action-heading {
  display: grid;
  grid-template-columns: 58px 1fr 44px;
  align-items: center;
  gap: 14px;
  padding: 22px;
  border-bottom: 1px solid #f3cec2;
  background: #ffebe4;
}

.studio-action-hoop {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 7px solid #c99058;
  border-radius: 50%;
  background: #fffaf3;
  color: var(--iw-coral-dark);
  font-size: 22px;
  box-shadow: inset 0 0 0 2px #f1c791;
}

.studio-action-heading > div:nth-child(2) {
  min-width: 0;
}

.studio-action-heading span {
  color: var(--iw-coral-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.studio-action-heading h2 {
  margin: 3px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  line-height: 1.08;
}

.studio-action-heading > button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--iw-line);
  border-radius: 50%;
  background: #fffdf9;
  color: var(--iw-ink);
  font-size: 23px;
}

.studio-action-heading > button:focus-visible,
.studio-action-footer button:focus-visible,
.studio-action-body input:focus {
  outline: 3px solid rgba(225, 65, 33, 0.24);
  outline-offset: 2px;
}

.studio-action-body {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.studio-action-body > p {
  margin: 0;
  color: var(--iw-muted);
  font-size: 15px;
  line-height: 1.6;
}

.studio-action-body label {
  display: grid;
  gap: 7px;
  color: var(--iw-ink);
  font-size: 12px;
  font-weight: 900;
}

.studio-action-body input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--iw-line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--iw-ink);
  padding: 0 13px;
  font-size: 16px;
}

.studio-action-body .studio-action-note {
  padding: 12px 14px;
  border: 1px solid #ecd58b;
  border-radius: 12px;
  background: #fff4cc;
  color: #5f552e;
  font-size: 12px;
  font-weight: 700;
}

.studio-action-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 22px 22px;
  border-top: 1px solid var(--iw-line);
}

.studio-action-footer button {
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid var(--iw-line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--iw-ink);
  font-weight: 900;
}

.studio-action-footer .is-primary {
  border-color: var(--iw-coral-dark);
  background: var(--iw-coral-dark);
  color: #ffffff;
}

.studio-action-dialog[data-tone="danger"] .studio-action-heading {
  background: #fff0ed;
}

.studio-action-dialog[data-tone="danger"] .studio-action-hoop {
  color: #9b3f35;
}

.studio-action-dialog[data-tone="danger"] .studio-action-footer .is-primary {
  border-color: #9b3f35;
  background: #9b3f35;
}

@media (max-width: 620px) {
  .studio-action-dialog {
    width: 100vw;
    max-width: none;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }

  .studio-action-heading {
    grid-template-columns: 48px 1fr 44px;
    padding: 18px;
  }

  .studio-action-hoop {
    width: 46px;
    height: 46px;
    border-width: 6px;
  }

  .studio-action-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.new-design-dialog {
  width: min(720px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #eadfd5;
  border-radius: 24px;
  background: #fffdfa;
  color: #25201d;
  box-shadow: 0 28px 80px rgba(55, 34, 23, 0.22);
}

.new-design-dialog::backdrop {
  background: rgba(37, 32, 29, 0.48);
  backdrop-filter: blur(3px);
}

.new-design-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 28px 22px;
  background: #ffebe4;
  border-bottom: 1px solid #f2d1c6;
}

.new-design-heading span {
  color: #e14121;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.new-design-heading h2 {
  margin: 6px 0 8px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(27px, 4vw, 38px);
  line-height: 1.05;
}

.new-design-heading p {
  max-width: 540px;
  margin: 0;
  color: #655f5a;
}

.new-design-heading > button {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #eadfd5;
  border-radius: 50%;
  background: #fffdfa;
  color: #25201d;
  font-size: 24px;
}

.new-design-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 22px 28px;
}

.new-design-options > button {
  min-height: 132px;
  padding: 18px;
  border: 1px solid #eadfd5;
  border-radius: 18px;
  background: #fff;
  color: #25201d;
  text-align: left;
}

.new-design-options > button:hover,
.new-design-options > button:focus-visible {
  border-color: #e14121;
  outline: 3px solid rgba(225, 65, 33, 0.18);
  outline-offset: 2px;
}

.new-design-option-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #dbe8df;
  color: #3d5a4b;
  font-size: 19px;
  font-weight: 900;
}

.new-design-options strong,
.new-design-options small {
  display: block;
}

.new-design-options strong {
  font-family: Fraunces, Georgia, serif;
  font-size: 18px;
}

.new-design-options small {
  margin-top: 4px;
  color: #655f5a;
}

.new-design-note {
  margin: 0;
  padding: 0 28px 26px;
  color: #655f5a;
  font-size: 13px;
}

@media (max-width: 620px) {
  .new-design-dialog {
    width: 100vw;
    max-width: none;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }

  .new-design-heading,
  .new-design-options {
    padding-left: 20px;
    padding-right: 20px;
  }

  .new-design-options {
    grid-template-columns: 1fr;
    max-height: 52vh;
    overflow-y: auto;
  }

  .new-design-options > button {
    min-height: 104px;
  }

  .new-design-note {
    padding: 0 20px 22px;
  }
}

.canvas-view-switch {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.96);
  box-shadow: 0 8px 24px rgba(42, 51, 48, 0.12);
}

.canvas-view-switch button {
  min-width: 88px;
  min-height: 44px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--iw-muted);
  text-align: center;
}

.canvas-view-switch button strong {
  font-size: 10px;
  font-weight: 900;
}

.canvas-view-switch button small {
  color: #77706a;
  font-size: 8px;
  font-weight: 700;
}

.canvas-view-switch button.is-active {
  background: var(--iw-teal);
  color: #ffffff;
}

.canvas-view-switch button.is-active small {
  color: rgba(255, 255, 255, 0.78);
}

.canvas-hoop-shortcut {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 6;
  min-width: 188px;
  min-height: 48px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #dcc5ae;
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.96);
  color: var(--iw-ink);
  box-shadow: 0 8px 24px rgba(42, 51, 48, 0.12);
  text-align: left;
}

.canvas-hoop-shortcut:hover,
.canvas-hoop-shortcut:focus-visible {
  border-color: var(--iw-coral);
  outline: 3px solid rgba(255, 112, 94, 0.16);
  outline-offset: 1px;
}

.canvas-hoop-symbol {
  width: 29px;
  height: 29px;
  border: 3px solid #b77b4e;
  border-radius: 50%;
  background:
    linear-gradient(rgba(7, 79, 85, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 79, 85, 0.08) 1px, transparent 1px),
    #fff8ea;
  background-size: 6px 6px;
  box-shadow: inset 0 0 0 2px #efd0ac;
}

.canvas-hoop-shortcut > span:nth-child(2) {
  min-width: 0;
  display: grid;
}

.canvas-hoop-shortcut small {
  color: var(--iw-muted);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.canvas-hoop-shortcut strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-hoop-fit {
  border-radius: 999px;
  padding: 4px 6px;
  background: #ece7e1;
  color: #655f59;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.canvas-hoop-fit[data-fit="safe"] {
  background: #dff2e5;
  color: #28633b;
}

.canvas-hoop-fit[data-fit="close"] {
  background: #fff0c9;
  color: #7a5620;
}

.canvas-hoop-fit[data-fit="large"] {
  background: #ffe2dc;
  color: #9b3e31;
}

.canvas-wrap > .view-mode-badge {
  top: 72px;
  left: 14px;
  align-items: center;
}

.view-mode-badge-copy {
  display: grid;
  gap: 1px;
  width: auto;
  height: auto;
  min-width: 0;
  border-radius: 0;
  background: transparent;
}

.view-mode-badge-copy strong,
.view-mode-badge-copy small {
  white-space: nowrap;
}

.view-mode-badge-copy small {
  color: currentColor;
  font-size: 8px;
  font-weight: 700;
  opacity: 0.74;
}

.view-mode-badge[data-mode="artwork"] {
  border-color: #e6caaa;
  background: rgba(255, 248, 236, 0.94);
  color: #76512e;
}

.view-mode-badge[data-mode="artwork"] > span[aria-hidden="true"] {
  background: #e5a651;
  box-shadow: 0 0 0 3px rgba(229, 166, 81, 0.14);
}

.detail-save-palette-button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #b9d0ca;
  border-radius: 8px;
  background: #edf6f3;
  color: var(--iw-ink);
  text-align: left;
}

.detail-save-palette-button[hidden] {
  display: none;
}

.detail-save-palette-button > span:first-child {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--iw-teal);
  color: #ffffff;
  font-size: 18px;
}

.detail-save-palette-button > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.detail-save-palette-button strong {
  font-size: 11px;
}

.detail-save-palette-button small {
  color: var(--iw-muted);
  font-size: 9px;
}

.detail-save-palette-button.is-saved {
  border-color: #a9c7ae;
  background: #eaf5e9;
}

.detail-save-palette-button.is-saved > span:first-child {
  background: #4f7658;
}

.detail-saved-palettes {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--iw-line);
}

.detail-saved-palettes[hidden] {
  display: none;
}

.detail-saved-palettes > div:first-child {
  display: grid;
  gap: 1px;
}

.detail-saved-palettes > div:first-child span {
  color: var(--iw-coral-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-saved-palette-list {
  display: grid;
  gap: 8px;
}

.detail-saved-palette-list > p {
  margin: 0;
  color: var(--iw-muted);
  font-size: 12px;
}

.saved-palette-card {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(120px, auto);
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #fffdf9;
  color: var(--iw-ink);
  text-align: left;
}

.saved-palette-copy {
  min-width: 0;
  display: grid;
}

.saved-palette-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-palette-copy small {
  color: var(--iw-muted);
  font-size: 10px;
}

.saved-palette-swatches {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.saved-palette-swatches i {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(45, 38, 31, 0.15);
}

@media (max-width: 520px) {
  .saved-palette-card {
    grid-template-columns: 1fr;
  }

  .saved-palette-swatches {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .canvas-view-switch {
    display: none;
  }

  .canvas-hoop-shortcut {
    top: 10px;
    left: 10px;
    min-width: min(200px, calc(100% - 20px));
  }

  .canvas-wrap > .view-mode-badge {
    top: 68px;
    left: 10px;
  }
}

.palette-library-dialog {
  width: min(92vw, 520px);
  padding: 0;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: var(--iw-paper);
  color: var(--iw-ink);
  box-shadow: 0 24px 70px rgba(45, 38, 31, 0.25);
}

.palette-library-dialog::backdrop {
  background: rgba(21, 42, 42, 0.32);
  backdrop-filter: blur(3px);
}

.palette-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--iw-line);
}

.palette-dialog-heading > div {
  display: grid;
  gap: 2px;
}

.palette-dialog-heading span {
  color: var(--iw-coral-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.palette-dialog-heading h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
}

.palette-dialog-heading button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  font-size: 24px;
}

.palette-library-grid {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.palette-library-grid section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
}

.palette-library-grid section > div {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

.palette-library-grid section span {
  aspect-ratio: 1;
  border: 3px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(45, 38, 31, 0.12);
}

/* Saved-design preview */
.project-detail-view {
  min-height: 100dvh;
  padding-bottom: 88px;
  background:
    repeating-linear-gradient(0deg, rgba(112, 92, 68, 0.015) 0 1px, transparent 1px 4px),
    var(--iw-ivory);
}

.detail-topbar {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px clamp(18px, 4vw, 34px);
  border-bottom: 1px solid var(--iw-line);
}

.detail-topbar > strong {
  overflow: hidden;
  color: var(--iw-ink);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-top-actions {
  display: flex;
  gap: 8px;
}

.project-detail-main {
  width: min(100%, 900px);
  margin: 0 auto;
}

.detail-hoop-stage {
  min-height: 500px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  padding: 44px 20px 26px;
}

.detail-hoop {
  width: min(72vw, 420px);
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.detail-hoop::before,
.detail-hoop-fabric {
  border-radius: inherit;
}

.detail-hoop-fabric {
  position: absolute;
  inset: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    repeating-linear-gradient(10deg, rgba(118, 86, 54, 0.03) 0 1px, transparent 1px 4px),
    #fff9ee;
}

.detail-hoop .detail-hoop-fabric img {
  width: 100%;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: multiply;
  filter: brightness(1.035) contrast(1.06) saturate(1.08);
  transform: scale(var(--detail-artwork-scale, 1));
}

.detail-project-placeholder {
  position: relative;
  z-index: 2;
  color: var(--iw-teal);
  font-family: "Fraunces", Georgia, serif;
  font-size: 44px;
}

.detail-page-count {
  padding: 6px 14px;
  border-radius: 8px;
  background: #efe8df;
  color: var(--iw-muted);
  font-size: 12px;
  font-weight: 800;
}

.detail-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--iw-line);
  border-bottom: 1px solid var(--iw-line);
  background: rgba(255, 253, 249, 0.88);
}

.detail-tabs button {
  min-width: 0;
  min-height: 64px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 7px 2px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #6e7470;
  font-size: 10px;
  font-weight: 800;
}

.detail-tabs button > span {
  font-size: 18px;
}

.detail-tabs button.is-active {
  border-bottom-color: var(--iw-coral);
  color: var(--iw-coral);
}

.detail-information {
  padding: 22px clamp(18px, 5vw, 38px) 26px;
}

.detail-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-title-line h1 {
  margin: 0;
  color: var(--iw-ink);
  font-size: 22px;
}

.detail-title-line button {
  border: 0;
  background: transparent;
  color: var(--iw-teal);
}

.detail-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.detail-byline > span {
  padding: 5px 9px;
  border-radius: 8px;
  background: #eee4f3;
  color: #725b8b;
  font-size: 11px;
  font-weight: 900;
}

.detail-byline strong {
  color: var(--iw-muted);
  font-size: 12px;
}

.detail-information > p {
  color: #45656a;
  line-height: 1.5;
}

.detail-color-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
  margin: 18px 0 4px;
}

.detail-color-palette[hidden] {
  display: none;
}

.detail-download-panel {
  display: grid;
  gap: 14px;
  margin: 18px 0 4px;
}

.detail-download-panel[hidden] {
  display: none;
}

.detail-machine-repair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(229, 104, 82, 0.34);
  border-radius: 8px;
  background: #fff6ef;
  color: var(--iw-ink);
}

.detail-machine-repair[hidden] {
  display: none;
}

.detail-machine-repair > span {
  color: var(--iw-coral);
  font-size: 26px;
  font-weight: 900;
}

.detail-machine-repair strong,
.detail-machine-repair p {
  display: block;
}

.detail-machine-repair p {
  margin: 4px 0 0;
  color: var(--iw-muted);
  font-size: 12px;
  line-height: 1.45;
}

.detail-machine-repair button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: var(--iw-coral);
  color: #fff;
  font: inherit;
  font-weight: 900;
}

.detail-supporting-downloads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.detail-supporting-downloads button {
  min-height: 70px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 10px 7px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--iw-ink);
  font: inherit;
  font-size: 11px;
}

.detail-supporting-downloads button > span {
  color: var(--iw-coral);
  font-size: 21px;
}

.detail-machine-download {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
}

.detail-machine-download label {
  display: grid;
  gap: 6px;
  color: var(--iw-muted);
  font-size: 11px;
  font-weight: 900;
}

.detail-download-panel select {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #fff;
  color: var(--iw-ink);
  font: inherit;
  font-weight: 900;
}

.detail-machine-download > button {
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--iw-teal);
  color: #fff;
  text-align: left;
}

.detail-machine-download > button strong,
.detail-machine-download > button small {
  display: block;
}

.detail-machine-download > button small {
  margin-top: 2px;
  opacity: 0.8;
}

@media (max-width: 640px) {
  .detail-tabs {
    display: flex;
    overflow-x: auto;
  }

  .detail-tabs button {
    min-width: 74px;
  }

  .detail-download-panel {
    grid-template-columns: 1fr;
  }

  .detail-supporting-downloads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-machine-download {
    grid-template-columns: 1fr;
  }

  .detail-machine-repair {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .detail-machine-repair button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.detail-color-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.detail-color-chip {
  width: 42px;
  height: 42px;
  border: 3px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(45, 38, 31, 0.16);
}

.detail-color-label {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.detail-color-label strong,
.detail-color-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-color-label strong {
  color: var(--iw-ink);
  font-size: 12px;
}

.detail-color-label span {
  color: var(--iw-muted);
  font-size: 10px;
  font-weight: 700;
}

.detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 22px;
}

.detail-stats > span {
  display: grid;
  gap: 7px;
  padding: 0 14px;
  border-right: 1px solid var(--iw-line);
  color: var(--iw-muted);
  font-size: 11px;
}

.detail-stats > span:first-child {
  padding-left: 0;
}

.detail-stats > span:last-child {
  border-right: 0;
}

.detail-stats strong {
  color: var(--iw-ink);
  font-size: 13px;
}

.detail-actions {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  min-height: 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
  gap: 12px;
  padding: 12px max(18px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  border-top: 1px solid var(--iw-line);
  background: rgba(255, 253, 249, 0.97);
}

.detail-actions button {
  min-height: 50px;
  border-radius: 8px;
  font-weight: 900;
}

.detail-edit-button {
  border: 0;
  background: var(--iw-teal);
  color: #ffffff;
}

.detail-share-button {
  border: 1px solid var(--iw-line);
  background: #f5ece3;
  color: var(--iw-teal);
}

/* Focused creative editor */
.editor-shell {
  min-height: 100dvh;
  height: 100dvh;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  background: var(--iw-ivory);
}

.editor-topbar {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--iw-line);
  background: rgba(255, 250, 243, 0.98);
  box-shadow: none;
}

.topbar-left {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.topbar-left > .brand-chip {
  display: none;
}

.back-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-teal);
  box-shadow: var(--iw-soft-shadow);
  font-size: 27px;
}

.design-title-wrap {
  min-width: 0;
  display: grid;
  justify-items: center;
}

.editor-design-name-row {
  width: min(420px, 36vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 4px;
}

.design-name {
  width: 100%;
  max-width: 380px;
  border: 0;
  background: transparent;
  color: var(--iw-ink);
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.editor-rename-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--iw-coral-dark);
  font-size: 17px;
  cursor: pointer;
}

.editor-rename-button:hover {
  border-color: var(--iw-line);
  background: var(--iw-teal-soft);
}

.editor-rename-button:focus-visible {
  outline: 3px solid var(--iw-gold);
  outline-offset: 2px;
}

.app-name {
  display: none;
}

.save-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sample-credit-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid #b6d3c5;
  border-radius: 8px;
  background: #e9f5ee;
  color: #315c4a;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.sample-credit-badge[hidden] {
  display: none;
}

.save-state {
  display: none;
}

.editor-favorite-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-coral-dark);
  font-size: 22px;
  line-height: 1;
}

.editor-favorite-button:hover,
.editor-favorite-button:focus-visible,
.editor-favorite-button[aria-pressed="true"] {
  border-color: #f1a596;
  background: #fff0ec;
  outline: none;
}

.save-project-button {
  min-width: 66px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: var(--iw-coral);
  color: #ffffff;
  box-shadow: none;
  font-weight: 900;
}

.studio-toast {
  position: fixed;
  right: 18px;
  bottom: 94px;
  z-index: 140;
  max-width: min(360px, calc(100vw - 36px));
  padding: 12px 16px;
  border: 1px solid #a8c6c1;
  border-radius: 8px;
  background: var(--iw-teal);
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(45, 38, 31, 0.2);
  font-size: 13px;
  font-weight: 900;
}

.topbar-center {
  display: none;
}

.topbar-actions {
  position: fixed;
  right: 12px;
  bottom: 86px;
  left: 12px;
  z-index: 80;
  display: none;
  max-height: min(66dvh, 540px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.99);
  box-shadow: 0 24px 60px rgba(45, 38, 31, 0.24);
}

.editor-shell.show-export-tools .topbar-actions {
  display: flex;
}

.editor-creative-tools {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--iw-line);
  background: var(--iw-ivory);
}

.editor-creative-tools button {
  min-width: 0;
  min-height: 68px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 7px 3px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #fffdf9;
  color: var(--iw-ink);
}

.editor-creative-tools button > span {
  font-size: 22px;
  line-height: 1;
}

.editor-creative-tools button > strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-creative-tools button.is-active {
  border-color: #ffb5a6;
  background: #fff0eb;
  color: var(--iw-coral-dark);
}

.editor-main {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  background: var(--iw-ivory);
}

.tool-rail {
  display: none;
}

.editor-body .canvas-panel,
.editor-body .canvas-wrap {
  min-height: 0;
  height: 100%;
  background: #fbf2e8;
}

.editor-body .canvas-wrap {
  border-right: 1px solid var(--iw-line);
}

.view-mode-badge {
  top: 14px;
  left: 14px;
  border: 1px solid var(--iw-line);
  background: rgba(255, 253, 249, 0.93);
  color: var(--iw-teal);
}

.empty-state {
  max-width: 360px;
  border-color: var(--iw-line);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.96);
}

.editor-body .empty-state strong {
  color: var(--iw-ink);
}

.empty-state-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--iw-line);
  border-radius: 50%;
  background: #fff;
  color: var(--iw-ink);
  font-size: 20px;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
}

.empty-upload-button {
  border: 0;
  border-radius: 8px;
  background: var(--iw-teal);
  box-shadow: none;
}

.editor-body .inspector {
  min-height: 0;
  overflow-y: auto;
  border-left: 1px solid var(--iw-line);
  background: var(--iw-paper);
}

.inspector-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid var(--iw-line);
  border-radius: 0;
  background: rgba(255, 253, 249, 0.96);
}

.inspector-tabs button {
  color: var(--iw-muted);
}

.inspector-tabs button.is-active {
  color: var(--iw-coral-dark);
  box-shadow: none;
}

.editor-body .panel-section h2 {
  color: var(--iw-ink);
  font-family: "Nunito Sans", sans-serif;
}

.production-panel {
  border-left-color: var(--iw-teal);
  background: #edf4f0;
}

.production-action {
  border: 0;
  background: var(--iw-teal);
  box-shadow: none;
}

.status-bar {
  min-height: 30px;
  padding: 5px 14px;
  background: #e9e1d8;
  color: #526765;
}

.status-bar strong,
.status-bar span:first-child {
  color: var(--iw-ink);
}

.editor-bottom-nav {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(250px, 1.55fr) minmax(140px, 0.85fr) minmax(210px, 1.15fr);
  gap: 9px;
  align-items: center;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--iw-line);
  background: rgba(255, 253, 249, 0.98);
}

.editor-view-dock {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #eee9e4;
}

.editor-bottom-nav .editor-view-dock button {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 16px minmax(0, auto);
  place-content: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 6px;
  color: #655f59;
  font-size: 10px;
}

.editor-bottom-nav .editor-view-dock button.is-active {
  background: var(--iw-teal);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(7, 79, 85, 0.2);
}

.editor-view-icon {
  position: relative;
  width: 15px;
  height: 15px;
  display: block;
}

.artwork-view-icon {
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.artwork-view-icon::before {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  height: 5px;
  background: currentColor;
  clip-path: polygon(0 100%, 36% 18%, 58% 70%, 74% 42%, 100% 100%);
}

.real-view-icon {
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.real-view-icon::before,
.real-view-icon::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(28deg);
}

.real-view-icon::before {
  left: 5px;
}

.real-view-icon::after {
  right: 5px;
}

.stitch-view-icon {
  background:
    linear-gradient(currentColor, currentColor) 2px 3px / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 2px 7px / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 2px 11px / 11px 1.5px no-repeat;
}

.editor-bottom-nav button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--iw-ink);
  font-size: 12px;
}

.editor-bottom-nav .editor-nav-icon {
  width: 24px;
  flex: 0 0 24px;
  text-align: center;
  font-size: 19px;
}

.editor-nav-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.editor-nav-copy strong,
.editor-nav-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-nav-copy small {
  color: #6e7773;
  font-size: 10px;
  font-weight: 800;
}

.editor-hoop-fit-summary {
  color: #4f7658;
  font-size: 8px;
}

.editor-hoop-fit-summary[data-fit="close"] {
  color: #8b641d;
}

.editor-hoop-fit-summary[data-fit="large"] {
  color: #a43e32;
}

.editor-bottom-nav .editor-hoop-button {
  border: 1px solid #e6c4a9;
  background: #fff7ef;
  color: var(--iw-ink);
}

.editor-bottom-nav button.is-primary {
  background: var(--iw-teal);
  color: #ffffff;
}

.editor-bottom-nav button.is-primary small {
  color: rgba(255, 255, 255, 0.78);
}

.hoop-dialog {
  width: min(680px, calc(100vw - 28px));
  max-width: 680px;
  max-height: min(820px, calc(100dvh - 28px));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--iw-ivory);
  color: var(--iw-ink);
  box-shadow: 0 26px 70px rgba(45, 38, 31, 0.28);
}

.hoop-dialog::backdrop {
  background: rgba(23, 48, 48, 0.42);
  backdrop-filter: blur(3px);
}

.hoop-dialog-shell {
  max-height: min(820px, calc(100dvh - 28px));
  overflow-y: auto;
}

.hoop-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--iw-line);
  background: #fffdf9;
}

.hoop-dialog-heading > div {
  min-width: 0;
}

.hoop-dialog-heading span {
  color: var(--iw-coral-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hoop-dialog-heading h2 {
  margin: 2px 0 3px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 25px;
}

.hoop-dialog-heading p {
  margin: 0;
  color: #6e7773;
  font-size: 12px;
  line-height: 1.45;
}

.hoop-dialog-heading > button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
  font-size: 25px;
}

.hoop-dialog-current {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 16px 20px 4px;
  padding: 12px;
  border: 1px solid #bad1cc;
  border-radius: 8px;
  background: #edf6f3;
}

.hoop-size-editor {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(230px, 1.35fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(3, 78, 88, 0.14);
  border-radius: 8px;
  background: rgba(255, 251, 244, 0.9);
}

.hoop-size-editor > div:first-child {
  display: grid;
  gap: 2px;
}

.hoop-size-editor > div:first-child span,
.hoop-size-editor > div:first-child small {
  color: #6f665f;
  font-size: 0.72rem;
}

.hoop-size-editor > div:first-child strong {
  color: #064e58;
}

.hoop-size-controls {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) 24px minmax(84px, 1fr);
  gap: 7px;
  align-items: end;
}

.hoop-size-controls label {
  display: grid;
  gap: 5px;
  color: #685e57;
  font-size: 0.72rem;
  font-weight: 700;
}

.hoop-size-controls label > span {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(3, 78, 88, 0.18);
  border-radius: 7px;
  background: #fff;
}

.hoop-size-controls input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #063f48;
  background: transparent;
  font: inherit;
  font-weight: 800;
}

.hoop-size-controls output {
  color: #063f48;
  font-weight: 800;
}

.hoop-size-controls small {
  color: #84786f;
  font-size: 0.72rem;
}

.hoop-size-lock {
  align-self: end;
  display: grid;
  place-items: center;
  min-height: 40px;
  color: #e66c59;
}

.hoop-size-units {
  display: grid;
  grid-template-columns: repeat(2, 42px);
  gap: 4px;
  padding: 3px;
  border-radius: 7px;
  background: #eee8e0;
}

.hoop-size-units button {
  min-height: 36px;
  border: 0;
  border-radius: 5px;
  color: #5d5650;
  background: transparent;
  font-weight: 800;
}

.hoop-size-units button.is-active {
  color: #fff;
  background: #075b64;
}

.custom-hoop-editor {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(300px, 1.6fr);
  gap: 14px;
  margin: 12px 20px 0;
  padding: 14px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #fffdf9;
}

.custom-hoop-editor > div:first-child {
  display: grid;
  align-content: center;
  gap: 2px;
}

.custom-hoop-editor > div:first-child span,
.custom-hoop-editor > div:first-child small {
  color: #6f665f;
  font-size: 0.72rem;
}

.custom-hoop-editor > div:first-child strong {
  color: #064e58;
}

.custom-hoop-controls {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.custom-hoop-controls > span {
  align-self: center;
  padding-top: 18px;
  color: #84786f;
  font-weight: 900;
}

.custom-hoop-controls label {
  display: grid;
  gap: 5px;
  color: #685e57;
  font-size: 0.72rem;
  font-weight: 700;
}

.custom-hoop-controls label > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 40px;
  padding: 0 9px;
  border: 1px solid rgba(3, 78, 88, 0.18);
  border-radius: 7px;
  background: #fff;
}

.custom-hoop-controls input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #063f48;
  background: transparent;
  font: inherit;
  font-weight: 800;
}

.custom-hoop-controls small {
  color: #84786f;
}

.custom-hoop-controls button {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: var(--iw-teal);
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}

.custom-hoop-editor > p {
  grid-column: 1 / -1;
  min-height: 1.1em;
  margin: -4px 0 0;
  color: #5d6f6d;
  font-size: 0.72rem;
}

@media (max-width: 720px) {
  .hoop-size-editor {
    grid-template-columns: 1fr;
  }

  .hoop-size-units {
    justify-self: start;
  }

  .custom-hoop-editor {
    grid-template-columns: 1fr;
  }

  .custom-hoop-controls {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .custom-hoop-controls button {
    grid-column: 1 / -1;
  }
}

.hoop-current-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 3px solid #b77b4e;
  border-radius: 50%;
  background: #fff9ed;
  color: var(--iw-teal);
  font-size: 18px;
}

.hoop-dialog-current > span:nth-child(2) {
  display: grid;
}

.hoop-dialog-current small {
  color: #6e7773;
  font-size: 10px;
  font-weight: 800;
}

.hoop-dialog-current strong {
  font-size: 15px;
}

.hoop-fit-status {
  padding: 6px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: #526765;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.hoop-fit-status[data-fit="safe"] {
  background: #dff2e5;
  color: #28633b;
}

.hoop-fit-status[data-fit="close"] {
  background: #fff0c9;
  color: #7a5620;
}

.hoop-fit-status[data-fit="large"] {
  background: #ffe2dc;
  color: #9b3e31;
}

.hoop-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 20px;
}

.hoop-choice {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
  text-align: left;
}

.hoop-choice:hover,
.hoop-choice:focus-visible {
  border-color: #ef9a83;
  outline: 3px solid rgba(241, 119, 94, 0.14);
}

.hoop-choice.is-selected {
  border-color: var(--iw-coral);
  background: #fff0ec;
  box-shadow: inset 0 0 0 1px var(--iw-coral);
}

.hoop-choice-preview {
  width: 52px;
  max-height: 52px;
  justify-self: center;
  border: 3px solid #b77b4e;
  border-radius: 8px;
  background:
    linear-gradient(rgba(9, 81, 84, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 81, 84, 0.06) 1px, transparent 1px),
    #fff9ed;
  background-size: 8px 8px;
  box-shadow: inset 0 0 0 2px #e1b68e;
}

.hoop-choice-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.hoop-choice-copy strong,
.hoop-choice-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hoop-choice-copy strong {
  font-size: 12px;
}

.hoop-choice-copy small {
  color: #6e7773;
  font-size: 10px;
  font-weight: 800;
}

.hoop-dialog-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 20px 16px;
}

.hoop-dialog-tools button {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #fffdf9;
  color: var(--iw-ink);
  text-align: left;
}

.hoop-dialog-tools button > span:first-child {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e8f2ef;
  color: var(--iw-teal);
  font-size: 18px;
}

.hoop-dialog-tools button > span:last-child {
  min-width: 0;
  display: grid;
}

.hoop-dialog-tools strong {
  font-size: 11px;
}

.hoop-dialog-tools small {
  color: #6e7773;
  font-size: 9px;
}

.hoop-dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--iw-line);
  background: #fffdf9;
}

.hoop-dialog-footer button {
  min-width: 120px;
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: var(--iw-teal);
  color: #ffffff;
  font-weight: 900;
}

@media (min-width: 760px) {
  .welcome-splash {
    min-height: min(900px, calc(100dvh - 40px));
    margin: 20px;
    border: 1px solid var(--iw-line);
    border-radius: 8px;
    box-shadow: var(--iw-shadow);
  }

  .studio-bottom-nav {
    right: 50%;
    left: 50%;
    width: min(100%, 720px);
    transform: translateX(-50%);
  }

  .detail-actions {
    right: 50%;
    left: 50%;
    width: min(100%, 720px);
    transform: translateX(-50%);
  }
}

@media (max-width: 900px) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editor-main {
    display: block;
    overflow-y: auto;
  }

  .editor-body .canvas-panel,
  .editor-body .canvas-wrap {
    height: min(62dvh, 640px);
    min-height: 430px;
  }

  .editor-body .canvas-wrap {
    border-right: 0;
    border-bottom: 1px solid var(--iw-line);
  }

  .editor-body .inspector {
    height: auto;
    max-height: none;
    overflow: visible;
    border-left: 0;
  }

  .projects-expanded .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .studio-home-header {
    min-height: 74px;
    padding: 13px 16px;
  }

  .gallery-main {
    padding: 18px 14px 30px;
  }

  .create-banner {
    min-height: 158px;
    grid-template-columns: minmax(0, 1fr) 116px;
    padding: 19px;
  }

  .create-banner h1 {
    font-size: 22px;
  }

  .banner-hoop {
    width: 104px;
    height: 104px;
    box-shadow:
      0 0 0 5px #aa7048,
      0 0 0 8px #e2ab73,
      var(--iw-shadow);
  }

  .banner-hoop > span {
    top: -17px;
    width: 38px;
    height: 15px;
  }

  .banner-sparkle {
    right: 123px;
  }

  .home-quick-actions {
    gap: 8px;
  }

  .home-quick-button {
    min-height: 86px;
  }

  .home-quick-button strong {
    font-size: 10px;
  }

  .quick-icon {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .project-grid {
    grid-auto-columns: 58%;
  }

  .projects-expanded .project-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inspiration-banner {
    grid-template-columns: 1fr 94px;
  }

  .inspiration-hoop {
    width: 82px;
    height: 82px;
    box-shadow:
      0 0 0 4px #aa7048,
      0 0 0 7px #e2ab73,
      var(--iw-shadow);
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .shop-offer-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
  }

  .shop-offer-strip ol {
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .shop-offer-strip li {
    flex: 0 0 68px;
  }

  .shop-collection-toolbar {
    align-items: stretch;
  }

  .shop-collection-tabs {
    overflow-x: auto;
  }

  .shop-collection-tabs button {
    flex: 0 0 auto;
    padding: 0 10px;
  }

  .shop-bag-button {
    align-self: stretch;
  }

  .catalog-card-actions {
    grid-template-columns: 1fr;
  }

  .shop-bag-body {
    padding: 14px;
  }

  .shop-bag-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
  }

  .shop-bag-item-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
  }

  .shop-bag-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    padding: 12px 14px;
  }

  .shop-bag-actions button {
    min-width: 0;
    padding: 0 10px;
  }

  .detail-hoop-stage {
    min-height: 420px;
  }

  .detail-hoop {
    width: min(82vw, 340px);
    height: min(82vw, 340px);
  }

  .editor-topbar {
    min-height: 66px;
    padding: 9px 11px;
  }

  .topbar-left {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .back-button {
    width: 38px;
    height: 38px;
  }

  .editor-design-name-row {
    width: min(230px, 48vw);
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  .editor-rename-button {
    width: 30px;
    height: 30px;
  }

  .save-project-button {
    min-width: 58px;
    height: 38px;
    font-size: 12px;
  }

  .sample-credit-badge {
    max-width: 84px;
    padding: 0 7px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .editor-favorite-button {
    width: 38px;
    height: 38px;
  }

  .design-name {
    width: 100%;
    font-size: 14px;
  }

  .editor-creative-tools {
    gap: 6px;
    padding: 8px;
  }

  .editor-creative-tools button {
    min-height: 58px;
  }

  .editor-body .canvas-panel,
  .editor-body .canvas-wrap {
    min-height: 390px;
    height: 54dvh;
  }

  .status-bar {
    display: none;
  }

  .editor-bottom-nav {
    min-height: 68px;
  }

  .hoop-choice-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .editor-bottom-nav {
    grid-template-columns: minmax(165px, 1.65fr) minmax(82px, 0.8fr) minmax(112px, 1.1fr);
    gap: 5px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .editor-bottom-nav .editor-view-dock button {
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 4px 2px;
    font-size: 9px;
  }

  .editor-view-icon {
    display: none;
  }

  .editor-bottom-nav button {
    gap: 5px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .editor-bottom-nav .editor-nav-icon {
    width: 20px;
    flex-basis: 20px;
    font-size: 17px;
  }

  .editor-hoop-fit-summary {
    display: none;
  }

  .hoop-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .hoop-dialog-shell {
    max-height: calc(100dvh - 16px);
  }

  .hoop-dialog-heading {
    padding: 16px 14px 12px;
  }

  .hoop-dialog-current {
    grid-template-columns: 42px minmax(0, 1fr);
    margin-right: 14px;
    margin-left: 14px;
  }

  .hoop-fit-status {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .hoop-choice-list,
  .hoop-dialog-tools {
    padding-right: 14px;
    padding-left: 14px;
  }

  .hoop-dialog-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .welcome-wordmark strong {
    font-size: 48px;
  }

  .welcome-hoop {
    width: 136px;
    height: 136px;
    flex-basis: 136px;
  }

  .welcome-product-intro {
    margin-top: 18px;
  }

  .welcome-product-intro h1 {
    font-size: 23px;
  }

  .welcome-product-intro p {
    font-size: 12px;
  }

  .create-banner {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .banner-hoop {
    width: 88px;
    height: 88px;
  }

  .home-quick-button strong {
    font-size: 9px;
  }

  .project-grid {
    grid-auto-columns: 68%;
  }

  .projects-expanded .project-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .status-bar {
    display: none;
  }

  .home-studio-intro {
    grid-template-columns: minmax(0, 1fr) 190px;
    padding: 34px;
  }

  .home-intro-copy h1 {
    font-size: 38px;
  }

  .home-intro-hoop {
    width: 176px;
    height: 176px;
  }

  .home-plan-grid {
    grid-template-columns: 1fr;
  }

  .membership-plan-grid {
    grid-template-columns: 1fr;
  }

  .profile-membership-heading {
    align-items: start;
  }

  .home-recent-projects,
  .projects-panel .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .projects-heading-actions {
    gap: 6px;
  }

  .projects-select-button,
  .projects-new-button {
    min-height: 44px;
    padding: 0 12px;
    font-size: 12px;
  }

  .project-selection-bar {
    display: grid;
  }

  .project-selection-bar > div {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
  }

  .project-selection-bar button {
    min-width: 0;
    padding: 0 8px;
  }

  .project-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .project-search {
    grid-column: 1 / -1;
  }

  .project-search input {
    width: 100%;
  }

  .project-filter button {
    padding: 0 10px;
  }

  .home-studio-intro {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 30px 24px;
    text-align: center;
  }

  .home-studio-intro::after {
    display: none;
  }

  .home-intro-copy {
    margin: 0 auto;
  }

  .home-intro-copy h1 {
    font-size: 34px;
  }

  .home-intro-copy p {
    font-size: 14px;
  }

  .home-create-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-intro-hoop {
    width: 164px;
    height: 164px;
    grid-row: 1;
  }

  .home-section-heading {
    align-items: flex-start;
  }

  .home-section-heading h2 {
    font-size: 23px;
  }

  .home-section-heading button {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: 11px;
  }

  .home-plan-card {
    padding: 20px;
  }

  .home-account-summary {
    align-items: start;
  }

  .profile-membership-heading {
    display: grid;
    gap: 10px;
  }

  .profile-membership-heading p {
    text-align: left;
  }

  .profile-credit-card {
    align-items: start;
  }

  .home-recent-projects {
    grid-template-columns: 1fr;
  }

  .home-recent-open {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .home-recent-hoop {
    width: 86px;
    height: 86px;
  }

  .projects-panel .section-page-heading {
    align-items: center;
  }

  .projects-new-button {
    min-height: 44px;
    padding: 0 13px;
    font-size: 12px;
  }

  .projects-panel .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .home-section-heading {
    display: grid;
  }

  .home-section-heading button {
    justify-self: start;
  }

  .home-account-summary {
    display: grid;
  }

  .home-account-summary button {
    justify-self: start;
  }

  .projects-panel .project-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep the saved-design artwork entirely inside the usable hoop on every viewport. */
.detail-hoop {
  height: auto;
}

.detail-hoop .detail-hoop-fabric img {
  width: auto;
  height: auto;
  max-width: 84%;
  max-height: 84%;
  padding: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.operation-status {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 20;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  width: min(560px, calc(100% - 36px));
  overflow: hidden;
  border: 1px solid rgba(255, 111, 88, 0.32);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.98);
  box-shadow: 0 12px 30px rgba(36, 47, 45, 0.14);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.operation-status[hidden] {
  display: none;
}

.operation-status-hoop {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 42px;
  aspect-ratio: 1;
  border: 5px solid #d89a62;
  border-radius: 50%;
  background: #fff5df;
  box-shadow: inset 0 0 0 2px #f5c58f, 0 5px 12px rgba(91, 58, 37, 0.16);
  animation: operation-hoop-bob 1.4s ease-in-out infinite;
}

.operation-status-hoop::before {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 15px;
  height: 9px;
  border-radius: 3px 3px 1px 1px;
  background: #11605f;
  content: "";
  transform: translateX(-50%);
}

.operation-status-stitch {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff8ed url("assets/strawberry-sample.png") center / 78% auto no-repeat;
}

.operation-status-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px 10px;
}

.operation-status-meter,
.operation-status-actions {
  grid-column: 1 / -1;
}

.operation-status-copy span {
  border-radius: 6px;
  padding: 5px 8px;
  background: rgba(255, 111, 88, 0.13);
  color: #b74838;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.operation-status-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--iw-ink, #263d3a);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-status-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px 12px;
}

.operation-status-actions[hidden] {
  display: none;
}

.operation-status-actions button {
  min-height: 36px;
  border: 1px solid rgba(7, 79, 85, 0.22);
  border-radius: 7px;
  padding: 7px 12px;
  background: #fffdf9;
  color: #07545a;
  font-size: 12px;
  font-weight: 800;
}

.operation-status-actions button:hover:not(:disabled),
.operation-status-actions button:focus-visible {
  border-color: #07545a;
  outline: 2px solid rgba(255, 111, 88, 0.2);
  outline-offset: 1px;
}

.operation-status-actions button.is-primary {
  border-color: #07545a;
  background: #07545a;
  color: #ffffff;
}

.operation-status-actions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.operation-status.is-recovery {
  border-color: rgba(228, 71, 40, 0.38);
  box-shadow: 0 14px 34px rgba(91, 47, 48, 0.18);
}

.operation-status.is-recovery .operation-status-copy span {
  background: rgba(228, 71, 40, 0.14);
  color: #a93c2a;
}

.operation-status-meter {
  height: 5px;
  overflow: hidden;
  background: rgba(7, 79, 85, 0.1);
}

.operation-status-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #ff715d, #eda94f, #0b6a6f);
  transition: width 220ms ease;
}

.operation-status.is-indeterminate .operation-status-meter span {
  animation: operation-status-slide 1.15s ease-in-out infinite;
}

@keyframes operation-status-slide {
  from { transform: translateX(-110%); }
  to { transform: translateX(310%); }
}

@keyframes operation-hoop-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .operation-status-hoop,
  .operation-status.is-indeterminate .operation-status-meter span {
    animation: none;
  }
}

@media (max-width: 640px) {
  .operation-status {
    top: 10px;
    grid-template-columns: 54px minmax(0, 1fr);
    width: calc(100% - 20px);
  }

  .operation-status-copy {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .operation-status-copy span {
    justify-self: start;
  }

  .operation-status-copy strong {
    white-space: normal;
  }

  .operation-status-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-status-actions button {
    width: 100%;
  }

  .operation-status-actions button.is-primary:last-child {
    grid-column: 1 / -1;
  }
}

.artwork-reference-layer {
  border-color: rgba(255, 111, 88, 0.28);
  background: #fff9ef;
}

.artwork-reference-layer .layer-top {
  grid-template-columns: auto 58px minmax(0, 1fr) auto;
}

.artwork-reference-layer .layer-name strong {
  color: var(--iw-ink, #263d3a);
  font-size: 13px;
}

.artwork-reference-lock {
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(17, 96, 95, 0.1);
  color: #11605f;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

/* Stitch Out is a focused download sheet, not another crowded editor toolbar. */
.editor-shell.show-export-tools::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(21, 55, 54, 0.38);
  backdrop-filter: blur(2px);
}

.editor-shell.show-export-tools .editor-topbar {
  z-index: 90;
}

.editor-shell.show-export-tools .editor-topbar > :not(.topbar-actions) {
  pointer-events: none;
}

.editor-shell.show-export-tools .topbar-actions {
  pointer-events: auto;
}

.topbar-actions {
  width: min(960px, calc(100vw - 48px));
  max-height: min(84dvh, 800px);
  margin-left: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  padding: 20px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.export-tools-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.export-tools-heading > div {
  min-width: 0;
}

.export-tools-heading span {
  color: var(--iw-coral-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.export-tools-heading h2 {
  margin: 2px 0 3px;
  color: var(--iw-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  letter-spacing: 0;
}

.export-tools-heading p {
  margin: 0;
  color: var(--iw-muted);
  font-size: 12px;
  line-height: 1.45;
}

.export-tools-heading > button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
  font-size: 24px;
}

.export-progress-panel {
  position: sticky;
  top: -1px;
  z-index: 3;
  display: grid;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid rgba(7, 79, 85, 0.2);
  border-radius: 8px;
  background: rgba(240, 248, 245, 0.98);
  box-shadow: 0 8px 22px rgba(45, 38, 31, 0.08);
}

.export-progress-panel[hidden] {
  display: none;
}

.export-progress-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.export-progress-copy span {
  color: var(--iw-coral-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.export-progress-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--iw-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-progress-copy b {
  color: var(--iw-teal);
  font-size: 11px;
}

.export-progress-meter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(7, 79, 85, 0.11);
}

.export-progress-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--iw-coral), #eda94f, var(--iw-teal));
  transition: width 220ms ease;
}

.export-progress-panel.is-indeterminate .export-progress-meter span {
  width: 35%;
  animation: export-progress-slide 1.15s ease-in-out infinite;
}

.export-progress-panel.is-complete {
  border-color: #9ec7b0;
  background: rgba(234, 246, 238, 0.98);
}

.export-progress-panel.is-error {
  border-color: #eab4a8;
  background: rgba(255, 241, 237, 0.98);
}

@keyframes export-progress-slide {
  from { transform: translateX(-115%); }
  to { transform: translateX(315%); }
}

.export-hoop-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid #b8d1ca;
  border-radius: 8px;
  background: #edf6f3;
  color: var(--iw-ink);
  text-align: left;
}

.export-hoop-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid #b77b4e;
  border-radius: 50%;
  background: #fff9ed;
  color: var(--iw-teal);
  font-size: 18px;
}

.export-hoop-summary > span:nth-child(2) {
  min-width: 0;
  display: grid;
}

.export-hoop-summary small {
  color: var(--iw-muted);
  font-size: 10px;
  font-weight: 800;
}

.export-hoop-summary strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-hoop-fit {
  padding: 6px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: #526765;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.export-hoop-fit[data-fit="safe"] {
  background: #dff2e5;
  color: #28633b;
}

.export-hoop-fit[data-fit="close"] {
  background: #fff0c9;
  color: #7a5620;
}

.export-hoop-fit[data-fit="large"] {
  background: #ffe2dc;
  color: #9b3e31;
}

.export-setup-controls {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
}

.export-setup-controls > label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--iw-muted);
  font-size: 10px;
  font-weight: 900;
}

.export-width-control {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
}

.export-width-control input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--iw-ink);
  font-weight: 900;
}

.export-hidden-hoop-select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.export-preflight {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid #d8cdc4;
  border-radius: 8px;
  background: #fffdf9;
}

.export-preflight[data-state="ready"],
.export-preflight[data-state="verified"] {
  border-color: #a6cbb7;
  background: #f2f8f4;
}

.export-preflight[data-state="review"] {
  border-color: #efb8aa;
  background: #fff7f3;
}

.export-preflight-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.export-preflight-heading > div {
  min-width: 0;
}

.export-preflight-heading span {
  color: var(--iw-muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.export-preflight-heading h3 {
  margin: 1px 0 0;
  color: var(--iw-ink);
  font-size: 16px;
  letter-spacing: 0;
}

.export-preflight-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 9px;
  background: #ece7e1;
  color: #665f59;
  font-size: 10px;
  font-weight: 900;
}

.export-preflight[data-state="ready"] .export-preflight-status,
.export-preflight[data-state="verified"] .export-preflight-status {
  background: #dcefe3;
  color: #28633b;
}

.export-preflight[data-state="review"] .export-preflight-status {
  background: #ffe0d8;
  color: #9b3e31;
}

.export-preflight-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.export-preflight-grid > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid rgba(7, 79, 85, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.82);
}

.export-preflight-grid dt {
  color: var(--iw-muted);
  font-size: 9px;
  font-weight: 800;
}

.export-preflight-grid dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--iw-ink);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-preflight-issues {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.export-preflight-issues li {
  position: relative;
  margin: 0;
  padding-left: 17px;
  color: #6d615a;
  font-size: 10px;
  line-height: 1.45;
}

.export-preflight-issues li::before {
  content: "";
  position: absolute;
  top: 0.43em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b1aaa3;
}

.export-preflight-issues li[data-tone="ready"]::before {
  background: #4f9465;
}

.export-preflight-issues li[data-tone="review"]::before {
  background: #d99a3d;
}

.export-preflight-issues li[data-tone="error"]::before {
  background: var(--iw-coral-dark);
}

.export-preflight-credit {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(7, 79, 85, 0.12);
  color: var(--iw-teal);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
}

.export-file-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.export-file-option {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #fffdf9;
  color: var(--iw-ink);
  text-align: left;
}

.export-file-option:hover,
.export-file-option:focus-visible {
  border-color: var(--iw-coral);
  outline: 3px solid rgba(255, 112, 94, 0.14);
}

.export-file-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 18px;
}

.export-file-image {
  background: #dfeee9;
  color: var(--iw-teal);
}

.export-file-sheet {
  background: #fff0d1;
  color: #8f5d1d;
}

.export-file-video {
  background: #f3e6f7;
  color: #695279;
}

.export-file-option > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.export-file-option strong {
  font-size: 12px;
}

.export-file-option small {
  color: var(--iw-muted);
  font-size: 9px;
  line-height: 1.35;
}

.export-machine-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid #f0c7bc;
  border-radius: 8px;
  background: #fff1ec;
}

.export-machine-card .machine-format-control {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--iw-muted);
  font-size: 10px;
  font-weight: 900;
}

.export-machine-card select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
}

.export-machine-card .primary-button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: var(--iw-teal);
  color: #ffffff;
  font-weight: 900;
}

.prepared-download-panel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  padding: 12px;
  border: 1px solid #9ec7b0;
  border-radius: 8px;
  background: #eaf6ee;
}

.prepared-download-panel[data-state="error"] {
  border-color: #eab4a8;
  background: #fff1ed;
}

.prepared-download-panel[data-state="support"] {
  border-color: #c7c2da;
  background: #f7f3fb;
}

.prepared-download-panel[hidden] {
  display: none;
}

.prepared-download-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2d7650;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.prepared-download-panel[data-state="error"] .prepared-download-icon {
  background: var(--iw-coral-dark);
}

.prepared-download-panel[data-state="support"] .prepared-download-icon {
  background: #735d88;
}

.prepared-download-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.prepared-download-copy small {
  color: #35704f;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.prepared-download-copy strong,
.prepared-download-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepared-download-copy strong {
  color: var(--iw-ink);
  font-size: 12px;
}

.prepared-download-copy span {
  color: var(--iw-muted);
  font-size: 9px;
}

.prepared-download-copy .prepared-download-message {
  margin-top: 3px;
  overflow: visible;
  font-size: 10px;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}

.prepared-download-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.prepared-download-actions a,
.prepared-download-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}

.prepared-download-actions [hidden] {
  display: none;
}

.prepared-download-actions a {
  border: 1px solid #9ec7b0;
  background: #ffffff;
  color: var(--iw-teal);
}

.prepared-download-actions button {
  border: 0;
  background: var(--iw-teal);
  color: #ffffff;
}

.prepared-download-actions .prepared-download-retry {
  background: var(--iw-coral-dark);
}

.prepared-supporting-downloads {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid rgba(7, 79, 85, 0.14);
}

.prepared-supporting-downloads[hidden] {
  display: none;
}

.prepared-supporting-downloads > span {
  color: var(--iw-muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.prepared-supporting-downloads button {
  min-height: 36px;
  border: 1px solid rgba(7, 79, 85, 0.2);
  border-radius: 7px;
  background: #fffdf9;
  color: var(--iw-teal);
  font-size: 10px;
  font-weight: 900;
}

.prepared-supporting-downloads button:hover,
.prepared-supporting-downloads button:focus-visible {
  border-color: var(--iw-teal);
  outline: 2px solid rgba(255, 111, 88, 0.18);
  outline-offset: 1px;
}

.export-save-note {
  margin: -2px 0 0;
  color: var(--iw-muted);
  font-size: 10px;
  text-align: center;
}

@media (max-width: 900px) {
  .topbar-actions {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 94dvh;
    margin: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }

  .topbar-actions > * {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

  .topbar-actions > .export-hidden-hoop-select {
    position: absolute;
    width: 1px;
    min-width: 1px;
  }

  .export-file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .export-preflight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .production-panel .production-value-control > .production-value-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .production-panel .production-value-head > .production-exact-value {
    justify-self: start;
  }

  .editor-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(280px, 1fr) minmax(230px, 40dvh);
    overflow: hidden;
  }

  .editor-body .canvas-panel,
  .editor-body .canvas-wrap {
    height: 100%;
    min-height: 0;
  }

  .editor-body .inspector {
    height: 100%;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--iw-line);
    border-left: 0;
  }

  .editor-body .panel-section label,
  .editor-body .panel-section .setting-label-text {
    min-width: 0;
    line-height: 1.35;
    white-space: normal;
  }

  .editor-body .panel-section select,
  .editor-body .panel-section input,
  .editor-body .panel-section textarea {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .export-setup-controls,
  .export-machine-card {
    grid-template-columns: 1fr;
  }

  .export-file-grid {
    grid-template-columns: 1fr;
  }

  .export-preflight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .export-progress-copy {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .export-progress-copy span {
    grid-column: 1 / -1;
  }

  .export-progress-copy strong {
    white-space: normal;
  }

  .export-file-option {
    min-height: 64px;
  }

  .prepared-download-panel {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .prepared-download-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
  }

  .prepared-supporting-downloads {
    grid-template-columns: 1fr;
  }

  .prepared-supporting-downloads > span {
    margin-top: 2px;
  }

  .export-hoop-summary {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .export-hoop-fit {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .editor-main {
    grid-template-rows: minmax(250px, 1fr) minmax(220px, 42dvh);
  }
}

/* Editor command history, live lettering, and the actual tablet editor shell. */
.editor-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
}

.editor-command-bar {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--iw-line);
  background: #fffdf9;
  scrollbar-width: none;
}

.editor-command-bar::-webkit-scrollbar {
  display: none;
}

.editor-history-controls,
.text-selection-commands {
  display: contents;
}

.editor-command-button {
  min-width: 44px;
  min-height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
  font-size: 11px;
  font-weight: 900;
}

.editor-command-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.editor-command-button:hover,
.editor-command-button:focus-visible {
  border-color: #ef9a83;
  outline: 3px solid rgba(241, 119, 94, 0.14);
}

.editor-command-button:disabled {
  cursor: default;
  opacity: 0.38;
}

.editor-command-button.is-danger {
  color: #a23d31;
}

.editor-command-divider {
  width: 1px;
  height: 27px;
  flex: 0 0 1px;
  margin: 0 2px;
  background: var(--iw-line);
}

#previewCanvas {
  touch-action: none;
}

.panel-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--iw-coral-dark);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.text-transform-panel {
  border-left: 3px solid var(--iw-coral);
  background: #fff9f5;
}

.text-transform-panel > label {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.text-transform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.text-transform-grid label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.text-transform-measurement {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.text-transform-measurement input {
  min-width: 0;
  width: 100%;
}

.text-transform-measurement > span {
  color: var(--iw-muted);
  font-size: 10px;
  font-weight: 900;
}

.text-size-guidance {
  margin: 10px 0;
  padding: 9px 10px;
  border: 1px solid #ead8a3;
  border-radius: 8px;
  background: #fff6d6;
  color: #665527;
  font-size: 10px;
  line-height: 1.45;
}

.text-transform-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.text-transform-actions button {
  min-width: 0;
  min-height: 40px;
  padding: 7px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
  font-size: 10px;
  font-weight: 900;
}

.design-size-panel {
  border-left: 3px solid var(--iw-teal);
  background: #fbfffd;
}

.design-size-panel .panel-intro {
  margin: 5px 0 12px;
  color: var(--iw-muted);
  font-size: 11px;
  line-height: 1.45;
}

.design-size-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.design-size-grid label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--iw-muted);
  font-size: 10px;
  font-weight: 900;
}

.design-size-grid input,
.design-size-grid output {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--iw-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--iw-ink);
  font: inherit;
  font-size: 12px;
}

.design-size-grid input:focus {
  border-color: var(--iw-coral);
  outline: 3px solid rgba(241, 119, 94, 0.14);
}

.design-size-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.locked-proportions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--iw-teal);
  font-size: 10px;
  font-weight: 900;
}

.design-size-panel .safety-badge[data-fit="close"] {
  border-color: #ead8a3;
  background: #fff6d6;
  color: #665527;
}

.design-size-panel .safety-badge[data-fit="large"] {
  border-color: #f2b8ae;
  background: #fff0ed;
  color: #9d3d31;
}

@media (max-width: 900px) {
  .editor-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .editor-main {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(300px, 54%) minmax(240px, 46%);
    overflow: hidden;
  }

  .canvas-panel,
  .canvas-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .canvas-wrap {
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--iw-line);
  }

  .inspector {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--iw-line);
    border-left: 0;
  }

  .panel-section label,
  .panel-section .setting-label-text {
    min-width: 0;
    line-height: 1.35;
    white-space: normal;
  }

  .panel-section select,
  .panel-section input,
  .panel-section textarea {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .editor-command-bar {
    min-height: 44px;
    padding: 5px 9px;
  }

  .editor-command-button {
    min-height: 34px;
    padding: 0 8px;
  }

  .editor-command-button span {
    font-size: 10px;
  }

  .editor-main {
    grid-template-rows: minmax(260px, 52%) minmax(230px, 48%);
  }

  .design-size-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

.analysis-review-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: 1180px;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid #e8d9cc;
  border-radius: 18px;
  background: #fffaf2;
  color: #123f3b;
  box-shadow: 0 28px 80px rgba(25, 49, 45, 0.2);
  overflow: hidden;
}

.analysis-review-dialog::backdrop {
  background: rgba(17, 47, 44, 0.42);
  backdrop-filter: blur(4px);
}

.analysis-review-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 32px);
}

.analysis-review-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid #eadfd5;
  background: #fffdf8;
}

.analysis-review-heading > div:nth-child(2) > span,
.analysis-plan-title span,
.analysis-palette-row span,
.analysis-material-row span {
  display: block;
  color: #e95f50;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.analysis-review-heading h2,
.analysis-plan-title h3 {
  margin: 2px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  color: #123f3b;
  letter-spacing: 0;
}

.analysis-review-heading h2 {
  font-size: clamp(23px, 2.5vw, 34px);
}

.analysis-review-heading p {
  margin: 4px 0 0;
  color: #6d6a64;
  font-size: 13px;
}

.analysis-review-heading > button {
  width: 44px;
  height: 44px;
  border: 1px solid #e5d9ce;
  border-radius: 50%;
  background: #fffaf2;
  color: #123f3b;
  font-size: 25px;
}

.analysis-review-hoop {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  position: relative;
  border: 5px solid #bd8656;
  border-radius: 50%;
  background: #fff4e8;
  box-shadow: inset 0 0 0 2px #e7c69e;
}

.analysis-review-hoop::before {
  content: "";
  width: 14px;
  height: 8px;
  position: absolute;
  top: -10px;
  border-radius: 3px 3px 0 0;
  background: #24665e;
}

.analysis-review-hoop span {
  width: 20px;
  height: 20px;
  display: block;
  border: 3px solid #ef6c5b;
  border-radius: 50% 50% 45% 45%;
  position: relative;
}

.analysis-review-hoop span::before,
.analysis-review-hoop span::after {
  content: "";
  width: 10px;
  height: 5px;
  position: absolute;
  top: -5px;
  border-radius: 100% 0;
  background: #638065;
}

.analysis-review-hoop span::before {
  left: -6px;
  transform: rotate(30deg);
}

.analysis-review-hoop span::after {
  right: -6px;
  transform: rotate(150deg);
}

.analysis-review-body {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: 22px;
  padding: 22px;
  overflow: auto;
  overscroll-behavior: contain;
}

.analysis-visual-column,
.analysis-plan-column {
  min-width: 0;
}

.analysis-triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.analysis-triptych figure {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e7d9cc;
  border-radius: 8px;
  background: #fffdf9;
}

.analysis-triptych canvas {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  background-color: #fbf5ec;
  background-image:
    linear-gradient(45deg, rgba(18, 63, 59, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(18, 63, 59, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(18, 63, 59, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(18, 63, 59, 0.035) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.analysis-triptych figcaption {
  display: grid;
  gap: 2px;
  padding: 10px 11px;
  border-top: 1px solid #eee3d9;
}

.analysis-triptych figcaption strong {
  font-size: 13px;
}

.analysis-triptych figcaption span {
  color: #736e67;
  font-size: 11px;
}

.analysis-palette-row {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #e7d9cc;
  border-radius: 8px;
  background: #fffdf9;
}

.analysis-palette-row strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.analysis-palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.analysis-palette i {
  width: 28px;
  height: 28px;
  display: block;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d9cbc0;
}

.analysis-detail-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid #ceddca;
  border-radius: 8px;
  background: #eff7ed;
}

.analysis-detail-notice[data-tone="warning"] {
  border-color: #efd59c;
  background: #fff6dd;
}

.analysis-detail-notice svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #4e765d;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.analysis-detail-notice[data-tone="warning"] svg {
  stroke: #aa6a24;
}

.analysis-detail-notice strong,
.analysis-detail-notice span {
  display: block;
}

.analysis-detail-notice strong {
  font-size: 13px;
}

.analysis-detail-notice span {
  margin-top: 2px;
  color: #655f59;
  font-size: 12px;
}

.analysis-plan-column {
  padding: 18px;
  border: 1px solid #e7d9cc;
  border-radius: 8px;
  background: #fffdf9;
}

.analysis-plan-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.analysis-plan-title h3 {
  font-size: 21px;
}

.analysis-provisional-badge {
  flex: none;
  padding: 6px 9px;
  border-radius: 999px;
  background: #e6f1ec;
  color: #286459 !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
}

.analysis-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 16px;
}

.analysis-metrics > div {
  min-width: 0;
  padding: 9px;
  border-radius: 7px;
  background: #f7f0e8;
}

.analysis-metrics span,
.analysis-metrics strong {
  display: block;
}

.analysis-metrics span {
  color: #746f68;
  font-size: 10px;
}

.analysis-metrics strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.analysis-size-metric {
  margin: 8px 0 14px;
  color: #68635d;
  font-size: 12px;
}

.analysis-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.analysis-settings-grid > label {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 10px;
  border: 1px solid #eadfd5;
  border-radius: 7px;
  background: #fffaf3;
  color: #2f4d49;
  font-size: 12px;
  font-weight: 700;
}

.analysis-settings-grid input[type="number"],
.analysis-settings-grid select {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 9px;
  border: 1px solid #d8c9bd;
  border-radius: 6px;
  background: #fff;
  color: #123f3b;
}

.analysis-settings-grid input[type="range"] {
  width: 100%;
  grid-column: 1 / -1;
  accent-color: #ef6c5b;
}

.analysis-settings-grid > label > small {
  grid-column: 1 / -1;
  justify-self: end;
  color: #776f68;
}

.analysis-measurement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.analysis-measurement > span {
  color: #766f68;
  font-size: 11px;
}

.analysis-cleanup-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid #d5e2d0;
  border-radius: 7px;
  background: #f2f7ef;
}

.analysis-cleanup-toggle input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #ef6c5b;
}

.analysis-cleanup-toggle strong,
.analysis-cleanup-toggle small {
  display: block;
}

.analysis-cleanup-toggle strong {
  font-size: 13px;
}

.analysis-cleanup-toggle small {
  margin-top: 2px;
  color: #6a665f;
  font-size: 11px;
  line-height: 1.35;
}

.analysis-material-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid #eadfd5;
  border-radius: 7px;
}

.analysis-material-row strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.analysis-material-row > small {
  max-width: 180px;
  color: #6f6962;
  text-align: right;
  font-size: 10px;
}

.analysis-review-status {
  min-height: 17px;
  margin: 10px 0 0;
  color: #655f59;
  font-size: 12px;
}

.analysis-review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid #eadfd5;
  background: #fffdf8;
}

.analysis-review-footer > div {
  display: flex;
  gap: 9px;
}

.analysis-review-footer button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #d8c9bd;
  border-radius: 7px;
  background: #fffaf2;
  color: #123f3b;
  font-weight: 800;
}

.analysis-review-footer button.is-primary {
  border-color: #ef6c5b;
  background: #ef6c5b;
  color: #fff;
}

.analysis-review-footer button:disabled {
  cursor: wait;
  opacity: 0.6;
}

@media (max-width: 920px) {
  .analysis-review-body {
    grid-template-columns: 1fr;
  }

  .analysis-plan-column {
    padding: 15px;
  }
}

@media (max-width: 640px) {
  .analysis-review-dialog {
    width: 100vw;
    max-width: none;
    max-height: 94dvh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
  }

  .analysis-review-dialog form {
    max-height: 94dvh;
  }

  .analysis-review-heading {
    padding: 15px;
  }

  .analysis-review-hoop {
    width: 44px;
    height: 44px;
  }

  .analysis-review-heading h2 {
    font-size: 22px;
  }

  .analysis-review-heading p {
    display: none;
  }

  .analysis-review-body {
    padding: 14px;
  }

  .analysis-triptych {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 5px;
  }

  .analysis-triptych figure {
    scroll-snap-align: start;
  }

  .analysis-metrics,
  .analysis-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-material-row,
  .analysis-review-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .analysis-material-row > small {
    max-width: none;
    text-align: left;
  }

  .analysis-review-footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }

  .analysis-review-footer > div {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
  }
}

/* Final responsive editor contract. Keep the canvas and settings in fixed, independently scrolling panes. */
@media (max-width: 900px) {
  .editor-shell {
    height: 100dvh;
    min-height: 100dvh;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .editor-main {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(250px, 56%) minmax(220px, 44%);
    overflow: hidden;
  }

  .editor-body .canvas-panel,
  .editor-body .canvas-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .editor-body .canvas-wrap {
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--iw-line);
  }

  .editor-body .inspector {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-top: 0;
    border-left: 0;
  }

  .status-bar {
    display: none;
  }

  .inspector-tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .inspector-tabs::-webkit-scrollbar {
    display: none;
  }

  .inspector-tabs button {
    min-width: 82px;
    flex: 1 0 auto;
  }
}

@media (max-width: 620px) {
  .studio-navigation-dialog {
    width: 100vw;
    max-width: none;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
  }

  .studio-navigation-sheet header {
    padding: 16px 18px 13px;
  }

  .studio-navigation-sheet h2 {
    font-size: 21px;
  }

  .studio-navigation-sheet nav {
    max-height: calc(92dvh - 78px);
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
  }

  .studio-navigation-sheet nav button,
  .studio-navigation-sheet nav a {
    min-height: 48px;
  }

  .editor-topbar {
    min-height: 58px;
    padding: 7px 9px;
  }

  .topbar-left {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .back-button,
  .editor-favorite-button,
  .save-project-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .editor-design-name-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  .design-name {
    max-width: none;
    font-size: 14px;
    text-align: left;
  }

  .editor-rename-button {
    width: 28px;
    height: 28px;
  }

  .save-controls {
    gap: 4px;
  }

  .sample-credit-badge,
  .editor-favorite-button {
    display: none;
  }

  .save-project-button {
    padding: 0;
    font-size: 0;
  }

  .save-project-button::before {
    content: "Save";
    font-size: 10px;
  }

  .editor-command-bar {
    min-height: 42px;
    padding: 4px 8px;
  }

  .editor-command-button {
    min-height: 32px;
    padding: 0 8px;
  }

  .editor-creative-tools {
    gap: 5px;
    padding: 5px 8px;
  }

  .editor-creative-tools button {
    min-height: 48px;
    gap: 3px;
    padding: 4px 2px;
  }

  .editor-creative-tools button > span {
    font-size: 18px;
  }

  .editor-main {
    grid-template-rows: minmax(230px, 55%) minmax(210px, 45%);
  }

  .view-mode-badge,
  .canvas-view-switch {
    display: none;
  }

  .canvas-hoop-shortcut {
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
  }

  .panel-section {
    padding-right: 14px;
    padding-left: 14px;
  }

  .editor-bottom-nav {
    min-height: 64px;
    grid-template-columns: minmax(0, 1.55fr) minmax(86px, 0.8fr) minmax(102px, 0.9fr);
    gap: 4px;
    padding: 6px 7px calc(6px + env(safe-area-inset-bottom));
  }

  .editor-bottom-nav .editor-view-dock button {
    min-height: 42px;
    grid-template-columns: 14px minmax(0, auto);
    gap: 3px;
    padding: 4px 3px;
    font-size: 8px;
  }

  .editor-view-icon {
    width: 13px;
    height: 13px;
  }

  .editor-bottom-nav button {
    min-height: 46px;
    gap: 4px;
    padding: 4px;
    font-size: 10px;
  }

  .editor-bottom-nav .editor-nav-icon {
    width: 18px;
    flex-basis: 18px;
    font-size: 16px;
  }

  .editor-nav-copy small {
    display: none;
  }
}