:root {
  color-scheme: light;
  --bg: #f4f5f2;
  --panel: #ffffff;
  --panel-2: #eef2ef;
  --text: #1f2523;
  --muted: #69736f;
  --line: #d7ddd8;
  --red: #d71920;
  --green: #286f4a;
  --amber: #a15c16;
  --warning-bg: #fffbeb;
  --warning-border: #f59e0b;
  --warning-text: #92400e;
  --shadow: 0 10px 28px rgba(25, 31, 28, 0.08);
  --button-radius: 6px;
  /* Shared workspace / editor surfaces (Define Drawer, Edit Outlines, Customize Layout, Preview DXF) */
  --workspace-bg: #1b1d20;
  --workspace-panel-bg: #1b1d20;
  --workspace-canvas-bg: #111315;
  --workspace-border: #2a2d31;
  --workspace-instruction-text: #c7d0d9;
  --workspace-instruction-muted: #9aa4ad;
  --layout-canvas-background: var(--workspace-canvas-bg);
  --layout-viewport-background: var(--workspace-bg);
  --layout-grid-minor-color: rgba(255, 255, 255, 0.035);
  --layout-grid-major-color: rgba(255, 255, 255, 0.08);
  --layout-grid-minor-spacing-in: 0.25;
  --layout-grid-major-spacing-in: 1;
  --layout-interaction-accent-rgb: 255, 190, 64;
}

@font-face {
  font-family: "Liberation Sans";
  src: url("/assets/layout-text-font.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
  font: inherit;
}

/*
  Chrome can promote a pointer-focused control to :focus-visible after an
  unrelated keypress. focus_visibility.js adds .is-keyboard-focus only when
  Tab or Shift+Tab starts sequential keyboard navigation, and removes it on
  the next pointer interaction. Suppress only non-text control outlines
  outside that mode: editable fields keep their normal click focus/caret,
  while real focus remains intact for dialogs, shortcuts, and assistive
  technology.
*/
html.is-focus-visibility-managed:not(.is-keyboard-focus) :where(button,
  a[href],
  summary,
  select,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  input[type="file"],
  input[type="color"],
  [role="button"],
  [role="link"],
  [role="menuitem"],
  [tabindex]:not(input):not(textarea):not(select):not([contenteditable])):focus-visible {
  outline: none;
}

.app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  min-height: 72px;
  padding: 16px 22px;
  border-bottom: 1px solid #363636;
  background: #1f1f1f;
}

.app-brand {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  line-height: 0;
}

.app-logo {
  display: block;
  width: auto;
  height: 40px;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(360px, 1fr);
  gap: 18px;
  height: calc(100vh - 73px);
  min-height: 0;
  overflow: hidden;
  padding: 18px;
}

.app-shell.is-editor-mode {
  grid-template-columns: 160px minmax(360px, 1fr);
}

.app-shell.is-layout-mode {
  grid-template-columns: 160px minmax(360px, 1fr);
}

.app-shell.is-resume-loading-mode {
  grid-template-columns: 144px minmax(360px, 1fr);
}

.app-shell.is-perspective-processing-mode .image-workspace {
  grid-column: 2;
}

.app-shell.is-resume-loading-mode .image-workspace {
  grid-column: 2;
}

.app-shell.is-perspective-processing-mode #objectOutlineOverlay,
.app-shell.is-perspective-processing-mode #objectOutlineCanvas,
.app-shell.is-perspective-processing-mode #maskHighlightCanvas {
  visibility: hidden;
}

.control-panel {
  align-self: start;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  padding: 16px;
}

.define-corners-sidebar {
  align-self: start;
  display: grid;
  gap: 18px;
  min-width: 0;
  max-height: 100%;
  overflow: auto;
}

.define-corners-sidebar>.control-panel {
  align-self: stretch;
  max-height: none;
  overflow: visible;
}

.define-corners-proceed-area {
  margin-top: 10px;
  padding: 0 6px 6px;
}

.control-panel label {
  display: grid;
  gap: 7px;
}

.control-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.control-panel input[inputmode="decimal"],
.file-picker input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #c5cdc8;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 7px;
}

.setup-warning {
  border: 1px solid var(--warning-border);
  border-radius: 6px;
  padding: 10px 11px;
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.setup-warning-title {
  font-weight: 700;
}

.setup-warning ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.setup-warning-detail {
  margin-top: 6px;
  font-weight: 400;
}

.setup-warning.is-pass {
  border-color: #73aa80;
  background: #ebf7ee;
  color: #1e5a2f;
}

.setup-warning.is-warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}

.dimension-swap-recommendation {
  margin-top: 12px;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 10px;
  background: rgb(254 243 199 / 0.55);
}

.dimension-swap-recommendation-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.dimension-swap-recommendation-text {
  margin-top: 4px;
  font-weight: 400;
}

.setup-warning-actions {
  margin-top: 9px;
}

.dimension-swap-button {
  border: 1px solid #f59e0b;
  background: #fff;
  color: #92400e;
  font-weight: 600;
}

.dimension-swap-button:hover:not(:disabled) {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #92400e;
}

.setup-warning-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(31, 37, 35, 0.35);
}

.setup-warning-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 50;
  width: min(520px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  display: grid;
  gap: 10px;
  padding: 16px;
  box-shadow: 0 22px 60px rgba(31, 37, 35, 0.28);
}

.setup-warning-confirm>.setup-warning-detail {
  margin-top: 0;
}

.warning-confirmation-paragraph+.warning-confirmation-paragraph,
.warning-confirmation-checklist {
  margin-top: 8px;
}

.warning-confirmation-checklist ul {
  margin-top: 4px;
}

.warning-confirmation-section {
  margin-top: 12px;
  border-top: 1px solid #fde68a;
  padding-top: 10px;
}

.warning-confirmation-section .warning-confirmation-paragraph {
  margin-top: 6px;
}

.warning-confirmation-recommendation {
  margin-top: 12px;
}

.warning-confirmation-recommendation .primary-button {
  margin-top: 9px;
}

.warning-confirmation-action-section .primary-button {
  margin-top: 8px;
}

.warning-confirmation-review {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #92400e;
}

.warning-confirmation-review:hover:not(:disabled) {
  border-color: #d97706;
  background: #fde68a;
  color: #78350f;
}

.setup-warning-confirm .primary-button {
  border-color: #d97706;
  background: var(--warning-border);
  color: #422006;
}

.setup-warning-confirm .primary-button:hover:not(:disabled) {
  border-color: #b45309;
  background: #fbbf24;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

button {
  min-height: 38px;
  border: 1px solid #b9c3be;
  border-radius: 6px;
  padding: 8px 11px;
  background: #f7f8f6;
  color: #25302b;
  font-weight: 700;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.primary-button {
  border-color: #b7131a;
  background: var(--red);
  color: #fff;
}

.primary-forward-button {
  border: 1px solid rgba(130, 0, 0, 0.05);
  border-radius: var(--button-radius);
  background: linear-gradient(135deg, #e4232d 0%, #d71924 55%, #bd101b 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    transform 120ms ease,
    filter 140ms ease;
}

.primary-forward-button:hover {
  border-color: rgba(130, 0, 0, 0.05);
  background: linear-gradient(135deg, #ee2b35 0%, #dc202b 55%, #c31925 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  filter: brightness(1.02);
}

.primary-forward-button:active {
  border-color: rgba(130, 0, 0, 0.05);
  transform: translateY(1px);
  background: linear-gradient(135deg, #c91b25 0%, #bd1721 55%, #a9141d 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 1px 2px rgba(0, 0, 0, 0.14);
  filter: none;
}

html.is-keyboard-focus .primary-forward-button:focus-visible {
  outline: 2px solid rgba(225, 38, 47, 0.35);
  outline-offset: 3px;
}

.primary-forward-button:disabled,
.primary-forward-button[aria-disabled="true"] {
  border: 1px solid #b7131a;
  background: var(--red);
  box-shadow: none;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  filter: none;
}

.primary-forward-button:disabled:hover,
.primary-forward-button:disabled:focus,
.primary-forward-button:disabled:active,
.primary-forward-button[aria-disabled="true"]:hover,
.primary-forward-button[aria-disabled="true"]:focus,
.primary-forward-button[aria-disabled="true"]:active {
  border: 1px solid #b7131a;
  outline: none;
  background: var(--red);
  box-shadow: none;
  color: #fff;
  opacity: 0.55;
  transform: none;
  filter: none;
}

.final-layout-button {
  width: 64px;
  min-height: 74px;
  border-color: #b7131a;
  padding: 7px 6px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
}

.final-layout-button:hover {
  border-color: #8f1015;
  background: #b7131a;
}

.toolbar-primary-action,
.toolbar-secondary-action {
  width: 144px;
  white-space: nowrap;
}

.dxf-preview-boundary-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  width: 144px;
  margin: -2px 0 0;
  border: 1px solid rgba(215, 25, 32, 0.28);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 8px 9px 8px 7px;
  background: #fff4f4;
  color: #9f1118;
  box-shadow: 0 1px 2px rgba(54, 18, 18, 0.06);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.32;
  text-align: left;
}

.dxf-preview-boundary-warning-icon {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-button {
  border: 1px solid #cbd5d8;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  color: #3f4f56;
  font-weight: 600;
}

.back-button:hover {
  border-color: #aebdc1;
  background: #f4f7f7;
  color: #253238;
}

.back-button:active {
  background: #e9eeee;
  transform: none;
}

.toolbar-link-action {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 8px 11px;
  text-align: center;
  text-decoration: none;
}

.final-preview-button {
  display: grid;
  place-items: center;
  width: 64px;
  min-height: 52px;
  border: 1px solid #b7131a;
  border-radius: 6px;
  padding: 7px 6px;
  background: #fff5f5;
  color: #b7131a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
}

.final-preview-button:hover {
  border-color: #8f1015;
  background: #fff;
}

.editor-toolbar {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 72px;
}

.app-shell.is-editor-mode .editor-toolbar,
.app-shell.is-layout-mode .editor-toolbar {
  align-self: stretch;
  gap: 16px;
  justify-self: center;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.editor-tools-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 3px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.object-editor-tools-card,
.layout-editor-tools-card {
  gap: 10px;
  width: 112px;
  padding: 14px;
}

.history-button-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  width: 64px;
}

.object-editor-tools-card .history-button-row,
.layout-editor-tools-card .history-button-row {
  gap: 6px;
  width: 100%;
}

.layout-editor-tools-card .history-button-row {
  margin-bottom: 2px;
  border-bottom: 1px solid #e1e6e2;
  padding-bottom: 12px;
}

.object-editor-toolbar-divider {
  flex-shrink: 0;
  width: 100%;
  height: 1px;
  background: #e1e6e2;
}

.history-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-color: #b9c3be;
  border-radius: 6px;
  padding: 0;
  background: #fbfcfa;
  color: #33413a;
}

.history-button:hover {
  border-color: #8d9a94;
  background: #fff;
}

.history-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.tool-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  border-color: #b9c3be;
  border-radius: 6px;
  padding: 0;
  background: #fbfcfa;
  color: #33413a;
}

.tool-button:hover {
  border-color: #8d9a94;
  background: #fff;
}

.tool-button svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  stroke: none;
}

.save-button {
  overflow: hidden;
}

.save-button svg {
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.save-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  opacity: 0;
}

.save-button.is-saving {
  border-color: #2f7a60;
  background: #f1faf5;
  color: #286f4a;
}

.save-button.is-saving svg,
.save-button.is-saved svg {
  opacity: 0;
  transform: scale(0.72);
}

.save-button.is-saving::after {
  width: 22px;
  height: 22px;
  border: 3px solid rgb(40 111 74 / 0.22);
  border-top-color: currentColor;
  border-radius: 50%;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: save-button-spin 720ms linear infinite;
}

.save-button.is-saved {
  border-color: #286f4a;
  background: #f1faf5;
  color: #286f4a;
  box-shadow: inset 0 0 0 2px rgb(40 111 74 / 0.14);
}

.save-button.is-saved::after {
  width: 18px;
  height: 10px;
  border-bottom: 3px solid currentColor;
  border-left: 3px solid currentColor;
  opacity: 1;
  transform: translate(-50%, -50%) translateY(-2px) rotate(-45deg);
  animation: save-button-check 220ms ease-out;
}

.save-button.is-save-error {
  border-color: #b7131a;
  background: #fff1f1;
  color: #b7131a;
  animation: save-button-error 220ms ease;
}

.save-button.is-save-error svg {
  opacity: 0;
  transform: scale(0.72);
}

.save-button.is-save-error::after {
  content: "!";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 1;
  color: currentColor;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -50%);
}

@keyframes save-button-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes save-button-check {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-2px) rotate(-45deg) scale(0.76);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-2px) rotate(-45deg) scale(1);
  }
}

