.photo-editor-screen {
  --editor-blue: #1570ef;
  --editor-ink: #08245c;
  --editor-muted: #667995;
  --editor-surface: #ffffff;
  --editor-bg: #eff8ff;
  color: var(--editor-ink);
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.photo-editor-screen .ix-status {
  background: #fff;
}

.photo-demo .editor-toolbar {
  min-height: 66px;
  padding: 8px 14px 10px 32px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  background: #fff;
}

.photo-demo .editor-toolbar button:first-child {
  width: 36px;
  height: 36px;
  padding: 6px;
  color: #263445;
}

.photo-demo .editor-toolbar h1 {
  margin: 0 0 0 2px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: 0;
}

#interactive .photo-demo .editor-toolbar > [data-act="save"] {
  width: auto !important;
  min-width: 72px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px;
  border-radius: 12px !important;
  background: var(--editor-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(21, 112, 239, .16);
}

#interactive .photo-editor-screen.mode-tools .editor-toolbar > [data-act="save"] {
  min-width: 68px !important;
}

.photo-demo .photo-editor-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 22px 0 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.9), transparent 30%),
    linear-gradient(180deg, #eef8ff 0%, #f7fbff 100%);
}

.photo-demo .photo-editor-canvas::before {
  content: "";
  position: absolute;
  inset: 18px 28px 28px;
  border-radius: 28px;
  background: rgba(218, 237, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.photo-demo .photo-editor-canvas .photo-art {
  z-index: 1;
  width: min(78%, 336px);
  max-height: 90%;
  aspect-ratio: 9 / 14;
  border-radius: 6px;
  box-shadow: 0 18px 34px rgba(42, 80, 120, .16);
}

.photo-demo .photo-editor-canvas.none .photo-art { filter: none; }
.photo-demo .photo-editor-canvas.super .photo-art,
.photo-demo .photo-editor-canvas.miracle .photo-art { filter: saturate(1.52) contrast(1.08); }
.photo-demo .photo-editor-canvas.b-and-w .photo-art,
.photo-demo .photo-editor-canvas.grayscale .photo-art { filter: grayscale(1); }
.photo-demo .photo-editor-canvas.contrast .photo-art { filter: contrast(1.55); }
.photo-demo .photo-editor-canvas.negative .photo-art { filter: invert(1); }
.photo-demo .photo-editor-canvas.custom .photo-art { filter: sepia(.35) saturate(1.25); }
.photo-demo .photo-editor-canvas.blend .photo-art { filter: sepia(.35) hue-rotate(170deg); }

.photo-paper strong,
.photo-editor-canvas strong {
  z-index: 3;
}

.photo-demo .editor-tools {
  min-height: 96px;
  padding: 16px 28px 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 32px;
  background: #fff;
}

.photo-demo .editor-tools button {
  min-width: 0;
  min-height: 56px;
  padding: 0;
  display: grid;
  grid-template-rows: 24px auto;
  justify-items: center;
  align-content: start;
  gap: 4px;
  color: var(--editor-blue);
  font-size: 14px;
  line-height: 20px;
}

.photo-demo .editor-tools img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.photo-demo .filter-row {
  min-height: 132px;
  padding: 16px 18px 36px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.photo-demo .filter-row::-webkit-scrollbar {
  display: none;
}

.photo-demo .filter-row .filter-card {
  flex: 0 0 72px;
  min-width: 72px;
  min-height: 86px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
}

.photo-demo .filter-card .filter-preview {
  position: relative;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border-radius: 10px;
  display: block;
  background: var(--paint), var(--bg);
  box-shadow: 0 5px 14px rgba(16,42,86,.12);
}

.photo-demo .filter-card .filter-preview::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24px;
  background: linear-gradient(180deg, transparent, rgba(5, 23, 55, .72));
}

.photo-demo .filter-card b {
  width: 66px;
  min-height: 22px;
  margin-top: -22px;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.42);
}

.photo-demo .filter-card.on .filter-preview {
  box-shadow:
    0 5px 14px rgba(16,42,86,.12),
    0 0 0 2px #fff,
    0 0 0 4px var(--editor-blue);
}

.photo-demo .filter-preview.none { filter: none; }
.photo-demo .filter-preview.super,
.photo-demo .filter-preview.miracle { filter: saturate(1.52) contrast(1.08); }
.photo-demo .filter-preview.b-and-w,
.photo-demo .filter-preview.grayscale { filter: grayscale(1); }
.photo-demo .filter-preview.contrast { filter: contrast(1.55); }
.photo-demo .filter-preview.negative { filter: invert(1); }
.photo-demo .filter-preview.custom { filter: sepia(.35) saturate(1.25); }
.photo-demo .filter-preview.blend { filter: sepia(.35) hue-rotate(170deg); }

.photo-demo .undo-redo {
  position: absolute;
  top: 34px;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 18px;
  transform: translateX(-50%);
}

.photo-demo .undo-redo button {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 18px rgba(16,42,86,.08);
}

.photo-demo .undo-redo button:disabled {
  opacity: .72;
  box-shadow: none;
}

.photo-demo .undo-redo img {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(75%) sepia(16%) saturate(407%) hue-rotate(174deg) brightness(89%) contrast(89%);
}

.photo-demo .undo-redo button:not(:disabled) img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(94%) saturate(3027%) hue-rotate(204deg) brightness(96%) contrast(95%);
}

