:root {
  color-scheme: light;
  --bg: #f6f7fa;
  --bg-deep: #fbfbfd;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.82);
  --surface-muted: #f0f2f6;
  --text: #101216;
  --text-soft: #2d3139;
  --muted: #747c8b;
  --muted-strong: #5d6574;
  --line: rgba(32, 39, 52, 0.075);
  --line-strong: rgba(32, 39, 52, 0.13);
  --accent: #2f6ff7;
  --accent-rgb: 47, 111, 247;
  --accent-soft: #edf3ff;
  --nav-active: #303846;
  --success: #27945c;
  --danger: #dd4d57;
  --warning: #d78623;
  --shadow-card: 0 18px 42px rgba(37, 45, 61, 0.075), 0 3px 10px rgba(37, 45, 61, 0.035);
  --shadow-soft: 0 10px 26px rgba(37, 45, 61, 0.065), 0 2px 8px rgba(37, 45, 61, 0.035);
  --shadow-control: 0 8px 20px rgba(37, 45, 61, 0.1);
  --shell: 460px;
  --top-safe: env(safe-area-inset-top, 0px);
  --bottom-safe: env(safe-area-inset-bottom, 0px);
  --radius-xl: 28px;
  --radius-lg: 23px;
  --radius-md: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090c12;
  --bg-deep: #0d1119;
  --surface: #141922;
  --surface-soft: rgba(20, 25, 34, 0.86);
  --surface-muted: #1b222d;
  --text: #f6f8fc;
  --text-soft: #e6eaf1;
  --muted: #919aaa;
  --muted-strong: #aab2bf;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.13);
  --accent: #6c96ff;
  --accent-rgb: 108, 150, 255;
  --accent-soft: rgba(108, 150, 255, 0.13);
  --nav-active: #eef2f9;
  --success: #54c889;
  --danger: #ff727b;
  --warning: #ffb658;
  --shadow-card: 0 20px 46px rgba(0, 0, 0, 0.3), 0 3px 12px rgba(0, 0, 0, 0.18);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.16);
  --shadow-control: 0 8px 22px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100%;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  font-synthesis: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

button,
label {
  touch-action: manipulation;
}

img,
svg {
  display: block;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ui-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% -4%, rgba(255, 255, 255, 0.98) 0, rgba(255, 255, 255, 0) 31rem),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 42%, #f8f9fb 100%);
}

:root[data-theme="dark"] .app-bg {
  background:
    radial-gradient(circle at 87% -5%, rgba(82, 122, 255, 0.14) 0, rgba(82, 122, 255, 0) 25rem),
    radial-gradient(circle at -12% 30%, rgba(90, 65, 175, 0.1) 0, rgba(90, 65, 175, 0) 24rem),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 64%, #080b10 100%);
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.42;
}

.bg-orb-one {
  width: 18rem;
  height: 18rem;
  top: 8rem;
  left: 50%;
  transform: translateX(8rem);
  background: radial-gradient(circle, rgba(101, 146, 255, 0.11), transparent 68%);
}

.bg-orb-two {
  width: 16rem;
  height: 16rem;
  top: 38rem;
  right: 50%;
  transform: translateX(-8rem);
  background: radial-gradient(circle, rgba(159, 117, 255, 0.08), transparent 68%);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  width: min(var(--shell), 100%);
  margin: 0 auto;
  padding: calc(17px + var(--top-safe)) 22px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(180deg, rgba(248, 249, 251, 0.98) 0%, rgba(248, 249, 251, 0.91) 72%, rgba(248, 249, 251, 0) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

:root[data-theme="dark"] .topbar {
  background: linear-gradient(180deg, rgba(9, 12, 18, 0.98) 0%, rgba(9, 12, 18, 0.91) 72%, rgba(9, 12, 18, 0) 100%);
}

.brand-button {
  border: 0;
  padding: 5px 0;
  background: transparent;
  color: var(--text);
  font-size: 29px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.052em;
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}

.brand-button:active {
  transform: scale(0.98);
  opacity: 0.72;
}

.icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: transform 170ms var(--ease), background 170ms ease, box-shadow 170ms ease;
}

.icon-button:hover {
  background: var(--surface-soft);
  box-shadow: var(--shadow-soft);
}

.icon-button:active {
  transform: scale(0.92);
}

.support-button .ui-icon {
  width: 27px;
  height: 27px;
  stroke-width: 1.85;
}

.app-shell {
  position: relative;
  z-index: 2;
  width: min(var(--shell), 100%);
  min-height: calc(100dvh - 72px);
  margin: 0 auto;
  padding: 2px 22px calc(112px + var(--bottom-safe));
}

.page {
  display: none;
}

.page-active {
  display: block;
  animation: page-in 300ms var(--ease) both;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.category-tabs {
  position: relative;
  width: 100%;
  min-height: 57px;
  margin: 5px 0 0;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 23px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: rgba(238, 240, 244, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 8px 24px rgba(39, 47, 63, 0.035);
}

:root[data-theme="dark"] .category-tabs {
  border-color: var(--line);
  background: rgba(24, 30, 40, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--shadow-soft);
}

.category-tab {
  min-width: 0;
  height: 45px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--muted-strong);
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -0.025em;
  cursor: pointer;
  transition: transform 170ms var(--ease), color 170ms ease, background 210ms var(--ease), box-shadow 210ms var(--ease);
}

.category-tab.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"] .category-tab.active {
  background: #222a36;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.category-tab:active {
  transform: scale(0.965);
}

.section-meta {
  min-height: 32px;
  padding: 11px 3px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.section-meta span:last-child {
  color: var(--muted-strong);
}

.studio-tool-list {
  display: grid;
  gap: 13px;
}

.studio-tool-card {
  position: relative;
  width: 100%;
  min-height: 156px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 46% 1fr;
  align-items: stretch;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms ease;
}

.studio-tool-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 22px 48px rgba(37, 45, 61, 0.105), 0 4px 12px rgba(37, 45, 61, 0.05);
}

.studio-tool-card:active {
  transform: scale(0.982);
}

.studio-tool-card[aria-disabled="true"] {
  cursor: default;
}

.tool-preview {
  position: relative;
  min-width: 0;
  min-height: 156px;
  overflow: hidden;
  background: var(--surface-muted);
}

.tool-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 450ms var(--ease);
}

.studio-tool-card:hover .tool-preview img {
  transform: scale(1.025);
}

.tool-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.16);
}

.tool-soon-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(20, 25, 34, 0.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.tool-soon-overlay span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #242a35;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.14);
}

.tool-copy {
  position: relative;
  min-width: 0;
  padding: 18px 14px 17px 20px;
  display: block;
}

.tool-copy strong {
  display: block;
  color: var(--text);
  font-size: clamp(18px, 4.8vw, 19.5px);
  line-height: 1.12;
  font-weight: 820;
  letter-spacing: -0.043em;
}

.tool-copy > .ui-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 22px;
  height: 22px;
  color: var(--muted-strong);
  stroke-width: 2;
  transform: translateY(-50%);
}

.tool-copy p {
  margin: 9px 0 0;
  padding-right: 22px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.42;
  font-weight: 540;
  letter-spacing: -0.013em;
}

.tool-card-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 730;
}

.tool-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tool-card-meta .ui-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.tool-skeleton {
  min-height: 156px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 46% 1fr;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.tool-skeleton > span,
.tool-skeleton > i,
.tool-skeleton > b {
  position: relative;
  overflow: hidden;
  background: var(--surface-muted);
}

.tool-skeleton > span {
  grid-row: 1 / 3;
}

.tool-skeleton > i,
.tool-skeleton > b {
  height: 19px;
  margin: 24px 20px 0;
  border-radius: 8px;
}

.tool-skeleton > b {
  width: 62%;
  height: 12px;
  margin-top: 3px;
}

.tool-skeleton > span::after,
.tool-skeleton > i::after,
.tool-skeleton > b::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: shimmer 1.4s infinite;
}

:root[data-theme="dark"] .tool-skeleton > span::after,
:root[data-theme="dark"] .tool-skeleton > i::after,
:root[data-theme="dark"] .tool-skeleton > b::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

.empty-state {
  min-height: 238px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 26px 22px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.empty-state-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.empty-state-icon .ui-icon {
  width: 29px;
  height: 29px;
}

.empty-state strong {
  font-size: 18px;
  font-weight: 820;
  letter-spacing: -0.03em;
}

.empty-state p {
  max-width: 280px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.tool-detail-card,
.detail-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 12px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tool-hero {
  position: relative;
  height: 224px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface-muted);
}

.tool-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

.tool-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 14, 24, 0.04), transparent 44%, rgba(9, 14, 24, 0.12));
}

.floating-badge {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 12px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.86);
  color: #272d38;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 22px rgba(12, 18, 29, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.floating-badge-right {
  left: auto;
  right: 12px;
}

.floating-badge .ui-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.tool-heading {
  padding: 19px 8px 16px;
}

.tool-heading h1,
.detail-heading h1 {
  margin: 0;
  color: var(--text);
  font-size: 27px;
  line-height: 1.08;
  font-weight: 860;
  letter-spacing: -0.052em;
}

.tool-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 520;
}

.tool-form {
  display: grid;
  gap: 14px;
}

.upload-box {
  position: relative;
  min-height: 172px;
  border: 1.5px dashed rgba(var(--accent-rgb), 0.35);
  border-radius: 22px;
  overflow: hidden;
  display: block;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.055), rgba(var(--accent-rgb), 0.015));
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}

.upload-box:hover,
.upload-box.is-dragging {
  border-color: rgba(var(--accent-rgb), 0.72);
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.09), rgba(var(--accent-rgb), 0.025));
}

.upload-box:active {
  transform: scale(0.992);
}

.upload-box > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-idle {
  min-height: 172px;
  padding: 21px 16px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  text-align: center;
}

.upload-icon-wrap {
  width: 50px;
  height: 50px;
  margin-bottom: 2px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-soft);
}

.upload-icon-wrap .ui-icon {
  width: 25px;
  height: 25px;
}

.upload-idle strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 820;
  letter-spacing: -0.025em;
}

.upload-idle small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.upload-cta {
  margin-top: 5px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--accent);
  font-size: 12px;
  font-weight: 820;
  box-shadow: 0 5px 15px rgba(37, 45, 61, 0.07);
}

.upload-preview {
  min-height: 172px;
  padding: 12px;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 38px;
  gap: 12px;
  align-items: center;
  background: var(--surface);
}

.upload-preview[hidden],
.upload-idle[hidden] {
  display: none;
}

.upload-preview img {
  width: 116px;
  height: 146px;
  border-radius: 17px;
  object-fit: cover;
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

.upload-preview-copy {
  min-width: 0;
}

.upload-preview-copy strong,
.upload-preview-copy small {
  display: block;
}

.upload-preview-copy strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-preview-copy small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.clear-file-button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  color: var(--muted-strong);
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}

.clear-file-button .ui-icon {
  width: 19px;
  height: 19px;
}

.clear-file-button:hover {
  color: var(--danger);
  background: rgba(221, 77, 87, 0.09);
}

.clear-file-button:active {
  transform: scale(0.9);
}

.field-group {
  display: grid;
  gap: 8px;
}

.field-heading {
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-heading label {
  color: var(--text);
  font-size: 13px;
  font-weight: 810;
  letter-spacing: -0.012em;
}

.field-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 15px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
}

textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.68);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
}

.action-summary {
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 680;
}

.action-summary span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.action-summary span:last-child {
  color: var(--muted-strong);
  text-align: right;
}

.action-summary .ui-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.primary-action {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 18px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  background: linear-gradient(135deg, #2f6ff7, #245bd8);
  color: #ffffff;
  font-size: 14px;
  font-weight: 840;
  letter-spacing: -0.015em;
  box-shadow: 0 13px 28px rgba(47, 111, 247, 0.24);
  cursor: pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms ease, opacity 180ms ease;
}

.primary-action .ui-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.primary-action:hover:not(:disabled) {
  box-shadow: 0 16px 32px rgba(47, 111, 247, 0.32);
}

.primary-action:active:not(:disabled) {
  transform: scale(0.982);
}

.primary-action:disabled {
  opacity: 0.46;
  cursor: default;
  box-shadow: none;
}

.primary-action.is-loading .ui-icon {
  animation: spin 0.85s linear infinite;
}

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

.status-card {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 13px 14px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}

.status-card[hidden] {
  display: none;
}

.status-card.status-success {
  border-color: rgba(39, 148, 92, 0.2);
  background: rgba(39, 148, 92, 0.075);
  color: var(--success);
}

.status-card.status-error {
  border-color: rgba(221, 77, 87, 0.2);
  background: rgba(221, 77, 87, 0.075);
  color: var(--danger);
}

.status-card.status-info {
  border-color: rgba(var(--accent-rgb), 0.2);
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent);
}

.profile-card {
  width: 100%;
  min-height: 128px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 18px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 54px;
  gap: 16px;
  align-items: center;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms ease, border-color 200ms ease;
}

.profile-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 22px 48px rgba(37, 45, 61, 0.105), 0 4px 12px rgba(37, 45, 61, 0.05);
}

.profile-card:active {
  transform: scale(0.985);
}

.profile-avatar-frame {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  padding: 2px;
  display: block;
  background: linear-gradient(145deg, #dfe9ff, #f7fbff);
  box-shadow: 0 0 0 1px rgba(47, 111, 247, 0.08), 0 10px 24px rgba(44, 85, 159, 0.13);
}

:root[data-theme="dark"] .profile-avatar-frame {
  background: linear-gradient(145deg, #283954, #1b2534);
}

.profile-avatar-image,
.profile-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.profile-avatar-image {
  object-fit: cover;
  background: #dce8ff;
}

.profile-avatar-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #7eb2ff, #556af5 55%, #8559e9);
  color: #ffffff;
  font-size: 25px;
  font-weight: 880;
  letter-spacing: -0.04em;
}

.profile-avatar-fallback[hidden],
.profile-avatar-image[hidden] {
  display: none;
}

.profile-online-dot {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 15px;
  height: 15px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: #35c776;
}

.profile-identity {
  min-width: 0;
}

.profile-identity strong,
.profile-identity small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-identity strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 840;
  letter-spacing: -0.045em;
}

.profile-identity small {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 540;
}

.profile-card-action {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-control);
}

.profile-card-action .ui-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}

.profile-list {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.profile-row {
  width: 100%;
  min-height: 84px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 12px 15px 12px 13px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 190ms var(--ease), box-shadow 190ms ease, border-color 190ms ease;
}

.profile-row:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}

.profile-row:active {
  transform: scale(0.986);
}

.profile-row-icon {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(var(--accent-rgb), 0.08);
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(36, 64, 116, 0.08);
}

:root[data-theme="dark"] .profile-row-icon {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.14);
  box-shadow: none;
}

.profile-row-icon .ui-icon {
  width: 27px;
  height: 27px;
  stroke-width: 1.95;
}

.profile-row-copy {
  min-width: 0;
}

.profile-row-copy strong,
.profile-row-copy small {
  display: block;
}

.profile-row-copy strong {
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.2;
  font-weight: 810;
  letter-spacing: -0.027em;
}

.profile-row-copy small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 520;
}

.row-chevron {
  width: 22px;
  height: 22px;
  color: var(--muted-strong);
  stroke-width: 2;
}