@keyframes save-button-error {

  0%,
  100% {
    transform: translateX(0);
  }

  33% {
    transform: translateX(-2px);
  }

  66% {
    transform: translateX(2px);
  }
}

.finger-notch-tool-icon {
  display: block;
  width: 42px;
  height: 42px;
  background: currentColor;
  -webkit-mask: url("/static/assets/icons/finger_notch_icon.svg") center / contain no-repeat;
  mask: url("/static/assets/icons/finger_notch_icon.svg") center / contain no-repeat;
}

.tool-button.is-selected {
  border-color: #b7131a;
  background: #fff5f5;
  color: #b7131a;
  box-shadow: inset 0 0 0 2px rgba(215, 25, 32, 0.16);
}

.layout-context-menu {
  position: fixed;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 174px;
  border: 1px solid #d8ddd9;
  border-radius: 6px;
  padding: 6px;
  background: #fff;
  box-shadow:
    0 14px 28px rgb(20 29 24 / 0.16),
    0 2px 8px rgb(20 29 24 / 0.10);
}

.layout-context-menu-action {
  display: block;
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 4px;
  padding: 7px 10px;
  background: transparent;
  color: #24342c;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
}

.layout-context-menu-action:hover,
html.is-keyboard-focus .layout-context-menu-action:focus-visible {
  background: #eef3f0;
  color: #102019;
  outline: none;
}

.layout-context-menu-action.is-separated {
  margin-top: 5px;
  border-top: 1px solid #e5e9e6;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 10px;
}

.layout-context-menu-action.is-destructive {
  color: #b7131a;
}

.layout-context-menu-action.is-destructive:hover,
html.is-keyboard-focus .layout-context-menu-action.is-destructive:focus-visible {
  background: #fff1f1;
  color: #8f1015;
}

.workspace-help-button {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 1px solid rgb(255 255 255 / 0.34);
  border-radius: 50%;
  padding: 0;
  background: rgb(255 255 255 / 0.1);
  color: #d6dcd8;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
}

.image-stage.is-result:not(.is-layout):not(.is-processing):not(.is-resume-loading) #objectEditorHelpButton {
  display: grid;
}

.image-stage.is-calibration #defineCornersHelpButton {
  display: grid;
}

.image-stage.is-layout:not(.is-dxf-preview) #layoutEditorHelpButton {
  display: grid;
}

.workspace-help-button:hover {
  border-color: rgb(255 255 255 / 0.62);
  background: rgb(255 255 255 / 0.2);
  color: #fff;
}

html.is-keyboard-focus .workspace-help-button:focus-visible {
  outline: 3px solid rgba(215, 25, 32, 0.24);
  outline-offset: 2px;
}

.hide-visuals-button .hide-visuals-icon-hidden {
  display: none;
}

.hide-visuals-button {
  box-shadow:
    0 1px 2px rgb(39 52 46 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.8);
  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease;
}

.hide-visuals-button.is-toggled {
  border-color: #64756c;
  background: #dfe7e2;
  color: #182a21;
  box-shadow:
    inset 0 2px 4px rgb(34 52 43 / 0.22),
    inset 0 0 0 1px rgb(34 52 43 / 0.08);
}

.hide-visuals-button.is-toggled:hover {
  border-color: #56675e;
  background: #d9e2dc;
}

.hide-visuals-button.is-toggled .hide-visuals-icon-visible {
  display: none;
}

.hide-visuals-button.is-toggled .hide-visuals-icon-hidden {
  display: block;
}

.finger-notch-tool-group,
.text-tool-group {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  width: 64px;
  min-height: 0;
  border-radius: 6px;
  padding: 8px 5px;
}

.finger-notch-tool-group {
  border: 1px solid #cfd6d2;
  background: #f4f6f5;
}

.text-tool-group {
  border: 1px solid #cfd6d2;
  background: #f4f6f5;
}

.shape-tool-group {
  position: relative;
  display: grid;
  justify-items: center;
  width: fit-content;
}

#shapeTool::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 8px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.shape-tool-group:hover #shapeTool {
  border-color: #8d9a94;
  background: #fff;
}

.shape-tool-group:hover #shapeTool::after,
#shapeTool:active::after,
#shapeTool.is-selected::after,
#shapeTool.is-flyout-open::after {
  opacity: 0.75;
}

.shape-tool-caret-button {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

#shapeTool .shape-tool-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shape-tool-icon-rectangle,
.shape-tool-icon-ellipse {
  display: none;
}

.tool-button.is-shape-type-rectangle .shape-tool-icon-rectangle {
  display: block;
}

.tool-button.is-shape-type-ellipse .shape-tool-icon-ellipse {
  display: block;
}

.shape-type-menu {
  /* Fixed so the menu escapes the toolbar's overflow clipping; JS sets
     top/left next to the shape button when the menu opens. */
  position: fixed;
  z-index: 20;
  display: grid;
  gap: 4px;
  width: max-content;
  border: 1px solid #cfd6d2;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 8px 20px rgba(15, 23, 20, 0.18);
}

.shape-type-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 6px 10px;
  background: #fbfcfa;
  color: #33413a;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-align: left;
}

.shape-type-option:hover {
  border-color: #8d9a94;
  background: #fff;
}

.shape-type-option svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shape-type-option.is-selected {
  border-color: #b7131a;
  background: #fff5f5;
  color: #b7131a;
}

.brush-erase-tool-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid #cfd6d2;
  border-radius: 6px;
  background: #f4f6f5;
  padding: 10px 6px;
}

.brush-erase-shared-controls,
.notch-size-control,
.text-size-control {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 64px;
  min-height: 174px;
  border: 1px solid #cfd8d3;
  border-radius: 6px;
  padding: 7px 5px;
  background: #fbfcfa;
}

.finger-notch-tool-group .notch-size-control,
.text-tool-group .text-size-control,
.brush-erase-tool-group .brush-erase-shared-controls {
  align-content: start;
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  gap: 6px;
}

.brush-mode-control {
  display: flex;
  gap: 4px;
  justify-content: center;
  width: 100%;
}

.brush-mode-button {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  min-height: 25px;
  border: 1px solid #c4cec8;
  border-radius: 5px;
  padding: 0;
  background: #fff;
  color: #33413a;
}

.brush-mode-button:hover {
  border-color: #8d9a94;
}

.brush-mode-button.is-selected {
  border-color: #b7131a;
  background: #fff5f5;
  color: #b7131a;
  box-shadow: inset 0 0 0 1px rgba(215, 25, 32, 0.18);
}

.brush-mode-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.brush-mode-button[data-brush-stroke-mode="freehand"] svg {
  transform: translateY(-2px);
}

.brush-size-label,
.notch-size-label,
.text-size-label {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #36443d;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
}

