/* Элегант — portrait try-on dialog. All state changes come from the real request. */
dialog.elegant-tryon {
  --tryon-gold: #82672f;
  --tryon-line: #ded3bd;
  --tryon-paper: #faf7f0;
  --tryon-split: 50;
  width: min(1040px, 95vw);
  max-width: 1040px;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--tryon-line);
  border-radius: 4px;
  background: #fff;
  color: #191713;
  box-shadow: 0 28px 100px #17120e38;
  overflow: hidden;
  font: 14px/1.65 var(--sans, Arial, sans-serif);
}
.elegant-tryon::backdrop { background: #211c1470; backdrop-filter: blur(7px); }
.elegant-tryon [hidden] { display: none !important; }
.elegant-tryon *, .elegant-tryon *::before, .elegant-tryon *::after { box-sizing: border-box; }
.tryon-shell { padding: 38px 42px 36px; max-height: calc(100dvh - 34px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.elegant-tryon .tryon-close {
  position: absolute; z-index: 4; top: 10px; right: 12px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 50%; background: #fffffff2;
  color: #191713; font-size: 26px; line-height: 1; cursor: pointer;
}
.elegant-tryon .tryon-close:hover { border-color: var(--tryon-line); background: var(--tryon-paper); }
.tryon-close svg { width: 20px; height: 20px; }
.tryon-heading { padding-right: 36px; margin-bottom: 24px; }
.tryon-eyebrow { color: var(--tryon-gold); text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: 2px; margin: 0 0 9px; }
.tryon-title { font: 400 clamp(31px, 4vw, 46px)/1.05 var(--serif, Georgia, serif); margin: 0 0 12px; }
.tryon-product-line { color: #585248; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.tryon-grid { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.tryon-preview-frame {
  position: relative; aspect-ratio: 4 / 5; min-height: 240px; width: 100%;
  border: 1px solid var(--tryon-line); background: var(--tryon-paper); overflow: hidden;
}
.tryon-preview-frame > img, .tryon-before-image {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
}
.tryon-photo-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; text-align: center; color: #645c50; padding: 28px; }
.tryon-photo-placeholder svg { width: 35px; height: 35px; color: var(--tryon-gold); }
.tryon-photo-placeholder p { max-width: 230px; margin: 0; }
.tryon-controls { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.tryon-controls > p { margin: 0; }
.tryon-file-label {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; border: 1px solid var(--tryon-gold); padding: 13px 18px;
  background: #fff; color: #191713; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tryon-file-label:hover { background: var(--tryon-paper); }
.tryon-file-label:focus-within { outline: 2px solid var(--tryon-gold); outline-offset: 4px; }
.tryon-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; }
.tryon-consent { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; min-height: 44px; font-size: 12px; line-height: 1.6; cursor: pointer; }
.tryon-consent input[type="checkbox"] { flex: 0 0 auto; margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--tryon-gold); }
.tryon-consent a, .tryon-privacy a { color: var(--tryon-gold); text-decoration: underline; text-underline-offset: 3px; }
.tryon-privacy { padding: 13px 16px; border: 1px solid var(--tryon-line); background: var(--tryon-paper); font-size: 11px; line-height: 1.65; color: #585248; }
.tryon-privacy summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: #302a21; font-size: 12px; }
.tryon-privacy p { margin: 10px 0 0; }
.elegant-tryon .tryon-submit {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
  padding: 13px 20px; border: 1px solid var(--tryon-gold); border-radius: 0;
  background: var(--tryon-gold); color: #fff; font: 600 13px/1.5 var(--sans, Arial, sans-serif); cursor: pointer;
}
.tryon-submit:hover:not(:disabled) { background: #685022; border-color: #685022; }
.tryon-submit:disabled { opacity: .55; cursor: default; }
.tryon-status { min-height: 24px; font-size: 12px; color: #585248; overflow-wrap: anywhere; }
.tryon-status.is-busy { padding: 13px 15px; border: 1px solid var(--tryon-line); background: var(--tryon-paper); display: flex; align-items: flex-start; gap: 10px; }
.tryon-status.is-busy::before { content: ''; flex: 0 0 16px; width: 16px; height: 16px; border: 2px solid #daceb6; border-top-color: var(--tryon-gold); border-radius: 50%; margin-top: 2px; animation: elegant-tryon-spin .85s linear infinite; }
.tryon-error { color: #982c20; font-size: 12px; padding: 12px 15px; border: 1px solid #e7c4be; background: #fff7f5; overflow-wrap: anywhere; }
.tryon-result { margin-top: 26px; border-top: 1px solid var(--tryon-line); padding-top: 26px; }
.tryon-comparison { position: relative; width: min(100%, 560px); margin: 0 auto; aspect-ratio: 4 / 5; background: var(--tryon-paper); border: 1px solid var(--tryon-line); overflow: hidden; }
.tryon-comparison > img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.tryon-after-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--tryon-split) * 1%) 0 0); }
.tryon-after-clip > img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.tryon-divider { position: absolute; z-index: 2; left: calc(var(--tryon-split) * 1%); top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: #fff; box-shadow: 0 0 0 1px #251e1538; pointer-events: none; }
.tryon-divider::after { content: '↔'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--tryon-line); border-radius: 50%; background: #fff; color: #191713; font-size: 19px; box-shadow: 0 3px 14px #201b1324; }
.tryon-slider { display: block; width: min(100%, 560px); min-height: 44px; margin: 10px auto 0; accent-color: var(--tryon-gold); cursor: ew-resize; }
.tryon-result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.tryon-result-actions button, .tryon-result-actions a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border: 1px solid var(--tryon-gold); color: #191713; background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.tryon-result-actions button:hover, .tryon-result-actions a:hover { background: var(--tryon-paper); }
.tryon-result-note { color: #645c50; font-size: 11px; line-height: 1.6; max-width: 680px; margin: 0 auto; text-align: center; }
.elegant-tryon :is(button, a, input, summary):focus-visible { outline: 2px solid var(--tryon-gold); outline-offset: 4px; }
@keyframes elegant-tryon-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  dialog.elegant-tryon { width: calc(100vw - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 3px; }
  .tryon-shell { padding: 30px 20px calc(24px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .tryon-heading { padding-right: 30px; margin-bottom: 20px; }
  .tryon-title { font-size: 34px; }
  .tryon-grid { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .tryon-preview-frame { max-width: 400px; margin: 0 auto; }
  .tryon-controls { gap: 15px; }
  .elegant-tryon .tryon-close { top: 8px; right: 8px; }
  .tryon-result-actions { display: grid; grid-template-columns: 1fr; }
  .tryon-result-actions button, .tryon-result-actions a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .elegant-tryon, .elegant-tryon *, .elegant-tryon *::before, .elegant-tryon *::after { scroll-behavior: auto; transition: none !important; animation: none !important; }
}

/* Free local mirror: browser canvas only; these styles make no AI or fit claims. */
dialog.elegant-mirror {
  --mirror-gold: #82672f; --mirror-line: #ded3bd; --mirror-paper: #faf7f0;
  width: min(1040px, 95vw); max-width: 1040px; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--mirror-line);
  border-radius: 4px; background: #fff; color: #191713; box-shadow: 0 28px 100px #17120e38;
  font: 14px/1.65 var(--sans, Arial, sans-serif);
}
.elegant-mirror::backdrop { background: #211c1470; backdrop-filter: blur(7px); }
.elegant-mirror [hidden] { display: none !important; }
.elegant-mirror *, .elegant-mirror *::before, .elegant-mirror *::after { box-sizing: border-box; }
.mirror-shell { padding: 38px 42px 36px; max-height: calc(100dvh - 34px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.elegant-mirror .mirror-close { position: absolute; z-index: 4; top: 10px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: #fffffff2; color: #191713; font-size: 26px; cursor: pointer; }
.mirror-close:hover { border-color: var(--mirror-line); background: var(--mirror-paper); }
.mirror-close svg { width: 20px; height: 20px; }
.mirror-heading { margin-bottom: 24px; padding-right: 36px; }
.mirror-heading h2 { font: 400 clamp(31px, 4vw, 46px)/1.05 var(--serif, Georgia, serif); margin: 0 0 12px; }
.mirror-heading > p:first-child { color: var(--mirror-gold); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 9px; }
.mirror-heading p { color: #585248; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.mirror-grid { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.mirror-stage { position: relative; width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--mirror-line); background: var(--mirror-paper); overflow: hidden; }
.mirror-stage canvas, canvas.mirror-stage { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; touch-action: none; cursor: grab; }
.mirror-stage canvas:active, canvas.mirror-stage:active { cursor: grabbing; }
.mirror-stage canvas:focus-visible { outline-offset: -4px; }
.mirror-controls { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mirror-controls p { margin: 0; }
.mirror-upload { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 13px 18px; border: 1px solid var(--mirror-gold); background: #fff; color: #191713; font-weight: 600; font-size: 13px; cursor: pointer; }
.mirror-upload:hover { background: var(--mirror-paper); }
.mirror-upload:focus-within { outline: 2px solid var(--mirror-gold); outline-offset: 4px; }
.mirror-input { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: 0; padding: 0; border: 0; clip-path: inset(50%); }
.mirror-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.mirror-field label { font-weight: 600; color: #302a21; font-size: 12px; }
.mirror-field input[type="range"] { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: var(--mirror-gold); }
.mirror-field input[type="checkbox"] { accent-color: var(--mirror-gold); width: 18px; height: 18px; vertical-align: middle; margin: 0 9px 0 0; }
.mirror-field:has(input[type="checkbox"]) label { min-height: 44px; display: flex; align-items: center; }
.mirror-gallery, .mirror-controls select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--mirror-line); border-radius: 0; background: #fff; color: #191713; font: 12px/1.4 var(--sans, Arial, sans-serif); }
.mirror-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mirror-row button { flex: 1 1 44px; min-width: 44px; min-height: 44px; border: 1px solid var(--mirror-line); background: #fff; color: #191713; padding: 9px 12px; font-size: 12px; cursor: pointer; }
.mirror-row button:hover { background: var(--mirror-paper); }
.mirror-action { display: flex; gap: 10px; flex-wrap: wrap; }
.mirror-action button, .mirror-action a { flex: 1 1 auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border: 1px solid var(--mirror-gold); background: #fff; color: #191713; font: 600 12px/1.5 var(--sans, Arial, sans-serif); cursor: pointer; }
.mirror-action .mirror-save { background: var(--mirror-gold); color: #fff; }
.mirror-action .mirror-download { flex-basis: 100%; background: var(--mirror-paper); color: var(--mirror-gold); text-decoration: underline; text-underline-offset: 3px; }
.mirror-action .mirror-download:hover { background: #f0e9db; }
.mirror-action .mirror-reset:hover:not(:disabled) { background: var(--mirror-paper); }
.mirror-action .mirror-save:hover:not(:disabled) { background: #685022; border-color: #685022; }
.mirror-background-label { display: flex; align-items: center; gap: 11px; min-height: 44px; cursor: pointer; font-size: 12px; font-weight: 600; }
.mirror-background-label input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--mirror-gold); }
.mirror-private-note, .mirror-photo-help, .mirror-background-warning { color: #585248; font-size: 11px; line-height: 1.65; }
.elegant-mirror button:disabled, .elegant-mirror input:disabled, .elegant-mirror select:disabled, .mirror-action[aria-disabled="true"] { opacity: .5; cursor: default; }
.mirror-status { min-height: 20px; color: #585248; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.mirror-error { padding: 12px 15px; border: 1px solid #e7c4be; background: #fff7f5; color: #982c20; font-size: 12px; overflow-wrap: anywhere; }
.mirror-disclaimer { margin-top: 18px; padding: 13px 16px; border-left: 3px solid var(--mirror-gold); background: var(--mirror-paper); color: #585248; font-size: 11px; line-height: 1.65; }
.elegant-mirror :is(button, a, input, select, canvas):focus-visible { outline: 2px solid var(--mirror-gold); outline-offset: 4px; }
@media (max-width: 720px) {
  dialog.elegant-mirror { width: calc(100vw - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .mirror-shell { padding: 30px 20px calc(24px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .mirror-heading { margin-bottom: 20px; padding-right: 30px; }
  .mirror-heading h2 { font-size: 34px; }
  .mirror-grid { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .mirror-stage { max-width: 400px; margin: 0 auto; }
  .elegant-mirror .mirror-close { top: 8px; right: 8px; }
  .mirror-controls { gap: 14px; }
  .mirror-controls > .mirror-action { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .elegant-mirror, .elegant-mirror *, .elegant-mirror *::before, .elegant-mirror *::after { scroll-behavior: auto; transition: none !important; animation: none !important; }
}