.history-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.history-heading {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.history-heading-icon {
  width: 56px;
  height: 56px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}

.history-heading-icon .ui-icon {
  width: 27px;
  height: 27px;
  stroke-width: 2;
}

.history-heading h1,
.history-heading p {
  margin: 0;
}

.history-heading h1 {
  color: var(--text);
  font-size: 23px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.history-heading > div > p:last-child {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.history-state {
  margin-top: 18px;
  padding: 22px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 20px;
  color: var(--muted);
  background: var(--surface-subtle);
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
}

.history-state.history-error {
  color: var(--danger);
  border-color: rgba(221, 71, 71, 0.24);
  background: rgba(221, 71, 71, 0.06);
}

.history-list {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.history-item {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-subtle);
}

.history-item-top,
.history-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.history-item-top > strong {
  min-width: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.3;
  font-weight: 810;
}

.history-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 760;
  white-space: nowrap;
}

.history-status-success {
  color: #17824d;
  background: rgba(30, 164, 96, 0.12);
}

.history-status-running {
  color: var(--accent);
  background: var(--accent-soft);
}

.history-status-waiting {
  color: #9a6a0d;
  background: rgba(224, 165, 43, 0.14);
}

.history-status-error {
  color: var(--danger);
  background: rgba(221, 71, 71, 0.11);
}

.history-status-muted {
  color: var(--muted-strong);
  background: var(--surface);
}

:root[data-theme="dark"] .history-status-success {
  color: #6ed6a2;
}

:root[data-theme="dark"] .history-status-waiting {
  color: #f0c36d;
}

.history-item-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.history-item-bottom {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.history-item-bottom span {
  color: var(--muted);
  font-size: 12px;
}

.history-item-bottom strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.detail-card {
  padding: 20px;
}

.detail-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.detail-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.detail-icon .ui-icon {
  width: 25px;
  height: 25px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.detail-heading h1 {
  font-size: 24px;
}

.detail-body {
  margin-top: 19px;
  display: grid;
  gap: 12px;
}

.detail-body p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.55;
}

.detail-section,
.detail-note,
.account-summary {
  border: 1px solid var(--line);
  border-radius: 19px;
  padding: 15px;
  background: var(--surface);
}

.detail-section h2 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: 15px;
  font-weight: 820;
  letter-spacing: -0.022em;
}

.detail-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.detail-note .ui-icon {
  width: 19px;
  height: 19px;
  margin-top: 1px;
}

.detail-note p {
  color: inherit;
  font-size: 12.5px;
}

.detail-action {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 17px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 820;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.23);
  transition: transform 170ms var(--ease), box-shadow 170ms ease;
}

.detail-action.secondary {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.detail-action:active {
  transform: scale(0.98);
}

.detail-action .ui-icon {
  width: 19px;
  height: 19px;
}

.account-summary {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.account-summary-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-muted);
}

.account-summary strong,
.account-summary small {
  display: block;
}

.account-summary strong {
  font-size: 15px;
  font-weight: 820;
}

.account-summary small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

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

.theme-option {
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  display: grid;
  gap: 9px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease;
}

.theme-option.active {
  border-color: rgba(var(--accent-rgb), 0.68);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.theme-option:active {
  transform: scale(0.98);
}

.theme-preview {
  height: 60px;
  border-radius: 12px;
  padding: 8px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 6px;
  align-items: end;
  overflow: hidden;
}

.theme-preview-light {
  background: #f1f3f7;
}

.theme-preview-dark {
  background: #10151d;
}

.theme-preview span {
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(32, 39, 52, 0.08);
}

.theme-preview span:first-child {
  height: 34px;
}

.theme-preview span:last-child {
  height: 44px;
}

.theme-preview-dark span {
  background: #252d39;
  box-shadow: none;
}

.theme-option-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  font-weight: 790;
}

.theme-option-label .ui-icon {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(10px, var(--bottom-safe));
  z-index: 50;
  width: min(calc(var(--shell) - 36px), calc(100% - 32px));
  min-height: 78px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 25px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: rgba(255, 255, 255, 0.87);
  box-shadow: 0 18px 42px rgba(31, 39, 54, 0.14), 0 2px 8px rgba(31, 39, 54, 0.05);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

:root[data-theme="dark"] .bottom-nav {
  border-color: rgba(255, 255, 255, 0.075);
  background: rgba(18, 23, 31, 0.88);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.44), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bottom-btn {
  min-width: 0;
  min-height: 64px;
  border: 0;
  border-radius: 18px;
  padding: 4px 2px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 170ms ease, transform 170ms var(--ease), background 170ms ease;
}

.bottom-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.bottom-btn b {
  max-width: 100%;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.018em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 190ms var(--ease), color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.bottom-icon .ui-icon {
  width: 23px;
  height: 23px;
  stroke-width: 1.9;
}

.bottom-btn.active {
  color: var(--nav-active);
}

.bottom-btn.active .bottom-icon {
  background: var(--nav-active);
  color: var(--surface);
  box-shadow: 0 9px 20px rgba(48, 56, 70, 0.22);
}

#profileBtn.active {
  color: var(--accent);
}

#profileBtn.active .bottom-icon {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 9px 20px rgba(var(--accent-rgb), 0.25);
}

:root[data-theme="dark"] #studioBtn.active .bottom-icon,
:root[data-theme="dark"] #backBtn.active .bottom-icon {
  color: #11161e;
}

.bottom-btn.disabled,
.bottom-btn:disabled {
  opacity: 0.52;
  cursor: default;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(99px + max(10px, var(--bottom-safe)));
  z-index: 80;
  width: min(360px, calc(100% - 40px));
  min-height: 50px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(24, 30, 40, 0.92);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(9, 14, 24, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 680;
  animation: toast-in 240ms var(--ease) both;
}

.toast[hidden] {
  display: none;
}

.toast .ui-icon {
  width: 19px;
  height: 19px;
  color: #78e2a5;
  stroke-width: 2.2;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

button:focus-visible,
textarea:focus-visible,
.upload-box:has(input:focus-visible) {
  outline: 3px solid rgba(var(--accent-rgb), 0.2);
  outline-offset: 2px;
}

@media (max-width: 390px) {
  .topbar {
    padding-left: 18px;
    padding-right: 18px;
  }

  .app-shell {
    padding-left: 18px;
    padding-right: 18px;
  }

  .bottom-nav {
    width: calc(100% - 28px);
  }
}

@media (max-width: 355px) {
  .brand-button {
    font-size: 26px;
  }

  .app-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .studio-tool-card,
  .tool-skeleton {
    min-height: 142px;
    grid-template-columns: 45% 1fr;
  }

  .tool-preview {
    min-height: 142px;
  }

  .tool-copy {
    padding: 15px 11px 14px 15px;
  }

  .tool-copy strong {
    font-size: 17.5px;
  }

  .tool-copy p {
    font-size: 12.3px;
  }

  .tool-card-meta {
    font-size: 10px;
  }

  .profile-card {
    grid-template-columns: 68px minmax(0, 1fr) 46px;
    gap: 12px;
    padding: 15px;
  }

  .profile-avatar-frame {
    width: 68px;
    height: 68px;
  }

  .profile-card-action {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .profile-identity strong {
    font-size: 19px;
  }

  .profile-row {
    grid-template-columns: 48px minmax(0, 1fr) 20px;
    gap: 11px;
  }

  .profile-row-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .profile-row-copy strong {
    font-size: 14.5px;
  }

  .profile-row-copy small {
    font-size: 11.5px;
  }

  .upload-preview {
    grid-template-columns: 92px minmax(0, 1fr) 34px;
    gap: 10px;
  }

  .upload-preview img {
    width: 92px;
    height: 132px;
  }

  .action-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

@media (min-width: 700px) {
  body {
    padding-bottom: 18px;
  }

  .topbar,
  .app-shell {
    border-left: 1px solid rgba(32, 39, 52, 0.025);
    border-right: 1px solid rgba(32, 39, 52, 0.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Wallet, checkout and profile polish — production UI
   ========================================================================== */

.profile-card-static {
  min-height: 116px;
  grid-template-columns: 82px minmax(0, 1fr);
  cursor: default;
}

.profile-card-static:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.profile-card-static:active {
  transform: none;
}

.wallet-card,
.appearance-card,
.payment-card,
.legal-card {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.wallet-card {
  position: relative;
  isolation: isolate;
  margin-top: 14px;
  overflow: hidden;
  border-color: rgba(var(--accent-rgb), 0.14);
  border-radius: var(--radius-xl);
  padding: 17px;
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb), 0.14) 0%, rgba(var(--accent-rgb), 0.04) 42%, rgba(255, 255, 255, 0.92) 76%),
    var(--surface);
  box-shadow: 0 20px 46px rgba(47, 91, 186, 0.11), 0 4px 12px rgba(37, 45, 61, 0.045);
}

.wallet-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 178px;
  height: 178px;
  top: -108px;
  right: -58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0));
  pointer-events: none;
}

.wallet-card-top {
  min-height: 68px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
}

.wallet-card-icon,
.appearance-icon,
.payment-heading-icon,
.legal-icon {
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.09);
}

.wallet-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff, rgba(var(--accent-rgb), 0.09));
  box-shadow: 0 9px 23px rgba(41, 83, 165, 0.11), inset 0 0 0 1px rgba(var(--accent-rgb), 0.1);
}

.wallet-card-icon .ui-icon {
  width: 27px;
  height: 27px;
  stroke-width: 1.9;
}

.wallet-card-copy {
  min-width: 0;
}

.wallet-card-copy small,
.wallet-card-copy strong {
  display: block;
}

.wallet-card-copy small {
  color: var(--muted-strong);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 720;
  letter-spacing: -0.012em;
}

.wallet-card-copy strong {
  margin-top: 3px;
  color: var(--text);
  font-size: clamp(28px, 8vw, 34px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}

.wallet-secure {
  align-self: start;
  margin-top: 2px;
  min-height: 27px;
  border: 1px solid rgba(39, 148, 92, 0.13);
  border-radius: 999px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(39, 148, 92, 0.075);
  color: var(--success);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 780;
  white-space: nowrap;
}

.wallet-secure .ui-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

.wallet-topup-button {
  width: 100%;
  min-height: 67px;
  margin-top: 13px;
  border: 0;
  border-radius: 20px;
  padding: 9px 14px 9px 10px;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) 21px;
  gap: 11px;
  align-items: center;
  background: linear-gradient(135deg, #3378ff 0%, #2662df 58%, #2457ca 100%);
  color: #ffffff;
  text-align: left;
  box-shadow: 0 15px 30px rgba(47, 111, 247, 0.25), inset 0 1px rgba(255, 255, 255, 0.17);
  cursor: pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms ease, filter 180ms ease;
}

.wallet-topup-button:hover {
  filter: brightness(1.035);
  box-shadow: 0 18px 34px rgba(47, 111, 247, 0.31), inset 0 1px rgba(255, 255, 255, 0.2);
}

.wallet-topup-button:active {
  transform: scale(0.982);
}

.wallet-topup-plus {
  width: 45px;
  height: 45px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.17);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.wallet-topup-plus .ui-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.wallet-topup-button > span:nth-child(2) {
  min-width: 0;
}

.wallet-topup-button strong,
.wallet-topup-button small {
  display: block;
}

.wallet-topup-button strong {
  font-size: 15.5px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.022em;
}

.wallet-topup-button small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 580;
}

.wallet-topup-button .row-chevron {
  color: rgba(255, 255, 255, 0.82);
}

.wallet-topup-button.is-disabled,
.wallet-topup-button:disabled {
  cursor: default;
  opacity: 0.62;
  filter: grayscale(0.04);
  box-shadow: none;
}

.appearance-card {
  margin-top: 14px;
  border-radius: 24px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.appearance-heading {
  padding: 0 2px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.appearance-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.appearance-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.appearance-heading > span:last-child {
  min-width: 0;
}

.appearance-heading strong,
.appearance-heading small {
  display: block;
}

.appearance-heading strong {
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.15;
  font-weight: 820;
  letter-spacing: -0.025em;
}

.appearance-heading small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 520;
}

.theme-segment {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: var(--surface-muted);
}

.theme-segment-button {
  position: relative;
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.theme-segment-button:active {
  transform: scale(0.975);
}

.theme-segment-button > .ui-icon {
  width: 19px;
  height: 19px;
}

.theme-segment-button > span {
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-segment-button i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #ffffff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 170ms ease, transform 170ms var(--ease);
}

.theme-segment-button i .ui-icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.7;
}

.theme-segment-button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 5px 14px rgba(37, 45, 61, 0.08), inset 0 0 0 1px var(--line);
}

.theme-segment-button.active i {
  opacity: 1;
  transform: scale(1);
}

.tool-title-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tool-title-line h1 {
  min-width: 0;
}

.tool-balance-pill {
  flex: 0 0 auto;
  min-height: 29px;
  border: 1px solid rgba(var(--accent-rgb), 0.13);
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 780;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.duration-group[hidden] {
  display: none;
}

.duration-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.duration-option {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-muted);
  color: var(--text-soft);
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.duration-option:active {
  transform: scale(0.98);
}

.duration-option strong,
.duration-option small {
  display: block;
}

.duration-option strong {
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}

.duration-option small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 680;
}

.duration-option.active {
  border-color: rgba(var(--accent-rgb), 0.32);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.04);
}

.duration-option.active small {
  color: var(--accent);
}

.billing-hint {
  margin: -2px 2px 1px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 530;
}

.payment-card,
.legal-card {
  border-radius: var(--radius-xl);
  padding: 18px;
}

.payment-heading,
.legal-heading {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.payment-heading-icon,
.legal-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.065));
}

.payment-heading-icon .ui-icon,
.legal-icon .ui-icon {
  width: 27px;
  height: 27px;
  stroke-width: 1.9;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.payment-heading h1,
.legal-heading h1 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.08;
  font-weight: 870;
  letter-spacing: -0.042em;
}

.payment-heading p:last-child {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 520;
}

.payment-job-context {
  margin-top: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 21px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.045));
}

.payment-job-context[hidden] {
  display: none;
}

.payment-job-context > div:first-child {
  min-width: 0;
}

.payment-job-context small,
.payment-job-context strong {
  display: block;
}

.payment-job-context small {
  color: var(--muted-strong);
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 660;
}

.payment-job-context > div:first-child strong {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 830;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-job-context > span {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #ffffff;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 820;
  white-space: nowrap;
  box-shadow: 0 8px 17px rgba(var(--accent-rgb), 0.2);
}

.payment-job-context dl {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  border-top: 1px solid rgba(var(--accent-rgb), 0.13);
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.payment-job-context dl > div {
  min-width: 0;
}

.payment-job-context dt {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 570;
}

.payment-job-context dd {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.payment-amount-block {
  margin-top: 17px;
}

.payment-amount-block > label {
  display: block;
  margin: 0 2px 8px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1;
  font-weight: 780;
}

.payment-amount-control {
  min-height: 66px;
  border: 1.5px solid var(--line-strong);
  border-radius: 20px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-muted);
  box-shadow: inset 0 1px 2px rgba(31, 40, 55, 0.025);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.payment-amount-control:focus-within {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.11);
}

.payment-amount-control.has-error {
  border-color: rgba(221, 77, 87, 0.58);
  box-shadow: 0 0 0 4px rgba(221, 77, 87, 0.09);
}

.payment-amount-control input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 31px;
  line-height: 1;
  font-weight: 880;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  appearance: none;
}

.payment-amount-control input::placeholder {
  color: var(--muted);
  opacity: 0.48;
}

.payment-amount-control > span {
  color: var(--muted-strong);
  font-size: 22px;
  line-height: 1;
  font-weight: 750;
}

.payment-field-hint,
.payment-field-error {
  margin: 7px 2px 0;
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 570;
}

.payment-field-hint {
  color: var(--muted);
}

.payment-field-error {
  color: var(--danger);
  font-weight: 680;
}

.payment-field-error[hidden] {
  display: none;
}

.payment-presets {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.payment-preset {
  position: relative;
  min-width: 0;
  min-height: 41px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text-soft);
  box-shadow: 0 4px 12px rgba(37, 45, 61, 0.035);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 170ms var(--ease), border-color 170ms ease, background 170ms ease, color 170ms ease;
}

.payment-preset:active {
  transform: scale(0.96);
}

.payment-preset.active,
.payment-preset.recommended {
  border-color: rgba(var(--accent-rgb), 0.24);
  background: var(--accent-soft);
  color: var(--accent);
}

.payment-preset.recommended::after {
  content: "нужно";
  position: absolute;
  top: -6px;
  right: 5px;
  border-radius: 999px;
  padding: 2px 5px;
  background: var(--accent);
  color: #fff;
  font-size: 7px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.payment-calculation {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 19px;
  padding: 13px 14px;
  background: var(--surface-muted);
}

.payment-calculation > div {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-strong);
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 570;
}

.payment-calculation > div[hidden] {
  display: none;
}

.payment-calculation strong {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 790;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.payment-calculation .payment-total-row {
  margin-top: 5px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
  color: var(--text-soft);
  font-weight: 730;
}

.payment-calculation .payment-total-row strong {
  color: var(--accent);
  font-size: 15px;
  font-weight: 880;
}

.payment-calculation p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
  font-weight: 520;
}

.payment-methods {
  margin-top: 15px;
  display: grid;
  gap: 9px;
}

.payment-method {
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 9px 12px 9px 10px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 25px;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  text-align: left;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.payment-method:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}

.payment-method:active {
  transform: scale(0.985);
}

.payment-method[aria-disabled="true"] {
  opacity: 0.48;
  box-shadow: none;
}

.payment-method.is-ready {
  border-color: rgba(var(--accent-rgb), 0.19);
}

.payment-method.is-loading {
  pointer-events: none;
  opacity: 0.72;
}

.payment-method.is-loading .payment-method-state .ui-icon {
  animation: spin 0.8s linear infinite;
}

.payment-method-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
}

.payment-method-icon .ui-icon {
  width: 25px;
  height: 25px;
  stroke-width: 1.9;
}

.payment-method-card {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.payment-method-stars {
  background: rgba(125, 92, 255, 0.11);
  color: #7758ec;
}

.payment-method-copy {
  min-width: 0;
}

.payment-method-copy strong,
.payment-method-copy small {
  display: block;
}

.payment-method-copy strong {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 815;
  letter-spacing: -0.02em;
}

.payment-method-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 530;
}

.payment-method-state {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: var(--muted-strong);
}

.payment-method-state .ui-icon {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

.payment-unavailable {
  margin-top: 13px;
  border: 1px solid rgba(215, 134, 35, 0.17);
  border-radius: 16px;
  padding: 11px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: rgba(215, 134, 35, 0.07);
  color: var(--warning);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 620;
}

.payment-unavailable[hidden] {
  display: none;
}

.payment-unavailable .ui-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}


.payment-security {
  margin: 13px 2px 1px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--muted);
  font-size: 9.8px;
  line-height: 1.42;
  font-weight: 520;
}

.payment-security .ui-icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--success);
  stroke-width: 2;
}

.legal-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.legal-body {
  padding-top: 16px;
}