.brush-size-icon {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.brush-erase-shared-controls input[type="range"],
.notch-size-control input[type="range"],
.text-size-control input[type="range"] {
  width: 34px;
  height: 104px;
  margin: 0;
  accent-color: var(--red);
  direction: rtl;
  writing-mode: vertical-lr;
}

.notch-size-control input[type="range"],
.text-size-control input[type="range"] {
  height: 78px;
}

.notch-size-control input[type="range"] {
  accent-color: #7a8580;
}

.text-size-control input[type="range"] {
  accent-color: #7a8580;
}

.image-workspace {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.image-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  border: 1px solid var(--workspace-border);
  border-radius: 8px;
  background: var(--workspace-bg);
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

.image-stage.is-calibration,
.image-stage.is-result {
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  padding: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.image-stage.is-calibration,
.image-stage.is-result {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.image-stage.is-resume-loading {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.workflow-steps {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

.workflow-step {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.62;
  transition: opacity 0.2s;
}

.workflow-step.is-active {
  color: #fff;
  opacity: 1;
}

.workflow-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.18);
  color: rgb(255 255 255 / 0.88);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.workflow-step.is-active .workflow-step-num {
  background: var(--red);
  color: #fff;
}

.workflow-step-arrow {
  display: flex;
  align-items: center;
  color: rgb(255 255 255 / 0.5);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.instruction-bar {
  display: none;
}

.image-stage.is-calibration .instruction-bar,
.image-stage.is-result .instruction-bar {
  display: block;
  justify-self: center;
  width: calc(100% - 24px);
  max-width: 960px;
  margin-top: 12px;
}

.image-stage.is-result:not(.is-layout):not(.is-processing):not(.is-resume-loading) .instruction-bar {
  width: calc(100% - 88px);
}

.image-stage.is-result.is-layout:not(.is-dxf-preview) .instruction-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
}

.image-stage.is-dxf-preview .instruction-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
}

.image-stage.is-processing .instruction-bar {
  min-height: 18px;
}

.workspace-hint {
  display: none;
  margin: 0;
  padding: 0 4px;
  color: var(--workspace-instruction-text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.image-stage.is-calibration .calibration-hint,
.image-stage.is-result:not(.is-layout):not(.is-processing):not(.is-resume-loading) .object-editor-hint,
.image-stage.is-result.is-layout:not(.is-dxf-preview) .layout-editor-hint,
.image-stage.is-dxf-preview .dxf-preview-hint {
  display: block;
}

.image-stage.is-resume-loading .instruction-bar {
  display: none;
}

/* Compact contextual properties bar shown in place of the layout hint while a
   single custom shape is selected. */
.shape-size-bar {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 3px 9px 3px 10px;
  border: 1px solid #3a4650;
  border-radius: 7px;
  background: #23272c;
  color: #dbe4ec;
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.18);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.image-stage.is-result.is-layout:not(.is-dxf-preview) #instructionBar.is-shape-selected .layout-editor-hint {
  display: none;
}

.image-stage.is-result.is-layout:not(.is-dxf-preview) #instructionBar.is-shape-selected .shape-size-bar {
  display: flex;
}

.shape-size-label {
  color: #aeb8c2;
  font-weight: 700;
}

.shape-size-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shape-size-axis {
  color: #93a0ac;
  font-weight: 700;
}

.shape-size-input {
  width: 4.8em;
  min-height: 22px;
  padding: 1px 5px;
  border: 1px solid #4b5762;
  border-radius: 5px;
  background: #15181c;
  color: #eef5fb;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.22);
}

.shape-size-input:focus {
  outline: none;
  border-color: rgb(var(--layout-interaction-accent-rgb));
  box-shadow:
    0 0 0 2px rgba(var(--layout-interaction-accent-rgb), 0.22),
    inset 0 1px 2px rgb(0 0 0 / 0.22);
}

.shape-size-unit {
  color: #93a0ac;
  font-weight: 600;
}

.image-viewport {
  display: contents;
}

.image-stage.is-calibration .image-viewport,
.image-stage.is-result .image-viewport {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.image-stage.is-layout .image-viewport {
  background: var(--workspace-bg);
}

.image-stage.is-final-render-preview #layoutCanvas {
  visibility: hidden;
}

.image-stage.is-final-render-preview #layoutDisplayCanvas {
  display: none;
}

.final-render-preview-image {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.final-render-preview-exact-copy {
  color: #1d2923;
  font-weight: 750;
  line-height: 1.45;
}

.final-render-preview-revision,
.final-render-preview-supporting-copy {
  color: #56635c;
  font-size: 13px;
  line-height: 1.45;
}

.final-render-stale-notice {
  border: 1px solid #e4be75;
  border-radius: 7px;
  padding: 11px;
  background: #fff8e8;
  color: #704d10;
  font-size: 13px;
  line-height: 1.4;
}

.final-render-stale-notice {
  display: grid;
  gap: 10px;
  border-color: rgba(215, 25, 32, 0.3);
  background: #fff3f3;
  color: #8e1118;
}

.final-render-stale-notice[hidden] {
  display: none;
}

.final-render-stale-notice p {
  margin: 0;
}

.workspace-scrollbar {
  position: absolute;
  z-index: 5;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.workspace-scrollbar.is-visible {
  opacity: 1;
}

.workspace-scrollbar-x {
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 7px;
}

.workspace-scrollbar-y {
  top: 10px;
  right: 8px;
  bottom: 10px;
  width: 7px;
}

.workspace-scrollbar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.48);
  pointer-events: auto;
  touch-action: none;
}

.workspace-scrollbar-x .workspace-scrollbar-thumb {
  width: 36px;
  height: 100%;
}

.workspace-scrollbar-y .workspace-scrollbar-thumb {
  width: 100%;
  height: 36px;
}

.workspace-scrollbar-thumb:hover,
.workspace-scrollbar.is-dragging .workspace-scrollbar-thumb {
  background: rgb(255 255 255 / 0.68);
}

.workspace-zoom-control {
  display: none;
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 6;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid rgb(93 108 100 / 0.26);
  border-radius: 8px;
  background: rgb(251 252 250 / 0.97);
  box-shadow: 0 3px 10px rgb(25 31 28 / 0.12);
  overflow: hidden;
}

.image-stage.is-calibration .workspace-zoom-control,
.image-stage.is-result:not(.is-processing):not(.is-resume-loading) .workspace-zoom-control {
  display: flex;
}

.workspace-zoom-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #33413a;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
}

.workspace-zoom-button:hover {
  background: #fff;
  color: #17211d;
}

.workspace-zoom-button:active {
  background: #e8eeea;
  color: #111916;
  box-shadow: inset 0 1px 3px rgb(25 31 28 / 0.16);
}

html.is-keyboard-focus .workspace-zoom-button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid rgb(215 25 32 / 0.7);
  outline-offset: -3px;
  background: #fff;
  color: #17211d;
}

.workspace-zoom-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.workspace-zoom-fit-button svg {
  width: 15px;
  height: 15px;
}

.workspace-zoom-divider {
  width: 100%;
  height: 1px;
  background: rgb(93 108 100 / 0.16);
}

.image-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  line-height: 0;
}

/* The shared editor frame is focused programmatically so object-editor
   shortcuts target the workspace. It is not part of the Tab order, so suppress
   the browser's native focus ring without affecting accessible controls. */
#imageFrame:focus,
#imageFrame:focus-visible {
  outline: none;
}

.image-stage.is-calibration .zoom-layer,
.image-stage.is-result .zoom-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: none;
  max-height: none;
  margin: 0;
}

.image-frame.is-calibration,
.image-frame.is-result {
  width: max-content;
  max-width: none;
  max-height: none;
  margin: 0;
}


.image-frame.is-empty {
  width: min(100%, 680px);
  min-height: 420px;
  display: grid;
  place-items: center;
}

#sourceImage,
#resultImage {
  display: block;
  max-width: 100%;
  max-height: 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-user-drag: none;
  user-select: none;
}

#resultCanvas {
  display: block;
  max-width: none;
  max-height: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-user-drag: none;
  user-select: none;
  touch-action: none;
}

#layoutCanvas {
  display: block;
  max-width: none;
  max-height: none;
  background: var(--layout-canvas-background);
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  touch-action: none;
  user-select: none;
}

#layoutDisplayCanvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.image-stage:not(.is-layout) #layoutDisplayCanvas {
  display: none;
}

.image-frame.is-calibration #sourceImage {
  max-width: none;
  max-height: none;
  touch-action: none;
}

.image-frame.is-processing #resultImage {
  max-width: none;
  max-height: none;
}

.image-frame.is-empty #sourceImage,
.image-frame.is-empty #resultImage,
.image-frame.is-empty #resultCanvas,
.image-frame.is-empty #drawerCornerCanvas,
.image-frame.is-empty #layoutCanvas,
.image-frame.is-empty #pointOverlay,
.image-frame.is-empty #objectOutlineOverlay,
.image-frame.is-empty #objectOutlineCanvas,
.image-frame.is-empty #maskHighlightCanvas {
  display: none;
}

.image-frame.is-result {
  cursor: default;
}

.image-frame.is-result.is-brush-tool {
  cursor: none;
}

.image-frame.is-result.is-brush-tool #resultCanvas {
  cursor: none;
}

.image-frame.is-result.is-visuals-hidden,
.image-frame.is-result.is-visuals-hidden #resultCanvas {
  cursor: default;
}

.image-frame.is-result.is-visuals-hidden.is-brush-tool,
.image-frame.is-result.is-visuals-hidden.is-brush-tool #resultCanvas {
  cursor: none;
}

.image-frame.is-result.is-pan-dragging {
  cursor: grabbing;
}

.image-stage.is-pan-dragging {
  cursor: grabbing;
}

.image-frame.is-result.is-brush-tool.is-pan-dragging,
.image-frame.is-result.is-brush-tool.is-pan-dragging #resultCanvas {
  cursor: grabbing;
}

.image-frame.is-pan-dragging #pointOverlay {
  cursor: grabbing;
}

/* Idle Select tool over empty canvas (and during a marquee box, which never
   sets is-layout-dragging) shows the plain arrow. grab/grabbing only appear once
   the pointer is over a draggable body or handle (see is-layout-item-hovering),
   and the directional resize cursors come from the is-resize-* classes below. */
.image-frame.is-layout.is-select-tool #layoutCanvas {
  cursor: default;
}

.image-frame.is-layout.is-finger-notch-tool #layoutCanvas,
.image-frame.is-layout.is-finger-notch-tool.is-layout-dragging #layoutCanvas {
  cursor: crosshair;
}

.image-frame.is-layout.is-text-tool #layoutCanvas {
  cursor: text;
}

.image-frame.is-layout.is-shape-tool #layoutCanvas {
  cursor: crosshair;
}

/* Temporary Select override (a Select modifier held while a creation tool is
   active) borrows the Select-tool arrow over its crosshair/text one; grab and
   the directional resize cursors come from the hover classes below. */