.photo-demo .draw-hint {
  position: absolute;
  bottom: 18px;
  z-index: 3;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(8, 36, 92, .76);
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(8,36,92,.16);
}

.photo-demo .drawing-panel {
  min-height: 250px;
  padding: 24px 22px 34px;
  display: grid;
  gap: 22px;
  background: #fff;
  color: var(--editor-ink);
}

.photo-demo .drawing-panel label,
.photo-demo .signature-colors {
  display: grid;
  gap: 16px;
}

.photo-demo .drawing-panel b {
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
}

.photo-demo .drawing-panel input[type="range"] {
  width: 100%;
  height: 28px;
  margin: 0;
  appearance: none;
  background: transparent;
  outline: none;
}

.photo-demo .drawing-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--editor-blue) 0 var(--progress), #d8e3ef var(--progress) 100%);
}

.photo-demo .drawing-panel input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -5.5px;
  border: 0;
  border-radius: 50%;
  background: var(--editor-blue);
  box-shadow: 0 0 0 4px rgba(21,112,239,.14);
}

.photo-demo .drawing-panel input[type="range"]::-moz-range-track {
  height: 7px;
  border-radius: 99px;
  background: #d8e3ef;
}

.photo-demo .drawing-panel input[type="range"]::-moz-range-progress {
  height: 7px;
  border-radius: 99px;
  background: var(--editor-blue);
}

.photo-demo .drawing-panel input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--editor-blue);
}

.photo-demo .signature-colors > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.photo-demo .signature-colors button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #d9e2ec;
}

.photo-demo .signature-colors button.on {
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--editor-blue), 0 8px 16px rgba(21,112,239,.18);
}

.photo-demo .photo-exit {
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 28px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(4px);
}

.photo-demo .photo-exit section {
  width: min(100%, 336px);
  padding: 28px 20px 18px;
  border-radius: 22px;
  display: grid;
  gap: 10px;
  background: #fff;
  color: var(--editor-ink);
  text-align: center;
  box-shadow: 0 22px 44px rgba(15, 23, 42, .24);
}

.photo-demo .photo-exit img {
  width: 96px;
  height: 96px;
  margin: 0 auto 2px;
  object-fit: contain;
}

.photo-demo .photo-exit h2 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
}

.photo-demo .photo-exit p {
  margin: 0;
  color: var(--editor-muted);
  font-size: 14px;
  line-height: 20px;
}

.photo-demo .photo-exit .photo-exit-actions {
  width: 100%;
  height: auto;
  margin: 14px 0 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: transparent;
  box-shadow: none;
}

.photo-demo .photo-exit button {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.photo-demo .photo-exit [data-act="leaveEditor"] {
  background: #fff5f3;
  color: #d92d20;
  box-shadow: inset 0 0 0 1px #ffd4cc;
}

.photo-demo .photo-exit [data-act="cancelExit"] {
  background: var(--editor-blue);
  color: #fff;
  box-shadow: 0 8px 16px rgba(21,112,239,.22);
}