.legal-body section + section {
  margin-top: 17px;
}

.legal-body h2 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 830;
  letter-spacing: -0.025em;
}

.legal-body p,
.legal-body li {
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 510;
}

.legal-body p {
  margin: 0;
}

.legal-body p + p {
  margin-top: 8px;
}

.legal-body ul {
  margin: 7px 0 0;
  padding-left: 18px;
}

.legal-body li + li {
  margin-top: 4px;
}

.legal-body a {
  color: var(--accent);
  font-weight: 660;
  text-decoration: none;
}

/* Keep the back glyph optically centered. The text disappears when there is
   no previous screen, while the muted icon preserves navigation balance. */
#backBtn .bottom-icon {
  position: relative;
}

#backBtn .bottom-icon .ui-icon {
  transform: translateX(-0.5px);
}

#backBtn b {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 160ms ease, visibility 160ms ease, transform 160ms var(--ease);
}

#backBtn.disabled,
#backBtn:disabled {
  opacity: 1;
}

#backBtn.disabled .bottom-icon,
#backBtn:disabled .bottom-icon {
  color: var(--muted);
  opacity: 0.32;
}

#backBtn.disabled b,
#backBtn:disabled b {
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
}

input:focus-visible {
  outline: none;
}

:root[data-theme="dark"] .wallet-card {
  border-color: rgba(var(--accent-rgb), 0.17);
  background:
    linear-gradient(145deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-rgb), 0.05) 43%, rgba(20, 25, 34, 0.92) 78%),
    var(--surface);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(0, 0, 0, 0.16);
}

:root[data-theme="dark"] .wallet-card-icon {
  background: linear-gradient(145deg, rgba(108, 150, 255, 0.18), rgba(108, 150, 255, 0.07));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

:root[data-theme="dark"] .wallet-secure {
  border-color: rgba(84, 200, 137, 0.16);
  background: rgba(84, 200, 137, 0.1);
}

:root[data-theme="dark"] .theme-segment-button.active {
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24), inset 0 0 0 1px var(--line);
}

:root[data-theme="dark"] .payment-method-stars {
  color: #a997ff;
  background: rgba(142, 117, 255, 0.14);
}

:root[data-theme="dark"] .payment-amount-control {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.015);
}

@media (max-width: 390px) {
  .wallet-card {
    padding: 15px;
  }

  .wallet-card-top {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 11px;
  }

  .wallet-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 17px;
  }

  .wallet-card-copy strong {
    font-size: 29px;
  }

  .wallet-secure {
    padding: 0 7px;
    font-size: 9.5px;
  }

  .payment-card,
  .legal-card,
  .history-card {
    padding: 16px;
  }

  .payment-heading,
  .legal-heading {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 11px;
  }

  .payment-heading-icon,
  .legal-icon {
    width: 50px;
    height: 50px;
    border-radius: 17px;
  }

  .payment-heading h1,
  .legal-heading h1 {
    font-size: 20.5px;
  }

  .payment-presets {
    gap: 6px;
  }
}

@media (max-width: 355px) {
  .profile-card-static {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .wallet-card-top {
    grid-template-columns: 45px minmax(0, 1fr);
  }

  .wallet-card-icon {
    width: 45px;
    height: 45px;
    border-radius: 15px;
  }

  .wallet-secure {
    display: none;
  }

  .wallet-card-copy strong {
    font-size: 27px;
  }

  .wallet-topup-button {
    grid-template-columns: 41px minmax(0, 1fr) 18px;
    gap: 9px;
    padding-right: 11px;
  }

  .wallet-topup-plus {
    width: 41px;
    height: 41px;
    border-radius: 14px;
  }

  .wallet-topup-button strong {
    font-size: 14px;
  }

  .wallet-topup-button small {
    font-size: 10.5px;
  }

  .theme-segment-button {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 7px;
    padding: 0 10px;
  }

  .theme-segment-button i {
    display: none;
  }

  .tool-title-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .payment-card,
  .legal-card {
    padding: 14px;
  }

  .payment-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-method {
    grid-template-columns: 44px minmax(0, 1fr) 22px;
    gap: 9px;
    padding-right: 9px;
  }

  .payment-method-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }

  .payment-method-copy strong {
    font-size: 12.5px;
  }
}

/* ==========================================================================
   Production polish v3: cleaner catalog, media-safe forms and mobile keyboard
   ========================================================================== */

.section-meta,
.wallet-secure,
.payment-security {
  display: none !important;
}

.studio-tool-list {
  margin-top: 14px;
}

.studio-tool-card {
  min-height: 168px;
  grid-template-columns: 45% 1fr;
}

.tool-preview {
  min-height: 168px;
}

.tool-preview img {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.08), var(--surface-muted));
}

.tool-copy {
  min-height: 168px;
  padding: 18px 14px 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tool-copy p {
  margin-top: 8px;
  min-height: 38px;
  flex: 0 0 auto;
}

.tool-card-footer {
  margin-top: 13px;
  padding-right: 21px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-price-chip,
.tool-model-chip {
  min-height: 25px;
  border-radius: 999px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  font-size: 9.8px;
  line-height: 1;
  font-weight: 790;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tool-price-chip {
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: var(--accent-soft);
  color: var(--accent);
}

.tool-model-chip {
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--muted-strong);
}

.tool-soon-overlay {
  background: rgba(20, 25, 34, 0.22);
}

.tool-soon-overlay span {
  border: 1px solid rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.model-group[hidden],
.duration-group[hidden],
.upload-box[hidden],
.floating-badge[hidden],
.action-summary [hidden],
.billing-hint[hidden] {
  display: none !important;
}

.model-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.model-option {
  min-width: 0;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: 0 5px 14px rgba(37, 45, 61, 0.035);
  cursor: pointer;
  transition: transform 170ms var(--ease), border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.model-option:active {
  transform: scale(0.97);
}

.model-option span,
.model-option strong,
.model-option em,
.model-option small {
  display: block;
  min-width: 0;
}

.model-option strong {
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 820;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-option em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 610;
  font-style: normal;
}

.model-option small {
  color: var(--muted-strong);
  font-size: 10px;
  line-height: 1;
  font-weight: 740;
}

.model-option.active {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.04);
}

.model-option.active em,
.model-option.active small {
  color: var(--accent);
}

.action-summary {
  justify-content: flex-end;
}

.action-summary > span {
  color: var(--muted-strong);
  text-align: right;
}

.selected-media-preview {
  position: relative;
  width: 116px;
  height: 146px;
  border-radius: 17px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

.selected-media-preview img,
.selected-media-preview video {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  background: var(--surface-muted);
  box-shadow: none;
}

.selected-media-preview [hidden] {
  display: none !important;
}

.selected-audio-preview {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.035));
}

.selected-audio-preview .ui-icon {
  width: 46px;
  height: 46px;
  stroke-width: 1.7;
}

.wallet-card-top {
  grid-template-columns: 54px minmax(0, 1fr);
}

.payment-amount-control {
  padding-right: 17px;
}

.payment-currency {
  flex: 0 0 auto;
}

.payment-currency-right {
  margin-left: 8px;
}

.payment-method-copy:not(:has(small)) {
  align-self: center;
}

.payment-unavailable {
  padding: 12px;
  display: grid;
  gap: 10px;
  font-size: 11.5px;
}

.payment-unavailable > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.payment-unavailable > button {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(215, 134, 35, 0.21);
  border-radius: 13px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--warning);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(37, 45, 61, 0.045);
}

.payment-unavailable > button:active {
  transform: scale(0.98);
}

/* Disabled “Назад” remains visible and optically balanced. */
#backBtn.disabled,
#backBtn:disabled {
  opacity: 1;
  color: var(--muted);
}

#backBtn.disabled .bottom-icon,
#backBtn:disabled .bottom-icon {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted-strong);
  box-shadow: none;
  opacity: 0.58;
}

#backBtn.disabled b,
#backBtn:disabled b {
  opacity: 0.58;
  visibility: visible;
  transform: translateY(0);
}

/* Filled sparkles read better at the small bottom-navigation size. */
#studioBtn .bottom-icon .ui-icon {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.35;
}

.bottom-nav {
  transition: opacity 180ms ease, transform 210ms var(--ease);
}

@media (max-width: 390px) {
  .wallet-card-top {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .studio-tool-card {
    grid-template-columns: 44% 1fr;
  }

  .tool-copy {
    padding-left: 16px;
  }
}

@media (max-width: 355px) {
  .model-options {
    grid-template-columns: 1fr;
  }


  .selected-media-preview {
    width: 98px;
    height: 128px;
  }

  .upload-preview {
    grid-template-columns: 98px minmax(0, 1fr) 34px;
    gap: 9px;
  }
}

/* ==========================================================================
   Production v4: uniform catalog cards, staged OpenAI flow, keyboard layering
   ========================================================================== */

.studio-tool-card {
  height: 168px;
  min-height: 168px;
  max-height: 168px;
  grid-template-columns: 45% minmax(0, 1fr);
}

.tool-preview {
  height: 168px;
  min-height: 168px;
  max-height: 168px;
}

.tool-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tool-copy {
  height: 168px;
  min-height: 0;
  padding: 14px 32px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.tool-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: clamp(16px, 4.25vw, 18px);
  line-height: 1.14;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.tool-copy p {
  min-height: 0;
  margin-top: 7px;
  padding-right: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  font-size: clamp(11.5px, 3.25vw, 12.75px);
  line-height: 1.28;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.tool-copy > .ui-icon {
  right: 10px;
}

.processing-consent {
  margin: -2px 4px 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
  text-align: center;
}

.processing-consent button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.job-next-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.job-next-actions[hidden] {
  display: none;
}

.job-next-actions button {
  min-height: 45px;
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.job-next-actions button:first-child {
  border-color: rgba(var(--accent-rgb), 0.2);
  background: var(--accent-soft);
  color: var(--accent);
}

.job-next-actions button:active {
  transform: scale(0.98);
}

/* Editable fields use the full visible area. The fixed three-button footer is
   hidden while the system keyboard is open, so it cannot rise above the keys
   or cover the amount and prompt fields in Telegram WebView. */
body.keyboard-open .bottom-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 32px));
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

body.keyboard-open .app-shell {
  padding-bottom: calc(24px + var(--bottom-safe));
}

@media (max-width: 390px) {
  .studio-tool-card,
  .tool-preview,
  .tool-copy {
    height: 164px;
    min-height: 164px;
    max-height: 164px;
  }

  .studio-tool-card {
    grid-template-columns: 44% minmax(0, 1fr);
  }

  .tool-copy {
    padding-left: 14px;
    padding-right: 30px;
  }
}

.field-group[hidden],
.processing-consent[hidden],
.job-next-actions[hidden] {
  display: none !important;
}

/* v5 — compact tool checkout and resilient mobile input */
#prompt {
  min-height: 112px;
  resize: none;
  overflow-y: hidden;
}

.tool-checkout {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.tool-current-balance {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface-muted);
  color: var(--muted-strong);
  font-size: 12.5px;
  font-weight: 680;
}

.tool-current-balance strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.tool-current-balance[hidden],
.tool-topup-button[hidden] {
  display: none;
}

.primary-action {
  position: relative;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  justify-content: stretch;
  gap: 0;
  text-align: center;
}

.primary-action::before {
  content: "";
  width: 18px;
  height: 18px;
  grid-column: 1;
  justify-self: center;
  border-radius: 50%;
}

.primary-action.is-loading::before {
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
}

.primary-action-label {
  min-width: 0;
  grid-column: 2;
  display: block;
  text-align: center;
  white-space: nowrap;
}

.primary-action-price {
  min-width: 54px;
  min-height: 32px;
  grid-column: 3;
  justify-self: end;
  border-radius: 11px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.17);
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.primary-action-price[hidden] {
  visibility: hidden;
}

.tool-topup-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 16px;
  padding: 0 16px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  font-weight: 820;
  cursor: pointer;
  transition: transform 170ms var(--ease), opacity 170ms ease, background 170ms ease;
}

.tool-topup-button:active:not(:disabled) {
  transform: scale(0.985);
}

.tool-topup-button:disabled,
.tool-topup-button.is-disabled {
  opacity: 0.48;
  cursor: default;
}

.selected-image-fallback {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent-soft), var(--surface-muted));
  color: var(--accent);
}

.selected-image-fallback[hidden] {
  display: none;
}

.selected-image-fallback .ui-icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}

.toast.toast-error {
  border-color: rgba(255, 130, 137, 0.44);
  background: linear-gradient(135deg, rgba(177, 41, 53, 0.97), rgba(130, 28, 39, 0.97));
  box-shadow: 0 18px 42px rgba(91, 10, 19, 0.34);
}

.toast.toast-error .ui-icon {
  color: #ffffff;
}

@media (max-width: 360px) {
  .primary-action {
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    padding-inline: 7px;
    font-size: 12.5px;
  }

  .primary-action-price {
    min-width: 48px;
    min-height: 30px;
    padding-inline: 6px;
    font-size: 10.5px;
  }
}

/* Inline result preview and persistent order-history media. */
.job-result-panel {
  margin-top: 14px;
  padding: 12px;
  display: grid;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-subtle);
  overflow: hidden;
}

.job-result-panel[hidden] {
  display: none;
}

.job-result-heading strong,
.job-result-heading small {
  display: block;
}

.job-result-heading strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 820;
}

.job-result-heading small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
}

.job-result-panel img,
.job-result-panel video {
  width: 100%;
  max-height: 58vh;
  border-radius: 15px;
  display: block;
  object-fit: contain;
  background: #0b0d11;
}

.job-result-panel img[hidden],
.job-result-panel video[hidden],
.job-result-download[hidden] {
  display: none;
}

.job-result-download {
  min-height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 810;
  text-decoration: none;
}

.processing-consent {
  margin: 13px 4px 0;
}

.history-result-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--surface);
}

.history-result-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.history-result-media img[hidden],
.history-result-placeholder[hidden] {
  display: none;
}

.history-result-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.history-result-placeholder .ui-icon {
  width: 34px;
  height: 34px;
}

.history-result-link {
  margin-top: 12px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--surface);
  font-size: 12px;
  font-weight: 790;
  text-decoration: none;
}

.history-result-link[hidden] {
  display: none;
}

/* ========================================================================== */
/* Unified editors — v2                                                       */
/* ========================================================================== */

.studio-v2-heading,
.photo-editor-heading {
  margin: 4px 3px 18px;
}

.studio-v2-heading h1,
.photo-editor-heading h1 {
  margin: 3px 0 7px;
  font-size: clamp(25px, 7vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.studio-v2-heading > p:last-child,
.photo-editor-heading > div > p:last-child {
  max-width: 39rem;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.editor-section-list {
  display: grid;
  gap: 13px;
}

.editor-section-card {
  position: relative;
  width: 100%;
  min-height: 126px;
  padding: 13px 46px 13px 13px;
  border: 1px solid var(--line);
  border-radius: 25px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  overflow: hidden;
  text-align: left;
  background: var(--surface-soft);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease;
}

.editor-section-card:active {
  transform: scale(0.985);
}

.editor-section-card:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.22);
  outline-offset: 2px;
}

.editor-section-photo {
  min-height: 156px;
  background:
    linear-gradient(115deg, rgba(var(--accent-rgb), 0.11), transparent 62%),
    var(--surface);
  border-color: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 18px 38px rgba(var(--accent-rgb), 0.09), var(--shadow-soft);
}

.editor-section-art {
  width: 104px;
  height: 100px;
  border-radius: 19px;
  overflow: hidden;
  background: var(--surface-muted);
}

.editor-section-photo .editor-section-art {
  height: 128px;
}

.editor-section-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editor-section-icon {
  display: grid;
  place-items: center;
  color: var(--muted-strong);
  background: linear-gradient(145deg, var(--surface-muted), var(--surface));
}

.editor-section-icon .ui-icon {
  width: 40px;
  height: 40px;
}

.editor-section-copy {
  min-width: 0;
}

.editor-section-copy small {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.editor-section-card:not(.editor-section-photo) .editor-section-copy small {
  color: var(--muted);
}

.editor-section-copy strong {
  display: block;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.editor-section-copy p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.42;
}

.editor-section-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

.photo-editor-page {
  padding-bottom: 14px;
}

.photo-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.editor-reset-button {
  min-width: 42px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted-strong);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.editor-reset-button .ui-icon {
  width: 18px;
  height: 18px;
}

.editor-reset-button span {
  display: none;
  font-size: 12px;
  font-weight: 760;
}

.editor-card {
  width: 100%;
  margin-bottom: 14px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-soft);
}

.editor-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
  margin-bottom: 14px;
}

.editor-card-heading h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.editor-card-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.editor-count-badge,
.editor-mask-badge {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 800;
}

.editor-mask-badge {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}

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

.editor-source-slot {
  position: relative;
  min-width: 0;
  min-height: 118px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 19px;
  overflow: hidden;
  display: block;
  background: var(--surface-muted);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease);
}

.editor-source-slot:active {
  transform: scale(0.985);
}

.editor-source-slot.has-file {
  border-style: solid;
  border-color: rgba(var(--accent-rgb), 0.22);
  background: var(--surface);
}

.editor-source-primary {
  min-height: 188px;
  grid-column: 1 / -1;
}