.image-frame.is-layout.is-temp-select #layoutCanvas {
  cursor: default;
}

.image-frame.is-layout.is-layout-item-hovering #layoutCanvas {
  cursor: grab;
}

.image-stage.is-layout .image-viewport.is-layout-item-hovering {
  cursor: grab;
}

.image-frame.is-layout.is-layout-item-hovering.is-layout-dragging #layoutCanvas {
  cursor: grabbing;
}

.image-stage.is-layout .image-viewport.is-layout-item-hovering.is-layout-dragging {
  cursor: grabbing;
}

.image-frame.is-layout.is-shape-corner-radius-hovering #layoutCanvas {
  cursor: pointer;
}

.image-stage.is-layout .image-viewport.is-shape-corner-radius-hovering {
  cursor: pointer;
}

/* Directional resize cursors for shape resize handles. The exact class is
   chosen in JS (syncShapeResizeHandleCursor) so the arrows track the shape's
   rotation. Declared after the grab rules so a hovered/dragged resize handle
   overrides the item-hovering grab/grabbing cursor. */
.image-frame.is-layout.is-resize-ns #layoutCanvas {
  cursor: ns-resize;
}

.image-stage.is-layout .image-viewport.is-resize-ns {
  cursor: ns-resize;
}

.image-frame.is-layout.is-resize-ew #layoutCanvas {
  cursor: ew-resize;
}

.image-stage.is-layout .image-viewport.is-resize-ew {
  cursor: ew-resize;
}

.image-frame.is-layout.is-resize-nesw #layoutCanvas {
  cursor: nesw-resize;
}

.image-stage.is-layout .image-viewport.is-resize-nesw {
  cursor: nesw-resize;
}

.image-frame.is-layout.is-resize-nwse #layoutCanvas {
  cursor: nwse-resize;
}

.image-stage.is-layout .image-viewport.is-resize-nwse {
  cursor: nwse-resize;
}

/* Rotation handles/rings use a custom bidirectional curved-arrow cursor in the
   same family as the on-canvas corner rotation SVG. Toggled in JS
   (syncRotationHandleCursor); the hotspot is the icon center so it sits on the
   handle. */
.image-frame.is-layout.is-rotation-hovering #layoutCanvas {
  cursor: url("/static/assets/icons/rotate-cursor.svg") 16 16, grab;
}

.image-stage.is-layout .image-viewport.is-rotation-hovering {
  cursor: url("/static/assets/icons/rotate-cursor.svg") 16 16, grab;
}

.image-frame.is-layout.is-rotation-hovering.is-layout-dragging #layoutCanvas {
  cursor: url("/static/assets/icons/rotate-cursor.svg") 16 16, grabbing;
}

.image-stage.is-layout .image-viewport.is-rotation-hovering.is-layout-dragging {
  cursor: url("/static/assets/icons/rotate-cursor.svg") 16 16, grabbing;
}

/* I-beam for the Editing text state. The class is toggled in JS only while the
   pointer is over the box being edited (or drag-selecting / creating its text);
   in that state syncEditableItemCursorHint suppresses is-layout-item-hovering so
   the grab/grabbing rules above can't out-specify this one. Idle text boxes
   elsewhere keep the grab cursor. */
.image-frame.is-layout.is-layout-text-editing #layoutCanvas {
  cursor: text;
}

.image-stage.is-layout .image-viewport.is-layout-text-editing {
  cursor: text;
}

.image-stage.is-pan-dragging .image-viewport {
  cursor: grabbing;
}

.image-frame.is-processing {
  cursor: progress;
}

.image-frame.is-result #pointOverlay {
  display: none;
}

.image-frame.is-processing #pointOverlay {
  display: none;
}

#pointOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: default;
  touch-action: none;
}

#maskHighlightCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

#drawerCornerCanvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  /* Above #objectOutlineCanvas (z-index 2) so the outline outside-dim scrim,
     which lives on that canvas, never knocks down the corner brackets. They
     are UI chrome marking the drawer corners, not dimmable photo content. */
  z-index: 3;
  image-rendering: auto;
  pointer-events: none;
}

#objectOutlineOverlay {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

#objectOutlineCanvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  z-index: 2;
  image-rendering: auto;
  pointer-events: none;
}

.object-outline-path {
  fill: none;
  stroke: var(--red);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.brush-cursor {
  position: absolute;
  z-index: 4;
  display: block;
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* Hovering a corner's hitbox shows the open-hand (grab) cursor; an active press
   switches to the grabbing hand. The hover class is toggled in JS so the cursor
   tracks the full hitbox, not just the small handle element. */
.image-frame.is-corner-hover #pointOverlay {
  cursor: grab;
}

.image-frame.is-dragging #pointOverlay,
.image-frame.is-dragging #pointOverlay .corner-handle {
  cursor: grabbing;
}

.empty-state {
  display: none;
  color: #d9ded9;
  font-weight: 700;
  line-height: 1.3;
}

.image-frame.is-empty .empty-state {
  display: block;
}

.workspace-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: var(--workspace-bg);
  pointer-events: none;
}

.workspace-loading-content {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--workspace-instruction-text);
}

.workspace-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: workspace-loading-spin 0.85s linear infinite;
}

.workspace-loading-label {
  color: var(--workspace-instruction-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

@keyframes workspace-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.mask-progress {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: min(420px, calc(100% - 48px));
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  padding: 14px 16px 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
}

.mask-progress-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: #344039;
  font-size: 14px;
  font-weight: 700;
}

.mask-progress-header span {
  min-width: 0;
}

.mask-progress-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}

.mask-progress-bar-fill {
  position: relative;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e34246 0%, #c9161d 100%);
  overflow: hidden;
  transition: width 0.6s ease;
}

.mask-progress-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 50%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.45) 50%,
      rgba(255, 255, 255, 0) 100%);
  animation: mask-progress-shimmer 1.6s ease-in-out infinite;
}

@keyframes mask-progress-shimmer {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(320%);
  }
}

/* Indeterminate state: shown while the detector is starting up and reporting
   no real progress. A colored band slides across the full track; the
   determinate fill is hidden until an actual percentage arrives. */
.mask-progress-bar.is-indeterminate .mask-progress-bar-fill {
  opacity: 0;
}

.mask-progress-bar.is-indeterminate::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 35%;
  border-radius: inherit;
  background: linear-gradient(90deg,
      rgba(201, 22, 29, 0) 0%,
      #c9161d 50%,
      rgba(201, 22, 29, 0) 100%);
  animation: mask-progress-indeterminate 1.3s ease-in-out infinite;
}

@keyframes mask-progress-indeterminate {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(320%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mask-progress-bar-fill {
    transition: none;
  }

  .mask-progress-bar-fill::after {
    animation: none;
  }

  /* No motion available; rest the band at the track start so it still reads
     as "started" rather than empty. */
  .mask-progress-bar.is-indeterminate::after {
    animation: none;
    transform: translateX(0);
  }

  .workspace-loading-spinner {
    animation: none;
  }

  .save-button svg {
    transition: none;
  }

  .save-button.is-saving::after,
  .save-button.is-saved::after,
  .save-button.is-save-error {
    animation: none;
  }
}

.app-shell.is-welcome-mode {
  grid-template-columns: 1fr;
  overflow-y: auto;
}

.app-shell.is-start-mode {
  grid-template-columns: 1fr;
  overflow-y: auto;
}

.start-panel {
  position: relative;
}

.settings-modal-title {
  margin: 0 0 16px;
  font-size: 1.15rem;
}

/* Model-improvement contribution prompt (analytics architecture §15). The
   backdrop blocks editor interaction without dimming the photo behind it. */
.modal-backdrop.improvement-modal-backdrop {
  padding: 0;
  background: transparent;
}

.modal-panel.improvement-modal-panel {
  --improvement-pad-x: 22px;
  --improvement-pad-top: 20px;
  position: fixed;
  left: var(--improvement-panel-x, 50vw);
  top: var(--improvement-panel-y, 50vh);
  width: min(460px, calc(100vw - 24px));
  height: auto;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: var(--improvement-pad-top) var(--improvement-pad-x) 22px;
  border: 1px solid rgb(91 104 98 / 0.34);
  box-shadow:
    0 28px 70px rgb(15 20 18 / 0.28),
    0 3px 12px rgb(15 20 18 / 0.16);
  transform: translate(-50%, -50%);
}

/* The title row doubles as the panel's drag handle, so it is pulled out to
   the panel edges to read as a dedicated header bar. */
.improvement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  margin:
    calc(-1 * var(--improvement-pad-top)) calc(-1 * var(--improvement-pad-x)) 14px;
  padding: 5px 8px 5px var(--improvement-pad-x);
  border-bottom: 1px solid var(--line);
  border-radius: 9px 9px 0 0;
  background: rgb(241 242 240 / 0.94);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.improvement-header.is-dragging {
  cursor: grabbing;
}

.improvement-header-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.improvement-header .settings-modal-title {
  margin: 0;
  font-size: 1.16rem;
}

/* Inside the header bar the close button sits in flow at the right edge and
   drops the floating treatment it needs when overlaid on panel content. */
.improvement-header .modal-close-button {
  position: static;
  flex: none;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.improvement-header .modal-close-button:hover {
  border-color: #c5cdc8;
  background: rgb(255 255 255 / 0.96);
}

.improvement-optional-note {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
}

.improvement-copy {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.improvement-learn-more {
  margin: 12px 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.45;
}

.improvement-learn-more summary {
  cursor: pointer;
  font-weight: 600;
}

.improvement-disclosure-content {
  padding-top: 10px;
}

.improvement-disclosure-content section+section {
  margin-top: 10px;
}

.improvement-disclosure-content h3 {
  margin: 0 0 2px;
  font-size: 0.84rem;
  line-height: 1.35;
}

.improvement-disclosure-content p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.improvement-disclosure-content .improvement-policy-footnote {
  margin-top: 12px;
  font-size: 0.78rem;
}

.improvement-agree-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 0 4px;
  font-size: 0.88rem;
  line-height: 1.4;
  cursor: pointer;
}

.improvement-agree-row input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--green);
  cursor: pointer;
}

.improvement-status {
  min-height: 1.2em;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: var(--muted);
}

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