.editor-source-slot > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.editor-source-empty {
  min-height: inherit;
  padding: 15px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.editor-source-empty > .ui-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  color: var(--accent);
}

.editor-source-empty strong {
  font-size: 13px;
  line-height: 1.3;
}

.editor-source-primary .editor-source-empty strong {
  margin-top: 10px;
  font-size: 15px;
}

.editor-source-empty small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.editor-source-empty em {
  margin-top: 13px;
  padding: 8px 13px;
  border-radius: 11px;
  color: var(--accent);
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(24, 34, 55, 0.06);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.editor-source-preview {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: #0c0f14;
}

.editor-source-preview[hidden] {
  display: none;
}

.editor-source-preview img {
  width: 100%;
  height: 100%;
  min-height: 118px;
  object-fit: cover;
}

.editor-source-primary .editor-source-preview img {
  min-height: 188px;
}

.editor-source-preview > span {
  position: absolute;
  inset: auto 0 0;
  padding: 23px 11px 10px;
  color: white;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.76));
}

.editor-source-preview strong,
.editor-source-preview small {
  display: block;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-source-preview strong {
  font-size: 11px;
}

.editor-source-preview small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 9.5px;
}

.editor-source-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: white;
  background: rgba(12, 15, 20, 0.66);
  backdrop-filter: blur(8px);
}

.editor-source-remove .ui-icon {
  width: 16px;
  height: 16px;
}

.editor-role-fields {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.editor-role-fields[hidden],
.editor-role-fields label[hidden] {
  display: none;
}

.editor-role-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 720;
}

.editor-role-fields select {
  width: 100%;
  min-height: 45px;
  padding: 0 40px 0 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: var(--surface);
  font-size: 12px;
  outline: none;
}

.editor-stage {
  position: relative;
  width: 100%;
  min-height: 250px;
  max-height: min(62vh, 620px);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(45deg, var(--surface-muted) 25%, transparent 25%, transparent 75%, var(--surface-muted) 75%),
    linear-gradient(45deg, var(--surface-muted) 25%, var(--surface) 25%, var(--surface) 75%, var(--surface-muted) 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  touch-action: none;
}

.editor-stage.is-empty {
  background: var(--surface-muted);
}

.editor-stage-empty {
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--muted);
}

.editor-stage-empty .ui-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 11px;
}

.editor-stage-empty strong {
  color: var(--text-soft);
  font-size: 14px;
}

.editor-stage-empty small {
  margin-top: 5px;
  font-size: 11px;
}

.editor-stage img {
  width: 100%;
  max-height: min(62vh, 620px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.editor-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.editor-stage canvas.is-eraser {
  cursor: cell;
}

.editor-mask-controls {
  margin-top: 11px;
  display: grid;
  grid-template-columns: auto auto minmax(80px, 1fr) auto auto auto;
  align-items: center;
  gap: 7px;
}

.editor-control-button,
.editor-icon-control {
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--muted-strong);
  background: var(--surface);
  font-size: 10px;
  font-weight: 760;
}

.editor-control-button.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.25);
  background: var(--accent-soft);
}

.editor-control-button .ui-icon,
.editor-icon-control .ui-icon {
  width: 16px;
  height: 16px;
}

.editor-icon-control {
  width: 38px;
  padding: 0;
}

.editor-icon-control:disabled {
  opacity: 0.36;
}

.editor-brush-size {
  min-width: 0;
  padding: 0 3px;
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.editor-brush-size input {
  width: 100%;
  accent-color: var(--accent);
}

.editor-tools-scroll,
.editor-option-scroll,
.editor-variant-options {
  margin-inline: -17px;
  padding: 1px 17px 4px;
  display: flex;
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.editor-tools-scroll::-webkit-scrollbar,
.editor-option-scroll::-webkit-scrollbar,
.editor-variant-options::-webkit-scrollbar {
  display: none;
}

.editor-tool-button {
  flex: 0 0 auto;
  min-width: 78px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text-soft);
  background: var(--surface);
  font-size: 10px;
  font-weight: 780;
}

.editor-tool-button.active,
.editor-tool-button:active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.25);
  background: var(--accent-soft);
}

.editor-tool-button .ui-icon {
  width: 22px;
  height: 22px;
}

.editor-quick-panel {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-muted);
}

.editor-quick-panel[hidden] {
  display: none;
}

.editor-quick-panel strong {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
}

.editor-quick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.editor-quick-options button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text-soft);
  background: var(--surface);
  font-size: 10px;
  font-weight: 720;
}

.editor-prompt-chips {
  min-height: 46px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.editor-prompts-empty {
  width: 100%;
  margin: 5px 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.editor-prompt-chip {
  min-height: 37px;
  max-width: 100%;
  padding: 7px 7px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-muted);
}

.editor-prompt-chip.is-tool {
  border-color: rgba(var(--accent-rgb), 0.18);
  background: var(--accent-soft);
}

.editor-prompt-chip > .ui-icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.editor-prompt-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.35;
}

.editor-prompt-chip button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.08);
}

.editor-prompt-chip button .ui-icon {
  width: 14px;
  height: 14px;
}

.editor-prompt-compose {
  margin-top: 12px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 17px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: end;
  gap: 7px;
  background: var(--surface);
}

.editor-prompt-compose:focus-within {
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.editor-prompt-compose textarea {
  width: 100%;
  min-height: 58px;
  max-height: 150px;
  padding: 7px 6px;
  border: 0;
  resize: none;
  color: var(--text);
  background: transparent;
  outline: none;
  font-size: 13px;
  line-height: 1.45;
}

.editor-prompt-compose button {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--accent);
}

.editor-prompt-compose button .ui-icon {
  width: 20px;
  height: 20px;
}

#editorPromptCounter {
  display: block;
  margin: 7px 4px 0;
  color: var(--muted);
  text-align: right;
  font-size: 9.5px;
}

.editor-conflict-warning {
  margin-top: 11px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
  border-radius: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 9%, transparent);
  font-size: 11px;
  line-height: 1.4;
}

.editor-conflict-warning[hidden] {
  display: none;
}

.editor-conflict-warning .ui-icon {
  width: 17px;
  height: 17px;
}

.editor-settings-card > .editor-card-heading > .ui-icon {
  width: 22px;
  height: 22px;
  color: var(--muted);
}

.editor-option-group {
  min-width: 0;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
}

.editor-option-group + .editor-option-group {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.editor-option-group legend {
  margin-bottom: 10px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 790;
}

.editor-option {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted-strong);
  background: var(--surface);
  font-size: 11px;
  font-weight: 730;
}

.editor-option.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
  background: var(--accent-soft);
}

.editor-resolution-grid {
  display: grid;
  gap: 8px;
}

.editor-resolution {
  min-height: 61px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  background: var(--surface);
}

.editor-resolution.active {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: var(--accent-soft);
}

.editor-resolution span,
.editor-resolution strong,
.editor-resolution small {
  display: block;
}

.editor-resolution strong {
  font-size: 12px;
}

.editor-resolution small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.editor-resolution em {
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
}

.editor-switch-grid {
  display: grid;
  gap: 8px;
}

.editor-switch-grid label {
  min-height: 55px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 39px;
  align-items: center;
  gap: 10px;
  background: var(--surface);
}

.editor-switch-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.editor-switch-grid span,
.editor-switch-grid strong,
.editor-switch-grid small {
  display: block;
}

.editor-switch-grid strong {
  font-size: 11.5px;
}

.editor-switch-grid small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9.5px;
}

.editor-switch-grid i {
  position: relative;
  width: 39px;
  height: 23px;
  border-radius: 999px;
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background 160ms ease;
}

.editor-switch-grid i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 180ms var(--ease);
}

.editor-switch-grid input:checked ~ i {
  background: var(--accent);
}

.editor-switch-grid input:checked ~ i::after {
  transform: translateX(16px);
}

.editor-checkout-card {
  position: sticky;
  bottom: calc(80px + var(--bottom-safe));
  z-index: 16;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.editor-checkout-balance {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.editor-checkout-balance strong {
  color: var(--text);
  font-size: 14px;
}

.editor-create-button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.editor-create-button.is-loading .primary-action-label::after {
  content: "";
  width: 15px;
  height: 15px;
  margin-left: 9px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: white;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -3px;
  animation: editor-spin 0.8s linear infinite;
}

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

.editor-checkout-card .processing-consent {
  margin-top: 11px;
  font-size: 9.5px;
  line-height: 1.45;
}

.editor-status {
  margin: 0 0 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text-soft);
  background: var(--surface);
  font-size: 12px;
  line-height: 1.45;
}

.editor-status[data-tone="error"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.editor-status[data-tone="success"] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 25%, transparent);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.editor-result-grid {
  display: grid;
  gap: 12px;
}

.editor-result-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.editor-result-card img {
  width: 100%;
  max-height: 580px;
  border-radius: 13px;
  object-fit: contain;
  background: #0a0c10;
}

.editor-result-card-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.editor-result-card-actions a,
.editor-result-card-actions button,
.editor-result-actions button,
.coming-editor-card button {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  background: var(--surface-muted);
  font-size: 10.5px;
  font-weight: 780;
  text-decoration: none;
}

.editor-result-card-actions button {
  color: white;
  border-color: transparent;
  background: var(--accent);
}

.editor-result-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.coming-editor-card {
  min-height: min(68vh, 540px);
  padding: 32px 24px;
  border: 1px solid var(--line);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--surface-soft);
  box-shadow: var(--shadow-card);
}

.coming-editor-icon {
  width: 82px;
  height: 82px;
  margin-bottom: 17px;
  border-radius: 25px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
}

.coming-editor-icon .ui-icon {
  width: 38px;
  height: 38px;
}

.coming-editor-card h1 {
  max-width: 320px;
  margin: 4px 0 9px;
  font-size: 23px;
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.coming-editor-card > p:not(.eyebrow) {
  max-width: 330px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.coming-editor-card button {
  min-width: 190px;
  margin-top: 22px;
  color: white;
  border-color: transparent;
  background: var(--accent);
}

body.keyboard-open .editor-checkout-card {
  position: static;
}

@media (min-width: 520px) {
  :root { --shell: 760px; }
  .editor-source-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .editor-source-primary { grid-column: auto; min-height: 204px; }
  .editor-source-primary .editor-source-preview img { min-height: 204px; }
  .editor-reference-slot { min-height: 204px; }
  .editor-reference-slot .editor-source-preview img { min-height: 204px; }
  .editor-resolution-grid { grid-template-columns: repeat(3, 1fr); }
  .editor-switch-grid { grid-template-columns: 1fr 1fr; }
  .editor-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-reset-button span { display: inline; }
}

@media (max-width: 390px) {
  .editor-mask-controls {
    grid-template-columns: auto auto minmax(70px, 1fr) auto auto;
  }
  #editorClearMaskBtn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .editor-section-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .editor-section-art {
    width: 88px;
  }
}


/* ========================================================================== */
/* v2.0.1 — responsive unified editor fixes                                  */
/* ========================================================================== */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

[hidden] {
  display: none !important;
}

.app-shell,
.page,
.photo-editor-page,
.editor-card,
.editor-section-list,
.editor-settings-card,
.editor-workspace-card {
  min-width: 0;
  max-width: 100%;
}

.photo-editor-page {
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

/* All three section banners keep one permanent geometry. New artwork is
   fitted inside the fixed media frame without cropping or changing the card size. */
.editor-section-card,
.editor-section-photo {
  min-height: 132px;
  height: 132px;
  grid-template-columns: 104px minmax(0, 1fr);
  padding: 13px 46px 13px 13px;
}

.editor-section-art,
.editor-section-photo .editor-section-art {
  width: 104px;
  height: 104px;
  min-width: 104px;
  min-height: 104px;
  aspect-ratio: 1 / 1;
}

.editor-section-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Outside drawing mode, a normal one-finger swipe scrolls the page. In Delete
   or Eraser mode one finger draws on the mask and two fingers scroll the page. */
.editor-stage {
  width: 100%;
  max-width: 100%;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.editor-stage-empty[hidden],
.editor-stage img[hidden],
.editor-stage canvas[hidden],
.editor-mask-controls[hidden] {
  display: none !important;
}

.editor-stage img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: min(62vh, 620px);
  object-fit: contain;
}

.editor-stage canvas {
  pointer-events: none;
  touch-action: pan-y;
}

.editor-stage.mask-active {
  touch-action: none;
}

.editor-stage.mask-active canvas {
  pointer-events: auto;
  touch-action: none;
}

.editor-mask-controls {
  grid-template-columns: minmax(0, 1fr) repeat(3, 40px);
  align-items: end;
  gap: 8px;
}

.editor-brush-size {
  padding: 0;
}

/* Tool and result settings wrap to as many rows as the viewport needs. */
.editor-tools-scroll {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 9px;
  overflow: visible;
}

.editor-tool-button {
  width: 100%;
  min-width: 0;
}

.editor-option-scroll {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 8px;
  overflow: visible;
}

.editor-option-scroll .editor-option,
.editor-variant-options .editor-option {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
}

.editor-variant-options {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
}

.editor-resolution-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.editor-resolution {
  min-width: 0;
}

.editor-resolution span {
  min-width: 0;
}

.editor-resolution small {
  white-space: normal;
}

.editor-switch-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Checkout and balance belong to the document flow. The fixed app navigation
   remains the only persistent bottom element. */
.editor-checkout-card,
body.keyboard-open .editor-checkout-card {
  position: static;
  bottom: auto;
  z-index: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.editor-checkout-balance {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

body:not(.keyboard-open) .bottom-nav {
  position: fixed;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 520px) {
  .app-shell {
    width: 100%;
    padding-inline: 16px;
  }

  .topbar {
    width: 100%;
    padding-inline: 18px;
  }

  .bottom-nav {
    width: calc(100% - 24px);
    max-width: calc(var(--shell) - 24px);
  }

  .editor-card {
    padding: 15px;
    border-radius: 21px;
  }

  .editor-card-heading {
    gap: 9px;
  }

  .editor-section-card,
  .editor-section-photo {
    min-height: 124px;
    height: 124px;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 40px 12px 12px;
  }

  .editor-section-art,
  .editor-section-photo .editor-section-art {
    width: 90px;
    height: 90px;
    min-width: 90px;
    min-height: 90px;
  }

  .editor-section-copy strong {
    font-size: 19px;
  }

  .editor-section-copy p {
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.34;
  }

  .editor-tools-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editor-tool-button {
    min-height: 68px;
    padding: 8px 5px;
  }

  .editor-option-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editor-resolution-grid,
  .editor-switch-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .app-shell {
    padding-inline: 12px;
  }

  .editor-section-card,
  .editor-section-photo {
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 116px;
    height: 116px;
    gap: 10px;
    padding-left: 10px;
  }

  .editor-section-art,
  .editor-section-photo .editor-section-art {
    width: 78px;
    height: 78px;
    min-width: 78px;
    min-height: 78px;
  }

  .editor-section-copy p {
    font-size: 10.5px;
  }

  .editor-tools-scroll,
  .editor-option-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .editor-mask-controls {
    grid-template-columns: minmax(0, 1fr) repeat(3, 38px);
  }
}

/* ========================================================================== */
/* v2.0.2 — visual analysis, progress screen and editor refinements           */
/* ========================================================================== */

/* Category artwork always fits inside the permanent banner frame. Nothing is
   cut off when an administrator replaces an avatar with another aspect ratio. */
.editor-section-art img {
  object-fit: contain;
  object-position: center;
  background: var(--surface-muted);
}

.editor-source-slot.is-locked {
  cursor: not-allowed;
  opacity: 0.56;
  filter: saturate(0.55);
}


.editor-source-slot.is-analyzing,
.editor-tool-button.is-analyzing {
  pointer-events: none;
  opacity: 0.68;
}

.editor-tool-button.is-analyzing .ui-icon {
  animation: editor-analysis-spin 1s linear infinite;
}

@keyframes editor-analysis-spin {
  to { transform: rotate(360deg); }
}

.editor-mask-controls {
  grid-template-columns: minmax(0, 1fr) repeat(3, 40px);
}

.editor-cancel-tool {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
}

.editor-ai-status {
  margin: 0;
  padding: 7px 9px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 11px;
  line-height: 1.35;
}

/* Analysis notices have equal compact space on every side. The previous top
   margin made the upper gap visibly larger than the lower one. */
.editor-quick-panel:has(> .editor-ai-status) {
  padding: 6px;
}

.editor-ai-status .ui-icon {
  width: 17px;
  height: 17px;
  animation: editor-analysis-spin 1s linear infinite;
}

.editor-merge-summary {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.editor-merge-options {
  display: grid;
  gap: 8px;
}

.editor-merge-option {
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 3px;
  text-align: left;
  background: var(--surface);
}

.editor-merge-option strong {
  color: var(--text);
  font-size: 12px;
}

.editor-merge-option small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.editor-prompt-chip {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.editor-prompt-chip.is-editing {
  width: 100%;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 36px;
  align-items: end;
  gap: 6px;
  user-select: text;
  -webkit-user-select: text;
}

.editor-prompt-chip.is-editing textarea {
  width: 100%;
  min-height: 58px;
  max-height: 140px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  resize: vertical;
  color: var(--text);
  background: var(--surface);
  outline: none;
  font-size: 12px;
  line-height: 1.4;
}

.editor-prompt-chip.is-editing button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-soft);
}

.editor-prompt-chip.is-editing button[data-editor-cancel-prompt-edit] {
  color: var(--muted-strong);
  background: var(--surface-muted);
}

.editor-settings-card > .editor-option-group:first-child {
  padding-top: 0;
}

.editor-aspect-group .editor-option-scroll {
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
}

.editor-aspect-group .editor-option {
  min-height: 82px;
  padding: 8px 5px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.editor-aspect-group .editor-option strong,
.editor-aspect-group .editor-option small {
  display: block;
  line-height: 1.1;
}

.editor-aspect-group .editor-option strong {
  font-size: 10.5px;
}

.editor-aspect-group .editor-option small {
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 650;
}

.aspect-shape {
  --ratio: 1 / 1;
  display: block;
  width: 31px;
  max-height: 34px;
  aspect-ratio: var(--ratio);
  border: 1.7px solid currentColor;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.aspect-original {
  width: 34px;
  height: 26px;
  aspect-ratio: auto;
  position: relative;
}

.aspect-original::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed currentColor;
  border-radius: 2px;
  opacity: 0.65;
}

.processing-page {
  min-height: calc(100dvh - 190px);
  display: none;
  align-items: center;
}

.processing-page.page-active {
  display: flex;
}

.processing-card {
  width: 100%;
  padding: 30px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 5%, rgba(var(--accent-rgb), 0.15), transparent 19rem),
    var(--surface-soft);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.processing-visual {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
}

.processing-visual > .ui-icon {
  width: 38px;
  height: 38px;
  stroke-width: 1.65;
  animation: processing-pulse 1.8s ease-in-out infinite;
}

.processing-orbit {
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 50%;
  animation: processing-orbit 4.2s linear infinite;
}

.processing-orbit::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 13px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.65);
}

.processing-orbit-two {
  inset: 6px;
  animation-duration: 3.1s;
  animation-direction: reverse;
  opacity: 0.58;
}

@keyframes processing-orbit { to { transform: rotate(360deg); } }
@keyframes processing-pulse { 50% { transform: scale(1.12); opacity: 0.72; } }

.processing-kicker {
  margin: 9px 0 0;
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.processing-card h1 {
  margin: 0;
  font-size: clamp(25px, 7vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.processing-card > p:not(.processing-kicker) {
  max-width: 390px;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.processing-progress {
  margin-top: 26px;
  text-align: left;
}

.processing-progress-track {
  height: 12px;
  padding: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-muted);
  box-shadow: inset 0 1px 3px rgba(25, 30, 40, 0.1);
}

.processing-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #a973ff));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.38);
  transition: width 650ms var(--ease);
}

.processing-progress-meta {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
}

.processing-progress-meta strong {
  color: var(--accent);
  font-size: 22px;
  letter-spacing: -0.03em;
}


.processing-page.is-failed .processing-visual {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 11%, transparent);
}

.processing-page.is-failed .processing-progress-track span {
  background: var(--danger);
}

@media (max-width: 520px) {
  .editor-aspect-group .editor-option-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .processing-page {
    min-height: calc(100dvh - 175px);
  }

  .processing-card {
    padding: 25px 17px 20px;
  }
}

@media (max-width: 360px) {
  .editor-aspect-group .editor-option-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ========================================================================== */
/* v2.0.4 — editor canvas, templates, checkout and responsive refinements     */
/* ========================================================================== */

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

/* The Photo avatar uses the same neutral icon tile as Video and Audio. */
.editor-section-photo .editor-section-icon {
  color: var(--muted-strong);
  background: linear-gradient(145deg, var(--surface-muted), var(--surface));
}

.editor-section-photo .editor-section-icon .ui-icon {
  width: 40px;
  height: 40px;
}

.photo-editor-heading {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.photo-editor-heading h1 {
  margin: 0;
}

.editor-heading-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 8px;
}

.editor-heading-button,
.editor-reset-button {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted-strong);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  overflow: hidden;
}

.editor-heading-button span,
.editor-reset-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 780;
}

.editor-heading-button .ui-icon,
.editor-reset-button .ui-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.editor-reset-button {
  color: var(--danger);
}

.editor-reset-button:disabled {
  color: var(--muted);
  opacity: 0.45;
  cursor: default;
}

.editor-templates-card {
  border-color: rgba(var(--accent-rgb), 0.2);
}

.editor-templates-list {
  display: grid;
  gap: 9px;
}

.editor-template-empty {
  margin: 0;
  padding: 18px 12px;
  border-radius: 15px;
  color: var(--muted);
  background: var(--surface-muted);
  text-align: center;
  font-size: 12px;
}

.editor-template-item {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  background: var(--surface);
}

.editor-template-copy {
  min-width: 0;
}

.editor-template-copy strong,
.editor-template-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-template-copy strong {
  font-size: 12px;
}

.editor-template-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9.5px;
}

.editor-template-item button {
  min-width: 38px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 10px;
  font-weight: 780;
}

.editor-template-item button[data-editor-template-delete] {
  width: 38px;
  padding: 0;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

/* The stage is a real viewport. Normal wheel and one-finger vertical gestures
   keep scrolling the page; zoom is handled by controls, Ctrl/Cmd+wheel, and a
   two-finger gesture. */
.editor-stage {
  min-height: 280px;
  max-height: min(70vh, 680px);
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior: auto;
  cursor: default;
}

.editor-stage.is-pannable {
  cursor: grab;
}

.editor-stage.is-panning {
  cursor: grabbing;
}

.editor-stage.mask-active {
  touch-action: none;
  cursor: crosshair;
}

.editor-stage-transform {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

.editor-stage-transform[hidden] {
  display: none !important;
}

.editor-stage-transform img,
.editor-stage-transform canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}

.editor-stage-transform img {
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.editor-stage-transform canvas {
  pointer-events: none;
  touch-action: pan-y;
}

.editor-stage.mask-active .editor-stage-transform canvas {
  pointer-events: auto;
  touch-action: none;
}

.editor-zoom-controls {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.editor-zoom-controls[hidden] {
  display: none !important;
}

.editor-zoom-value {
  min-width: 68px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted-strong);
  background: var(--surface);
  font-size: 11px;
  font-weight: 800;
}

.editor-mask-controls {
  grid-template-columns: minmax(0, 1fr) repeat(3, 40px);
}

.editor-refresh-analysis {
  color: var(--accent);
}

.editor-refresh-analysis.is-analyzing .ui-icon {
  animation: editor-analysis-spin 1s linear infinite;
}

.editor-refresh-analysis:disabled {
  color: var(--muted);
  opacity: 0.42;
}

.editor-tool-settings {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0;
}

.editor-tool-settings .editor-option-group:first-child {
  padding-top: 0;
}

.editor-tool-settings .editor-option-group:last-child {
  padding-bottom: 0;
}

.editor-aspect-group .editor-option-scroll {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.editor-resolution-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.editor-resolution {
  min-width: 0;
  min-height: 58px;
  justify-content: center;
  text-align: center;
}

.editor-resolution span {
  align-items: center;
}

.editor-resolution em {
  display: none;
}

.editor-order-summary {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  background: var(--surface-muted);
}

.editor-order-summary > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.editor-order-summary > div:last-child {
  padding-left: 10px;
  border-left: 1px solid var(--line);
  text-align: right;
}

.editor-order-summary span {
  color: var(--muted);
  font-size: 10px;
}

.editor-order-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}

.editor-create-button {
  width: 100%;
  min-height: 50px;
}

.editor-topup-button {
  width: 100%;
  min-height: 46px;
  margin-top: 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: 15px;
  color: var(--accent);
  background: transparent;
  font-size: 12px;
  font-weight: 820;
}

.editor-topup-button:active {
  background: var(--accent-soft);
}

.editor-result-page {
  width: 100%;
}

.editor-result-page .editor-results-card {
  margin-top: 4px;
}

.payment-amount-block {
  padding-top: 0;
}

@media (min-width: 700px) {
  .photo-editor-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .editor-heading-actions {
    width: min(100%, 470px);
    grid-template-columns: repeat(2, minmax(145px, 1fr)) minmax(105px, auto);
  }
}

@media (max-width: 620px) {
  .editor-heading-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-reset-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .editor-aspect-group .editor-option-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editor-resolution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .editor-heading-actions {
    grid-template-columns: 1fr;
  }

  .editor-reset-button {
    grid-column: auto;
  }

  .editor-template-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .editor-template-item button[data-editor-template-delete] {
    grid-column: 2;
  }

  .editor-aspect-group .editor-option-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v2.0.4 final alignment */
.editor-section-photo {
  background: var(--surface-soft);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.editor-section-photo .editor-section-art,
.editor-section-photo .editor-section-icon {
  color: var(--muted-strong);
  background: linear-gradient(145deg, var(--surface-muted), var(--surface));
}

.editor-mask-controls:not(.is-editing) .editor-brush-size {
  opacity: 0.48;
  pointer-events: none;
}

.editor-mask-controls:not(.is-editing) .editor-brush-size input {
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .editor-stage:not(.mask-active) {
    touch-action: pan-y;
  }
}

/* ========================================================================== */
/* v2.0.5 — three-step editor, cloud templates and mobile canvas pan          */
/* ========================================================================== */

.photo-editor-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.editor-stepper {
  width: min(100%, 250px);
  display: grid;
  grid-template-columns: 28px minmax(18px, 1fr) 28px minmax(18px, 1fr) 28px;
  align-items: center;
}

.editor-stepper span {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface);
  font-size: 10px;
  font-weight: 850;
  transition: 160ms ease;
}

.editor-stepper span.active,
.editor-stepper span.complete {
  color: white;
  border-color: var(--accent);
  background: var(--accent);
}

.editor-stepper i {
  height: 2px;
  background: var(--line);
}

.editor-step {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.editor-step[hidden] {
  display: none !important;
}

.editor-step-continue {
  width: 100%;
  min-height: 50px;
  margin-top: 2px;
}

.editor-step-continue .primary-action-label,
.editor-create-button .primary-action-label {
  grid-column: 1 / -1;
  justify-self: center;
  text-align: center;
}

/* All three actions stay in one row even on compact phones. */
@media (max-width: 620px) {
  .editor-heading-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editor-reset-button {
    grid-column: auto;
    width: auto;
  }
}

.editor-heading-actions {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.editor-heading-button,
.editor-reset-button {
  min-height: 44px;
  padding-inline: 6px;
  gap: 5px;
}

.editor-heading-button span,
.editor-reset-button span {
  font-size: clamp(8.5px, 2.55vw, 11px);
  text-overflow: clip;
}

.editor-heading-button .ui-icon,
.editor-reset-button .ui-icon {
  width: 15px;
  height: 15px;
}

.editor-template-item button[data-editor-template-delete] {
  display: grid;
  place-items: center;
  line-height: 0;
}

.editor-template-item button[data-editor-template-delete] .ui-icon {
  width: 17px;
  height: 17px;
  margin: 0;
}

/* At 100% a one-finger swipe scrolls the page. After zooming it pans the
   canvas; two fingers continue to zoom and move the image together. */
.editor-stage.is-pannable:not(.mask-active) {
  touch-action: none;
  overscroll-behavior: contain;
}

.editor-stage.is-pannable:not(.mask-active) .editor-stage-transform {
  pointer-events: none;
}

.editor-stage.is-panning {
  cursor: grabbing;
}

.editor-workspace-card #editorWorkspaceHint:empty {
  display: none;
}

.editor-prompt-chat {
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-muted);
}

.editor-prompt-chat .editor-prompt-chips {
  min-height: 86px;
  max-height: 320px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-y: auto;
}

.editor-prompt-chat .editor-prompt-chip {
  width: fit-content;
  max-width: 92%;
  align-self: flex-start;
  background: var(--surface);
  box-shadow: 0 3px 10px rgba(25, 35, 55, 0.04);
}

.editor-prompt-chat .editor-prompt-chip:not(.is-tool):not(.is-editing) {
  align-self: flex-end;
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.2);
  background: var(--accent-soft);
}

.editor-prompt-chat .editor-prompt-chip.is-editing {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

.editor-prompt-chat .editor-prompt-compose {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.editor-prompt-chat .editor-prompt-compose:focus-within {
  border-color: var(--line);
  box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.09);
}

#editorPromptCounter {
  display: block;
  margin-top: 6px;
  text-align: right;
}

.editor-final-settings {
  display: grid;
  gap: 0;
}

.editor-final-settings .editor-option-group:first-child {
  padding-top: 0;
}

.editor-aspect-group .editor-option-scroll {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.aspect-original {
  display: grid;
  place-items: center;
}

.aspect-original .ui-icon {
  width: 17px;
  height: 17px;
}

@media (min-width: 700px) {
  .photo-editor-heading {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
  }
}

@media (max-width: 620px) {
  .photo-editor-heading {
    gap: 10px;
  }

  .editor-stepper {
    width: 100%;
  }

  .editor-aspect-group .editor-option-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .editor-heading-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editor-heading-button,
  .editor-reset-button {
    min-height: 42px;
    padding-inline: 4px;
    gap: 3px;
  }

  .editor-heading-button .ui-icon,
  .editor-reset-button .ui-icon {
    width: 13px;
    height: 13px;
  }

  .editor-heading-button span,
  .editor-reset-button span {
    font-size: 8.5px;
  }

  .editor-aspect-group .editor-option-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ========================================================================== */
/* v2.0.6 — compact steps, centered actions and chat-style prompt flow         */
/* ========================================================================== */

.photo-editor-heading {
  align-items: center;
}

.photo-editor-title p,
.editor-stepper i,
.editor-heading-actions,
.editor-templates-card {
  display: none !important;
}

.editor-stepper {
  width: auto;
  display: grid;
  grid-template-columns: repeat(3, 32px);
  justify-content: center;
  gap: 11px;
}

.editor-stepper span {
  width: 32px;
  height: 32px;
  border-color: rgba(var(--accent-rgb), 0.22);
  color: var(--muted-strong);
  background: rgba(var(--accent-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.editor-stepper span.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.42);
  background: rgba(var(--accent-rgb), 0.16);
}

.editor-stepper span.complete {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.09);
}

.editor-workspace-heading {
  align-items: center;
}

.editor-workspace-heading > div {
  min-width: 0;
}

.editor-workspace-reset {
  flex: 0 0 auto;
  min-width: 94px;
  min-height: 38px;
  padding-inline: 10px;
}

.editor-workspace-reset span {
  display: inline;
  font-size: 10.5px;
}

.editor-step-continue,
.editor-create-button {
  position: relative;
  min-height: 50px;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.editor-step-continue::before,
.editor-create-button::before {
  position: absolute;
  left: 18px;
  grid-column: auto;
}

.editor-step-continue .primary-action-label,
.editor-create-button .primary-action-label {
  width: 100%;
  height: 100%;
  grid-column: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: auto;
  text-align: center;
  line-height: 1.2;
}

.editor-prompt-chat {
  min-height: 54px;
  padding: 7px;
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  overflow: visible;
  background: var(--surface);
}

.editor-prompt-chat .editor-prompt-chips {
  min-height: 0;
  max-height: none;
  padding: 0;
  display: contents;
  overflow: visible;
}

.editor-prompt-chat .editor-prompt-chip,
.editor-prompt-chat .editor-prompt-chip:not(.is-tool):not(.is-editing) {
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  align-self: center;
  margin: 0;
}

.editor-prompt-chat .editor-prompt-chip span {
  white-space: normal;
}

.editor-prompt-chat .editor-prompt-chip.is-editing {
  width: 100%;
  flex: 1 1 100%;
}

.editor-prompt-chat .editor-prompt-compose {
  min-width: 170px;
  min-height: 40px;
  margin: 0;
  padding: 2px 2px 2px 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  flex: 1 1 220px;
  align-self: center;
  background: var(--surface-muted);
}

.editor-prompt-chat .editor-prompt-compose:focus-within {
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.08);
}

.editor-prompt-compose textarea {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  padding: 8px 4px;
  overflow-y: auto;
  line-height: 20px;
}

.editor-prompt-compose button {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

#editorPromptCounter {
  margin-top: 5px;
}

.editor-settings-card > .editor-final-settings {
  margin-top: 0;
}

@media (max-width: 520px) {
  .photo-editor-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .editor-stepper {
    grid-template-columns: repeat(3, 29px);
    gap: 8px;
  }

  .editor-stepper span {
    width: 29px;
    height: 29px;
  }

  .editor-workspace-reset {
    min-width: 82px;
    padding-inline: 8px;
  }

  .editor-workspace-reset span {
    font-size: 9.5px;
  }

  .editor-prompt-chat .editor-prompt-compose {
    min-width: 140px;
    flex-basis: 170px;
  }
}

.editor-step-continue::before,
.editor-create-button::before {
  top: calc(50% - 9px);
}

/* ========================================================================== */
/* v2.0.7 — unified prompt chat, workspace tool popover and guided hints      */
/* ========================================================================== */

.editor-workspace-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.editor-workspace-action,
.editor-workspace-reset {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-strong);
  background: var(--surface);
  box-shadow: none;
}

.editor-workspace-action {
  padding: 0 10px;
  gap: 6px;
  font-size: 10px;
  font-weight: 780;
}

.editor-workspace-action .ui-icon,
.editor-workspace-reset .ui-icon {
  width: 17px;
  height: 17px;
}

.editor-workspace-reset {
  width: 38px;
  min-width: 38px;
  padding: 0;
}

.editor-stage-shell {
  position: relative;
  min-width: 0;
}

.editor-tools-toggle {
  position: absolute;
  z-index: 12;
  top: 12px;
  right: 12px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--accent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 8px 22px rgba(20, 32, 55, 0.14);
  backdrop-filter: blur(14px);
  font-size: 10px;
  font-weight: 820;
}

.editor-tools-toggle.active {
  color: white;
  border-color: var(--accent);
  background: var(--accent);
}

.editor-tools-toggle .ui-icon {
  width: 17px;
  height: 17px;
}

.editor-tools-popover {
  position: absolute;
  z-index: 20;
  top: 60px;
  right: 12px;
  width: min(340px, calc(100% - 24px));
  max-height: min(68vh, 620px);
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow-y: auto;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 22px 56px rgba(18, 29, 52, 0.23);
  backdrop-filter: blur(20px);
}

.editor-tools-popover[hidden] {
  display: none !important;
}

.editor-tools-popover-heading {
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.editor-tools-popover-heading h2 {
  margin: 0;
  font-size: 16px;
}

.editor-tools-popover-heading button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--muted-strong);
  background: var(--surface-muted);
}

.editor-tools-popover-heading .ui-icon {
  width: 16px;
  height: 16px;
}

.editor-tools-popover .editor-tools-scroll {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
}

.editor-tools-popover .editor-tool-button {
  min-width: 0;
  min-height: 68px;
  padding: 8px 5px;
}

.editor-tools-popover .editor-quick-panel {
  margin-top: 10px;
}

.editor-mask-controls {
  margin-top: 11px;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(92px, auto));
  align-items: stretch;
  gap: 7px;
}

.editor-mask-controls .editor-brush-size {
  min-height: 42px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  justify-content: center;
  background: var(--surface);
}

.editor-mask-controls .editor-control-button {
  width: auto;
  min-width: 0;
  min-height: 42px;
  padding: 0 9px;
  white-space: nowrap;
}

.editor-mask-controls .editor-control-button:disabled,
.editor-mask-controls .editor-brush-size:has(input:disabled) {
  opacity: 0.42;
}

.editor-prompts-section {
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
}

.editor-prompts-section > .editor-card-heading {
  margin-bottom: 10px;
  padding-inline: 1px;
}

.editor-prompt-chat {
  min-height: 72px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  background: var(--surface);
  box-shadow: none;
}

.editor-prompt-chat .editor-prompt-chips {
  width: 100%;
  min-height: 0;
  max-height: 300px;
  padding: 10px 10px 2px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  overflow-y: auto;
}

.editor-prompt-chat .editor-prompt-chips:empty {
  display: none;
}

.editor-prompt-chat .editor-prompt-chip,
.editor-prompt-chat .editor-prompt-chip:not(.is-tool):not(.is-editing) {
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  align-self: flex-start;
  margin: 0;
  color: var(--text-soft);
  border-color: rgba(var(--accent-rgb), 0.18);
  background: var(--accent-soft);
  box-shadow: none;
}

.editor-prompt-chat .editor-prompt-chip span {
  white-space: normal;
}

.editor-prompt-chat .editor-prompt-chip.is-editing {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}

.editor-prompt-chat .editor-prompt-compose {
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 5px 5px 5px 11px;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: transparent;
  box-shadow: none;
}

.editor-prompt-chat .editor-prompt-chips:not(:empty) + .editor-prompt-compose {
  border-top: 1px solid var(--line);
}

.editor-prompt-chat .editor-prompt-compose:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.editor-prompt-compose textarea {
  min-height: 52px;
  height: 52px;
  max-height: 112px;
  padding: 7px 2px;
  border: 0;
  outline: 0;
  overflow-y: auto;
  line-height: 19px;
  background: transparent;
  resize: none;
}

.editor-prompt-compose button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
}

.editor-prompt-chip.is-editing textarea {
  min-height: 54px;
}

.editor-tour {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: auto;
}

.editor-tour[hidden] {
  display: none !important;
}

.editor-tour-spotlight {
  position: fixed;
  z-index: 301;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(7, 12, 23, 0.72), 0 0 0 5px rgba(var(--accent-rgb), 0.35);
  transition: left 180ms ease, top 180ms ease, width 180ms ease, height 180ms ease;
}

.editor-tour-card {
  position: fixed;
  z-index: 302;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.editor-tour-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.editor-tour-card-top > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
}

.editor-tour-card-top button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--muted-strong);
  background: var(--surface-muted);
}