.improvement-actions button {
  min-width: 104px;
}

/* The contribution view covers the workspace with the bare cropped.jpg the
   editor already decoded. Covering rather than suppressing the layers below
   keeps the view overlay-free even if an asynchronous editor draw completes
   while the panel is open, and needs no editor state changed on its behalf.
   Whether this layer is showing is the whole of that state — no flag or marker
   class shadows it. The frame is sized to the result canvas
   (`width: max-content`), so `inset: 0` matches the photo exactly and inherits
   the frame's zoom transform. Above every photo and graphics layer (which top
   out at z-index 4), below the mask-progress and loading chrome. */
.contribution-preview-image {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

.admin-improvement-artifacts {
  margin: 18px 0;
}

.admin-improvement-image {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f2f2f2;
  image-rendering: auto;
}


@media (max-width: 760px) {
  .modal-panel.improvement-modal-panel {
    --improvement-pad-x: 18px;
    --improvement-pad-top: 18px;
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100vh - 20px);
    padding: var(--improvement-pad-top) var(--improvement-pad-x) 20px;
  }
}

.start-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 960px;
  padding-right: 52px;
}

.start-dashboard-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.start-dashboard-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

.start-dashboard-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.start-dashboard-actions .start-show-more-button {
  min-width: auto;
}

.start-primary-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.recently-deleted-button-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible;
}

.recently-deleted-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-color: #b9c3be;
  background: var(--panel);
  color: #4f5a55;
  box-shadow: 0 3px 10px rgb(25 31 28 / 0.08);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}

.recently-deleted-button:hover {
  border-color: #8e9b94;
  background: #fbfcfa;
  color: var(--text);
  box-shadow: 0 5px 14px rgb(25 31 28 / 0.12);
}

html.is-keyboard-focus .recently-deleted-button:focus-visible {
  outline: 2px solid rgba(215, 25, 32, 0.32);
  outline-offset: 3px;
}

.recently-deleted-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.recently-deleted-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.recently-deleted-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: min(180px, calc(100vw - 24px));
  transform: translateX(-50%) translateY(-2px);
  padding: 6px 8px;
  border-radius: 5px;
  background: #25302b;
  color: #fff;
  box-shadow: 0 5px 14px rgb(25 31 28 / 0.2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0.12s ease;
}

.recently-deleted-button-wrap:hover .recently-deleted-tooltip,
html.is-keyboard-focus .recently-deleted-button-wrap:focus-within .recently-deleted-tooltip {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.start-create-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 16px;
  border-color: #b7131a;
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 16px rgb(183 19 26 / 0.18);
}

.start-create-button:hover {
  background: #bf151b;
}

html.is-keyboard-focus .start-create-button:focus-visible,
html.is-keyboard-focus .start-show-more-button:focus-visible,
html.is-keyboard-focus .job-card:focus-visible {
  outline: 2px solid rgba(215, 25, 32, 0.32);
  outline-offset: 3px;
}

.start-jobs-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 960px;
}

.start-jobs-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
}

.start-jobs-status {
  font-size: 13px;
  color: var(--muted);
}

.start-jobs-status:empty {
  display: none;
}

.start-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  border: 1px dashed #bcc6c0;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.55);
  text-align: center;
}

.start-empty-state h3,
.start-empty-state p {
  margin: 0;
}

.start-empty-state h3 {
  font-size: 19px;
}

.start-empty-state p {
  color: var(--muted);
}

.start-empty-state .start-create-button {
  margin-top: 4px;
}

.start-show-more-row {
  display: flex;
  justify-content: center;
}

.start-show-more-button {
  min-width: 190px;
  background: var(--panel);
}

.start-show-more-button:hover:not(:disabled) {
  border-color: #8e9b94;
  background: #fbfcfa;
}

.job-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.job-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.job-card:hover {
  border-color: #b9c3be;
  box-shadow: 0 12px 30px rgba(25, 31, 28, 0.1);
}

/* The clickable resume target fills the card; the kebab menu sits above it. */
.job-card-open {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.05s;
}

.job-card-open:active {
  transform: translateY(1px);
}

html.is-keyboard-focus .job-card-open:focus-visible {
  outline: 3px solid var(--focus, rgba(215, 25, 32, 0.35));
  outline-offset: -3px;
}

/* Kebab menu: overlay button in the thumbnail's top-right corner. */
.job-card-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.job-card-menu-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid #c5cdc8;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: #4f5a55;
  box-shadow: 0 2px 8px rgb(25 31 28 / 0.16);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.job-card-menu-button:hover {
  border-color: #9fa9a3;
  background: #fff;
  color: var(--text);
}

.job-card-menu-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.job-card-menu-dropdown {
  position: absolute;
  top: 34px;
  right: 0;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgb(25 31 28 / 0.18);
}

.job-card-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 6px;
  background: none;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.job-card-menu-item.is-danger {
  color: var(--red);
}

.job-card-menu-item:hover {
  background: var(--panel-2);
}

.job-card-menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}

.job-card-thumb {
  position: relative;
  width: 100%;
  /* Fixed card ratio; the thumbnail keeps its own aspect and is letterboxed
     inside via object-fit: contain, so this ratio is independent of the
     backend thumbnail dimensions. Leftover space shows the --panel-2 fill. */
  aspect-ratio: 4 / 3;
  background: var(--panel-2);
  overflow: hidden;
}

.job-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.job-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px 14px;
}

.job-card-dims {
  font-size: 15px;
  font-weight: 700;
}

.job-card-meta {
  font-size: 12px;
  color: var(--muted);
}

.recently-deleted-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.recently-deleted-delete-all-button {
  min-height: 38px;
  border-color: color-mix(in srgb, var(--red) 40%, #fff);
  background: #fff;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}

.recently-deleted-delete-all-button:hover:not(:disabled) {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 6%, #fff);
}

.recently-deleted-card {
  opacity: 0.92;
}

.recently-deleted-card .job-card-thumb {
  filter: grayscale(0.35);
}

.quote-item-open-button {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid #b9c3be;
  border-radius: 6px;
  background: #f7f8f6;
  color: #25302b;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.quote-item-open-button:hover:not(:disabled) {
  border-color: #9fa9a3;
  background: #fff;
}

.quote-item-remove-button {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--red) 45%, #fff);
  border-radius: 6px;
  background: #fff;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.quote-item-remove-button:hover:not(:disabled) {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 6%, #fff);
}

/* Destructive-confirmation styling: red ring + solid red confirm, so Delete
   Forever never reads like the soft move-to-Recently-Deleted dialog (whose
   confirm is the neutral dark button below — the brand primary is already
   red). The compound selector outweighs .object-recovery-icon's amber
   default. */
.object-recovery-icon.confirm-purge-icon {
  border-color: color-mix(in srgb, var(--red) 45%, #fff);
  background: color-mix(in srgb, var(--red) 8%, #fff);
  color: var(--red);
}

.confirm-purge-notice-icon {
  display: none;
}

#confirmPurgeModal[data-tone="notice"] .confirm-purge-icon {
  border-color: color-mix(in srgb, var(--green) 35%, #fff);
  background: color-mix(in srgb, var(--green) 7%, #fff);
  color: var(--green);
}

#confirmPurgeModal[data-tone="notice"] .confirm-purge-warning-icon {
  display: none;
}

#confirmPurgeModal[data-tone="notice"] .confirm-purge-notice-icon {
  display: block;
}

.danger-button {
  border-color: #b7131a;
  background: var(--red);
  color: #fff;
}

.danger-button:hover:not(:disabled) {
  filter: brightness(0.92);
}

.neutral-confirm-button {
  border-color: #1b2420;
  background: #25302b;
  color: #fff;
}

.neutral-confirm-button:hover:not(:disabled) {
  background: #31403a;
}

/* Undo/status snackbar: one shared bottom-centered surface. */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 8px;
  background: #25302b;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 12px 30px rgb(15 20 18 / 0.35);
}

.snackbar[hidden] {
  display: none;
}

.snackbar-message {
  flex: 1 1 auto;
}

.snackbar-action {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #ff9ea3;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.snackbar-action:hover {
  color: #fff;
}

.snackbar-action[hidden] {
  display: none;
}

/* Local-development banner (dev_banner.js): shown only when the serving
   backend reports runtime_mode "local-dev". Purely informational — pointer
   events pass straight through, so it can never block clicks (including
   browser-automation tests). Above the modal backdrop (100) so it stays
   visible on the sign-in gate, below the snackbar (200). */
.dev-mode-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 150;
  padding: 4px 16px;
  background: #8a5a00;
  border-top: 1px solid #b98a24;
  color: #ffedc2;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
}

.dev-mode-banner strong {
  color: #ffffff;
}

.dev-mode-banner[hidden] {
  display: none;
}

.welcome-panel {
  /* The Define Inputs examples share a 1173:835 ratio: 478px wide is 340px tall,
     and 309px wide is the 220px floor before the panel should scroll. */
  --welcome-inputs-image-width: min(100%, clamp(309px, calc(140.5vh - 770px), 478px));
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 18px;
  overflow-y: auto;
}

@supports (height: 100dvh) {
  .welcome-panel {
    --welcome-inputs-image-width: min(100%, clamp(309px, calc(140.5dvh - 770px), 478px));
  }
}

.welcome-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: 100%;
  max-width: 1080px;
}

.welcome-card {
  display: grid;
  gap: 16px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}

.welcome-card-title {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.welcome-img-frame {
  display: flex;
  justify-content: center;
  justify-self: center;
  width: var(--welcome-inputs-image-width);
  max-width: 100%;
}

.welcome-photo-frame {
  position: relative;
  align-items: center;
  width: var(--welcome-inputs-image-width);
  aspect-ratio: 1173 / 835;
  justify-self: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--panel-2);
  container-type: inline-size;
}

.welcome-photo-frame .welcome-example-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.welcome-photo-front-label {
  position: absolute;
  left: 50%;
  bottom: 2.7%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12.7%;
  padding: 0 3.5cqw;
  border-radius: 1.8cqw;
  background: rgba(27, 27, 27, 0.85);
  color: #fdc800;
  font-size: clamp(16px, 5.35cqw, 27px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
}

.welcome-example-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 340px;
  display: block;
  border-radius: 6px;
}