.editor-tour-card-top .ui-icon {
  width: 16px;
  height: 16px;
}

.editor-tour-card h3 {
  margin: 9px 0 6px;
  font-size: 17px;
}

.editor-tour-card p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.5;
}

.editor-tour-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.editor-tour-actions button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--muted-strong);
  background: var(--surface-muted);
  font-size: 11px;
  font-weight: 800;
}

.editor-tour-actions button:last-child {
  color: white;
  border-color: var(--accent);
  background: var(--accent);
}

.editor-tour-actions button:disabled {
  opacity: 0.4;
}

body.editor-tour-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .editor-mask-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editor-mask-controls .editor-brush-size {
    grid-column: 1 / -1;
  }

  .editor-mask-controls .editor-control-button {
    padding-inline: 5px;
    font-size: 9px;
  }
}

@media (max-width: 520px) {
  .editor-workspace-heading {
    align-items: flex-start;
  }

  .editor-workspace-action {
    width: 38px;
    padding: 0;
  }

  .editor-workspace-action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .editor-tools-toggle {
    top: 9px;
    right: 9px;
    width: 42px;
    min-height: 42px;
    padding: 0;
  }

  .editor-tools-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .editor-tools-popover {
    top: 59px;
    right: 9px;
    width: min(310px, calc(100% - 18px));
    max-height: min(66vh, 560px);
  }

  .editor-tools-popover .editor-tools-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-prompt-compose textarea {
    font-size: 16px;
  }
}


/* v2.0.8 — compact mask controls, continuous prompt chat and overlay hints */
.editor-mask-controls {
  grid-template-columns: minmax(118px, 1.35fr) minmax(82px, 0.75fr) minmax(82px, 0.75fr);
  align-items: stretch;
}

.editor-mask-controls .editor-brush-size {
  grid-column: auto;
  min-width: 0;
}

.editor-mask-controls .editor-control-button {
  min-width: 0;
  padding-inline: 7px;
}

.editor-prompt-chat .editor-prompt-chips {
  padding: 8px 10px 0;
  margin: 0;
}

.editor-prompt-chat .editor-prompt-chips:not(:empty) + .editor-prompt-compose {
  padding-top: 0;
  border-top: 0;
}

.editor-prompt-chat .editor-prompt-compose {
  min-height: 58px;
  padding-top: 0;
}

.editor-tour-spotlight {
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 9999px rgba(7, 12, 23, 0.58), 0 0 0 4px rgba(var(--accent-rgb), 0.26);
}

.editor-tour-card {
  padding: 6px 4px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62);
}

.editor-tour-card::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-50%);
}

.editor-tour-card[data-placement='below']::before {
  top: -18px;
}

.editor-tour-card[data-placement='above']::before {
  bottom: -18px;
}

.editor-tour-card-top {
  min-height: 28px;
  justify-content: center;
  position: relative;
}

.editor-tour-card-top > span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
}

.editor-tour-card-top button {
  position: absolute;
  top: -2px;
  right: 0;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
}

.editor-tour-card h3 {
  margin: 4px 26px 4px;
  color: #fff;
  font-size: 17px;
  line-height: 1.25;
}

.editor-tour-card p {
  margin: 0 auto;
  max-width: 290px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  line-height: 1.42;
}

.editor-tour-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.editor-tour-actions button {
  width: auto;
  min-width: 86px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(4px);
}

.editor-tour-actions button:last-child {
  border-color: rgba(var(--accent-rgb), 0.95);
  background: rgba(var(--accent-rgb), 0.72);
}

.editor-tour-actions button:disabled {
  opacity: 0.3;
}

@media (max-width: 760px) {
  .editor-mask-controls {
    grid-template-columns: minmax(112px, 1.35fr) minmax(76px, 0.75fr) minmax(76px, 0.75fr);
  }

  .editor-mask-controls .editor-brush-size {
    grid-column: auto;
  }

  .editor-mask-controls .editor-control-button {
    padding-inline: 4px;
    font-size: 9px;
  }

  .editor-tour-card {
    padding-inline: 2px;
  }
}

@media (max-width: 360px) {
  .editor-mask-controls {
    grid-template-columns: minmax(104px, 1.25fr) minmax(70px, 0.75fr) minmax(70px, 0.75fr);
    gap: 5px;
  }

  .editor-mask-controls .editor-brush-size span,
  .editor-mask-controls .editor-control-button {
    font-size: 8px;
  }
}


/* v2.0.9 — compact prompt input, stable editing keyboard and locked hints */
.editor-prompt-chat {
  min-height: 58px;
}

.editor-prompt-chat .editor-prompt-compose {
  min-height: 58px;
}

.editor-prompt-chat .editor-prompt-chips:empty + .editor-prompt-compose {
  padding-top: 0;
}

html.editor-tour-open,
body.editor-tour-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.editor-tour {
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

.editor-tour-card-top {
  min-height: 18px;
}

.editor-tour-actions {
  align-items: center;
}

.editor-tour-actions .editor-tour-close-action {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.2);
}

.editor-tour-actions .editor-tour-close-action .ui-icon {
  width: 17px;
  height: 17px;
}

.editor-tour-actions button:last-child {
  min-width: 86px;
}


/* ========================================================================== */
/* v2.0.10 — minimal prompt chat and precise guided-hint targets              */
/* ========================================================================== */

/* The instructions container follows its content instead of stretching to an
   artificial panel height. With no prompts it is only the compact input row;
   added prompts expand the same bordered container directly above the input. */
.editor-prompts-section {
  align-self: start;
}

.editor-prompt-chat {
  width: 100%;
  height: auto !important;
  min-height: 58px;
  max-height: none;
  display: block;
  overflow: hidden;
}

.editor-prompt-chat .editor-prompt-chips {
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  max-height: 300px;
  margin: 0;
  padding: 8px 10px 0;
  display: flex;
  flex: 0 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.editor-prompt-chat .editor-prompt-chips:empty {
  display: none;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0;
}

.editor-prompt-chat .editor-prompt-compose,
.editor-prompt-chat .editor-prompt-chips:empty + .editor-prompt-compose {
  width: 100%;
  min-height: 58px;
  height: auto;
  margin: 0;
  padding-top: 0;
  display: flex;
  flex: 0 0 auto;
}

/* The tour highlights only the three zoom controls, not their full-width row. */
.editor-zoom-control-group {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Increase contrast of Back and Close against photographs and dark banners. */
.editor-tour-actions #editorTourPrev {
  border-color: rgba(255, 255, 255, 0.94);
  color: #fff;
  background: rgba(7, 12, 23, 0.72);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.34);
}

.editor-tour-actions #editorTourClose {
  border-color: rgba(255, 255, 255, 0.98);
  color: #101522;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.34);
}

.editor-tour-actions #editorTourClose .ui-icon {
  color: currentColor;
  stroke-width: 2.2;
}

.editor-tour-actions #editorTourPrev:disabled {
  opacity: 0.45;
}


/* v2.0.11 — touch drawing and page navigation coexist on mobile. The active
   mask canvas owns the gesture: one finger draws, while two fingers are
   translated into vertical page scrolling by app.js. */
.editor-stage.mask-active,
.editor-stage.mask-active canvas {
  touch-action: none;
  overscroll-behavior: contain;
}

/* ========================================================================== */
/* v2.0.12 — compact workspace toolbar and prompt spacing                     */
/* ========================================================================== */

/* One compact row above the canvas: tools at the left, zoom in the centre,
   hints and reset at the right. */
.editor-workspace-toolbar {
  width: 100%;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.editor-workspace-toolbar .editor-tools-toggle {
  position: static;
  inset: auto;
  z-index: auto;
  justify-self: start;
}

.editor-workspace-toolbar .editor-zoom-controls {
  min-width: 0;
  margin: 0;
  justify-self: center;
}

.editor-workspace-toolbar .editor-workspace-actions {
  justify-self: end;
}

.editor-workspace-card > #editorWorkspaceHint[hidden] {
  display: none !important;
}

/* The tool menu remains attached to the canvas after its trigger moves into
   the top toolbar. */
.editor-tools-popover {
  top: 12px;
}

/* Keep the same small vertical rhythm between prompt chips and the compose
   field as between neighbouring prompt chips. */
.editor-prompt-chat .editor-prompt-chips:not(:empty) {
  padding-bottom: 8px;
}

.editor-tour-card p:empty {
  display: none;
}

@media (max-width: 520px) {
  .editor-workspace-toolbar {
    grid-template-columns: 38px minmax(0, 1fr) 80px;
    gap: 4px;
  }

  .editor-workspace-toolbar .editor-tools-toggle {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
  }

  .editor-workspace-toolbar .editor-zoom-control-group {
    gap: 4px;
  }

  .editor-workspace-toolbar .editor-icon-control {
    width: 32px;
    min-height: 34px;
  }

  .editor-workspace-toolbar .editor-zoom-value {
    min-width: 48px;
    min-height: 34px;
    padding-inline: 6px;
  }

  .editor-workspace-toolbar .editor-workspace-actions {
    gap: 4px;
  }

  .editor-workspace-toolbar .editor-workspace-action,
  .editor-workspace-toolbar .editor-workspace-reset {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
  }
}


/* v2.0.13 — deeper mask undo history and right-anchored tool panel */
.editor-tools-popover {
  left: auto !important;
  right: 12px !important;
  transform-origin: top right;
  animation: editor-tools-enter-from-right 160ms ease-out;
}

@keyframes editor-tools-enter-from-right {
  from { opacity: 0; transform: translateX(14px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width: 520px) {
  .editor-tools-popover {
    left: auto !important;
    right: 9px !important;
    width: min(292px, calc(100% - 18px));
  }
}

/* v2.0.14 — application-styled image roles, custom role descriptions and left tool panel */
.editor-role-fields {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.editor-role-fields[hidden],
.editor-role-card[hidden] {
  display: none !important;
}

.editor-role-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.055), transparent 58%), var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.editor-role-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.editor-role-heading > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.editor-role-heading strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.editor-role-heading small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.editor-role-number {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 10px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  font-size: 12px;
  font-weight: 800;
}

.editor-role-select-wrap {
  position: relative;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted-strong);
  background: var(--surface-muted);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.editor-role-select-wrap:focus-within {
  border-color: rgba(var(--accent-rgb), 0.62);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.editor-role-select-wrap > .ui-icon {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.editor-role-select-wrap select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  outline: none;
}

.editor-role-select-wrap .editor-role-chevron {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}

.editor-custom-role-fields {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.editor-custom-role-fields[hidden],
.editor-custom-role-fields label[hidden] {
  display: none !important;
}

.editor-custom-role-fields label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  padding: 11px 12px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.055);
}

.editor-custom-role-fields label > span {
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
}

.editor-custom-role-fields label > small {
  align-self: center;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.editor-custom-role-fields textarea {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 54px;
  max-height: 120px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  line-height: 1.42;
  outline: none;
}

.editor-custom-role-fields textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.62);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

/* The panel is opened from the left edge of the canvas. */
.editor-tools-popover {
  left: 12px !important;
  right: auto !important;
  transform-origin: top left;
  animation: editor-tools-enter-from-left 160ms ease-out;
}

@keyframes editor-tools-enter-from-left {
  from { opacity: 0; transform: translateX(-14px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width: 720px) {
  .editor-role-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .editor-role-card {
    padding: 10px;
    border-radius: 16px;
  }

  .editor-role-heading small {
    font-size: 9px;
  }

  .editor-tools-popover {
    left: 9px !important;
    right: auto !important;
    width: min(292px, calc(100% - 18px));
  }
}

/* ========================================================================== */
/* v2.0.15 — custom image-role picker and compact instruction alignment       */
/* ========================================================================== */

/* Native <select> popups are drawn by the operating system/WebView and cannot
   inherit the Mini App surface, spacing or option states. The visible control
   is now an application-owned listbox; the hidden select remains the single
   value source used by draft restoration and order submission. */
.editor-role-card {
  position: relative;
}

.editor-role-card.picker-open {
  z-index: 24;
}

.editor-role-picker {
  position: relative;
  min-width: 0;
}

.editor-role-picker-button {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted-strong);
  background: var(--surface-muted);
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.editor-role-picker-button:hover,
.editor-role-picker-button.active,
.editor-role-picker-button:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.62);
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
  outline: none;
}

.editor-role-picker-button > .ui-icon {
  width: 18px;
  height: 18px;
}

.editor-role-picker-button > span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-role-picker-button .editor-role-chevron {
  width: 14px;
  height: 14px;
  justify-self: end;
  transform: rotate(90deg);
  transition: transform 150ms ease;
}

.editor-role-picker-button[aria-expanded="true"] .editor-role-chevron {
  transform: rotate(-90deg);
}

.editor-role-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: min(290px, 52vh);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  animation: editor-role-menu-in 140ms ease-out;
}

.editor-role-menu[hidden] {
  display: none !important;
}

@keyframes editor-role-menu-in {
  from { opacity: 0; transform: translateY(-5px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.editor-role-option {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 11px;
  color: var(--text-soft);
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.editor-role-option:hover,
.editor-role-option:focus-visible {
  color: var(--text);
  background: var(--surface-muted);
  outline: none;
}

.editor-role-option.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.11);
}

.editor-role-option .ui-icon {
  width: 16px;
  height: 16px;
  justify-self: end;
  opacity: 0;
}

.editor-role-option.active .ui-icon {
  opacity: 1;
}

/* Custom role details now follow the ordinary prompt chat instead of pushing
   it downward. */
.editor-custom-role-fields {
  margin-top: 10px;
  margin-bottom: 0;
}

/* Give the placeholder a little breathing room from the chat outline. */
.editor-prompt-compose textarea {
  padding-left: 8px;
}

@media (max-width: 520px) {
  .editor-role-picker-button {
    min-height: 44px;
    padding-inline: 10px;
  }

  .editor-role-menu {
    max-height: 46vh;
  }

  .editor-role-option {
    min-height: 44px;
    font-size: 11px;
  }
}

/* v2.0.16 — slightly smaller prompt placeholder without shrinking entered text */
.editor-prompt-compose textarea::placeholder {
  font-size: 12px;
}

@media (max-width: 520px) {
  .editor-prompt-compose textarea::placeholder {
    font-size: 14px;
  }
}

/* v2.0.18 — unified Photo entry: edit an upload or generate from text */
.photo-editor-heading {
  justify-content: flex-start;
  min-height: 34px;
  padding-inline: 2px;
}

.editor-stepper {
  justify-content: flex-start;
  margin-inline: 0 auto;
}

.editor-mode-card {
  overflow: hidden;
}

.editor-mode-choice {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 8px 0 2px;
}

.editor-mode-option {
  width: min(100%, 410px);
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-muted);
  color: var(--text);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.editor-mode-option:hover,
.editor-mode-option:focus-visible,
.editor-mode-option.active {
  border-color: rgba(var(--accent-rgb), .7);
  background: rgba(var(--accent-rgb), .09);
  outline: none;
}

.editor-mode-option:active {
  transform: scale(.992);
}

.editor-mode-upload {
  position: relative;
  display: grid;
  cursor: pointer;
}

.editor-mode-upload > input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.editor-mode-empty,
.editor-generate-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 16px 18px;
  text-align: left;
}

.editor-mode-empty {
  flex-wrap: wrap;
}

.editor-mode-empty > strong,
.editor-generate-option strong {
  font-size: 14px;
  font-weight: 760;
}

.editor-mode-empty > small {
  flex-basis: 100%;
  margin-top: -8px;
  color: var(--text-muted);
  text-align: center;
  font-size: 11px;
}

.editor-generate-option {
  font: inherit;
  cursor: pointer;
}

.editor-generate-option > span:last-child {
  display: grid;
  gap: 3px;
}

.editor-generate-option small {
  color: var(--text-muted);
  font-size: 11px;
}

.editor-mode-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: var(--accent);
}

.editor-mode-icon > .ui-icon {
  width: 31px;
  height: 31px;
}

.editor-mode-icon i {
  position: absolute;
  right: -2px;
  top: -3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
}

.editor-mode-icon i .ui-icon {
  width: 16px;
  height: 16px;
}

.editor-mode-divider {
  display: flex;
  align-items: center;
  width: min(100%, 410px);
  gap: 12px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.editor-mode-divider::before,
.editor-mode-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.editor-mode-upload .editor-source-preview {
  min-height: 82px;
  align-items: center;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  gap: 11px;
  padding: 11px;
}

.editor-mode-upload .editor-source-preview img {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--surface);
}

.editor-mode-upload .editor-source-preview > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.editor-mode-upload .editor-source-preview strong,
.editor-mode-upload .editor-source-preview small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-mode-upload .editor-source-preview small {
  color: var(--text-muted);
  font-size: 11px;
}

.editor-workspace-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.editor-workspace-mask-tools {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.editor-workspace-tool {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 720;
  cursor: pointer;
}

.editor-workspace-tool .ui-icon {
  width: 16px;
  height: 16px;
}

.editor-workspace-tool.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .65);
  background: rgba(var(--accent-rgb), .12);
}

.editor-workspace-toolbar .editor-zoom-controls {
  justify-self: center;
}

.editor-workspace-toolbar .editor-workspace-actions {
  justify-self: end;
}

.editor-auto-instructions {
  position: relative;
  margin-top: 10px;
}

.editor-auto-instructions-toggle {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 740;
  cursor: pointer;
}

.editor-auto-instructions-toggle > span {
  flex: 1;
  text-align: left;
}

.editor-auto-instructions-toggle .ui-icon {
  width: 17px;
  height: 17px;
}

.editor-auto-chevron {
  transition: transform .18s ease;
}

.editor-auto-instructions-toggle.active .editor-auto-chevron {
  transform: rotate(90deg);
}

.editor-auto-instructions .editor-tools-popover {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none;
  margin-top: 8px;
  box-shadow: none;
  transform: none !important;
}

.photo-editor-page[data-editor-mode="generate"] .editor-prompts-section {
  margin-top: 0;
}

.photo-editor-page[data-editor-mode="generate"] #editorStep2 {
  padding-top: 2px;
}

.photo-editor-page[data-editor-mode="generate"] #editorAspectGroup {
  display: block;
}

.photo-editor-page[data-editor-mode="edit"] #editorAspectGroup {
  display: none !important;
}

@media (max-width: 620px) {
  .editor-mode-card .editor-card-heading p {
    max-width: 36ch;
  }

  .editor-mode-option {
    min-height: 74px;
    border-radius: 15px;
  }

  .editor-mode-empty,
  .editor-generate-option {
    padding: 13px 12px;
  }

  .editor-mode-empty > strong,
  .editor-generate-option strong {
    font-size: 13px;
  }

  .editor-workspace-toolbar {
    gap: 5px;
  }

  .editor-workspace-mask-tools {
    gap: 4px;
  }

  .editor-workspace-tool {
    min-height: 36px;
    gap: 4px;
    padding: 7px 7px;
    font-size: 10px;
  }

  .editor-workspace-tool .ui-icon {
    width: 14px;
    height: 14px;
  }

  .editor-workspace-toolbar .editor-workspace-action span {
    display: none;
  }

  .editor-workspace-toolbar .editor-workspace-action,
  .editor-workspace-toolbar .editor-workspace-reset {
    width: 34px;
    min-width: 34px;
    padding-inline: 0;
  }
}

@media (max-width: 370px) {
  .editor-workspace-tool span {
    display: none;
  }

  .editor-workspace-tool {
    width: 34px;
    min-width: 34px;
    padding-inline: 0;
  }

  .editor-workspace-toolbar .editor-zoom-value {
    min-width: 37px;
  }
}


/* ========================================================================== */
/* v2.0.19 — compact Photo steps and corrected mobile source card             */
/* ========================================================================== */

/* Let the introductory copy use the whole card width instead of an artificial
   character limit that left unused space on compact phones. */
.editor-mode-card .editor-card-heading > div {
  width: 100%;
  min-width: 0;
}

.editor-mode-card .editor-card-heading p {
  width: 100%;
  max-width: none !important;
}

/* Upload and generation choices now share the same geometry and left-aligned
   icon/copy rhythm. */
.editor-mode-empty,
.editor-generate-option {
  min-height: 82px;
  padding: 13px 16px;
  justify-content: flex-start;
  text-align: left;
}

.editor-mode-empty {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  flex-wrap: nowrap;
}

.editor-mode-copy,
.editor-generate-option > span:last-child {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.editor-mode-copy strong,
.editor-mode-copy small {
  display: block;
  min-width: 0;
}

.editor-mode-copy strong {
  font-size: 14px;
  font-weight: 760;
}

.editor-mode-copy small {
  line-height: 1.25;
}

.editor-mode-empty > .editor-mode-copy > small {
  margin: 0;
  color: var(--text-muted);
  text-align: left;
  font-size: 11px;
}

/* The generic source preview is absolute in the legacy multi-image layout.
   The new single-source choice needs a compact in-flow preview instead. */
.editor-mode-upload .editor-source-preview {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 82px;
  height: 100%;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  color: var(--text);
  background: var(--surface-muted);
}

.editor-mode-upload .editor-source-preview[hidden] {
  display: none !important;
}

.editor-mode-upload .editor-source-preview img {
  position: static;
  width: 58px;
  height: 58px;
  min-height: 0;
  border-radius: 12px;
  object-fit: contain;
  background: var(--surface);
}

.editor-mode-upload .editor-source-preview > span {
  position: static;
  inset: auto;
  min-width: 0;
  padding: 0;
  color: var(--text);
  background: none;
}

.editor-mode-upload .editor-source-preview strong,
.editor-mode-upload .editor-source-preview small {
  max-width: 100%;
}

.editor-mode-upload .editor-source-preview small {
  color: var(--text-muted);
}

.editor-mode-upload .editor-source-remove {
  position: static;
  width: 32px;
  height: 32px;
  color: var(--text-soft);
  background: var(--surface);
  backdrop-filter: none;
}

/* Step 2 is intentionally dense: workspace, prompt chat and auto instructions
   remain visually separated without duplicate card-sized gaps. */
#editorStep2 {
  gap: 6px;
}

#editorStep2 .editor-workspace-card,
#editorStep2 .editor-prompts-section {
  margin: 0;
}

#editorStep2 .editor-prompts-section > .editor-card-heading,
#editorPromptCounter {
  display: none !important;
}

#editorStep2 .editor-prompt-chat {
  margin: 0;
}

#editorStep2 .editor-auto-instructions {
  margin-top: 6px;
}

/* Step 3 uses the same compact vertical rhythm. In edit mode the hidden aspect
   fieldset must not leave its border/padding above Resolution. */
#editorStep3 {
  gap: 6px;
}

#editorStep3 .editor-card {
  margin-bottom: 0;
}

#editorStep3 .editor-settings-card {
  padding-top: 12px;
  padding-bottom: 12px;
}

#editorStep3 .editor-option-group {
  padding-top: 8px;
}

#editorStep3 .editor-option-group + .editor-option-group {
  margin-top: 8px;
  padding-top: 8px;
}

#editorStep3 .editor-option-group legend {
  margin-bottom: 6px;
}

.photo-editor-page[data-editor-mode="edit"] #editorAspectGroup + .editor-option-group {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 620px) {
  .editor-mode-card .editor-card-heading p {
    max-width: none !important;
    font-size: 11px;
  }

  .editor-mode-empty,
  .editor-generate-option {
    min-height: 74px;
    padding: 11px 12px;
  }

  .editor-mode-copy strong {
    font-size: 13px;
  }

  /* On phones the two mask actions become clear icon buttons so they cannot
     merge visually with the central zoom controls. Their accessible names and
     native title hints remain available. */
  .editor-workspace-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .editor-workspace-mask-tools {
    gap: 4px;
  }

  .editor-workspace-tool {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
  }

  .editor-workspace-tool span {
    display: none;
  }

  .editor-workspace-tool .ui-icon {
    width: 16px;
    height: 16px;
  }

  #editorStep3 .editor-settings-card,
  #editorStep3 .editor-checkout-card {
    padding: 12px;
  }
}


/* ========================================================================== */
/* v2.0.20 — clean uploaded-image card                                        */
/* ========================================================================== */

/* Keep the selected-file state inside the same rounded card. The legacy
   preview used an edge-to-edge rectangular layer, which exposed accent-colour
   corner fragments around the uploaded image on compact screens. */
.editor-mode-upload {
  overflow: hidden;
  isolation: isolate;
}

.editor-mode-upload .editor-source-preview {
  box-sizing: border-box;
  border-radius: inherit;
  clip-path: inset(0 round 17px);
}

.editor-mode-upload .editor-source-preview img {
  display: block;
  overflow: hidden;
}

@media (max-width: 620px) {
  .editor-mode-upload .editor-source-preview {
    clip-path: inset(0 round 14px);
  }
}

/* v2.0.21 — the mask keeps its real alpha values for transparent-background
   export; only its on-screen red preview is softened. */
#editorMaskCanvas {
  opacity: 0.58;
}

/* ========================================================================== */
/* v2.0.22 — direct Photo-mode entry, isolated prompts and compact source nav */
/* ========================================================================== */

.editor-mode-upload .editor-source-preview {
  grid-template-columns: 58px minmax(0, 1fr) 32px 32px;
}

.editor-source-next {
  position: static;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb), .34);
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  color: white;
  background: var(--accent);
  cursor: pointer;
}

.editor-source-next .ui-icon {
  width: 16px;
  height: 16px;
}

.editor-source-next:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface);
  cursor: default;
  opacity: .55;
}

/* The step indicator consists only of the three circles. No divider should
   appear when the prompt field receives focus or the keyboard opens. */
.photo-editor-heading,
.editor-stepper {
  border-top: 0 !important;
  box-shadow: none !important;
}

.photo-editor-heading::before,
.photo-editor-heading::after,
.editor-stepper::before,
.editor-stepper::after {
  content: none !important;
  display: none !important;
}

.editor-prompt-compose textarea {
  resize: none;
}

.editor-prompt-compose textarea::-webkit-resizer {
  display: none;
}

@media (max-width: 620px) {
  .editor-mode-upload .editor-source-preview {
    grid-template-columns: 52px minmax(0, 1fr) 32px 32px;
    gap: 8px;
  }

  .editor-mode-upload .editor-source-preview img {
    width: 52px;
    height: 52px;
  }
}


/* ========================================================================== */
/* v2.0.25 — background flow, smooth solutions and corrected tool icons         */
/* ========================================================================== */

/* Ready-made solutions unfold inline without a duplicate heading or close
   button. The trigger itself remains the close control. `hidden` is applied
   only after the closing transition so both opening and closing stay smooth. */
.editor-auto-instructions .editor-tools-popover {
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-7px) !important;
  animation: none !important;
  transition:
    max-height 260ms cubic-bezier(.2, .75, .25, 1),
    margin-top 220ms ease,
    opacity 180ms ease,
    transform 220ms cubic-bezier(.2, .75, .25, 1),
    visibility 0s linear 260ms;
}

.editor-auto-instructions .editor-tools-popover.is-open {
  max-height: 620px;
  margin-top: 8px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) !important;
  transition-delay: 0s;
}

/* Remove the pointer line between a highlighted control and walkthrough copy. */
.editor-tour-card::before {
  content: none !important;
  display: none !important;
}

/* The workspace always previews the original object URL. Browser scaling can
   look softer at non-integer zoom levels, but no filter or client-side
   recompression is applied to the file sent to the server. */
.editor-stage-transform img {
  image-rendering: auto;
  filter: none;
  backface-visibility: hidden;
}

/* Blank editor background becomes visible when the zoomed image is dragged
   into the half-viewport free area. */
.editor-stage {
  background: var(--surface-muted);
}

/* Ratio cards now communicate only the ratio and its shape. */
.editor-aspect-group .editor-option small {
  display: none !important;
}

/* ========================================================================== */
/* v2.0.26 — responsive ready-solutions reveal without delayed hiding          */
/* ========================================================================== */

/* Keep the solution list mounted and animate a grid track instead of toggling
   `hidden` after a timeout. This avoids the brief layout pause seen in Telegram
   WebView when the panel was repeatedly removed from and restored to layout. */
.editor-auto-instructions .editor-tools-popover {
  display: grid !important;
  grid-template-rows: 0fr;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin-top: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: grid-template-rows 190ms cubic-bezier(.2, .72, .25, 1), margin-top 190ms ease;
}

.editor-auto-instructions .editor-tools-popover.is-open {
  grid-template-rows: 1fr;
  margin-top: 8px;
  pointer-events: auto;
}

.editor-tools-popover-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(-5px);
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 14px 34px rgba(18, 29, 52, 0);
  transition:
    padding-block 170ms ease,
    border-color 150ms ease,
    opacity 135ms ease,
    transform 170ms cubic-bezier(.2, .72, .25, 1),
    box-shadow 170ms ease;
}

.editor-tools-popover.is-open > .editor-tools-popover-inner {
  padding-block: 13px;
  border-color: var(--line);
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 14px 34px rgba(18, 29, 52, 0.13);
}

.editor-tools-popover-inner > .editor-tools-scroll {
  scroll-margin-block: 96px;
}

@media (prefers-reduced-motion: reduce) {
  .editor-auto-instructions .editor-tools-popover,
  .editor-tools-popover-inner {
    transition-duration: 0ms !important;
  }
}


/* ========================================================================== */
/* v2.0.27 — reveal nested ready-solution actions                             */
/* ========================================================================== */

.editor-tools-popover .editor-quick-options {
  scroll-margin-block: 104px;
}


/* ========================================================================== */
/* v2.0.28 — curated ready-made solutions and custom colour prompts           */
/* ========================================================================== */