.welcome-card-fields {
  display: grid;
  gap: 14px;
}

.welcome-dimensions-fields,
.welcome-photo-fields {
  min-height: 187px;
}

.welcome-dimensions-fields {
  grid-template-rows: auto repeat(2, 70px);
}

.welcome-dimensions-fields label {
  grid-template-rows: 19px 44px;
}

.welcome-dimensions-fields label>span {
  line-height: 19px;
}

.welcome-card-fields label {
  display: grid;
  gap: 7px;
}

.welcome-card-fields .file-picker {
  display: grid;
  gap: 7px;
}

.welcome-photo-fields .welcome-photo-content {
  grid-template-rows: auto minmax(0, 1fr) 44px;
  gap: 0;
  min-height: 187px;
}

.welcome-card-fields span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.welcome-card-fields input[inputmode="decimal"],
.welcome-card-fields .file-picker input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #c5cdc8;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 7px;
}

.welcome-field-hint {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #5f6f6b;
}

.welcome-photo-actions {
  display: grid;
  align-self: stretch;
  align-content: space-evenly;
  min-width: 0;
}

.welcome-instructions-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  font-size: 14px;
  font-weight: 650;
  color: #4f5a55;
  text-decoration: none;
  justify-self: start;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  line-height: 1.2;
}

.welcome-instructions-link .welcome-instructions-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.welcome-instructions-link .welcome-instructions-icon-dot {
  fill: currentColor;
  stroke: none;
}

.welcome-instructions-link:hover {
  background: var(--line);
  color: var(--text);
}

.welcome-instructions-slot {
  display: flex;
  align-items: center;
}

.welcome-rotate-image-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.welcome-rotate-image-row[hidden] {
  display: none;
}

.welcome-rotate-image-row .rotate-image-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 7px;
  min-height: 34px;
  flex: 0 0 auto;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #b9c3be;
  border-radius: 6px;
  color: #25302b;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}

.welcome-rotate-image-row .rotate-image-button:hover:not(:disabled) {
  border-color: #8d9a94;
  background: #f7f8f6;
}

.welcome-rotate-caution {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border: 1px solid #e3b557;
  border-radius: 6px;
  background: #fff8e8;
  color: #6f4300;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}

.welcome-rotate-caution::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c77800;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.photo-picker-control {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  min-width: 0;
  padding: 4px;
  border: 1px solid #c5cdc8;
  border-radius: 6px;
  background: #fff;
}

.photo-picker-button {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 4px 8px;
  background: ButtonFace;
  border-color: ButtonBorder;
  font-size: 13px;
}

.photo-picker-button:hover:not(:disabled) {
  background: #e3e3e3;
}

.photo-picker-field {
  display: grid;
  gap: 7px;
}

.rotate-image-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 6px;
  /* Override .photo-picker-button's ButtonFace/ButtonBorder system colors, which
     render as a native grey and read as disabled when the button sits alone on
     the sidebar rather than inside the white photo-picker box. */
  background: #f7f8f6;
  border-color: #b9c3be;
  color: #25302b;
}

.rotate-image-button:hover:not(:disabled) {
  border-color: #8d9a94;
  background: #fff;
}

/* The setup panel's `.control-panel span` rule muted this label to grey, which
   made the whole button read as disabled. Keep the label the button's color. */
.rotate-image-button span {
  color: inherit;
}

.rotate-image-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: currentColor;
  /* The glyph is a regular-weight filled path; stroking its silhouette with the
     fill color thickens it to better match the bold button label. */
  stroke: currentColor;
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.photo-picker-field .photo-picker-file-name,
.welcome-card-fields .photo-picker-file-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-picker-field .photo-picker-file-name.is-error,
.welcome-card-fields .photo-picker-file-name.is-error {
  color: var(--red);
  font-weight: 700;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 18, 0.55);
  z-index: 100;
  padding: 32px;
}

.modal-panel {
  position: relative;
  width: min(760px, 100%);
  height: min(85vh, 1000px);
  background: var(--panel);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.object-recovery-backdrop {
  padding: 20px;
  background:
    radial-gradient(circle at center, rgb(255 255 255 / 0.1), transparent 34%),
    rgba(15, 20, 18, 0.62);
}

.object-recovery-panel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  width: min(520px, 100%);
  height: auto;
  max-height: calc(100vh - 40px);
  padding: 22px;
  border: 1px solid #f0c36a;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fffdfa 0%, #ffffff 58%),
    var(--panel);
  box-shadow:
    0 24px 60px rgb(25 31 28 / 0.22),
    0 2px 10px rgb(25 31 28 / 0.1);
  overflow: auto;
}

/* Some workspace notices belong visually to the editor surface even though
   their backdrop still blocks the whole app. warning_modal.js supplies the
   live target rectangle across sidebar widths and resizes. */
.modal-backdrop.is-centered-on-element>.modal-panel {
  position: fixed;
  left: var(--modal-center-x, 50vw);
  top: var(--modal-center-y, 50vh);
  width: min(520px, calc(var(--modal-center-width, 100vw) - 40px));
  max-height: min(calc(100vh - 40px),
      calc(var(--modal-center-height, 100vh) - 40px));
  transform: translate(-50%, -50%);
}

.object-recovery-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #f0c36a;
  border-radius: 50%;
  background: #fff7df;
  color: #a15c16;
}

.object-recovery-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.object-recovery-copy {
  min-width: 0;
}

.object-recovery-copy h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.object-recovery-copy p {
  margin: 0;
  color: #4f5a55;
  font-size: 15px;
  line-height: 1.48;
}

#confirmPurgeMessage,
#confirmDeleteMessage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.object-recovery-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #ece6d4;
}

.object-recovery-actions .primary-button,
.object-recovery-actions .danger-button,
.object-recovery-actions .neutral-confirm-button {
  min-width: 104px;
}

.modal-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 1px solid #c5cdc8;
  border-radius: 50%;
  padding: 0;
  background: rgb(255 255 255 / 0.96);
  color: #4f5a55;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(25 31 28 / 0.14);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.modal-close-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
}

.modal-close-button:hover {
  border-color: #9fa9a3;
  background: #fff;
  color: var(--text);
}

html.is-keyboard-focus .modal-close-button:focus-visible {
  outline: 3px solid rgb(215 25 32 / 0.24);
  outline-offset: 2px;
}

.modal-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.shortcuts-modal-panel {
  width: min(670px, 100%);
  height: auto;
  max-height: 85vh;
  padding: 28px 24px 20px;
  overflow-y: auto;
}