/* Four top-level categories fit evenly in the inline ready-solutions panel. */
.editor-tools-popover .editor-tools-scroll {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.editor-tools-popover .editor-tool-button {
  min-height: 66px;
  padding-inline: 4px;
}

.editor-tools-popover .editor-tool-button span {
  overflow-wrap: anywhere;
}

.editor-tools-popover .editor-quick-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.editor-tools-popover .editor-quick-options button {
  width: 100%;
  min-height: 42px;
  height: auto;
  padding: 8px 9px;
  text-align: left;
  line-height: 1.25;
}

.editor-custom-solution > strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 12px;
}

.editor-custom-solution > p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.editor-custom-solution-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.editor-custom-solution-compose input {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 10px;
  outline: none;
  color: var(--text);
  background: var(--surface);
  font: inherit;
  font-size: 11px;
}

.editor-custom-solution-compose input:focus {
  border-color: rgba(var(--accent-rgb), .58);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1);
}

.editor-custom-solution-compose button,
.editor-custom-solution-back {
  min-height: 40px;
  border-radius: 11px;
  padding: 0 12px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 760;
}

.editor-custom-solution-compose button {
  color: #fff;
  background: var(--accent);
}

.editor-custom-solution-back {
  width: 100%;
  margin-top: 7px;
  border: 1px solid var(--line);
  color: var(--text-soft);
  background: var(--surface);
}

@media (max-width: 520px) {
  .editor-tools-popover .editor-tools-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-tools-popover .editor-quick-options {
    grid-template-columns: 1fr;
  }

  .editor-custom-solution-compose {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== */
/* v2.0.30 — universal solutions, person-aware Persona and original resolution */
/* ========================================================================== */

/* Nested ready-made choices stay in two columns even on phones. Long Russian
   labels wrap inside the button instead of forcing the grid wider. */
.editor-tools-popover .editor-quick-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-tools-popover .editor-quick-options button {
  min-width: 0;
  min-height: 48px;
  padding: 8px 7px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  white-space: normal;
  font-size: 10px;
  line-height: 1.2;
}

/* The top category grid adapts when Persona is hidden after image analysis. */
.editor-tools-popover .editor-tools-scroll {
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
}

.editor-tool-button:disabled {
  opacity: .52;
  cursor: wait;
}

/* Native placeholders cannot scroll. This reusable overlay gently moves a
   long example inside the field and disappears as soon as the user types. */
.editor-custom-solution-input-wrap {
  position: relative;
  min-width: 0;
  display: block;
}

.editor-custom-solution-input-wrap input {
  width: 100%;
  box-sizing: border-box;
}

.editor-floating-placeholder {
  position: absolute;
  inset: 0 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}

.editor-floating-placeholder[hidden] {
  display: none !important;
}

.editor-floating-placeholder > span {
  display: inline-block;
  min-width: max-content;
  transform: translateX(0);
}

.editor-floating-placeholder.is-scrolling > span {
  animation: editor-floating-placeholder 6.5s ease-in-out infinite alternate;
}

@keyframes editor-floating-placeholder {
  0%, 20% { transform: translateX(0); }
  80%, 100% { transform: translateX(calc(-1 * var(--placeholder-shift, 0px))); }
}

/* In edit mode the original resolution occupies a dedicated full-width row
   above the four upscale choices. It remains hidden in generation mode. */
.editor-resolution-default {
  grid-column: 1 / -1;
  min-height: 48px;
}

.photo-editor-page[data-editor-mode="generate"] .editor-resolution-default {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .editor-floating-placeholder.is-scrolling > span {
    animation: none;
  }
}


/* ========================================================================== */
/* v2.0.32 — clean source replacement and centered ready-solution choices     */
/* ========================================================================== */

/* Every nested ready-made action is centred as a single button label. Long
   names may wrap, but remain centred vertically and horizontally. */
.editor-tools-popover .editor-quick-options button {
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Category names are already visible on the parent buttons. The nested panel
   contains only actions, so no duplicate heading reserves extra space. */
.editor-tools-popover .editor-quick-panel > strong {
  display: none !important;
}


/* ========================================================================== */
/* v2.0.33 — live brush-size preview and correctly staged walkthrough targets */
/* ========================================================================== */

/* The preview is anchored to the visible workspace rather than the transformed
   image, so its diameter matches the on-screen stroke size at every zoom. */
.editor-brush-preview {
  --editor-brush-preview-size: 42px;
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: var(--editor-brush-preview-size);
  height: var(--editor-brush-preview-size);
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--accent) 82%, white 18%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 4px 18px rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 120ms ease, transform 120ms ease;
}

.editor-brush-preview.is-eraser {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.08);
}

.editor-brush-preview.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* While the walkthrough waits for an inline panel to unfold, hide the old
   spotlight/card position so it cannot flash over the collapsed trigger. */
.editor-tour.is-positioning .editor-tour-spotlight,
.editor-tour.is-positioning .editor-tour-card {
  opacity: 0;
}

.editor-tour-spotlight,
.editor-tour-card {
  transition-property: opacity, left, top, width, height, transform;
}

@media (prefers-reduced-motion: reduce) {
  .editor-brush-preview {
    transition-duration: 0ms;
  }
}

/* v2.0.34 — stability hardening and simplified ready-solutions walkthrough */

/* v2.0.35 — bottom Studio navigation restores the last workspace after visiting Profile. */

/* ========================================================================== */
/* v2.0.41 — single-screen photo editor                                       */
/* ========================================================================== */

/* The studio temporarily exposes only the active Photo direction. */
.editor-section-list-photo-only {
  padding-top: 4px;
}

.editor-section-list-photo-only .editor-section-card {
  margin: 0;
}

/* Step labels and the old mode picker are removed: editing is one compact
   configuration screen followed by a separate payment screen. */
.photo-editor-heading,
#editorStep1,
#editorAspectGroup {
  display: none !important;
}

.photo-editor-page {
  padding-top: 0;
}

#editorStep2.editor-main-step {
  display: grid;
  gap: 8px;
}

#editorStep3.editor-payment-step {
  display: grid;
  gap: 8px;
}

#editorStep3.editor-payment-step[hidden] {
  display: none !important;
}

#editorStep3 .editor-checkout-card {
  margin: 0;
}

/* Tools replace the old Select/Eraser controls in the workspace header. */
.editor-workspace-toolbar {
  width: 100%;
  margin: 0 0 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.editor-workspace-tools-menu {
  display: contents;
}

.editor-workspace-toolbar .editor-auto-instructions-toggle {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: auto;
  min-width: 138px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 12px;
}

.editor-workspace-toolbar .editor-auto-instructions-toggle > span {
  text-align: left;
}

.editor-workspace-toolbar .editor-workspace-actions {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.editor-workspace-toolbar .editor-tools-popover {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
}

.editor-legacy-controls {
  display: none !important;
}

/* The workspace is now a static, responsive preview and upload target. */
.editor-workspace-card {
  padding: 10px;
}

.editor-stage-shell {
  width: 100%;
}

.editor-static-stage {
  width: 100%;
  min-height: clamp(210px, 37dvh, 350px);
  max-height: 42dvh;
  aspect-ratio: auto;
  border: 1px dashed var(--line-strong);
  border-radius: 17px;
  overflow: hidden;
  touch-action: pan-y !important;
  cursor: default !important;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.editor-static-stage.is-empty {
  background: var(--surface-muted);
  cursor: pointer !important;
}

.editor-static-stage.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}

.editor-stage-upload {
  width: 100%;
  min-height: inherit;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.editor-stage-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.editor-stage-upload-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 9px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
}

.editor-stage-upload-icon .ui-icon {
  width: 23px;
  height: 23px;
}

.editor-stage-upload small {
  line-height: 1.45;
}

.editor-static-stage .editor-stage-transform {
  transform: none !important;
  will-change: auto;
}

.editor-static-stage .editor-stage-transform img,
.editor-static-stage .editor-stage-transform canvas {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.editor-static-stage .editor-stage-transform canvas,
.editor-static-stage.mask-active .editor-stage-transform canvas {
  pointer-events: none !important;
  touch-action: pan-y !important;
  cursor: default !important;
}

.editor-static-stage.is-pannable,
.editor-static-stage.is-panning,
.editor-static-stage.mask-active {
  cursor: default !important;
  touch-action: pan-y !important;
}

.editor-stage-remove {
  position: absolute;
  z-index: 12;
  top: 9px;
  right: 9px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(12, 16, 23, 0.72);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}

.editor-stage-remove:hover {
  background: rgba(12, 16, 23, 0.84);
}

.editor-stage-remove:active {
  transform: scale(0.93);
}

.editor-stage-remove .ui-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

/* Prompt and result options stay compact so the image remains visible nearby. */
.editor-prompts-section {
  margin: 0;
}

.editor-prompt-chat {
  min-height: 54px;
  border-radius: 16px;
}

.editor-prompt-chat .editor-prompt-compose,
.editor-prompt-chat .editor-prompt-chips:empty + .editor-prompt-compose {
  min-height: 54px;
}

.editor-prompt-compose textarea {
  min-height: 48px;
  max-height: 112px;
}

.editor-inline-settings-card {
  margin: 0;
  padding: 10px;
}

.editor-inline-settings-card .editor-final-settings {
  display: grid;
  gap: 9px;
}

.editor-inline-settings-card .editor-option-group,
.editor-inline-settings-card .editor-option-group + .editor-option-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.editor-inline-settings-card .editor-option-group legend {
  margin-bottom: 6px;
  font-size: 11px;
}

.editor-inline-settings-card .editor-resolution-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.editor-inline-settings-card .editor-resolution {
  min-width: 0;
  min-height: 45px;
  padding: 7px 5px;
  border-radius: 12px;
  justify-content: center;
  text-align: center;
}

.editor-inline-settings-card .editor-resolution-default {
  grid-column: 1 / -1;
  min-height: 42px;
}

.editor-inline-settings-card .editor-resolution strong {
  font-size: 11px;
}

.editor-inline-settings-card .editor-resolution small {
  margin-top: 2px;
  font-size: 8.5px;
}

.editor-inline-settings-card .editor-variant-options {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
}

.editor-inline-settings-card .editor-variant-options .editor-option {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 5px;
  font-size: 10px;
}

.editor-step-continue {
  margin-top: 0;
}

@media (max-width: 620px) {
  .editor-workspace-card,
  .editor-inline-settings-card,
  #editorStep3 .editor-checkout-card {
    padding: 9px;
  }

  .editor-static-stage {
    min-height: clamp(190px, 34dvh, 310px);
    max-height: 39dvh;
    border-radius: 15px;
  }

  .editor-workspace-toolbar .editor-auto-instructions-toggle {
    min-width: 126px;
    min-height: 36px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .editor-workspace-toolbar .editor-workspace-action span {
    display: none;
  }

  .editor-stage-remove {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
  }

  .editor-inline-settings-card .editor-resolution-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .editor-inline-settings-card .editor-resolution {
    min-height: 43px;
    padding-inline: 3px;
  }

  .editor-inline-settings-card .editor-resolution small {
    font-size: 8px;
  }
}

@media (max-height: 720px) {
  .editor-static-stage {
    min-height: 175px;
    max-height: 33dvh;
  }

  .editor-prompt-compose textarea {
    min-height: 42px;
    max-height: 88px;
  }
}

/* v2.0.41 — keep the only forward action visible above the app navigation. */
#editorStep2:not([hidden]) .editor-step-continue {
  position: fixed;
  left: 50%;
  bottom: calc(max(10px, var(--bottom-safe)) + 88px);
  z-index: 49;
  width: min(calc(var(--shell) - 36px), calc(100% - 32px));
  margin: 0;
  box-shadow: 0 10px 28px rgba(24, 83, 190, 0.24);
}

#editorStep2:not([hidden]) {
  padding-bottom: 66px;
}

body.keyboard-open #editorStep2 .editor-step-continue {
  display: none;
}

@media (max-width: 520px) {
  #editorStep2:not([hidden]) .editor-step-continue {
    width: calc(100% - 32px);
  }
}

/* Final compact layout: the payment action remains in document flow and fits
   on common Telegram mobile viewports without covering option buttons. */
#editorStep2:not([hidden]) .editor-step-continue {
  position: static;
  left: auto;
  bottom: auto;
  z-index: auto;
  width: 100%;
  margin: 0;
  transform: none;
  box-shadow: none;
}

#editorStep2:not([hidden]) {
  padding-bottom: 0;
}

@media (max-width: 620px) {
  .editor-static-stage {
    min-height: clamp(170px, 27dvh, 235px);
    max-height: 29dvh;
  }
}


/* ========================================================================== */
/* v2.0.42 — compact editor polish, transient notices and checkout summary    */
/* ========================================================================== */

/* Remove the residual SVG margin inherited from the old unframed upload icon.
   The glyph is now mathematically centered inside its own square frame. */
.editor-stage-upload-icon .ui-icon {
  margin: 0;
}

/* Keep the tools row visually attached to the upload area. */
.editor-workspace-toolbar {
  margin-bottom: 2px;
}

/* Guided hints are unavailable before an image exists. */
.editor-workspace-action:disabled {
  opacity: 0.42;
  cursor: default;
}

/* A small translucent plate keeps walkthrough copy readable over light and
   detailed photographs without bringing back a large modal panel. */
.editor-tour-card {
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(7, 12, 23, 0.46);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.editor-tour-card p {
  color: #fff;
  font-weight: 570;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82);
}

/* Improve parameter legibility while preserving the compact four-column row. */
.editor-inline-settings-card .editor-option-group legend {
  font-size: 13px;
  font-weight: 760;
}

.editor-inline-settings-card .editor-resolution strong {
  font-size: 13px;
}

.editor-inline-settings-card .editor-resolution small {
  font-size: 10px;
}

.editor-inline-settings-card .editor-variant-options .editor-option {
  font-size: 12px;
}

/* Current price and forward action share one row. */
.editor-step-payment-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.editor-step-current-price {
  min-width: 78px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  align-content: center;
  gap: 2px;
  background: var(--surface);
}

.editor-step-current-price span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
}

.editor-step-current-price strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.15;
  white-space: nowrap;
}

.editor-step-payment-row .editor-step-continue {
  width: 100%;
  min-width: 0;
  margin: 0;
}

@media (max-width: 620px) {
  .editor-inline-settings-card .editor-resolution small {
    font-size: 9.5px;
  }

  .editor-step-current-price {
    min-width: 72px;
    padding-inline: 9px;
  }

  .editor-step-current-price strong {
    font-size: 14px;
  }

  .editor-step-payment-row .primary-action-label {
    font-size: 11.5px;
  }
}

/* v2.0.43 — editor hints remain available before image upload              */

/* v2.0.44 — simplified processing and result screens                       */
.editor-result-page .editor-results-card {
  padding: 10px;
}

.editor-result-page .editor-result-grid {
  gap: 14px;
}

.editor-result-page .editor-result-actions {
  margin-top: 10px;
}

/* v2.0.45 — quieter processing screen and cancellable admin inputs       */


/* ========================================================================== */
/* v2.0.46 — expanded popular tools and more readable nested actions          */
/* ========================================================================== */

.editor-tools-popover .editor-tool-button {
  font-size: 11px;
  line-height: 1.2;
}

.editor-tools-popover .editor-quick-options button {
  min-height: 52px;
  padding: 9px 8px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 740;
}

.editor-tools-popover .editor-quick-options button:only-child {
  grid-column: 1 / -1;
}

.editor-custom-solution-compose button,
.editor-custom-solution-back {
  font-size: 11.5px;
}

/* ========================================================================== */
/* v2.0.47 — guided first run, AI recommendations and calmer checkout         */
/* ========================================================================== */

/* The editor checkout has only one label. During preparation it stays exactly
   centered and does not show the two inherited loading rings. */
.editor-create-button,
.editor-create-button.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.editor-create-button .primary-action-label {
  width: 100%;
  grid-column: auto;
  text-align: center;
}

.editor-create-button.is-loading::before,
.editor-create-button.is-loading .primary-action-label::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.editor-ai-suggestions {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
}

.editor-ai-suggestions[hidden] {
  display: none;
}

.editor-ai-suggestions-status {
  display: flex;
  align-items: center;
}

.editor-ai-suggestions-status {
  gap: 7px;
}

.editor-ai-suggestions > p {
  margin: 5px 0 9px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.35;
}

.editor-ai-suggestions-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.editor-ai-suggestions-list > button {
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  display: grid;
  align-content: center;
  gap: 3px;
  text-align: left;
  background: var(--surface);
}

.editor-ai-suggestions-list strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.editor-ai-suggestions-list small {
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.3;
}

.editor-ai-suggestions-skip {
  width: 100%;
  margin-top: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--line));
  border-radius: 13px;
  color: color-mix(in srgb, var(--warning) 72%, var(--text));
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
  font-size: 11px;
  font-weight: 700;
}

.editor-ai-suggestions-status {
  justify-content: space-between;
  min-height: 34px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
}

.editor-ai-suggestions-status span {
  flex: 1;
}

.editor-ai-suggestions-status button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--line));
  border-radius: 11px;
  color: color-mix(in srgb, var(--warning) 72%, var(--text));
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 390px) {
  .editor-ai-suggestions-list {
    grid-template-columns: 1fr;
  }
}