.shortcuts-modal-title {
  margin: 0 0 14px;
  padding-right: 28px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.shortcuts-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.shortcuts-modal-table th {
  border-bottom: 1px solid var(--line);
  padding: 0 10px 6px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shortcuts-modal-table td {
  border-bottom: 1px solid #eef1ef;
  padding: 8px 10px 8px 0;
  color: var(--text);
  vertical-align: top;
}

.shortcuts-modal-table tr:last-child td {
  border-bottom: 0;
}

.shortcuts-modal-divider-row td {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.shortcuts-modal-tool-header {
  white-space: nowrap;
}

.shortcuts-modal-icon-cell {
  width: 24px;
  padding-right: 6px;
}

.shortcuts-modal-icon-cell svg {
  display: block;
  width: 18px;
  height: 18px;
  color: #33413a;
}

.shortcuts-modal-icon-fill {
  fill: currentColor;
  stroke: none;
}

.shortcuts-modal-icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shortcuts-modal-tool-cell {
  font-weight: 600;
  white-space: nowrap;
}

.shortcuts-modal-table td:last-child {
  white-space: nowrap;
  color: var(--muted);
}

.shortcut-key {
  display: inline-block;
  border: 1px solid #c4cec8;
  border-radius: 4px;
  padding: 2px 6px;
  background: #f4f6f5;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.shortcuts-modal-stacked-line--secondary {
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}

.define-corners-video-help-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
}

/* Deliberately understated: this is a rarely-used secondary action, so it
   reads as a quiet outlined button rather than the prominent primary red. */
.define-corners-video-help-footer .define-corners-video-help-link {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 12px;
  border-color: #d3dbd6;
  background: #fff;
  color: #55625b;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.define-corners-video-help-footer .define-corners-video-help-link:hover {
  border-color: #b9c3be;
  background: #f4f7f7;
  color: #2c3733;
}

.define-corners-video-backdrop {
  padding: 20px;
}

/* Just the video with a white surround; the close button may sit over the
   top-right corner of the clip. The panel is centered on the workspace by
   define_corners_instructional.js via the shared is-centered-on-element vars. */
.define-corners-video-panel {
  width: min(760px, 100%);
  height: auto;
  max-height: calc(100vh - 40px);
  padding: 16px;
  background: #fff;
  overflow: visible;
}

.define-corners-video-backdrop.is-centered-on-element>.define-corners-video-panel {
  position: fixed;
  left: var(--modal-center-x, 50vw);
  top: var(--modal-center-y, 50vh);
  width: min(760px, calc(var(--modal-center-width, 100vw) - 40px));
  max-height: min(calc(100vh - 40px),
      calc(var(--modal-center-height, 100vh) - 40px));
  transform: translate(-50%, -50%);
}

.define-corners-video-mount {
  display: grid;
  min-height: 0;
  place-items: center;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.define-corners-video {
  display: block;
  width: 100%;
  max-height: calc(100vh - 120px);
  aspect-ratio: 956 / 540;
  background: #fff;
  object-fit: contain;
}

.define-corners-video-panel>.define-corners-video-error {
  margin: 12px 0 0;
  border: 1px solid #f0c36a;
  border-radius: 6px;
  padding: 9px 11px;
  background: #fff7df;
  color: #74420f;
  font-size: 13px;
}

.welcome-proceed-area {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.welcome-checklist {
  display: grid;
  gap: 6px;
}

.welcome-checklist-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.welcome-checklist-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.15s;
}

.welcome-checklist-item.is-complete {
  color: var(--green);
}

.control-panel .welcome-checklist-item>span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.checklist-mark {
  font-size: 14px;
  line-height: 1;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

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

  .app-shell.is-editor-mode {
    grid-template-columns: 160px minmax(360px, 1fr);
  }

  .app-shell.is-resume-loading-mode {
    grid-template-columns: 144px minmax(360px, 1fr);
  }
}

@media (max-width: 760px) {
  body {
    height: auto;
    overflow: auto;
    overflow-x: hidden;
  }

  .app-header {
    align-items: flex-start;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }

  .workflow-steps {
    position: static;
    transform: none;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .workflow-step,
  .workflow-step-arrow {
    flex: 0 0 auto;
  }

  .app-shell {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100vw;
    height: auto;
    min-width: 0;
    overflow: visible;
    padding: 12px;
  }

  .app-shell.is-welcome-mode {
    overflow-y: visible;
  }

  .app-shell.is-start-mode {
    overflow-y: visible;
  }

  .start-dashboard-header {
    flex-direction: column;
    align-items: stretch;
    width: calc(100vw - 60px);
    max-width: 100%;
    min-width: 0;
    padding-right: 0;
  }

  .start-dashboard-heading {
    padding-right: 48px;
  }

  .start-dashboard-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .start-primary-actions {
    width: 100%;
  }

  .start-panel,
  .start-dashboard-header,
  .start-jobs-section,
  .job-list,
  .job-card {
    min-width: 0;
  }

  .start-panel {
    width: 100%;
    max-width: 100%;
  }

  .start-dashboard-header .start-create-button {
    width: 100%;
  }

  .start-primary-actions .start-create-button {
    flex: 1 1 auto;
    width: auto;
  }

  .recently-deleted-tooltip {
    left: 0;
    transform: translateY(-2px);
  }

  .recently-deleted-button-wrap:hover .recently-deleted-tooltip,
  html.is-keyboard-focus .recently-deleted-button-wrap:focus-within .recently-deleted-tooltip {
    transform: translateY(0);
  }

  .recently-deleted-header-actions {
    justify-content: flex-start;
  }

  .recently-deleted-header-actions .start-show-more-button,
  .recently-deleted-delete-all-button {
    flex: 1 1 210px;
  }

  .start-jobs-section {
    width: calc(100vw - 60px);
    max-width: 100%;
  }

  .start-dashboard-desc,
  .job-card-dims,
  .job-card-meta {
    overflow-wrap: anywhere;
  }

  .object-recovery-backdrop {
    align-items: flex-start;
    padding: 16px;
  }

  .object-recovery-panel {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    max-height: calc(100vh - 32px);
    padding: 18px;
  }

  .object-recovery-icon {
    width: 38px;
    height: 38px;
  }

  .object-recovery-icon svg {
    width: 22px;
    height: 22px;
  }

  .object-recovery-copy h2 {
    font-size: 18px;
  }

  .object-recovery-actions {
    justify-content: stretch;
  }

  .object-recovery-actions .primary-button,
  .object-recovery-actions .danger-button,
  .object-recovery-actions .neutral-confirm-button {
    width: 100%;
  }

  .define-corners-video-help-footer .define-corners-video-help-link {
    white-space: normal;
  }

  .define-corners-video-panel {
    padding: 12px;
  }

  .define-corners-video {
    max-height: calc(100vh - 90px);
  }

  .welcome-cards {
    grid-template-columns: 1fr;
  }

  .welcome-rotate-image-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  .welcome-rotate-caution {
    width: 100%;
  }

  .app-shell.is-editor-mode,
  .app-shell.is-layout-mode,
  .app-shell.is-resume-loading-mode {
    grid-template-columns: 1fr;
  }

  .app-shell.is-perspective-processing-mode .image-workspace {
    grid-column: 1;
  }

  .app-shell.is-resume-loading-mode .image-workspace {
    grid-column: 1;
  }

  .editor-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
  }

  .app-shell.is-editor-mode .editor-toolbar,
  .app-shell.is-layout-mode .editor-toolbar {
    align-self: start;
    max-height: none;
    overflow: visible;
  }

  .editor-tools-card {
    flex-direction: row;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    padding: 8px;
  }

  .object-editor-tools-card .history-button-row,
  .layout-editor-tools-card .history-button-row {
    width: auto;
  }

  .layout-editor-tools-card .history-button-row {
    margin-right: 2px;
    margin-bottom: 0;
    border-right: 1px solid #e1e6e2;
    border-bottom: 0;
    padding-right: 8px;
    padding-bottom: 0;
  }

  .object-editor-toolbar-divider {
    align-self: stretch;
    width: 1px;
    height: auto;
  }

  .finger-notch-tool-group,
  .text-tool-group {
    grid-template-columns: auto minmax(120px, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 8px;
    width: min(100%, 400px);
    min-height: 64px;
    padding: 6px 8px;
  }

  .finger-notch-tool-group .notch-size-control,
  .text-tool-group .text-size-control {
    grid-template-columns: auto minmax(120px, 1fr);
    min-height: 48px;
    gap: 8px;
  }

  .brush-erase-tool-group {
    flex-direction: row;
    flex-wrap: wrap;
    width: min(100%, 400px);
    padding: 6px 8px;
  }

  .brush-erase-shared-controls,
  .notch-size-control,
  .text-size-control {
    grid-template-columns: auto auto minmax(120px, 1fr);
    align-items: center;
    justify-items: stretch;
    width: min(100%, 320px);
    min-height: 48px;
    padding: 6px 8px;
  }

  .brush-erase-tool-group .brush-erase-shared-controls {
    grid-template-columns: auto auto minmax(120px, 1fr);
    width: 100%;
    min-height: 48px;
    gap: 8px;
  }

  .brush-mode-control {
    justify-content: start;
    width: auto;
  }

  .brush-size-label,
  .notch-size-label,
  .text-size-label {
    align-items: center;
    grid-auto-flow: column;
    justify-content: start;
  }

  .brush-erase-shared-controls input[type="range"],
  .notch-size-control input[type="range"],
  .text-size-control input[type="range"] {
    width: 100%;
    height: 28px;
    direction: ltr;
    writing-mode: horizontal-tb;
  }

  .image-stage {
    min-height: 380px;
  }

}

@media (max-width: 480px) {

  .start-dashboard-header,
  .start-jobs-section {
    width: min(calc(100vw - 60px), 330px);
  }
}

/* --- Auth (Clerk sign-in gate + header user button) --- */

/* Mandatory sign-in overlay: above every other modal (they max at z-index
   200), no close affordance — dismissal is signing in. */
.auth-gate {
  z-index: 300;
  background: rgba(15, 20, 18, 0.78);
}

.auth-gate-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  max-height: calc(100vh - 40px);
  padding: 12px;
  background: transparent;
  box-shadow: none;
  overflow: auto;
}

.account-deletion-gate-card {
  width: min(440px, calc(100vw - 48px));
  padding: 30px;
  border: 1px solid #d7ddd9;
  border-radius: 12px;
  background: #fff;
  color: #25302b;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.28);
}

.account-deletion-gate-card[hidden] {
  display: none;
}

.account-deletion-gate-card h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.2;
}

.account-deletion-gate-card p {
  margin: 0 0 16px;
  line-height: 1.55;
}

.account-deletion-gate-status {
  color: #5c6963;
  font-size: 14px;
}

.account-auth-checking {
  text-align: center;
}

.account-auth-checking p {
  margin-bottom: 0;
}

.user-button-slot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  min-width: 28px;
}

/* App-owned content mounted into Clerk's Manage account custom page. Clerk
   owns only the surrounding modal/navigation; these selectors never depend on
   Clerk's generated class names. */
.data-privacy-page {
  width: min(100%, 560px);
  padding: 4px 6px 24px;
  color: var(--text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.data-privacy-title {
  margin: 0 0 22px;
  font-size: clamp(1.35rem, 4vw, 1.65rem);
  line-height: 1.2;
}

.data-privacy-section-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.data-privacy-description,
.data-privacy-unavailable {
  margin: 7px 0 12px;
  color: var(--muted);
  font-size: 0.875rem;
}

.data-privacy-preference-error {
  margin: 8px 0 0;
  padding: 9px 10px;
  border: 1px solid #f0c36a;
  border-radius: 6px;
  background: #fff7df;
  color: #74420f;
  font-size: 0.82rem;
}

.data-privacy-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 16px;
}

.data-privacy-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.data-privacy-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  margin: 0;
  appearance: none;
  border: 1px solid #9fa9a3;
  border-radius: 999px;
  background: #c5cdc8;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.data-privacy-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(25 31 28 / 0.25);
  transition: transform 0.15s;
}

.data-privacy-toggle:checked {
  border-color: var(--green);
  background: var(--green);
}

.data-privacy-toggle:checked::after {
  transform: translateX(16px);
}

html.is-keyboard-focus .data-privacy-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 28%, transparent);
  outline-offset: 2px;
}

.data-privacy-toggle:disabled,
.data-privacy-toggle-label:has(.data-privacy-toggle:disabled) {
  cursor: wait;
  opacity: 0.7;
}

.data-privacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.data-privacy-danger-outline,
.data-privacy-secondary,
.data-privacy-tertiary {
  max-width: 100%;
  min-height: 38px;
  white-space: normal;
  text-align: left;
}

.data-privacy-tertiary {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}

.data-privacy-tertiary:hover:not(:disabled),
html.is-keyboard-focus .data-privacy-tertiary:focus-visible {
  border-color: var(--muted);
}

.data-privacy-danger-outline {
  border-color: color-mix(in srgb, var(--red) 45%, #fff);
  background: #fff;
  color: var(--red);
}

.data-privacy-danger-outline:hover:not(:disabled),
html.is-keyboard-focus .data-privacy-danger-outline:focus-visible {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 6%, #fff);
}

.data-privacy-secondary:hover:not(:disabled),
html.is-keyboard-focus .data-privacy-secondary:focus-visible {
  border-color: var(--muted);
  background: #fff;
}

.data-privacy-policy {
  margin: 24px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}

.data-privacy-policy-link {
  color: var(--green);
  font-weight: 700;
}

.data-privacy-danger {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

@media (max-width: 520px) {
  .data-privacy-page {
    padding-inline: 0;
  }

  .data-privacy-actions,
  .data-privacy-actions button,
  .data-privacy-danger>button {
    width: 100%;
  }
}

/* --- Quote-request workflow (guide §7, Phase 4) --- */

/* Add-to-quote actions on the fabrication preview screen. */
.quote-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.toolbar-preview-actions {
  flex-direction: column;
  flex-wrap: nowrap;
  width: 144px;
  margin-top: 0;
}

.toolbar-final-render-stale-notice {
  width: 144px;
  padding: 9px;
  font-size: 11px;
  font-weight: 700;
}

.toolbar-final-render-stale-notice .toolbar-primary-action {
  width: 100%;
  min-height: 0;
  padding: 7px 6px;
  white-space: normal;
}

.quote-secondary-button {
  padding: 8px 14px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.quote-secondary-button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}

/* Review screen ("Your quote request"): start-screen-styled cards. */
.quote-item-card {
  align-items: stretch;
  gap: 12px;
}

.quote-item-card.is-stale {
  outline: 2px solid #c97a1e;
  outline-offset: -2px;
}

.quote-item-preview {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  min-height: 100px;
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.quote-item-preview img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}

.quote-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.quote-item-notes {
  white-space: pre-wrap;
}

.quote-item-stale-notice {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(201, 122, 30, 0.12);
}

.quote-item-stale-notice p {
  margin: 0 0 8px;
}

.quote-item-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 10px;
}

.quote-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Cart summary (§7.3, Phase 5A): server-computed subtotal; shipping and
   taxes deliberately show deferred-to-invoice copy, never an amount. */
.quote-cart-summary {
  margin-top: 16px;
  max-width: 460px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #ffffff;
}

.quote-cart-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}

.quote-cart-summary-row:first-child {
  font-weight: 600;
}

.quote-cart-summary-deferred {
  font-size: 0.9em;
  opacity: 0.8;
}

/* Server-calculated estimated insert price on the preview surfaces. */
.final-render-pricing {
  margin: 10px 0 0;
  font-weight: 600;
}

.quote-item-price {
  margin-top: 4px;
  font-weight: 600;
}

.quote-freeze-copy {
  margin-top: 12px;
  font-size: 0.9em;
  opacity: 0.8;
}

/* Continue → Delivery & Contact (§7.6). */
.quote-continue-row {
  margin-top: 20px;
}

.quote-continue-blocked {
  margin-top: 8px;
  font-size: 0.9em;
  color: #b3261e;
}

/* Delivery & contact form (§7.6). */
.quote-delivery-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
  margin-top: 12px;
}

.quote-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}

.quote-field input,
.quote-field select,
.quote-field textarea {
  font: inherit;
  font-weight: 400;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.quote-fieldset {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
}

.quote-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  padding: 4px 0;
}

.quote-field-note {
  font-size: 0.9em;
  opacity: 0.85;
}

.quote-delivery-summary {
  margin-top: 6px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #ffffff;
}

.quote-submit-confirm-copy {
  font-size: 0.9em;
  opacity: 0.85;
  margin: 4px 0;
}

/* Order-submitted confirmation (§7.7). */
.quote-confirmation {
  max-width: 480px;
}

.quote-confirmation-reference {
  margin-top: 8px;
  font-size: 1.05em;
}

/* Phase 6 submitted/cancelled order history and frozen detail view. */
.quote-order-list .job-card-body {
  padding-right: 12px;
}

.quote-order-state {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 94, 62, 0.1);
  color: #0c4a34;
  font-size: 0.78em;
  font-weight: 600;
}

.quote-order-state.is-cancelled {
  background: rgba(179, 38, 30, 0.1);
  color: #8f1e18;
}

.quote-order-detail {
  max-width: 900px;
}

.quote-order-state-copy {
  max-width: 660px;
  margin: 0 0 6px;
}

.quote-order-delivery {
  max-width: 560px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #ffffff;
}

.quote-order-delivery h3 {
  margin: 0 0 8px;
  font-size: 1em;
}

.quote-order-delivery p {
  margin: 4px 0;
  white-space: pre-wrap;
}

.quote-order-item .quote-item-body {
  padding: 12px;
}

.quote-cancel-panel {
  max-width: 480px;
}

/* "Order submitted" badge on a job card thumbnail (§7.7). */
.job-card-order-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 94, 62, 0.92);
  color: #ffffff;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Editor banner for a job that is part of a submitted order (§7.7). */
.quote-submitted-banner {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(16, 94, 62, 0.1);
  border: 1px solid rgba(16, 94, 62, 0.3);
  color: #0c4a34;
  font-size: 0.92em;
}

/* Existing-organizer picker modal (§7.5). */
.quote-picker-panel {
  max-width: 640px;
  width: min(640px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  overflow: auto;
}

.quote-picker-list {
  margin-top: 12px;
}

.quote-picker-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0;
}

.quote-picker-card:disabled {
  opacity: 0.6;
  cursor: progress;
}

.quote-picker-preview-image-wrap {
  display: flex;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 12px;
  overflow: hidden;
}

.quote-picker-preview-image {
  max-width: 100%;
  max-height: 45vh;
  object-fit: contain;
}

/* --- Phase 7 admin Orders dashboard --- */

body.admin-page {
  height: auto;
  min-height: 100vh;
  overflow: auto;
}

.admin-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin-header-title {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 700;
}

.admin-back-link {
  margin-left: auto;
  color: #ffffff;
  font-size: 0.9rem;
  text-decoration: none;
}

.admin-back-link:hover {
  text-decoration: underline;
}

.admin-header .user-button-slot {
  margin-left: 0;
}

.admin-main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 56px;
}

.admin-status {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.admin-status.is-error {
  border-color: rgba(179, 38, 30, 0.35);
  background: rgba(179, 38, 30, 0.08);
  color: #8f1e18;
}

.admin-panel {
  min-width: 0;
}

.admin-panel h1,
.admin-panel h2,
.admin-panel h3,
.admin-panel p {
  margin-top: 0;
}

.admin-panel-heading,
.admin-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-panel-heading h1,
.admin-detail-heading h1 {
  margin-bottom: 4px;
}

.admin-panel-heading p {
  margin-bottom: 0;
  color: var(--muted);
}

.admin-orders-list,
.admin-items-list {
  display: grid;
  gap: 12px;
}

.admin-lifetime-totals {
  margin-top: 28px;
}

.admin-lifetime-total-list {
  display: grid;
  gap: 8px;
}

.admin-lifetime-total {
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}

.admin-order-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.1fr) minmax(280px, 1.5fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.admin-order-row:hover {
  border-color: #aeb9b2;
  background: #fbfcfa;
}

.admin-order-row.is-cancelled {
  border-color: rgba(179, 38, 30, 0.28);
  background: #fffafa;
}

.admin-order-primary,
.admin-order-facts,
.admin-order-states {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.admin-order-reference {
  font-size: 1.02rem;
}

.admin-order-customer,
.admin-order-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-order-email,
.admin-order-facts,
.admin-internal-state {
  color: var(--muted);
  font-size: 0.88rem;
}

.admin-order-states {
  align-items: flex-end;
}

.admin-state-pill {
  display: inline-flex;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(16, 94, 62, 0.1);
  color: #0c4a34;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-state-pill.is-cancelled {
  background: rgba(179, 38, 30, 0.1);
  color: #8f1e18;
}

.admin-empty,
.admin-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.admin-detail-heading {
  margin-top: 20px;
}

.admin-eyebrow {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.admin-card h2,
.admin-items-section>h2 {
  margin-bottom: 14px;
  font-size: 1.05rem;
}

.admin-data-list {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr);
  gap: 8px 14px;
  margin: 0;
}

.admin-data-list dt {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.admin-data-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-prewrap {
  white-space: pre-wrap;
}

.admin-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
}

.admin-workflow-card,
.admin-items-section {
  margin-top: 18px;
}

.admin-help-copy {
  max-width: 760px;
  color: var(--muted);
  font-size: 0.9rem;
}

.admin-workflow-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr);
  gap: 14px;
}

.admin-notes-field,
.admin-form-actions {
  grid-column: 1 / -1;
}

.admin-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-form-actions .primary-button,
.admin-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #b7131a;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.admin-item-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(340px, 1.5fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.admin-item-preview {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-right: 1px solid var(--line);
  background: #ffffff;
}

.admin-item-preview img {
  display: block;
  max-width: 100%;
  max-height: 390px;
  object-fit: contain;
}

.admin-item-body {
  min-width: 0;
  padding: 18px;
}

.admin-item-data {
  grid-template-columns: minmax(130px, 0.65fr) minmax(0, 1.35fr);
}

.admin-item-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-archive-heading {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.admin-manufacturing-selection {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.admin-manufacturing-selection legend {
  padding: 0 5px;
  font-weight: 700;
}

.admin-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 8px 0;
  line-height: 1.4;
}

.admin-checkbox-row input {
  margin-top: 3px;
}

@media (max-width: 820px) {

  .admin-order-row,
  .admin-detail-grid,
  .admin-item-card,
  .admin-workflow-form {
    grid-template-columns: 1fr;
  }

  .admin-order-states {
    align-items: flex-start;
  }

  .admin-item-preview {
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-notes-field,
  .admin-form-actions {
    grid-column: 1;
  }
}

@media (max-width: 520px) {

  .admin-header-title,
  .admin-back-link {
    display: none;
  }

  .admin-header .user-button-slot {
    margin-left: auto;
  }

  .admin-main {
    width: min(100% - 20px, 1180px);
    padding-top: 18px;
  }

  .admin-data-list,
  .admin-item-data {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .admin-data-list dd {
    margin-bottom: 9px;
  }
}

/* Standalone factual order/privacy notice (Phase 8). */
.privacy-page {
  height: 100vh;
  min-height: 100vh;
  padding: 48px 20px;
  overflow-y: auto;
  background: var(--bg);
}

.privacy-card {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--shadow);
  color: var(--text);
  line-height: 1.65;
}

.privacy-card h1 {
  margin: 0 0 4px;
}

.privacy-card h2 {
  margin: 30px 0 8px;
  font-size: 1.15rem;
}

.privacy-card li+li {
  margin-top: 8px;
}

.privacy-kicker,
.privacy-updated {
  color: var(--muted);
}

.privacy-kicker {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.privacy-updated {
  margin-top: 0;
}