/* MemoryRetush app styles — extracted from index.html */

/* Единые бренд-токены (синхрон с Tailwind primary / gold и landing.css) */
    :root {
      --brand-gold: #c9a227;
      --brand-gold-bright: #d4af37;
      --brand-gold-light: #e5c76b;
      --brand-gold-dark: #a8841f;
      --brand-accent: #a8841f;
      --brand-accent-soft: rgba(201, 162, 39, 0.12);
      --brand-accent-ring: rgba(201, 162, 39, 0.28);
      --brand-bg: #f8f7f5;
      --brand-bg-dark: #0c0c0c;
      --brand-ink: #1a1a1a;
      --toast-accent: var(--brand-gold);
      --toast-accent-soft: var(--brand-accent-soft);
    }
    html.dark {
      --brand-accent: var(--brand-gold-light);
      --brand-accent-soft: rgba(201, 162, 39, 0.16);
      --brand-accent-ring: rgba(229, 199, 107, 0.28);
    }

    /* Прозрачный PNG: фон действительно прозрачный; чёрный в макете — часть бренда (буквы), не заливка */
    .header-brand-logo {
      display: block;
      background: transparent;
    }
    /* Смена логотипа в шапке: в tailwind-built.css не всегда есть dark:opacity-* — дублируем через html.dark */
    .brand-logo-theme-light {
      opacity: 1;
      transition: opacity 0.3s ease;
    }
    .brand-logo-theme-dark {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    html.dark .brand-logo-theme-light {
      opacity: 0;
    }
    html.dark .brand-logo-theme-dark {
      opacity: 1;
    }
    .theme-toggle-icons {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
    }
    .theme-toggle-icon {
      width: 1.35rem;
      height: 1.35rem;
      color: #57534e;
      transition: color 0.2s ease, transform 0.2s ease;
    }
    html.dark .theme-toggle-icon {
      color: #fbbf24;
    }
    #theme-toggle:hover .theme-toggle-icon {
      transform: scale(1.08);
    }
    .theme-toggle-icon--moon {
      display: none;
    }
    html.dark .theme-toggle-icon--sun {
      display: none;
    }
    html.dark .theme-toggle-icon--moon {
      display: block;
    }
    .sw-update-banner {
      position: fixed;
      left: 50%;
      bottom: max(1rem, env(safe-area-inset-bottom, 0px));
      transform: translateX(-50%);
      z-index: 99990;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.65rem 1rem;
      max-width: min(28rem, calc(100vw - 1.5rem));
      padding: 0.75rem 1rem;
      border-radius: 12px;
      border: 1px solid rgba(201, 162, 39, 0.45);
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.35);
      animation: toast-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    html.dark .sw-update-banner {
      background: rgba(24, 24, 27, 0.96);
      border-color: rgba(201, 162, 39, 0.35);
    }
    .sw-update-banner__text {
      flex: 1 1 10rem;
      font-size: 0.8125rem;
      line-height: 1.4;
      color: #374151;
    }
    html.dark .sw-update-banner__text {
      color: #e5e7eb;
    }
    .sw-update-banner__btn {
      flex: none;
      padding: 0.45rem 0.85rem;
      border-radius: 8px;
      border: none;
      background: var(--brand-gold);
      color: #111827;
      font-size: 0.8125rem;
      font-weight: 700;
      cursor: pointer;
    }
    .sw-update-banner__btn:hover {
      background: #d4ad2e;
    }
    .sw-update-banner__dismiss {
      flex: none;
      padding: 0.35rem 0.5rem;
      border: none;
      background: transparent;
      color: #6b7280;
      font-size: 0.75rem;
      cursor: pointer;
    }
    html.dark .sw-update-banner__dismiss {
      color: #9ca3af;
    }
    @keyframes fade-up {
      from { opacity: 0; transform: translateY(28px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes hero-glow {
      0%, 100% { opacity: 0.45; }
      50% { opacity: 0.75; }
    }
    @keyframes float-soft {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @keyframes shimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    .animate-fade-up { animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .animate-delay-1 { animation-delay: 0.12s; }
    .animate-delay-2 { animation-delay: 0.24s; }
    .animate-delay-3 { animation-delay: 0.38s; }
    .animate-delay-4 { animation-delay: 0.5s; }
    .animate-delay-5 { animation-delay: 0.62s; }
    .animate-delay-6 { animation-delay: 0.74s; }
    /* feature-plaque-glow удалён: анимация box-shadow на нескольких карточках
       вызывала постоянные repaint и лаги. Используем статичные тени ниже. */
    .feature-plaque-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
      max-width: 42rem;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 2rem;
      position: relative;
    }
    @media (min-width: 480px) {
      .feature-plaque-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
    }
    .feature-plaque-grid::before {
      content: '';
      position: absolute;
      inset: -0.5rem;
      border-radius: 1.25rem;
      background-image: radial-gradient(circle, rgba(201, 162, 39, 0.07) 1px, transparent 1px);
      background-size: 12px 12px;
      pointer-events: none;
      z-index: 0;
      opacity: 0.85;
    }
    html.dark .feature-plaque-grid::before {
      background-image: radial-gradient(circle, rgba(229, 199, 107, 0.06) 1px, transparent 1px);
    }
    .feature-plaque {
      position: relative;
      z-index: 1;
      text-align: center;
      border-radius: 1rem;
      padding: 1.1rem 1rem 1.25rem;
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
      border: 1px solid rgba(180, 150, 60, 0.22);
      background: #ffffff;
      box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.12), 0 4px 24px -8px rgba(0, 0, 0, 0.10);
    }
    html.dark .feature-plaque {
      border-color: rgba(82, 82, 91, 0.85);
      background: #18181b;
      box-shadow: 0 4px 18px -6px rgba(0, 0, 0, 0.4);
    }
    .feature-plaque:hover {
      transform: translateY(-4px);
    }
    html:not(.dark) .feature-plaque:hover {
      border-color: rgba(201, 162, 39, 0.35);
      box-shadow: 0 14px 36px -14px rgba(201, 162, 39, 0.15);
    }
    html.dark .feature-plaque:hover {
      box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.55);
      border-color: rgba(201, 162, 39, 0.35);
    }
    .feature-plaque-value {
      font-size: clamp(1.5rem, 4vw, 2rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.15;
      color: var(--brand-accent);
    }
    html.dark .feature-plaque-value {
      color: var(--brand-gold-light);
    }
    .feature-plaque-label {
      margin-top: 0.35rem;
      font-size: 0.8125rem;
      line-height: 1.35;
      color: #57534e;
    }
    html.dark .feature-plaque-label {
      color: #a1a1aa;
    }
    @media (prefers-reduced-motion: reduce) {
      .feature-plaque {
        animation: none;
        transition: none;
      }
      .feature-plaque:hover {
        transform: none;
      }
    }
    .hero-eyebrow {
      font-size: 0.72rem;
      font-weight: 650;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #a8841f;
      margin-bottom: 0.55rem;
    }
    html.dark .hero-eyebrow {
      color: #e5c76b;
    }
    .hero-title-accent {
      color: #a8841f;
    }
    html.dark .hero-title-accent {
      color: #e5c76b;
    }
    .hero-pricing-bar {
      max-width: 28rem;
      margin: 0 auto 0.85rem;
      padding: 0.5rem 0.85rem 0.55rem;
      border-radius: 0.85rem;
      border: 1px solid rgba(201, 162, 39, 0.32);
      background: rgba(255, 255, 255, 0.9);
      text-align: center;
    }
    html.dark .hero-pricing-bar {
      background: rgba(24, 24, 27, 0.78);
      border-color: rgba(229, 199, 107, 0.22);
    }
    .hero-pricing-main {
      font-size: 0.95rem;
      font-weight: 700;
      color: #7a5c14;
      line-height: 1.3;
    }
    html.dark .hero-pricing-main { color: #e5c76b; }
    .hero-pricing-sub {
      font-size: 0.6875rem;
      color: #78716c;
      margin-top: 0.12rem;
      line-height: 1.3;
    }
    html.dark .hero-pricing-sub { color: #a1a1aa; }
    .hero-welcome-badge {
      display: inline-block;
      margin-top: 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: #047857;
      background: rgba(16, 185, 129, 0.12);
      padding: 0.25rem 0.65rem;
      border-radius: 999px;
    }
    .hero-welcome-badge:not(.hidden) {
      margin-top: 0;
      margin-bottom: 0.55rem;
      font-size: 0.75rem;
      padding: 0.28rem 0.7rem;
      box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25);
    }
    html.dark .hero-welcome-badge {
      color: #6ee7b7;
      background: rgba(16, 185, 129, 0.15);
    }
    .hero-hook {
      max-width: 32rem;
      margin: 0 auto 0.7rem;
      font-size: 0.9375rem;
      line-height: 1.4;
      color: #44403c;
    }
    html.dark .hero-hook {
      color: #d4d4d8;
    }
    .hero-upload-actions {
      margin-top: 0.55rem;
      text-align: center;
    }
    .hero-tool-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0;
      padding: 0.4rem 0.15rem;
      font-size: 0.8125rem;
      font-weight: 600;
      line-height: 1.3;
      color: #a8841f;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 0.18em;
      text-decoration-color: rgba(168, 132, 31, 0.4);
    }
    html.dark .hero-tool-btn {
      color: #e5c76b;
      text-decoration-color: rgba(229, 199, 107, 0.4);
    }
    .hero-tool-btn:hover {
      color: #c9a227;
    }
    .hero-tool-btn:focus-visible {
      outline: 2px solid #c9a227;
      outline-offset: 3px;
      border-radius: 4px;
    }
    .hero-trust-strip {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.4rem 0.65rem;
      max-width: 28rem;
      margin: 0.85rem auto 0;
      padding: 0;
      list-style: none;
    }
    .hero-trust-strip li {
      font-size: 0.75rem;
      font-weight: 600;
      color: #57534e;
      padding: 0.3rem 0.65rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(180, 150, 60, 0.22);
    }
    html.dark .hero-trust-strip li {
      color: #d4d4d8;
      background: rgba(39, 39, 42, 0.75);
      border-color: rgba(251, 191, 36, 0.18);
    }
    .home-faq-list details {
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 0.85rem;
      padding: 0.85rem 1rem;
      background: #fff;
      margin-bottom: 0.5rem;
    }
    html.dark .home-faq-list details {
      background: rgba(24, 24, 27, 0.65);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .home-faq-list summary {
      cursor: pointer;
      font-weight: 600;
      font-size: 0.9375rem;
      list-style: none;
    }
    .home-faq-list summary::-webkit-details-marker { display: none; }
    .home-faq-list details p {
      margin: 0.65rem 0 0;
      font-size: 0.875rem;
      color: #57534e;
      line-height: 1.55;
    }
    html.dark .home-faq-list details p { color: #a1a1aa; }
    .page-enter {
      animation: fade-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    html.splash-skip .page-enter {
      animation: none;
    }
    @media (max-width: 639px) {
      .hero-blob { display: none; }
    }
    #faq-home {
      content-visibility: auto;
      contain-intrinsic-size: 1px 480px;
    }
    .hero-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(56px);
      pointer-events: none;
      animation: hero-glow 12s ease-in-out infinite;
      transform: translateZ(0);
    }
    /* Когда hero вне экрана — не крутить бесконечные анимации */
    .gradient-hero.is-offscreen .hero-blob,
    .gradient-hero.is-offscreen .hero-shimmer,
    .gradient-hero.is-offscreen .upload-zone-hero {
      animation-play-state: paused;
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-blob { animation: none; opacity: 0.5; }
      .upload-zone-hero { animation: none; }
      .hero-shimmer { animation: none; }
      #work-area label.retouch-product-pick:hover > .retouch-product-card,
      #work-area label.retouch-product-pick .peer:checked + .retouch-product-card,
      .retouch-preset-chip:hover {
        transform: none;
      }
    }

    /* Оптимизация: секции ниже первого экрана отрисовываются лениво — браузер
       не строит layout/paint, пока пользователь не доскроллил. Сильно
       снижает работу на старте. Поддерживается Chrome/Edge/Opera/Firefox 125+. */
    section[aria-labelledby='how-it-works-heading'],
    #instructions-retouch,
    #examples-retouch {
      content-visibility: auto;
      contain-intrinsic-size: 1px 980px;
    }
    .hero-shimmer {
      display: none;
    }
    .upload-zone-hero { animation: none; }
    @keyframes celebrate-pop {
      0% { transform: scale(0.98); filter: brightness(1); }
      40% { transform: scale(1.01); filter: brightness(1.03); }
      100% { transform: scale(1); filter: brightness(1); }
    }
    @keyframes sparkle {
      0%, 100% { opacity: 0; transform: translateY(0) scale(0.6); }
      50% { opacity: 1; transform: translateY(-6px) scale(1); }
    }
    .variants-celebrate {
      position: relative;
      animation: celebrate-pop 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .variants-celebrate::after {
      content: '✦';
      position: absolute;
      top: -4px;
      right: 8px;
      font-size: 1.25rem;
      color: rgba(201, 162, 39, 0.85);
      animation: sparkle 1.2s ease-out 0.1s both;
      pointer-events: none;
    }
    @keyframes token-credit-ring {
      0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.55); }
      70% { box-shadow: 0 0 0 14px rgba(201, 162, 39, 0); }
      100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
    }
    @keyframes token-credit-pop {
      0% { transform: scale(1); }
      40% { transform: scale(1.28); }
      100% { transform: scale(1); }
    }
    .token-balance-pill--credit {
      animation: token-credit-ring 0.95s ease-out;
    }
    .token-balance-num--credit {
      animation: token-credit-pop 0.6s cubic-bezier(0.34, 1.45, 0.64, 1);
    }
    @keyframes toast-in {
      from { opacity: 0; transform: translate(-50%, 12px) scale(0.96); }
      to { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
    @keyframes app-toast-enter {
      0% {
        opacity: 0;
        transform: translateY(18px) scale(0.92);
        filter: blur(6px);
      }
      55% {
        opacity: 1;
        filter: blur(0);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }
    @keyframes app-toast-leave {
      0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
      100% {
        opacity: 0;
        transform: translateY(14px) scale(0.9);
        filter: blur(6px);
      }
    }
    @keyframes app-toast-progress {
      from { transform: scaleX(1); }
      to { transform: scaleX(0); }
    }
    .tokens-success-pop--visible {
      animation: toast-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .app-toast-stack {
      position: fixed;
      left: 50%;
      bottom: max(1rem, env(safe-area-inset-bottom, 0px));
      transform: translateX(-50%);
      z-index: 99995;
      display: flex;
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 0.625rem;
      width: min(22.5rem, calc(100vw - 1.5rem));
      pointer-events: none;
    }
    @media (min-width: 640px) {
      .app-toast-stack {
        bottom: auto;
        top: max(4.75rem, calc(env(safe-area-inset-top, 0px) + 3.5rem));
      }
    }
    .app-toast {
      --toast-accent: #c9a227;
      --toast-accent-soft: rgba(201, 162, 39, 0.14);
      --toast-progress: rgba(201, 162, 39, 0.55);
      position: relative;
      overflow: hidden;
      pointer-events: auto;
      width: 100%;
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      padding: 0.8rem 0.85rem 0.85rem 0.9rem;
      border-radius: 14px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(250, 250, 249, 0.94) 100%
      );
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 18px 40px -16px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(0, 0, 0, 0.04);
      backdrop-filter: blur(16px) saturate(1.2);
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
      animation: app-toast-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      will-change: transform, opacity, filter;
      transition: box-shadow 0.25s ease;
    }
    .app-toast:hover {
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 22px 46px -18px rgba(15, 23, 42, 0.32),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    }
    html.dark .app-toast {
      border-color: rgba(255, 255, 255, 0.08);
      background: linear-gradient(
        145deg,
        rgba(39, 39, 42, 0.96) 0%,
        rgba(24, 24, 27, 0.94) 100%
      );
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 20px 44px -18px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    html.dark .app-toast:hover {
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 24px 50px -18px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.07);
    }
    .app-toast.app-toast--leaving {
      animation: app-toast-leave 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      pointer-events: none;
      overflow: hidden;
    }
    .app-toast--success {
      --toast-accent: #16a34a;
      --toast-accent-soft: rgba(34, 197, 94, 0.14);
      --toast-progress: rgba(34, 197, 94, 0.5);
    }
    .app-toast--error {
      --toast-accent: #dc2626;
      --toast-accent-soft: rgba(239, 68, 68, 0.12);
      --toast-progress: rgba(239, 68, 68, 0.45);
    }
    .app-toast--warning {
      --toast-accent: #d97706;
      --toast-accent-soft: rgba(245, 158, 11, 0.14);
      --toast-progress: rgba(245, 158, 11, 0.5);
    }
    .app-toast--info {
      --toast-accent: #c9a227;
      --toast-accent-soft: rgba(201, 162, 39, 0.14);
      --toast-progress: rgba(201, 162, 39, 0.5);
    }
    .app-toast__accent {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--toast-accent);
      opacity: 0.88;
      border-radius: 14px 0 0 14px;
    }
    .app-toast__icon-wrap {
      flex: none;
      width: 2rem;
      height: 2rem;
      margin-top: 0.02rem;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--toast-accent-soft);
    }
    .app-toast__icon {
      flex: none;
      width: 1.05rem;
      height: 1.05rem;
      color: var(--toast-accent);
    }
    .app-toast__body {
      flex: 1;
      min-width: 0;
      padding-top: 0.12rem;
      font-size: 0.8125rem;
      line-height: 1.48;
      font-weight: 500;
      color: #374151;
      letter-spacing: -0.01em;
    }
    html.dark .app-toast__body { color: #e4e4e7; }
    .app-toast__close {
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.65rem;
      height: 1.65rem;
      margin: -0.15rem -0.1rem 0 0;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: #a1a1aa;
      font-size: 1.15rem;
      line-height: 1;
      padding: 0;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }
    .app-toast__close:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #52525b;
      transform: scale(1.05);
    }
    html.dark .app-toast__close:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #e4e4e7;
    }
    .app-toast__progress {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 100%;
      transform-origin: left center;
      background: var(--toast-progress);
      opacity: 0.85;
      animation: app-toast-progress var(--toast-duration, 4.2s) linear forwards;
    }
    .app-toast.app-toast--paused .app-toast__progress {
      animation-play-state: paused;
    }
    @media (prefers-reduced-motion: reduce) {
      .app-toast {
        animation: none;
        filter: none;
      }
      .app-toast.app-toast--leaving {
        animation: none;
        opacity: 0;
      }
      .app-toast__progress {
        display: none;
      }
    }
    @keyframes support-panel-in {
      from { opacity: 0; transform: translateY(14px) scale(0.94); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes support-fab-pulse {
      0%, 100% { box-shadow: 0 12px 36px -10px rgba(201, 162, 39, 0.55), 0 0 0 0 rgba(201, 162, 39, 0.35); }
      50% { box-shadow: 0 14px 40px -8px rgba(201, 162, 39, 0.65), 0 0 0 8px rgba(201, 162, 39, 0); }
    }
    .support-chat-panel--open {
      animation: support-panel-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .support-fab-ring {
      animation: support-fab-pulse 2.8s ease-in-out infinite;
    }
    /* Явный золотой градиент кнопки — не зависит от сборки Tailwind и не сбрасывается в тёмной теме */
    button.support-fab-gold {
      background: linear-gradient(155deg, #f7e8b8 0%, #d4af37 42%, #7a5f12 100%) !important;
      color: #1a1410 !important;
      border: 1px solid rgba(255, 255, 255, 0.45) !important;
      box-shadow:
        0 12px 36px -10px rgba(201, 162, 39, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
    }
    .dark button.support-fab-gold {
      background: linear-gradient(155deg, #f2e2a2 0%, #c9a227 40%, #4a3a0e 100%) !important;
      color: #0c0a09 !important;
      border-color: rgba(252, 211, 77, 0.42) !important;
      box-shadow:
        0 14px 42px -8px rgba(201, 162, 39, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    button.support-fab-gold:hover {
      filter: brightness(1.07);
    }
    button.support-fab-gold svg {
      stroke: currentColor;
      color: inherit;
    }
    .support-backdrop {
      opacity: 0;
      transition: opacity 0.22s ease;
      pointer-events: none;
      cursor: pointer;
      background: rgba(15, 23, 42, 0.22);
    }
    .dark .support-backdrop {
      background: rgba(0, 0, 0, 0.52);
    }
    .support-backdrop.support-backdrop--on {
      opacity: 1;
      pointer-events: auto;
    }
    /* Виджет поддержки: слои ниже модалок (100) и шапки (80), без полноэкранной обёртки */
    .support-backdrop-layer {
      position: fixed;
      inset: 0;
      z-index: 40;
    }
    .support-widget-dock {
      position: fixed;
      z-index: 50;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.75rem;
      pointer-events: none;
      padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
      padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
      padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
      padding-top: 0.5rem;
      font-family: Manrope, system-ui, sans-serif;
    }
    @media (min-width: 640px) {
      .support-widget-dock {
        left: auto;
        width: auto;
        padding: 1.25rem;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
      }
    }
    /* flex только когда панель открыта — иначе display:flex перебивает Tailwind .hidden и окно всегда видно */
    #support-panel.support-chat-panel-inner:not(.hidden) {
      display: flex;
      flex-direction: column;
    }
    .support-chat-panel-inner {
      width: 100%;
      max-width: min(100vw - 1.5rem, 400px);
      max-height: min(532px, calc(100dvh - 5.5rem));
      border-radius: 1rem;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(251, 191, 36, 0.38);
      box-shadow:
        0 24px 64px -12px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    .dark .support-chat-panel-inner {
      background: rgba(12, 12, 14, 0.97);
      border-color: rgba(245, 158, 11, 0.32);
      box-shadow:
        0 28px 70px -14px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    }
    .support-panel-header {
      position: relative;
      flex-shrink: 0;
      padding: 0.9rem 1rem;
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(180, 83, 9, 0.92));
      color: #fff;
      overflow: hidden;
    }
    .dark .support-panel-header {
      background: linear-gradient(135deg, rgba(180, 83, 9, 0.95), rgba(69, 26, 3, 0.96));
    }
    .support-panel-messages {
      flex: 1;
      min-height: 140px;
      overflow-y: auto;
      padding: 0.75rem;
      background: linear-gradient(to bottom, rgba(249, 250, 251, 0.92), rgba(255, 255, 255, 0.98));
    }
    .dark .support-panel-messages {
      background: linear-gradient(to bottom, rgba(24, 24, 27, 0.65), rgba(9, 9, 11, 0.95));
    }
    .support-panel-footer {
      flex-shrink: 0;
      padding: 0.75rem;
      border-top: 1px solid rgba(229, 231, 235, 0.85);
      background: rgba(255, 255, 255, 0.98);
    }
    .dark .support-panel-footer {
      border-top-color: rgba(63, 63, 70, 0.85);
      background: rgba(9, 9, 11, 0.96);
    }
    #support-closed-notice.support-closed-banner {
      flex-shrink: 0;
      padding: 0.6rem 0.75rem;
      text-align: center;
      font-size: 11px;
      line-height: 1.45;
      background: rgba(254, 243, 199, 0.95);
      color: #451a03;
      border-bottom: 1px solid rgba(251, 191, 36, 0.45);
    }
    .dark #support-closed-notice.support-closed-banner {
      background: rgba(69, 26, 3, 0.65);
      color: #fef3c7;
      border-bottom-color: rgba(245, 158, 11, 0.28);
    }
    #support-panel textarea,
    #support-panel input[type='email'] {
      width: 100%;
      font-size: 0.875rem;
      border-radius: 0.75rem;
      border: 1px solid #e5e7eb;
      background: #fff;
      color: #111827;
    }
    .dark #support-panel textarea,
    .dark #support-panel input[type='email'] {
      border-color: #52525b;
      background: #18181b;
      color: #f4f4f5;
    }
    #support-panel textarea::placeholder,
    #support-panel input::placeholder {
      color: #9ca3af;
    }
    .dark #support-panel textarea::placeholder,
    .dark #support-panel input::placeholder {
      color: #71717a;
    }
    .support-msg-empty {
      text-align: center;
      font-size: 0.75rem;
      line-height: 1.6;
      color: #6b7280;
      padding: 1.5rem 0.5rem;
    }
    .dark .support-msg-empty {
      color: #a1a1aa;
    }
    .support-msg-bubble {
      max-width: 88%;
      border-radius: 1rem;
      padding: 0.625rem 0.75rem;
      font-size: 0.875rem;
      line-height: 1.5;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }
    .support-msg-bubble--staff {
      background: #fff;
      border: 1px solid rgba(251, 191, 36, 0.4);
      color: #111827;
    }
    .dark .support-msg-bubble--staff {
      background: #27272a;
      border-color: rgba(245, 158, 11, 0.28);
      color: #f4f4f5;
    }
    .support-msg-bubble--user {
      background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.14), rgba(251, 191, 36, 0.08));
      border: 1px solid rgba(251, 191, 36, 0.38);
      color: #111827;
    }
    .dark .support-msg-bubble--user {
      background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.22), rgba(120, 53, 15, 0.35));
      border-color: rgba(245, 158, 11, 0.3);
      color: #fef3c7;
    }
    .support-msg-bubble .support-msg-meta {
      font-size: 10px;
      margin-top: 0.4rem;
      opacity: 0.62;
    }
    .support-guest-label {
      color: #6b7280;
    }
    .dark .support-guest-label {
      color: #a1a1aa;
    }
    .support-hint {
      color: #9ca3af;
    }
    .dark .support-hint {
      color: #71717a;
    }
    .support-btn-send {
      color: #18181b;
      background: linear-gradient(to bottom, #fde68a, #f59e0b);
      box-shadow: 0 4px 14px -3px rgba(180, 83, 9, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.35);
      min-height: 44px;
    }
    .support-btn-send:hover {
      filter: brightness(1.05);
    }
    .dark .support-btn-send {
      color: #0c0a09;
      background: linear-gradient(to bottom, #fcd34d, #d97706);
      box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.45);
      border-color: rgba(252, 211, 77, 0.35);
    }
    .support-btn-ghost {
      color: #4b5563;
      border: 1px solid transparent;
    }
    .support-btn-ghost:hover {
      border-color: #e5e7eb;
      background: rgba(249, 250, 251, 0.95);
    }
    .dark .support-btn-ghost {
      color: #d4d4d8;
    }
    .dark .support-btn-ghost:hover {
      border-color: #52525b;
      background: rgba(39, 39, 42, 0.85);
    }
    @media (max-width: 480px) {
      .support-chat-panel-inner {
        max-width: 100%;
        width: calc(100vw - 1rem);
        max-height: min(560px, calc(100dvh - 5rem - var(--support-kb, 0px)));
      }
      .support-widget-dock.is-keyboard-open {
        padding-bottom: calc(max(0.75rem, env(safe-area-inset-bottom, 0px)) + var(--support-kb, 0px));
      }
    }

    #support-fab-dot.support-fab-unread-dot {
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
    }
    .dark #support-fab-dot.support-fab-unread-dot {
      box-shadow: 0 0 0 2px #18181b;
    }
    #support-messages::-webkit-scrollbar { width: 6px; }
    #support-messages::-webkit-scrollbar-track {
      background: transparent;
    }
    .dark #support-messages::-webkit-scrollbar-track {
      background: rgba(24, 24, 27, 0.45);
    }
    #support-messages::-webkit-scrollbar-thumb {
      background: rgba(201, 162, 39, 0.38);
      border-radius: 3px;
    }
    .dark #support-messages::-webkit-scrollbar-thumb {
      background: rgba(212, 175, 55, 0.42);
    }
    .load-step.load-step-active {
      color: rgb(17 24 39);
      font-weight: 600;
    }
    .dark .load-step.load-step-active {
      color: rgb(243 244 246);
    }
    .load-step.load-step-active .load-step-dot {
      background: rgb(201 162 39);
      box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
    }
    .load-step.load-step-done {
      opacity: 0.85;
    }
    .load-step.load-step-done .load-step-dot {
      background: rgb(34 197 94);
      box-shadow: none;
    }
    .preview-frame {
      width: 100%;
      max-width: min(100%, 420px);
      aspect-ratio: var(--preview-ar, 3 / 4);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
      background: #fff;
      margin: 0 auto;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      cursor: pointer;
      display: block;
    }
    .preview-frame img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      display: block;
    }
    .result-frame { max-width: min(100%, 420px); }
    .preview-frame:hover { box-shadow: 0 24px 56px rgba(201,162,39,0.15), 0 0 0 1px rgba(201,162,39,0.2); }
    .dark .preview-frame {
      background: rgb(24 24 27);
      box-shadow: 0 22px 52px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    .dark .preview-frame:hover {
      box-shadow: 0 26px 58px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(229, 199, 107, 0.28);
    }
    /* Рамки результатов: шахматка под прозрачный PNG в тёмной теме */
    .dark .preview-frame.result-frame {
      background-color: rgb(24 24 27);
      background-image:
        linear-gradient(45deg, #3f3f46 25%, transparent 25%),
        linear-gradient(-45deg, #3f3f46 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #3f3f46 75%),
        linear-gradient(-45deg, transparent 75%, #3f3f46 75%);
      background-size: 14px 14px;
      background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    }
    /* Модальное сравнение: рамка по размеру фото, без пустых полей по бокам */
    .preview-modal-frame {
      width: fit-content;
      max-width: 100%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
      background: #fff;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }
    .dark .preview-modal-frame {
      background: rgb(30 41 59);
      box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
    }
    .preview-modal-frame img {
      max-height: min(72vh, 640px);
      width: auto;
      max-width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
      vertical-align: middle;
    }
    /* Шахматка под PNG с прозрачностью (после remove.bg) */
    .preview-modal-frame--result {
      background-color: #f4f4f5;
      background-image:
        linear-gradient(45deg, #e4e4e7 25%, transparent 25%),
        linear-gradient(-45deg, #e4e4e7 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e4e4e7 75%),
        linear-gradient(-45deg, transparent 75%, #e4e4e7 75%);
      background-size: 14px 14px;
      background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    }
    .dark .preview-modal-frame--result {
      background-color: rgb(24 24 27);
      background-image:
        linear-gradient(45deg, #3f3f46 25%, transparent 25%),
        linear-gradient(-45deg, #3f3f46 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #3f3f46 75%),
        linear-gradient(-45deg, transparent 75%, #3f3f46 75%);
    }
    #preview-modal-shell {
      transform: translateY(12px) scale(0.99);
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.22s ease;
    }
    #preview-modal.modal-open #preview-modal-shell {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    .variant-card {
      transition: all 0.3s ease;
      border: 1px solid transparent;
      min-width: 0;
      max-width: 100%;
      overflow-x: clip;
      overflow-y: visible;
    }
    .variant-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 48px rgba(0,0,0,0.12);
      border-color: rgba(201,162,39,0.3);
    }
    .variant-card__head {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }
    .variant-actions-bar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        "download download"
        "preview pdf"
        "more more";
      gap: 0.45rem;
      align-items: stretch;
      min-width: 0;
      max-width: 100%;
    }
    .variant-actions-bar .download-btn { grid-area: download; }
    .variant-actions-bar .preview-variant-btn { grid-area: preview; }
    .variant-actions-bar .pdf-variant-btn { grid-area: pdf; }
    .variant-more { grid-area: more; min-width: 0; position: relative; }
    .variant-btn {
      min-height: 2.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    .variant-btn > span:not(.favorite-star-icon):not(.inscribe-trigger-icon):not(.padj-trigger-icon) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }
    .variant-btn__ico {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }
    .variant-btn--primary {
      font-size: 0.9375rem !important;
      font-weight: 700 !important;
    }
    .variant-btn--secondary {
      font-size: 0.8125rem !important;
      font-weight: 600;
    }
    .variant-btn--ghost {
      font-size: 0.8125rem !important;
      font-weight: 600;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 0.75rem;
      background: rgba(255, 255, 255, 0.92);
      color: #57534e;
      padding: 0.55rem 0.65rem;
      transition: background 0.15s, border-color 0.15s;
    }
    html.dark .variant-btn--ghost {
      border-color: rgba(255, 255, 255, 0.1);
      background: rgba(39, 39, 42, 0.85);
      color: #d4d4d8;
    }
    .variant-btn--ghost:hover {
      background: rgba(249, 250, 251, 1);
      border-color: rgba(201, 162, 39, 0.35);
    }
    html.dark .variant-btn--ghost:hover {
      background: rgba(63, 63, 70, 0.9);
    }
    .variant-more__toggle {
      list-style: none;
      cursor: pointer;
      user-select: none;
    }
    .variant-more__toggle::-webkit-details-marker { display: none; }
    .variant-more[open] .variant-more__toggle {
      border-color: rgba(201, 162, 39, 0.45);
      background: rgba(201, 162, 39, 0.1);
    }
    .variant-more__panel {
      position: absolute;
      bottom: calc(100% + 0.35rem);
      left: 0;
      right: 0;
      z-index: 25;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      padding: 0.45rem;
      border-radius: 0.85rem;
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
    }
    html.dark .variant-more__panel {
      border-color: rgba(255, 255, 255, 0.1);
      background: rgba(24, 24, 27, 0.98);
      box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
    }
    .variant-more__panel .favorite-star-btn--active {
      border-color: rgba(201, 162, 39, 0.5);
      background: rgba(201, 162, 39, 0.15);
    }
    .variant-edit-tools {
      margin-top: 0.65rem;
      padding-top: 0.65rem;
      border-top: 1px dashed rgba(0, 0, 0, 0.08);
    }
    html.dark .variant-edit-tools {
      border-top-color: rgba(255, 255, 255, 0.08);
    }
    .variant-edit-tools__label {
      font-size: 0.625rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #78716c;
      margin: 0 0 0.4rem;
    }
    html.dark .variant-edit-tools__label { color: #a1a1aa; }
    .variant-edit-tools__row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.45rem;
    }
    .variant-edit-tools__row .inscribe-trigger,
    .variant-edit-tools__row .padj-trigger {
      margin-top: 0 !important;
      min-height: 2.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      box-sizing: border-box;
      padding-left: 0.35rem;
      padding-right: 0.35rem;
    }
    .variant-edit-tools__row .inscribe-trigger-icon,
    .variant-edit-tools__row .padj-trigger-icon {
      flex-shrink: 0;
      margin-right: 0;
    }

    #variants {
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }
    #variants.variants-layout-stack {
      grid-template-columns: minmax(0, 1fr);
    }
    @media (min-width: 1280px) {
      #variants.variants-layout-triple {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      #variants.variants-layout-triple .variant-btn {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
        font-size: 0.6875rem !important;
        gap: 0.2rem;
      }
      #variants.variants-layout-triple .variant-btn__ico {
        width: 0.875rem;
        height: 0.875rem;
      }
      #variants.variants-layout-triple .variant-btn--primary {
        font-size: 0.75rem !important;
      }
      #variants.variants-layout-triple .variant-edit-tools__row .inscribe-trigger,
      #variants.variants-layout-triple .variant-edit-tools__row .padj-trigger {
        font-size: 0.6875rem !important;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        gap: 0.15rem;
      }
    }
    .retouch-results-col {
      overflow-x: clip;
    }
    .portfolio-dots {
      display: none;
      justify-content: center;
      align-items: center;
      gap: 0.45rem;
      margin-top: 0.85rem;
    }
    .portfolio-dots .pdot {
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 999px;
      background: rgba(156, 163, 175, 0.55);
      border: 0;
      padding: 0;
      cursor: pointer;
      transition: transform 0.2s ease, background 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .portfolio-dots .pdot.active {
      background: rgb(201, 162, 39);
      transform: scale(1.35);
    }
    .dark .portfolio-dots .pdot { background: rgba(113, 113, 122, 0.45); }
    .dark .portfolio-dots .pdot.active { background: rgb(229, 199, 107); }

    #variants-compare-toolbar {
      flex-direction: column;
      align-items: stretch;
      gap: 0.45rem;
    }
    #variants-compare-toolbar > span {
      display: none;
    }
    #variants-compare-toolbar .retouch-variant-filterbar {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      width: 100%;
      gap: 0.25rem;
      padding: 0.3rem !important;
    }
    #variants-compare-toolbar .variant-filter {
      min-height: 2.75rem;
      padding-left: 0.35rem !important;
      padding-right: 0.35rem !important;
      font-size: 0.8125rem !important;
      text-align: center;
      min-width: 0;
      white-space: normal;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    #work-area .retouch-action-bar {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.55rem;
      max-width: 28rem;
      margin-left: auto;
      margin-right: auto;
    }
    .retouch-action-bar__row {
      display: flex;
      gap: 0.5rem;
      align-items: stretch;
    }
    #work-area #process-btn {
      flex: 1.45 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.12rem;
      line-height: 1.15;
    }
    #work-area #process-btn .process-btn__title {
      font-size: 1rem;
      font-weight: 700;
    }
    #work-area #process-btn .process-btn__sub {
      font-size: 0.6875rem;
      font-weight: 600;
      opacity: 0.88;
    }
    #work-area #reset-btn {
      flex: 0.72 1 0;
      min-width: 0;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      font-size: 0.8125rem;
    }

    .retouch-style-accordion > summary {
      list-style: none;
      cursor: pointer;
    }
    .retouch-style-accordion > summary::-webkit-details-marker { display: none; }
    .retouch-style-accordion__chevron {
      margin-left: auto;
      transition: transform 0.2s ease;
      color: #9ca3af;
      flex-shrink: 0;
    }
    .retouch-style-accordion[open] .retouch-style-accordion__chevron {
      transform: rotate(180deg);
    }
    .retouch-style-accordion__body {
      margin-top: 0.85rem;
    }
    .retouch-style-accordion__summary.retouch-style-showcase__hero {
      margin-bottom: 0;
    }
    .retouch-style-accordion:not([open]) > summary.retouch-style-showcase__hero {
      box-shadow:
        0 0 0 2px rgba(201, 162, 39, 0.22),
        0 14px 32px -18px rgba(201, 162, 39, 0.28);
    }
    .retouch-style-accordion[open] > summary.retouch-style-showcase__hero {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-color: rgba(201, 162, 39, 0.38);
    }
    /* ===== Mockup Preview — камень / медальон ===== */
    #mockup-modal { z-index: 95; }
    #mockup-modal-shell {
      transform: translateY(14px) scale(0.98);
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.28s ease;
    }
    #mockup-modal.modal-open #mockup-modal-shell {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    @media (min-width: 768px) {
      #mockup-modal {
        padding: 2vh 2vw !important;
      }
      #mockup-modal-shell {
        width: min(96vw, 1280px) !important;
        max-width: min(96vw, 1280px) !important;
        height: min(96vh, 980px);
        max-height: min(96vh, 980px) !important;
      }
      #mockup-modal .mockup-modal-stage {
        padding: 12px 16px 10px !important;
        overflow: hidden !important;
      }
      #mockup-modal .mockup-webgl-host {
        flex: 1 1 auto;
        height: auto;
        min-height: min(70vh, 720px);
        border-radius: 20px;
      }
    }
    .mockup-scene {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      overflow: hidden;
      min-height: 340px;
      user-select: none;
    }
    /* -- Гранитный памятник -- */
    .mockup-monument {
      background:
        radial-gradient(ellipse 120% 90% at 30% 25%, rgba(80,80,88,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 90% 70% at 70% 75%, rgba(40,40,48,0.12) 0%, transparent 55%),
        linear-gradient(168deg, #3a3a42 0%, #2c2c34 28%, #232329 55%, #1a1a20 100%);
      position: relative;
    }
    .mockup-monument::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      mix-blend-mode: overlay;
      pointer-events: none;
      border-radius: inherit;
    }
    .mockup-monument::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 45% at 38% 22%, rgba(255,255,255,0.06) 0%, transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 40%, rgba(0,0,0,0.15) 100%);
      pointer-events: none;
      border-radius: inherit;
    }

    .mockup-monument-plate {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32px 28px 36px;
    }
    .mockup-monument-portrait {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        0 2px 20px rgba(0,0,0,0.5),
        0 0 0 3px rgba(60,60,68,0.7),
        0 0 0 5px rgba(40,40,48,0.5);
    }
    .mockup-monument-portrait img {
      display: block;
      max-height: min(52vh, 380px);
      width: auto;
      max-width: 100%;
      filter: contrast(0.92) brightness(0.88);
      mix-blend-mode: luminosity;
    }
    .mockup-monument-portrait::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 90% 80% at 50% 40%, transparent 50%, rgba(0,0,0,0.2) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 30%);
      pointer-events: none;
    }
    .mockup-monument-name {
      margin-top: 18px;
      text-align: center;
      font-family: 'Georgia', 'Times New Roman', serif;
      color: rgba(220, 210, 190, 0.8);
      font-size: 15px;
      letter-spacing: 0.12em;
      text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }
    .mockup-monument-dates {
      margin-top: 5px;
      text-align: center;
      font-family: 'Georgia', 'Times New Roman', serif;
      color: rgba(200, 190, 170, 0.6);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    /* тонкая гравированная рамка на плите */
    .mockup-monument-border {
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(180,170,150,0.12);
      border-radius: 4px;
      pointer-events: none;
      z-index: 1;
    }
    .mockup-monument-corner {
      position: absolute;
      width: 18px; height: 18px;
      border-color: rgba(180,170,150,0.18);
      border-style: solid;
      z-index: 1;
      pointer-events: none;
    }
    .mockup-monument-corner.tl { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
    .mockup-monument-corner.tr { top: 6px; right: 6px; border-width: 2px 2px 0 0; }
    .mockup-monument-corner.bl { bottom: 6px; left: 6px; border-width: 0 0 2px 2px; }
    .mockup-monument-corner.br { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; }

    /* -- Медальон / Стекло -- */
    .mockup-medallion-scene {
      background:
        radial-gradient(ellipse 120% 90% at 50% 40%, rgba(100,95,88,0.12) 0%, transparent 60%),
        linear-gradient(160deg, #504a44 0%, #403a35 25%, #342f2b 50%, #282420 75%, #1e1b18 100%);
      position: relative;
    }
    .mockup-medallion-scene::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      mix-blend-mode: overlay;
      pointer-events: none;
      border-radius: inherit;
    }
    .mockup-medallion-wrap {
      position: relative; z-index: 2;
      display: flex; flex-direction: column; align-items: center;
      padding: 40px 24px 32px;
    }
    /* Стеклянная оправа — общий контейнер */
    .mockup-glass {
      position: relative;
      transform-style: preserve-3d;
      display: inline-block;
      transition: clip-path 0.35s ease, border-radius 0.35s ease, width 0.35s ease, height 0.35s ease;
    }
    /* Толщина стекла — торец */
    .mockup-glass-edge {
      position: absolute; inset: 0;
      border: 3px solid rgba(180,190,200,0.5);
      pointer-events: none; z-index: 4;
      transition: inherit;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 6px 24px rgba(0,0,0,0.4),
        0 2px 6px rgba(0,0,0,0.25);
    }
    /* Фото внутри стекла */
    .mockup-glass-photo {
      position: relative; overflow: hidden;
      background: #181820;
      transition: clip-path 0.35s ease, border-radius 0.35s ease, width 0.35s ease, height 0.35s ease;
      width: 200px; height: 260px;
    }
    .mockup-glass-photo img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 20%;
      filter: contrast(1.04) saturate(0.95);
    }
    /* Блик стекла — реалистичный */
    .mockup-glass-photo::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 20%, transparent 45%, transparent 75%, rgba(255,255,255,0.03) 100%),
        radial-gradient(ellipse 60% 40% at 25% 18%, rgba(255,255,255,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 75% 80%, rgba(255,255,255,0.04) 0%, transparent 60%);
      pointer-events: none; z-index: 3;
      transition: inherit;
    }
    /* Тень 3D */
    .mockup-glass::after {
      content: '';
      position: absolute;
      bottom: -12px; left: 10%; right: 10%; height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, transparent 70%);
      filter: blur(5px);
      pointer-events: none; z-index: 0;
    }

    /* === Формы стекла === */
    /* Арка (по умолчанию) */
    .mockup-glass--arch .mockup-glass-photo { width: 200px; height: 270px; }
    .mockup-glass--arch .mockup-glass-edge,
    .mockup-glass--arch .mockup-glass-photo {
      border-radius: 50% 50% 4px 4px;
    }
    .mockup-glass--arch .mockup-glass-photo img { object-position: center 15%; }

    /* Овал */
    .mockup-glass--oval .mockup-glass-photo { width: 200px; height: 270px; }
    .mockup-glass--oval .mockup-glass-edge,
    .mockup-glass--oval .mockup-glass-photo { border-radius: 50%; }
    .mockup-glass--oval .mockup-glass-photo img { object-position: center 18%; }

    /* Прямоугольник */
    .mockup-glass--rect .mockup-glass-photo { width: 200px; height: 260px; }
    .mockup-glass--rect .mockup-glass-edge,
    .mockup-glass--rect .mockup-glass-photo { border-radius: 6px; }

    /* Круг */
    .mockup-glass--circle .mockup-glass-photo { width: 250px; height: 250px; }
    .mockup-glass--circle .mockup-glass-edge,
    .mockup-glass--circle .mockup-glass-photo { border-radius: 50%; }
    .mockup-glass--circle .mockup-glass-photo img { object-position: center 30%; }

    /* Октагон (гранёный): пропорции как у медальона 22×30 см (ширина × высота) */
    .mockup-glass--octagon .mockup-glass-photo { width: 220px; height: 300px; aspect-ratio: 22 / 30; }
    .mockup-glass--octagon .mockup-glass-edge,
    .mockup-glass--octagon .mockup-glass-photo {
      clip-path: polygon(22% 0%, 78% 0%, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0% 78%, 0% 22%);
      border-radius: 0;
    }
    .mockup-glass--octagon .mockup-glass-photo img { object-position: center 32%; }

    /* Волна (фигурная) */
    .mockup-glass--wave .mockup-glass-photo { width: 220px; height: 290px; }
    .mockup-glass--wave .mockup-glass-edge,
    .mockup-glass--wave .mockup-glass-photo {
      clip-path: url(#mockup-clip-wave);
      border-radius: 0;
    }
    .mockup-glass--wave .mockup-glass-photo img { object-position: center 14%; transform: scale(1.03); }

    /* Капля */
    .mockup-glass--drop .mockup-glass-photo { width: 220px; height: 280px; }
    .mockup-glass--drop .mockup-glass-edge,
    .mockup-glass--drop .mockup-glass-photo {
      border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    }
    .mockup-glass--drop .mockup-glass-photo img { object-position: center 14%; transform: scale(1.03); }

    /* clip-path формам — убираем border, оставляем тень */
    .mockup-glass--octagon .mockup-glass-edge,
    .mockup-glass--wave .mockup-glass-edge {
      border: none;
      box-shadow:
        0 6px 24px rgba(0,0,0,0.4),
        0 2px 6px rgba(0,0,0,0.25);
    }

    /* Подпись */
    .mockup-medallion-label {
      margin-top: 20px;
      text-align: center;
      font-family: 'Georgia', 'Times New Roman', serif;
      color: rgba(210,200,180,0.75);
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    }

    /* Выбор формы */
    .mockup-shape-picker {
      display: flex; flex-wrap: wrap; gap: 5px;
      justify-content: center;
    }
    .mockup-shape-btn {
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 8px;
      border: 2px solid transparent;
      background: rgba(0,0,0,0.04);
      cursor: pointer;
      transition: all 0.18s ease;
      padding: 0;
    }
    .dark .mockup-shape-btn { background: rgba(255,255,255,0.06); }
    .mockup-shape-btn:hover {
      border-color: rgba(201,162,39,0.4);
      transform: scale(1.08);
    }
    .mockup-shape-btn--active {
      border-color: rgb(201,162,39);
      background: rgba(201,162,39,0.12);
      transform: scale(1.08);
    }
    .mockup-shape-btn svg {
      width: 20px; height: 20px;
      fill: currentColor;
      opacity: 0.7;
    }
    .mockup-shape-btn--active svg { opacity: 1; }

    /* -- Переключатель вида -- */
    .mockup-tabs {
      display: flex;
      gap: 4px;
      padding: 3px;
      border-radius: 12px;
      background: rgba(0,0,0,0.06);
    }
    .dark .mockup-tabs { background: rgba(255,255,255,0.06); }
    .mockup-tab {
      padding: 7px 16px;
      border-radius: 9px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      background: transparent;
      color: inherit;
      opacity: 0.6;
      transition: all 0.2s ease;
    }
    .mockup-tab:hover { opacity: 0.85; }
    .mockup-tab--active {
      background: white;
      opacity: 1;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
    .dark .mockup-tab--active {
      background: rgba(255,255,255,0.12);
      color: #fff;
    }
    /* сцены прячем/показываем */
    .mockup-view { display: none; }
    .mockup-view--active { display: flex; flex-direction: column; }

    /* WebGL 3D-превью изделия */
    .mockup-webgl-host {
      position: relative;
      width: 100%;
      min-height: min(62vh, 520px);
      height: min(62vh, 520px);
      border-radius: 16px;
      overflow: hidden;
      background:
        radial-gradient(ellipse 90% 70% at 50% 35%, rgba(80, 75, 68, 0.25) 0%, transparent 55%),
        linear-gradient(165deg, #3d3834 0%, #2a2622 45%, #1a1816 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 0 80px rgba(0, 0, 0, 0.35);
    }
    .mockup-webgl-host--monument {
      background:
        radial-gradient(ellipse 90% 70% at 50% 35%, rgba(60, 60, 68, 0.2) 0%, transparent 55%),
        linear-gradient(165deg, #32323a 0%, #222228 45%, #141418 100%);
    }
    .mockup-webgl-host::after {
      content: '';
      pointer-events: none;
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(ellipse 75% 65% at 50% 42%, transparent 40%, rgba(0, 0, 0, 0.28) 100%),
        linear-gradient(180deg, rgba(255, 160, 80, 0.05) 0%, transparent 28%, rgba(20, 8, 30, 0.18) 100%);
      mix-blend-mode: soft-light;
    }
    .mockup-webgl-host--monument::after {
      background:
        radial-gradient(ellipse 70% 60% at 50% 40%, transparent 35%, rgba(10, 4, 8, 0.38) 100%),
        linear-gradient(120deg, rgba(255, 120, 50, 0.08) 0%, transparent 45%, rgba(80, 40, 120, 0.1) 100%);
    }
    .mockup-webgl-host canvas {
      display: block;
      width: 100% !important;
      height: 100% !important;
      touch-action: none;
      outline: none;
    }
    .mockup-webgl-loading {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      font-size: 12px;
      color: rgba(220, 210, 190, 0.85);
      background: rgba(20, 18, 16, 0.72);
      backdrop-filter: blur(4px);
      z-index: 2;
    }
    .mockup-webgl-loading.hidden { display: none; }
    .mockup-webgl-loading__spinner {
      width: 28px;
      height: 28px;
      border: 3px solid rgba(201, 162, 39, 0.25);
      border-top-color: rgba(201, 162, 39, 0.9);
      border-radius: 50%;
      animation: mockup-spin 0.85s linear infinite;
    }
    @keyframes mockup-spin {
      to { transform: rotate(360deg); }
    }
    .mockup-3d-hint {
      text-align: center;
      font-size: 10px;
      color: rgba(120, 113, 108, 0.9);
      margin-top: 8px;
      letter-spacing: 0.04em;
    }
    .dark .mockup-3d-hint { color: rgba(161, 161, 170, 0.85); }
    .mockup-hint-mobile { display: none; }
    .mockup-sheet-handle { display: none; }

    /* ===== Mockup — только мобильная вёрстка (ПК не затрагиваем) ===== */
    @media (max-width: 767px) {
      .mockup-hint-desktop { display: none; }
      .mockup-hint-mobile { display: inline; }

      #mockup-modal {
        padding: 0 !important;
        align-items: flex-end !important;
        background: rgba(0, 0, 0, 0.62);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      #mockup-modal-shell {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(96dvh, 100%) !important;
        height: min(96dvh, 100%);
        border-radius: 22px 22px 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35) !important;
        overflow: hidden;
      }
      #mockup-modal.modal-open #mockup-modal-shell {
        transform: translateY(0) scale(1);
      }
      .mockup-sheet-handle {
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: rgba(120, 113, 108, 0.35);
        margin: 10px auto 0;
        flex-shrink: 0;
      }
      html.dark .mockup-sheet-handle {
        background: rgba(161, 161, 170, 0.35);
      }
      #mockup-modal .mockup-modal-header {
        padding: 8px 16px 10px !important;
        border-bottom-color: rgba(0, 0, 0, 0.06) !important;
      }
      #mockup-modal .mockup-modal-header h3 {
        font-size: 1.05rem !important;
        letter-spacing: -0.02em;
      }
      #mockup-modal .mockup-header-sub {
        display: none;
      }
      #mockup-modal .mockup-close-x {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.04);
        font-size: 1.5rem;
      }
      html.dark #mockup-modal .mockup-close-x {
        background: rgba(255, 255, 255, 0.06);
      }
      #mockup-modal .mockup-modal-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
        padding: 10px 14px !important;
      }
      #mockup-modal .mockup-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 0.4rem;
        padding: 4px;
        border-radius: 14px;
      }
      #mockup-modal .mockup-tab {
        min-height: 2.75rem;
        width: 100%;
        justify-content: center;
        border-radius: 11px;
        font-size: 0.9rem;
        font-weight: 600;
      }
      #mockup-modal .mockup-shape-picker.is-visible {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.45rem;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: 2px 2px 6px;
        margin: 0;
        scrollbar-width: none;
      }
      #mockup-modal .mockup-shape-picker.is-visible::-webkit-scrollbar { display: none; }
      #mockup-modal .mockup-shape-btn {
        width: 48px;
        height: 48px;
        flex: 0 0 auto;
        scroll-snap-align: start;
        border-radius: 14px;
      }
      #mockup-modal .mockup-modal-stage {
        padding: 8px 10px 6px !important;
        overflow: hidden !important;
        flex: 1 1 auto;
        min-height: 0;
      }
      #mockup-modal .mockup-webgl-host {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        min-height: min(58dvh, 500px) !important;
        border-radius: 18px;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.07),
          0 12px 36px rgba(0, 0, 0, 0.22);
      }
      #mockup-modal .mockup-3d-hint {
        margin-top: 8px;
        margin-bottom: 2px;
        font-size: 11px;
        letter-spacing: 0.02em;
        opacity: 0.95;
      }
      #mockup-modal .mockup-modal-footer {
        padding: 10px 14px max(14px, env(safe-area-inset-bottom, 14px)) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        background: linear-gradient(180deg, rgba(255,255,255,0.92), #fff);
        gap: 0.5rem !important;
      }
      html.dark #mockup-modal .mockup-modal-footer {
        border-top-color: rgba(255, 255, 255, 0.08);
        background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgb(17, 24, 39));
      }
      #mockup-modal .mockup-modal-actions {
        display: grid !important;
        grid-template-columns: 1.15fr 0.85fr;
        width: 100%;
        margin-left: 0 !important;
        gap: 0.45rem;
      }
      #mockup-modal #mockup-export-btn,
      #mockup-modal #mockup-export-glb-btn,
      #mockup-modal #mockup-reset-view,
      #mockup-modal #mockup-close-bottom {
        width: 100%;
        min-height: 3rem;
        margin-top: 0 !important;
        font-size: 0.9rem !important;
        border-radius: 14px;
        justify-content: center;
      }
      #mockup-modal #mockup-action-hint {
        width: 100%;
        text-align: center;
        order: -1;
        font-size: 11px !important;
      }
      #mockup-modal #mockup-reset-view {
        grid-column: 1 / -1;
      }
      #mockup-modal .mockup-modal-actions {
        grid-template-columns: 1fr 1fr;
      }
    }

    html.mockup-scroll-lock,
    html.mockup-scroll-lock body {
      overflow: hidden !important;
      overscroll-behavior: none;
    }

    .mockup-glass-depth {
      position: absolute;
      inset: -3px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(200,200,210,0.15) 40%, rgba(80,80,90,0.25) 100%);
      transform: translateZ(-8px);
      filter: blur(0.3px);
      pointer-events: none;
      clip-path: inherit;
    }
    .mockup-glass--heart .mockup-glass-photo { width: 220px; height: 220px; }
    .mockup-glass--heart .mockup-glass-edge,
    .mockup-glass--heart .mockup-glass-photo,
    .mockup-glass--heart .mockup-glass-depth {
      clip-path: url(#mockup-clip-heart);
    }
    .mockup-glass--heart .mockup-glass-photo img { object-position: center 22%; }

    .retouch-product-3d-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      margin-top: 0.65rem;
      width: 100%;
      padding: 0.45rem 0.65rem;
      border-radius: 0.65rem;
      border: 1px solid rgba(201, 162, 39, 0.35);
      background: rgba(201, 162, 39, 0.1);
      color: #92400e;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }
    .retouch-product-3d-btn:hover {
      background: rgba(201, 162, 39, 0.18);
      border-color: rgba(201, 162, 39, 0.55);
    }
    .dark .retouch-product-3d-btn {
      color: #fbbf24;
      background: rgba(201, 162, 39, 0.14);
    }
    .retouch-product-3d-btn svg {
      width: 14px;
      height: 14px;
      opacity: 0.85;
    }

    /* Селектор гранита */
    .mockup-granite-picker { display: flex; gap: 6px; }
    .mockup-granite-swatch {
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: border-color 0.15s, transform 0.15s;
      box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    }
    .mockup-granite-swatch:hover { transform: scale(1.12); }
    .mockup-granite-swatch--active {
      border-color: rgb(201,162,39);
      transform: scale(1.12);
    }
    .mockup-granite-swatch[data-granite="black"] {
      background: linear-gradient(135deg, #2c2c34, #1a1a20);
    }
    .mockup-granite-swatch[data-granite="dark-gray"] {
      background: linear-gradient(135deg, #4a4a52, #3a3a42);
    }
    .mockup-granite-swatch[data-granite="red"] {
      background: linear-gradient(135deg, #5c3030, #3d2020);
    }
    .mockup-granite-swatch[data-granite="green"] {
      background: linear-gradient(135deg, #2e3e2e, #1e2e1e);
    }

    @media (max-width: 639px) {
      .mockup-monument-portrait img { max-height: min(42vh, 280px); }
      .mockup-shape-btn { width: 44px; height: 44px; }
      .mockup-granite-swatch { width: 44px; height: 44px; }
      .mockup-monument-plate { padding: 20px 16px 24px; }
      .mockup-glass-photo { width: 160px !important; height: 210px !important; }
      .mockup-glass--arch .mockup-glass-photo { width: 160px !important; height: 220px !important; }
      .mockup-glass--oval .mockup-glass-photo { width: 160px !important; height: 220px !important; }
      .mockup-glass--circle .mockup-glass-photo { width: 200px !important; height: 200px !important; }
      .mockup-glass--octagon .mockup-glass-photo { width: 176px !important; height: 240px !important; aspect-ratio: 22 / 30; }
      .mockup-glass--wave .mockup-glass-photo { width: 175px !important; height: 230px !important; }
      .mockup-glass--drop .mockup-glass-photo { width: 180px !important; height: 225px !important; }
      .mockup-glass--heart .mockup-glass-photo { width: 190px !important; height: 190px !important; }
      .retouch-product-3d-btn { min-height: 2.5rem; font-size: 0.75rem; }
      .mockup-monument-name { font-size: 13px; }
      .mockup-monument-dates { font-size: 11px; }
    }

    /* Избранное на карточке варианта — широкая кнопка, читаемая подпись */
    .favorite-star-btn {
      border-width: 1px;
      appearance: none;
      -webkit-appearance: none;
    }
    .favorite-star-btn:focus-visible {
      outline: 2px solid rgb(217 119 6);
      outline-offset: 2px;
    }
    .favorite-star-btn--active {
      border-color: rgba(180, 83, 9, 0.55) !important;
      background: rgba(251, 191, 36, 0.22) !important;
      color: rgb(120 53 15);
    }
    html.dark .favorite-star-btn--active {
      border-color: rgba(251, 191, 36, 0.45) !important;
      background: rgba(120 53 15 / 0.35) !important;
      color: rgb(253 230 138);
    }
    .preview-favorite-btn--on {
      border-color: rgba(180, 83, 9, 0.55);
      background: rgba(251, 191, 36, 0.2);
      color: rgb(120 53 15);
    }
    html.dark .preview-favorite-btn--on {
      border-color: rgba(251, 191, 36, 0.42);
      background: rgba(120 53 15 / 0.32);
      color: rgb(253 230 138);
    }
    .upload-zone {
      border: 2px dashed rgba(201,162,39,0.6);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
      scroll-margin-top: 5.75rem;
    }
    .upload-zone:hover { border-color: #c9a227; box-shadow: 0 0 0 4px rgba(201,162,39,0.12); }
    .upload-zone:focus { outline: none; }
    .upload-zone:focus-visible {
      border-color: #c9a227;
      box-shadow: 0 0 0 4px rgba(201,162,39,0.22), 0 12px 40px rgba(201,162,39,0.08);
    }
    .upload-zone.dragover { border-color: #e5c76b; box-shadow: 0 0 0 6px rgba(201,162,39,0.2); transform: scale(1.01); }
    @keyframes upload-zone-post-splash {
      0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.42); }
      55% { box-shadow: 0 0 0 16px rgba(201, 162, 39, 0); }
      100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
    }
    .upload-zone--post-splash {
      animation: upload-zone-post-splash 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.2s 2;
    }
    @media (prefers-reduced-motion: reduce) {
      .upload-zone--post-splash {
        animation: none;
      }
    }
    .modal-panel {
      transform: translateY(18px);
      opacity: 0;
      transition: all 0.22s ease;
    }
    #tokens-modal.modal-open .modal-panel {
      transform: translateY(0);
      opacity: 1;
    }
    .tokens-currency-btn {
      border-color: rgba(0, 0, 0, 0.12);
      background: rgba(255, 255, 255, 0.7);
      color: #374151;
    }
    html.dark .tokens-currency-btn {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(24, 24, 27, 0.55);
      color: #d4d4d8;
    }
    .tokens-currency-btn:hover {
      border-color: rgba(201, 162, 39, 0.45);
    }
    .tokens-currency-btn.is-active {
      border-color: rgba(201, 162, 39, 0.75);
      background: rgba(251, 191, 36, 0.14);
      color: #92400e;
      box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.18);
    }
    html.dark .tokens-currency-btn.is-active {
      border-color: rgba(251, 191, 36, 0.45);
      background: rgba(251, 191, 36, 0.12);
      color: #fcd34d;
    }
    .tokens-modal-panel {
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      max-width: 32rem;
      max-height: min(92dvh, 640px);
      -webkit-overflow-scrolling: touch;
    }
    .tokens-modal-panel::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 5.5rem;
      background:
        radial-gradient(90% 120% at 12% -20%, rgba(201, 162, 39, 0.22), transparent 58%),
        radial-gradient(70% 100% at 88% -10%, rgba(168, 132, 31, 0.14), transparent 55%);
      pointer-events: none;
    }
    .tokens-modal-hero {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .tokens-modal-hero h3 {
      font-size: 1.2rem;
      line-height: 1.25;
      font-weight: 700;
      color: #111827;
      letter-spacing: -0.01em;
    }
    html.dark .tokens-modal-hero h3 { color: #fafafa; }
    .tokens-modal-hero p {
      margin-top: 0.25rem;
      font-size: 0.75rem;
      line-height: 1.4;
      color: #6b7280;
    }
    html.dark .tokens-modal-hero p { color: #a1a1aa; }
    .tokens-modal-hero .tokens-modal-lead {
      margin-top: 0.45rem;
      padding: 0.45rem 0.65rem;
      border-radius: 0.65rem;
      font-size: 0.8125rem;
      font-weight: 700;
      line-height: 1.35;
      color: #78350f;
      background: rgba(251, 191, 36, 0.16);
      border: 1px solid rgba(201, 162, 39, 0.35);
    }
    html.dark .tokens-modal-hero .tokens-modal-lead {
      color: #fde68a;
      background: rgba(251, 191, 36, 0.12);
      border-color: rgba(251, 191, 36, 0.28);
    }
    .tokens-modal-close {
      flex-shrink: 0;
      width: 2.25rem;
      height: 2.25rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.75rem;
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.75);
      color: #6b7280;
      font-size: 1.25rem;
      line-height: 1;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .tokens-modal-close:hover {
      color: #374151;
      border-color: rgba(201, 162, 39, 0.35);
      background: rgba(251, 191, 36, 0.1);
    }
    html.dark .tokens-modal-close {
      border-color: rgba(255, 255, 255, 0.1);
      background: rgba(39, 39, 42, 0.65);
      color: #a1a1aa;
    }
    html.dark .tokens-modal-close:hover {
      color: #e4e4e7;
      border-color: rgba(251, 191, 36, 0.35);
      background: rgba(251, 191, 36, 0.1);
    }
    .tokens-packs-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.5rem;
      padding-top: 0.35rem;
    }
    .token-pack {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.1rem;
      min-height: 5.5rem;
      padding: 0.65rem 0.4rem 0.55rem;
      border-radius: 1rem;
      border: 1.5px solid rgba(0, 0, 0, 0.08);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%);
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
      text-align: center;
    }
    html.dark .token-pack {
      border-color: rgba(255, 255, 255, 0.1);
      background: linear-gradient(180deg, rgba(39, 39, 42, 0.92) 0%, rgba(24, 24, 27, 0.88) 100%);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    }
    .token-pack:hover {
      border-color: rgba(201, 162, 39, 0.45);
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(201, 162, 39, 0.12);
    }
    .token-pack.is-selected {
      border-color: rgba(201, 162, 39, 0.85);
      background: linear-gradient(180deg, rgba(255, 251, 235, 0.98) 0%, rgba(254, 243, 199, 0.55) 100%);
      box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.2), 0 14px 30px rgba(201, 162, 39, 0.16);
    }
    html.dark .token-pack.is-selected {
      border-color: rgba(251, 191, 36, 0.55);
      background: linear-gradient(180deg, rgba(63, 47, 20, 0.55) 0%, rgba(39, 39, 42, 0.92) 100%);
      box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18), 0 14px 30px rgba(0, 0, 0, 0.35);
    }
    .token-pack__badge {
      position: absolute;
      top: -0.45rem;
      left: 50%;
      transform: translateX(-50%);
      padding: 0.12rem 0.45rem;
      border-radius: 999px;
      font-size: 0.5625rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #78350f;
      background: linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
      box-shadow: 0 4px 12px rgba(201, 162, 39, 0.28);
      white-space: nowrap;
    }
    html.dark .token-pack__badge {
      color: #422006;
    }
    .token-pack__amount {
      font-size: 1.35rem;
      font-weight: 800;
      line-height: 1;
      color: #111827;
      font-variant-numeric: tabular-nums;
    }
    html.dark .token-pack__amount { color: #fafafa; }
    .token-pack__unit {
      font-size: 0.625rem;
      font-weight: 600;
      color: #6b7280;
      line-height: 1.2;
    }
    html.dark .token-pack__unit { color: #a1a1aa; }
    .token-pack__price {
      margin-top: 0.2rem;
      font-size: 0.6875rem;
      font-weight: 700;
      color: #92400e;
      line-height: 1.25;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.1rem;
    }
    html.dark .token-pack__price { color: #fcd34d; }
    .token-pack__price-byn { display: block; }
    .token-pack__price-rub {
      display: block;
      font-size: 0.625rem;
      font-weight: 600;
      color: #78716c;
      line-height: 1.2;
    }
    html.dark .token-pack__price-rub { color: #a8a29e; }
    .tokens-custom-row {
      margin-top: 0.85rem;
      padding: 0.75rem;
      border-radius: 0.9rem;
      border: 1px dashed rgba(0, 0, 0, 0.1);
      background: rgba(249, 250, 251, 0.7);
    }
    html.dark .tokens-custom-row {
      border-color: rgba(255, 255, 255, 0.1);
      background: rgba(39, 39, 42, 0.45);
    }
    .tokens-custom-row label {
      display: block;
      margin-bottom: 0.4rem;
      font-size: 0.6875rem;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    html.dark .tokens-custom-row label { color: #a1a1aa; }
    .tokens-custom-input {
      width: 100%;
      min-height: 2.75rem;
      padding: 0.55rem 0.75rem;
      border-radius: 0.75rem;
      border: 1px solid rgba(0, 0, 0, 0.12);
      background: #fff;
      font-size: 1rem;
      font-weight: 600;
      color: #111827;
      text-align: center;
    }
    html.dark .tokens-custom-input {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(24, 24, 27, 0.85);
      color: #fafafa;
    }
    .tokens-summary {
      margin-top: 0.85rem;
      padding: 0.75rem 0.85rem;
      border-radius: 0.9rem;
      border: 1px solid rgba(201, 162, 39, 0.25);
      background: linear-gradient(180deg, rgba(255, 251, 235, 0.65) 0%, rgba(254, 243, 199, 0.28) 100%);
    }
    html.dark .tokens-summary {
      border-color: rgba(251, 191, 36, 0.22);
      background: linear-gradient(180deg, rgba(63, 47, 20, 0.35) 0%, rgba(39, 39, 42, 0.55) 100%);
    }
    #tokens-price-line {
      font-size: 0.9375rem;
      font-weight: 700;
      color: #78350f;
      line-height: 1.35;
    }
    html.dark #tokens-price-line { color: #fde68a; }
    .tokens-modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    .tokens-modal-actions .tokens-btn-cancel {
      padding: 0.55rem 1rem;
      border-radius: 0.85rem;
      border: 1px solid rgba(0, 0, 0, 0.12);
      font-size: 0.875rem;
      font-weight: 600;
      color: #4b5563;
      background: transparent;
      transition: background 0.2s ease;
    }
    .tokens-modal-actions .tokens-btn-cancel:hover {
      background: rgba(0, 0, 0, 0.04);
    }
    html.dark .tokens-modal-actions .tokens-btn-cancel {
      border-color: rgba(255, 255, 255, 0.12);
      color: #d4d4d8;
    }
    html.dark .tokens-modal-actions .tokens-btn-cancel:hover {
      background: rgba(255, 255, 255, 0.05);
    }
    .tokens-modal-actions .tokens-btn-pay {
      padding: 0.55rem 1.15rem;
      border-radius: 0.85rem;
      font-size: 0.875rem;
      font-weight: 700;
      color: #111827;
      background: linear-gradient(180deg, #d4af37 0%, #c9a227 50%, #a8841f 100%);
      box-shadow: 0 10px 24px rgba(201, 162, 39, 0.28);
      transition: filter 0.2s ease, transform 0.2s ease;
    }
    .tokens-modal-actions .tokens-btn-pay:hover {
      filter: brightness(1.06);
    }
    .tokens-modal-actions .tokens-btn-pay:disabled {
      opacity: 0.65;
      cursor: not-allowed;
    }
    .tokens-copy-mobile {
      display: none;
    }
    .header-buy-cta {
      display: none;
    }
    @media (max-width: 639px) {
      .tokens-copy-desktop {
        display: none;
      }
      .tokens-copy-mobile {
        display: inline;
      }
      .header-buy-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        font-weight: 800;
        letter-spacing: 0.01em;
        color: #18181b;
        background: linear-gradient(180deg, #f0d078 0%, #d4af37 48%, #b8922a 100%);
        transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .header-buy-cta:active {
        transform: scale(0.97);
        filter: brightness(0.98);
      }
      .header-buy-cta:focus-visible {
        outline: 2px solid rgba(201, 162, 39, 0.7);
        outline-offset: 2px;
      }
      #token-balance-pill.is-mobile-buy {
        cursor: pointer;
      }
      .header-token-info {
        display: none;
      }
      #site-chrome .header-tokens-buy {
        gap: 0.4rem;
      }
      #site-chrome #token-balance-pill {
        border: 1px solid rgba(201, 162, 39, 0.28);
        background: rgba(251, 191, 36, 0.1);
      }
      html.dark #site-chrome #token-balance-pill {
        border-color: rgba(251, 191, 36, 0.3);
        background: rgba(251, 191, 36, 0.12);
      }
      #tokens-modal {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
      }
      #tokens-modal.modal-open .modal-panel {
        transform: translateY(0);
      }
      #tokens-modal .modal-panel {
        transform: translateY(18px);
      }
      .tokens-modal-panel {
        max-width: none;
        width: 100%;
        max-height: min(92dvh, 760px);
        margin: 0;
        border-radius: 1.35rem 1.35rem 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        padding: 1rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.28);
      }
      .tokens-modal-panel::before {
        height: 4.5rem;
        border-radius: 1.35rem 1.35rem 0 0;
      }
      .tokens-modal-hero h3 {
        font-size: 1.35rem;
      }
      .tokens-modal-hero p {
        font-size: 0.8125rem;
        color: #52525b;
      }
      .tokens-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
      }
      .tokens-packs-grid {
        gap: 0.55rem;
      }
      .token-pack {
        min-height: 5.75rem;
        border-radius: 1.05rem;
      }
      .token-pack__amount {
        font-size: 1.45rem;
      }
      .token-pack__price {
        font-size: 0.75rem;
      }
      .tokens-modal-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        flex-direction: column-reverse;
        gap: 0.45rem;
        margin-top: 0.65rem;
        padding-top: 0.75rem;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 18%, #fff 40%);
      }
      html.dark .tokens-modal-actions {
        background:
          linear-gradient(180deg, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0.92) 18%, #111827 40%);
      }
      .tokens-modal-actions .tokens-btn-pay {
        width: 100%;
        min-height: 3.35rem;
        padding: 0.8rem 1rem;
        border-radius: 1rem;
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        box-shadow: 0 12px 28px rgba(201, 162, 39, 0.38);
      }
      .tokens-modal-actions .tokens-btn-cancel {
        width: 100%;
        min-height: 2.65rem;
        border: none;
        color: #71717a;
        background: transparent;
      }
      html.dark .tokens-modal-actions .tokens-btn-cancel {
        color: #a1a1aa;
        background: transparent;
      }
      #tokens-pay-note {
        text-align: center;
        margin-top: 0.65rem !important;
      }
    }
    .tokens-modal-body {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .tokens-modal-foot {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    @media (min-width: 640px) {
      #tokens-modal {
        padding: 0.75rem;
        align-items: center;
      }
      .tokens-modal-panel {
        max-width: 26rem;
        max-height: min(86dvh, 520px);
        padding: 0.9rem 1rem 0.85rem !important;
      }
      .tokens-modal-panel::before {
        height: 4rem;
      }
      .tokens-modal-hero {
        margin-bottom: 0.55rem;
        gap: 0.5rem;
      }
      .tokens-modal-hero h3 {
        font-size: 1.05rem;
      }
      .tokens-modal-hero p {
        font-size: 0.6875rem;
        line-height: 1.3;
      }
      .tokens-modal-body {
        gap: 0.55rem;
      }
      .tokens-modal-body > div > label {
        margin-bottom: 0.35rem !important;
        font-size: 0.625rem !important;
      }
      #tokens-currency-tabs button {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
        font-size: 0.75rem;
      }
      #tokens-unit-price {
        margin-top: 0.35rem !important;
      }
      .tokens-packs-grid {
        gap: 0.4rem;
        padding-top: 0.3rem;
      }
      .token-pack {
        min-height: 3.85rem;
        padding: 0.5rem 0.3rem 0.4rem;
        border-radius: 0.75rem;
      }
      .token-pack__badge {
        top: -0.35rem;
        font-size: 0.5rem;
        padding: 0.08rem 0.35rem;
      }
      .token-pack__amount {
        font-size: 1.1rem;
      }
      .token-pack__unit {
        font-size: 0.5625rem;
      }
      .token-pack__price {
        margin-top: 0.1rem;
        font-size: 0.625rem;
        line-height: 1.15;
      }
      .tokens-modal-foot {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        gap: 0.45rem;
        align-items: stretch;
      }
      .tokens-custom-row,
      .tokens-summary {
        margin-top: 0;
      }
      .tokens-custom-row {
        padding: 0.55rem 0.6rem;
      }
      .tokens-custom-row label {
        margin-bottom: 0.3rem;
        font-size: 0.5625rem;
      }
      .tokens-custom-input {
        min-height: 2.35rem;
        padding: 0.4rem 0.55rem;
        font-size: 0.9375rem;
      }
      .tokens-summary {
        padding: 0.55rem 0.65rem;
        display: flex;
        align-items: center;
      }
      #tokens-price-line {
        font-size: 0.8125rem;
        line-height: 1.25;
      }
      #tokens-pay-note {
        margin-top: 0.45rem !important;
        line-height: 1.35;
      }
      .tokens-modal-actions {
        margin-top: 0.55rem;
        gap: 0.4rem;
      }
      .tokens-modal-actions .tokens-btn-cancel,
      .tokens-modal-actions .tokens-btn-pay {
        padding: 0.45rem 0.85rem;
        font-size: 0.8125rem;
      }
    }
    @media (min-width: 640px) and (max-height: 720px) {
      .tokens-modal-panel {
        max-height: calc(100dvh - 1.25rem);
      }
      .token-pack {
        min-height: 3.5rem;
      }
    }
    .logo-text { letter-spacing: 0.06em; }
    .btn-primary {
      background: linear-gradient(180deg, var(--brand-gold-bright) 0%, var(--brand-gold) 50%, var(--brand-gold-dark) 100%);
    }
    .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 24px var(--brand-accent-ring); }
    .step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-gold); }
    .gradient-hero {
      background:
        radial-gradient(120% 80% at 50% -10%, var(--brand-accent-soft) 0%, transparent 55%),
        linear-gradient(180deg, rgba(201,162,39,0.05) 0%, transparent 65%);
      border: 1px solid rgba(201, 162, 39, 0.18);
    }
    @media (min-width: 768px) {
      .gradient-hero {
        padding-top: 2.5rem;
        padding-bottom: 2.75rem;
      }
    }
    .dark .gradient-hero {
      background:
        radial-gradient(120% 80% at 50% -10%, rgba(201, 162, 39, 0.17) 0%, transparent 52%),
        linear-gradient(180deg, rgba(39, 39, 42, 0.42) 0%, rgba(24, 24, 27, 0.22) 48%, transparent 74%),
        linear-gradient(180deg, rgba(201, 162, 39, 0.06) 0%, transparent 68%);
      border-color: rgba(229, 199, 107, 0.14);
    }
    .skip-to-upload {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
      z-index: 100000;
    }
    .skip-to-upload:focus {
      position: fixed;
      left: 1rem;
      top: 1rem;
      width: auto;
      height: auto;
      margin: 0;
      clip: auto;
      padding: 0.65rem 1.15rem;
      overflow: visible;
      white-space: normal;
      border-radius: 0.75rem;
      font-size: 0.875rem;
      font-weight: 600;
      background: linear-gradient(180deg, #d4af37 0%, #c9a227 100%);
      color: #111827;
      box-shadow: 0 10px 30px rgba(201, 162, 39, 0.45);
    }
    .how-grid { display: grid; grid-template-columns: repeat(1,minmax(0,1fr)); gap: 1rem; }
    @media (min-width: 768px) {
      .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1024px) {
      .how-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    .how-card {
      border-radius: 18px;
      border: 1px solid rgba(209,213,219,0.8);
      background: rgba(255,255,255,0.9);
      padding: 1rem 1.1rem;
      box-shadow: 0 18px 40px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
    }
    .how-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 22px 48px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(201, 162, 39, 0.12);
      border-color: rgba(201, 162, 39, 0.35);
    }
    .dark .how-card:hover {
      box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(229, 199, 107, 0.15);
      border-color: rgba(229, 199, 107, 0.28);
    }
    @media (prefers-reduced-motion: reduce) {
      .how-card {
        transition: none;
      }
      .how-card:hover {
        transform: none;
      }
    }
    .dark .how-card {
      background: linear-gradient(165deg, rgba(39, 39, 42, 0.92) 0%, rgba(24, 24, 27, 0.94) 100%);
      border-color: rgba(82, 82, 91, 0.75);
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
    }
    .how-card .step-title { color: #c9a227; }
    .dark .how-card .step-title { color: #e5c76b; }
    .how-card .step-heading { color: #1a1a1a; }
    .dark .how-card .step-heading { color: #f1f5f9; }
    .how-card .step-desc { color: #4b5563; }
    .dark .how-card .step-desc { color: #cbd5e1; }
    /* Сворачиваемая памятка «Как получить идеальную ретушь» */
    .instructions-summary { list-style: none; }
    .instructions-summary::-webkit-details-marker { display: none; }
    .instructions-summary::marker { content: ''; }
    .instructions-disclosure[open] > .instructions-summary .instructions-chevron { transform: rotate(180deg); }
    .instructions-disclosure[open] > .instructions-summary { border-bottom: 1px solid rgba(0,0,0,0.06); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .dark .instructions-disclosure[open] > .instructions-summary { border-bottom-color: rgba(255,255,255,0.08); }
    .instructions-summary:hover .instructions-chevron { color: #b45309; border-color: rgba(180,83,9,0.45); }
    .dark .instructions-summary:hover .instructions-chevron { color: #fbbf24; border-color: rgba(251,191,36,0.45); }

    /* «Как это работает» — явные стили тёмной темы (утилиты dark:*/opacity не в tailwind-built) */
    #how-it-works-collapsed .how-it-works-disclosure {
      border: 1px solid rgba(251, 191, 36, 0.28);
      background: rgba(255, 251, 235, 0.55);
      transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    #how-it-works-collapsed .how-it-works-disclosure[open] {
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    html.dark #how-it-works-collapsed .how-it-works-disclosure {
      border-color: rgba(251, 191, 36, 0.22);
      background: rgba(24, 24, 27, 0.72);
    }
    html.dark #how-it-works-collapsed .how-it-works-disclosure[open] {
      background: rgba(24, 24, 27, 0.92);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    }
    #how-it-works-collapsed .how-it-works-title { color: #111827; }
    html.dark #how-it-works-collapsed .how-it-works-title { color: #fafafa; }
    #how-it-works-collapsed .how-it-works-sub { color: #6b7280; }
    html.dark #how-it-works-collapsed .how-it-works-sub { color: #a1a1aa; }
    #how-it-works-collapsed .how-it-works-steps { color: #374151; }
    html.dark #how-it-works-collapsed .how-it-works-steps { color: #d4d4d8; }
    #how-it-works-collapsed .how-it-works-steps strong { color: #111827; }
    html.dark #how-it-works-collapsed .how-it-works-steps strong { color: #fafafa; }
    #how-it-works-collapsed .how-it-works-steps ::marker { color: #d97706; }
    html.dark #how-it-works-collapsed .how-it-works-steps ::marker { color: #fbbf24; }
    html.dark #how-it-works-collapsed .instructions-chevron {
      color: #d4d4d8;
      background: rgba(39, 39, 42, 0.75);
      border-color: rgba(82, 82, 91, 0.65);
    }

    /* ===== Инструмент кадрирования (Crop tool) ===== */
    /* Все ключевые свойства модалки заданы здесь напрямую и через !important,
       чтобы не зависеть от того, какие arbitrary Tailwind-утилиты попали
       в tailwind-built.css (он предсобран и может не содержать z-[110] / max-w-[min(...)]). */
    #crop-modal {
      position: fixed !important;
      inset: 0 !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      z-index: 99999 !important;
      padding: 16px;
      display: none;
      align-items: center;
      justify-content: center;
      background: #1f2937;
      animation: crop-fade .14s ease-out;
    }
    html.dark #crop-modal { background: #0a0a0a; }
    #crop-modal.crop-modal--open {
      display: flex !important;
    }
    .crop-card-wrap {
      position: relative;
      width: 100%;
      max-width: 820px;
      border-radius: 16px;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      box-shadow: 0 25px 60px -15px rgba(0,0,0,0.6);
      display: flex;
      flex-direction: column;
      max-height: calc(100dvh - 32px);
    }
    @media (max-width: 640px) {
      #crop-modal { padding: 0 !important; z-index: 100001 !important; }
      .crop-card-wrap {
        max-width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        overflow: hidden;
        min-height: 0;
      }
      .crop-card-header { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top, 0px)); }
      .crop-card-header p { display: none; }
      .crop-card-footer {
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
      }
      #crop-empty-state {
        flex: 1 1 auto;
        min-height: 0;
        justify-content: center;
        padding: 16px 14px 20px;
      }
      .crop-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 10px 6px;
        flex-wrap: nowrap;
        overflow: visible;
      }
      .crop-toolbar-ratios {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
      }
      .crop-toolbar-ratios::-webkit-scrollbar { display: none; }
      .crop-toolbar-tools {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
      }
      .crop-toolbar-tools .crop-reset-btn {
        margin-left: auto !important;
        min-height: 2.75rem;
        padding: 8px 12px !important;
        font-size: 0.8125rem !important;
      }
      .crop-stage-wrap { padding: 0 10px 6px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
      #crop-stage { height: auto !important; flex: 1 1 auto; min-height: 200px; }
      #crop-edit-state { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
      .crop-mobile-hint {
        display: block;
        margin: 0 10px 8px;
        font-size: 0.6875rem;
        line-height: 1.35;
        color: #6b7280;
        text-align: center;
      }
      html.dark .crop-mobile-hint { color: #9ca3af; }
      .crop-apply-label--short { display: inline; }
      .crop-apply-label--long { display: none; }
    }
    @media (min-width: 641px) {
      .crop-toolbar-ratios,
      .crop-toolbar-tools { display: contents; }
      .crop-mobile-hint { display: none; }
      .crop-apply-label--short { display: none; }
      .crop-apply-label--long { display: inline; }
    }
    html.dark .crop-card-wrap {
      background: #18181b;
      border-color: #27272a;
    }
    .crop-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid #f3f4f6;
    }
    html.dark .crop-card-header { border-color: #27272a; }
    .crop-card-footer {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-top: 1px solid #f3f4f6;
      flex-wrap: wrap;
    }
    html.dark .crop-card-footer { border-color: #27272a; }
    .crop-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 12px 14px 8px 14px;
    }
    .crop-stage-wrap { padding: 0 14px 14px 14px; }
    .crop-zoom-bar {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 4px;
      border-radius: 999px;
      background: #f3f4f6;
      border: 1px solid #e5e7eb;
    }
    html.dark .crop-zoom-bar {
      background: #18181b;
      border-color: #3f3f46;
    }
    .crop-zoom-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: transparent;
      color: #374151;
      border: none;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
      padding: 0;
    }
    .crop-zoom-btn:hover { background: #fff; color: #b45309; }
    html.dark .crop-zoom-btn { color: #d4d4d8; }
    html.dark .crop-zoom-btn:hover { background: #27272a; color: #fbbf24; }
    .crop-zoom-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .crop-zoom-btn:disabled:hover { background: transparent; color: inherit; }
    .crop-zoom-label {
      min-width: 44px;
      text-align: center;
      font-variant-numeric: tabular-nums;
      font-size: 11px;
      font-weight: 600;
      color: #6b7280;
      letter-spacing: 0.02em;
      cursor: pointer;
      padding: 0 4px;
    }
    html.dark .crop-zoom-label { color: #9ca3af; }
    .crop-zoom-label:hover { color: #b45309; }
    html.dark .crop-zoom-label:hover { color: #fbbf24; }
    @keyframes crop-fade { from { opacity: 0; } to { opacity: 1; } }
    html.dark .crop-card-wrap h3 { color: #fafafa; }
    html.dark .crop-card-wrap #crop-dropzone p:first-of-type { color: #fafafa; }
    .crop-stage {
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #f3f4f6;
      overflow: hidden;
      border-radius: 12px;
      user-select: none;
      touch-action: none;
      border: 1px solid rgba(0,0,0,0.06);
    }
    html.dark .crop-stage {
      background-color: #18181b;
      border-color: rgba(255,255,255,0.06);
    }
    .crop-image {
      position: absolute;
      pointer-events: none;
      max-width: none;
      max-height: none;
      will-change: transform;
    }
    .crop-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .crop-shade {
      position: absolute;
      background: rgba(0, 0, 0, 0.55);
      pointer-events: none;
    }
    .crop-window {
      position: absolute;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.95),
        0 0 0 2px rgba(0, 0, 0, 0.4);
      cursor: move;
      pointer-events: auto;
    }
    .crop-window::before,
    .crop-window::after {
      content: '';
      position: absolute;
      pointer-events: none;
      background: rgba(255, 255, 255, 0.4);
    }
    .crop-window::before {
      top: 33.333%;
      left: 0;
      right: 0;
      height: 1px;
      box-shadow: 0 calc(33.333% * 1) 0 rgba(255,255,255,0.4);
    }
    .crop-window::after {
      left: 33.333%;
      top: 0;
      bottom: 0;
      width: 1px;
      box-shadow: calc(33.333% * 1) 0 0 rgba(255,255,255,0.4);
    }
    .crop-handle {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid #b45309;
      box-shadow: 0 1px 3px rgba(0,0,0,0.4);
      transform: translate(-50%, -50%);
      pointer-events: auto;
      z-index: 4;
    }
    html.dark .crop-handle { border-color: #fbbf24; }
    .crop-handle.crop-edge {
      width: 22px;
      height: 6px;
      border-radius: 3px;
    }
    .crop-handle.crop-edge.crop-vert {
      width: 6px;
      height: 22px;
    }
    .crop-handle[data-pos="nw"] { cursor: nwse-resize; }
    .crop-handle[data-pos="ne"] { cursor: nesw-resize; }
    .crop-handle[data-pos="sw"] { cursor: nesw-resize; }
    .crop-handle[data-pos="se"] { cursor: nwse-resize; }
    .crop-handle[data-pos="n"]  { cursor: ns-resize; }
    .crop-handle[data-pos="s"]  { cursor: ns-resize; }
    .crop-handle[data-pos="w"]  { cursor: ew-resize; }
    .crop-handle[data-pos="e"]  { cursor: ew-resize; }
    #crop-dropzone {
      transition: all 0.2s ease;
    }
    #crop-dropzone:focus-within,
    .crop-dropzone--over {
      border-color: #f59e0b !important;
      background: rgba(245, 158, 11, 0.08) !important;
    }
    html.dark .crop-dropzone--over { background: rgba(245, 158, 11, 0.12) !important; }
    .crop-ratio-chip {
      display: inline-flex;
      align-items: center;
      padding: 5px 11px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 999px;
      border: 1px solid #e5e7eb;
      background: #f9fafb;
      color: #374151;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
      letter-spacing: 0.01em;
    }
    html.dark .crop-ratio-chip {
      background: #18181b;
      border-color: #3f3f46;
      color: #d4d4d8;
    }
    .crop-ratio-chip:hover {
      border-color: #c9a227;
      color: #92400e;
      background: #fffbeb;
    }
    html.dark .crop-ratio-chip:hover { color: #fbbf24; background: #27272a; border-color: #c9a227; }
    .crop-ratio-chip--active {
      background: #b45309;
      border-color: #b45309;
      color: #fff;
      box-shadow: 0 1px 4px rgba(180,83,9,0.35);
    }
    .crop-ratio-chip--active:hover { background: #92400e; border-color: #92400e; color: #fff; }
    html.dark .crop-ratio-chip--active {
      background: #f59e0b;
      border-color: #f59e0b;
      color: #18181b;
      box-shadow: 0 1px 4px rgba(245,158,11,0.4);
    }
    html.dark .crop-ratio-chip--active:hover { background: #fbbf24; border-color: #fbbf24; color: #18181b; }
    .crop-toolbar {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .crop-toolbar::-webkit-scrollbar { display: none; }
    @media (hover: none) and (pointer: coarse) {
      .crop-zoom-btn { width: 44px; height: 44px; }
      .crop-zoom-label {
        min-width: 52px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        padding: 0 6px;
      }
      .crop-ratio-chip { min-height: 44px; padding: 10px 14px; font-size: 13px; }
      .crop-btn { min-height: 44px; }
      #crop-modal-close { width: 44px !important; height: 44px !important; }
    }
    .crop-cta-tip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      background: linear-gradient(180deg, #fef3c7, #fde68a);
      color: #78350f;
      border: 1px solid rgba(201,162,39,0.45);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .crop-cta-tip:hover {
      background: linear-gradient(180deg, #fde68a, #fbbf24);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(201,162,39,0.25);
    }
    html.dark .crop-cta-tip {
      background: linear-gradient(180deg, rgba(251,191,36,0.18), rgba(245,158,11,0.22));
      color: #fde68a;
      border-color: rgba(251,191,36,0.45);
    }
    .crop-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 10px;
      transition: all 0.15s ease;
      border: 1px solid transparent;
      cursor: pointer;
      white-space: nowrap;
    }
    .crop-btn-ghost { color: #6b7280; background: transparent; }
    .crop-btn-ghost:hover { background: #f3f4f6; color: #111827; }
    html.dark .crop-btn-ghost { color: #a1a1aa; }
    html.dark .crop-btn-ghost:hover { background: #27272a; color: #fafafa; }
    .crop-btn-secondary {
      color: #374151;
      background: #fff;
      border-color: #d1d5db;
    }
    .crop-btn-secondary:hover { background: #f9fafb; border-color: #9ca3af; }
    html.dark .crop-btn-secondary {
      color: #e5e7eb;
      background: #27272a;
      border-color: #3f3f46;
    }
    html.dark .crop-btn-secondary:hover { background: #3f3f46; border-color: #52525b; }
    .crop-btn-primary {
      color: #18181b;
      background: linear-gradient(180deg, #fde68a, #f59e0b);
      border-color: #b45309;
      box-shadow: 0 1px 4px rgba(180,83,9,0.3);
    }
    .crop-btn-primary:hover { background: linear-gradient(180deg, #fcd34d, #d97706); box-shadow: 0 2px 8px rgba(180,83,9,0.4); }
    .crop-btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .crop-btn:disabled:hover { background: inherit; border-color: inherit; box-shadow: none; }
    @media (max-width: 640px) {
      .crop-handle { width: 16px; height: 16px; }
      .crop-handle.crop-edge { width: 26px; height: 8px; }
      .crop-handle.crop-edge.crop-vert { width: 8px; height: 26px; }
    }
    @media (hover: none) and (pointer: coarse) {
      #crop-stage,
      #crop-overlay,
      .crop-window { touch-action: none; }
      .crop-handle {
        width: 32px;
        height: 32px;
        margin: 0;
        border-width: 3px;
      }
      .crop-handle.crop-edge {
        width: 44px;
        height: 14px;
        margin: 0;
      }
      .crop-handle.crop-edge.crop-vert {
        width: 14px;
        height: 44px;
        margin: 0;
      }
    }
    /* В потоке layout-shell: тот же фон, что у body, карточки — отдельные блоки */
    #profile-section {
      content-visibility: auto;
      contain-intrinsic-size: 520px;
      background-color: transparent;
    }
    /* После входа — полный layout сразу, иначе при подгрузке архива страница «прыгает» к истории */
    #profile-section.is-visible {
      content-visibility: visible;
      contain-intrinsic-size: unset;
    }
    .profile-cabinet {
      position: relative;
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
      overflow-y: visible;
    }
    .profile-cabinet-shell {
      position: relative;
      isolation: isolate;
    }
    .profile-hero-mesh {
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    }
    @keyframes profile-enter {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .profile-cabinet.is-visible .profile-hero,
    .profile-cabinet.is-visible .profile-works-card {
      animation: profile-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .profile-cabinet.is-visible .profile-works-card {
      animation-delay: 0.08s;
    }
    /* Скрытие разметки без Tailwind .sr-only (в tailwind-built.css класс может отсутствовать) */
    .profile-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;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    /* File input: прозрачен везде — иначе буква/круг скрываются («плавающая G»)
       + убираем нативную кнопку WebKit/Firefox */
    input.profile-avatar-file-input {
      position: absolute;
      inset: 0;
      z-index: 4;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      opacity: 0;
      cursor: pointer;
      font-size: 0;
      line-height: 0;
      border: 0;
      border-radius: inherit;
      background: transparent !important;
      color: transparent !important;
      appearance: none;
      -webkit-appearance: none;
    }
    input.profile-avatar-file-input::-webkit-file-upload-button {
      display: none;
      -webkit-appearance: none;
    }
    input.profile-avatar-file-input::file-selector-button {
      display: none;
      appearance: none;
    }
    /* Личный кабинет — аватар: file input снаружи label (стабильнее клик по всем браузерам) */
    .profile-identity {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.875rem;
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }
    @media (min-width: 640px) {
      .profile-identity {
        gap: 1.125rem;
      }
    }
    .profile-avatar-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
    }
    .profile-identity > .profile-avatar-stack {
      align-self: center;
    }
    .profile-avatar-wrap {
      position: relative;
      flex-shrink: 0;
      width: 3.25rem;
      height: 3.25rem;
    }
    /* label по умолчанию inline — без block круг «схлопывается», буква уезжает */
    label.profile-avatar-frame {
      display: block;
      box-sizing: border-box;
    }
    .profile-avatar-frame {
      position: relative;
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 9999px;
      flex-shrink: 0;
      overflow: hidden;
      cursor: pointer;
      background: linear-gradient(165deg, #fafaf9 0%, #e7e5e4 100%);
      border: 1px solid rgba(201, 162, 39, 0.38);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
      transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
    }
    .profile-avatar-frame:hover {
      border-color: rgba(201, 162, 39, 0.65);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 4px 14px -6px rgba(201, 162, 39, 0.22);
    }
    .profile-avatar-frame:active {
      transform: scale(0.98);
    }
    .dark .profile-avatar-frame {
      background: linear-gradient(165deg, rgba(63, 63, 70, 0.65) 0%, rgba(39, 39, 42, 0.95) 100%);
      border-color: rgba(229, 199, 107, 0.32);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    .dark .profile-avatar-frame:hover {
      border-color: rgba(229, 199, 107, 0.52);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 18px -8px rgba(0, 0, 0, 0.55);
    }
    .profile-avatar-frame:focus-visible {
      outline: 2px solid rgb(217 119 6);
      outline-offset: 3px;
    }
    .profile-avatar-frame::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0);
      opacity: 0;
      transition: opacity 0.18s ease, background 0.18s ease;
      pointer-events: none;
      border-radius: inherit;
    }
    .profile-avatar-frame:hover::after {
      background: rgba(0, 0, 0, 0.12);
      opacity: 1;
    }
    .profile-avatar-hint-ico {
      position: absolute;
      right: 2px;
      bottom: 2px;
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(17, 24, 39, 0.72);
      color: #fff;
      opacity: 0;
      transform: scale(0.92);
      transition: opacity 0.18s ease, transform 0.18s ease;
      pointer-events: none;
      z-index: 5;
      pointer-events: none;
    }
    .profile-avatar-frame:hover .profile-avatar-hint-ico {
      opacity: 1;
      transform: scale(1);
    }
    .profile-avatar-hint-ico svg {
      width: 0.7rem;
      height: 0.7rem;
    }
    .profile-avatar-photo {
      position: absolute;
      inset: 0;
      z-index: 3;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .profile-avatar-photo.hidden {
      display: none;
    }
    .profile-avatar-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.125rem;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: rgb(24 24 27);
      background: transparent;
      pointer-events: none;
      z-index: 2;
      user-select: none;
    }
    .profile-avatar-fallback.hidden {
      display: none !important;
    }
    .dark .profile-avatar-fallback {
      color: rgb(253 230 138);
    }
    .profile-avatar-remove-btn {
      margin: 0;
      padding: 0.28rem 0.45rem;
      width: 100%;
      max-width: 5.75rem;
      border-radius: 0.375rem;
      border: 1px solid rgb(252 165 165);
      background: rgb(254 242 242);
      color: rgb(185 28 28);
      font-size: 0.625rem;
      font-weight: 600;
      line-height: 1.2;
      cursor: pointer;
      text-align: center;
      transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
    }
    .profile-avatar-remove-btn:hover {
      background: rgb(254 226 226);
      border-color: rgb(248 113 113);
      color: rgb(153 27 27);
    }
    .dark .profile-avatar-remove-btn {
      border-color: rgba(248, 113, 113, 0.45);
      background: rgba(127, 29, 29, 0.35);
      color: rgb(252 165 165);
    }
    .dark .profile-avatar-remove-btn:hover {
      background: rgba(127, 29, 29, 0.5);
      border-color: rgba(248, 113, 113, 0.65);
      color: rgb(254 202 202);
    }
    .profile-pill-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
      padding: 0.5rem 1rem;
      min-height: 2.375rem;
      border-radius: 9999px;
      font-size: 0.8125rem;
      font-weight: 600;
      line-height: 1.2;
      transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
    }
    .profile-pill-btn:focus-visible {
      outline: 2px solid rgb(217 119 6);
      outline-offset: 2px;
    }
    .profile-pill-btn:active {
      transform: scale(0.98);
    }
    .profile-pill-btn--secondary {
      color: rgb(120 53 15);
      background: rgba(255, 251, 235, 0.95);
      border: 1px solid rgba(202, 138, 4, 0.35);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .profile-pill-btn--secondary:hover {
      background: rgba(254 243 199 / 0.95);
      border-color: rgba(202, 138, 4, 0.55);
    }
    .dark .profile-pill-btn--secondary {
      color: rgb(253 230 138);
      background: rgba(66 32 6 / 0.45);
      border-color: rgba(234 179 8, 0.25);
    }
    .dark .profile-pill-btn--secondary:hover {
      background: rgba(120 53 15 / 0.5);
      border-color: rgba(234 179 8, 0.4);
    }
    .profile-photo-hint {
      margin: 0;
      font-size: 0.6875rem;
      line-height: 1.4;
      color: rgb(107 114 128);
      max-width: 100%;
    }
    .dark .profile-photo-hint {
      color: rgb(156 163 175);
    }
    .profile-photo-hint__formats {
      color: rgb(156 163 175);
      font-size: 0.625rem;
    }
    .dark .profile-photo-hint__formats {
      color: rgb(107 114 128);
    }
    .profile-sidebar {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      min-width: 0;
    }
    @media (min-width: 768px) {
      .profile-sidebar {
        max-width: 12.5rem;
      }
    }
    @media (min-width: 1280px) {
      .profile-sidebar {
        width: 100%;
        max-width: 12.5rem;
        margin-left: auto;
      }
    }
    .profile-hero-accent {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 7rem;
      height: 7rem;
      opacity: 0;
      pointer-events: none;
    }
    .dark .profile-hero-accent {
      opacity: 1;
      background: radial-gradient(circle at 70% 30%, rgba(201, 162, 39, 0.16), transparent 68%);
    }
    .profile-stat-cell {
      position: relative;
    }
    #profile-retouches {
      contain: layout style;
    }
    .retouch-history-card {
      content-visibility: auto;
      contain-intrinsic-size: 280px;
    }
    #profile-favorites {
      contain: layout style;
    }
    .profile-favorites-grid {
      perspective: 1200px;
    }
    @keyframes profile-fav-card-in {
      0% {
        opacity: 0;
        transform: translateY(18px) rotateX(4deg) scale(0.96);
        filter: blur(4px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) rotateX(0) scale(1);
        filter: blur(0);
      }
    }
    @keyframes profile-fav-card-shine {
      0% {
        transform: translateX(-120%) skewX(-12deg);
      }
      60%,
      100% {
        transform: translateX(220%) skewX(-12deg);
      }
    }
    @keyframes profile-fav-thumb-out {
      to {
        opacity: 0;
        transform: scale(0.82) translateY(6px);
        filter: blur(3px);
      }
    }
    @keyframes profile-fav-card-out {
      to {
        opacity: 0;
        transform: translateX(-16px) scale(0.96);
        filter: blur(2px);
      }
    }
    @keyframes profile-fav-empty-in {
      0% {
        opacity: 0;
        transform: scale(0.94) translateY(10px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }
    @keyframes profile-fav-star-pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.88;
      }
    }
    .profile-fav-card {
      content-visibility: auto;
      contain-intrinsic-size: 160px;
      --fav-stagger: 0s;
      animation: profile-fav-card-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-delay: var(--fav-stagger);
      transform-origin: center top;
    }
    .profile-fav-card-shine {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      border-radius: inherit;
      z-index: 1;
    }
    .profile-fav-card-shine::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 42%;
      height: 100%;
      background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.07) 45%,
        transparent 100%
      );
      animation: profile-fav-card-shine 4.5s ease-in-out infinite;
      animation-delay: calc(var(--fav-stagger) + 0.4s);
    }
    .dark .profile-fav-card-shine::after {
      background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.04) 45%, transparent 100%);
    }
    .profile-fav-card-glow {
      pointer-events: none;
      position: absolute;
      width: 11rem;
      height: 11rem;
      right: -4rem;
      top: -5rem;
      border-radius: 9999px;
      background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, transparent 68%);
      opacity: 0.85;
      z-index: 0;
    }
    .dark .profile-fav-card-glow {
      background: radial-gradient(circle, rgba(251, 191, 36, 0.12) 0%, transparent 65%);
    }
    .profile-fav-card-exit {
      animation: profile-fav-card-out 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
      pointer-events: none;
    }
    .profile-fav-thumb-exit {
      animation: profile-fav-thumb-out 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      pointer-events: none;
    }
    .profile-fav-card > *:not(.profile-fav-card-glow):not(.profile-fav-card-shine) {
      position: relative;
      z-index: 2;
    }
    .profile-fav-thumb {
      width: 4.85rem;
      height: 4.85rem;
      border-radius: 0.85rem;
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.07),
        0 0 0 1px rgba(0, 0, 0, 0.04);
      transition:
        transform 0.42s cubic-bezier(0.34, 1.3, 0.64, 1),
        box-shadow 0.38s ease,
        border-color 0.28s ease;
      will-change: transform;
    }
    .profile-fav-thumb:hover {
      transform: translateY(-4px) scale(1.03);
      box-shadow:
        0 14px 32px -10px rgba(245, 158, 11, 0.4),
        0 0 0 1px rgba(251, 191, 36, 0.28);
    }
    .profile-fav-thumb img {
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .profile-fav-thumb:hover img {
      transform: scale(1.08);
    }
    .dark .profile-fav-thumb {
      box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(24, 24, 27, 0.9);
    }
    .dark .profile-fav-thumb:hover {
      box-shadow:
        0 16px 36px -12px rgba(251, 191, 36, 0.25),
        0 0 0 1px rgba(251, 191, 36, 0.22);
    }
    .profile-fav-star-btn {
      -webkit-tap-highlight-color: transparent;
      text-shadow:
        0 0 3px rgba(0, 0, 0, 0.95),
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 2px 8px rgba(0, 0, 0, 0.65);
      transition:
        transform 0.28s cubic-bezier(0.34, 1.45, 0.64, 1),
        color 0.2s ease,
        filter 0.22s ease,
        opacity 0.22s ease;
      animation: profile-fav-star-pulse 3s ease-in-out infinite;
    }
    .profile-fav-thumb:hover .profile-fav-star-btn {
      animation: none;
      filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55));
    }
    .profile-fav-star-btn:hover {
      transform: scale(1.14) rotate(-10deg);
      color: #fde68a !important;
    }
    .profile-fav-star-btn:active {
      transform: scale(0.9) rotate(0deg);
    }
    .profile-fav-action {
      transition:
        transform 0.22s ease,
        background 0.22s ease,
        color 0.2s ease,
        box-shadow 0.22s ease;
    }
    .profile-fav-action:hover {
      transform: translateY(-1px);
    }
    .profile-fav-action:active {
      transform: translateY(0) scale(0.98);
    }
    .profile-fav-empty {
      animation: profile-fav-empty-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .profile-fav-empty-icon {
      animation: profile-fav-star-pulse 2.4s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .profile-fav-card,
      .profile-fav-empty,
      .profile-fav-thumb,
      .profile-fav-thumb img,
      .profile-fav-star-btn,
      .profile-fav-action {
        animation: none !important;
        transition: none !important;
      }
      .profile-fav-card {
        opacity: 1;
        transform: none;
        filter: none;
      }
      .profile-fav-card-shine::after {
        display: none;
      }
      .profile-fav-thumb:hover,
      .profile-fav-thumb:hover img {
        transform: none;
      }
      .profile-fav-thumb-exit,
      .profile-fav-card-exit {
        animation: none !important;
        opacity: 0;
        transform: none;
        filter: none;
        transition: opacity 0.12s ease !important;
      }
      .profile-fav-empty-icon {
        animation: none !important;
      }
    }
    @media (min-width: 640px) {
      .profile-fav-thumb {
        width: 5.65rem;
        height: 5.65rem;
      }
    }
    /* Тёмная тема: явные фоны кабинета (не полагаемся только на цепочку bg-white + dark:gradient) */
    .dark .profile-hero {
      background-color: #09090b;
      background-image: linear-gradient(to bottom, #09090b, #18181b);
    }
    .dark .profile-works-card {
      background-color: #09090b;
      background-image: linear-gradient(to bottom, #09090b, #18181b);
    }
    .dark .profile-works-card > div.border-b {
      background-color: rgba(24, 24, 27, 0.92);
      background-image: linear-gradient(to bottom, rgba(24, 24, 27, 0.95), rgba(9, 9, 11, 0.85));
    }
    /* Счётчики под шапкой кабинета — явный тёмный фон (Tailwind bg-white + dark:bg-* иногда оставляет полосу белой) */
    .dark .profile-hero-stats {
      background-color: #18181b !important;
      background-image: none !important;
      border-top-color: rgba(63, 63, 70, 0.85) !important;
    }
    .dark .profile-hero-stats .profile-stat-cell {
      background-color: transparent !important;
      border-right-color: rgba(63, 63, 70, 0.65) !important;
    }
    .dark .profile-hero-stats .profile-stat-cell:last-child {
      border-right: none;
    }

    /* Панель ретуши: тёмные фоны напрямую под html.dark (не зависит от сборки tailwind-built и кэша) */
    html.dark #work-area > div.retouch-work-shell {
      background: linear-gradient(180deg, #27272a 0%, #18181b 100%);
      border-color: rgba(63, 63, 70, 0.82);
      box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    html.dark #work-area .retouch-settings-surface {
      background: rgba(39, 39, 42, 0.78);
      border-color: rgba(82, 82, 91, 0.55);
    }
    html.dark #work-area label.retouch-choice-tile {
      background: rgba(24, 24, 27, 0.92);
      border-color: rgba(82, 82, 91, 0.65);
    }
    html.dark #work-area label.retouch-product-pick > .retouch-product-card {
      background: rgba(24, 24, 27, 0.92);
      border-color: rgba(82, 82, 91, 0.65);
    }
    html.dark #work-area label.retouch-product-pick .peer:checked + .retouch-product-card {
      background: linear-gradient(160deg, rgba(212, 175, 55, 0.14) 0%, rgba(24, 24, 27, 0.95) 55%);
      border-color: rgba(201, 162, 39, 0.55);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.12);
    }

    /* Карточки «Медальон / Станок» — единый премиальный вид */
    #work-area label.retouch-product-pick > .retouch-product-card {
      position: relative;
      overflow: hidden;
      border-radius: 1.05rem !important;
      border-width: 1.5px !important;
      border-color: rgba(228, 228, 231, 0.95) !important;
      background:
        linear-gradient(180deg, #ffffff 0%, #fafaf9 100%) !important;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 10px 24px -18px rgba(15, 23, 42, 0.35) !important;
      transition:
        border-color 0.2s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        transform 0.18s ease !important;
    }
    #work-area label.retouch-product-pick > .retouch-product-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.85rem;
      bottom: 0.85rem;
      width: 3px;
      border-radius: 999px;
      background: transparent;
      transition: background 0.2s ease;
    }
    #work-area label.retouch-product-pick > .retouch-product-card::after {
      content: '';
      position: absolute;
      top: 0.7rem;
      right: 0.7rem;
      width: 1.15rem;
      height: 1.15rem;
      border-radius: 999px;
      border: 1.5px solid rgba(161, 161, 170, 0.55);
      background: rgba(255, 255, 255, 0.85);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    #work-area label.retouch-product-pick:hover > .retouch-product-card {
      border-color: var(--brand-accent-ring) !important;
      transform: translateY(-1px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 14px 28px -16px rgba(120, 53, 15, 0.28) !important;
    }
    #work-area label.retouch-product-pick .peer:checked + .retouch-product-card {
      border-color: rgba(201, 162, 39, 0.72) !important;
      background:
        linear-gradient(145deg, rgba(254, 243, 199, 0.95) 0%, rgba(255, 255, 255, 0.98) 42%, rgba(250, 250, 249, 1) 100%) !important;
      box-shadow:
        0 0 0 2px var(--brand-accent-soft),
        0 14px 30px -16px rgba(120, 53, 15, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
      transform: translateY(-1px);
    }
    #work-area label.retouch-product-pick .peer:checked + .retouch-product-card::before {
      background: linear-gradient(180deg, var(--brand-gold-bright), var(--brand-gold-dark));
    }
    #work-area label.retouch-product-pick .peer:checked + .retouch-product-card::after {
      border-color: transparent;
      background:
        var(--brand-gold)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111827' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.2 6.4 11l6.1-6.5'/%3E%3C/svg%3E")
        center / 0.72rem no-repeat;
      box-shadow: 0 4px 10px -4px rgba(120, 53, 15, 0.55);
    }
    #work-area label.retouch-product-pick > .retouch-product-card .retouch-product-card__icon {
      border-radius: 0.8rem !important;
      background: linear-gradient(145deg, rgba(254, 243, 199, 0.95), rgba(253, 186, 116, 0.55)) !important;
      color: #92400e !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    #work-area label.retouch-product-pick .peer:checked + .retouch-product-card .retouch-product-card__icon {
      background: linear-gradient(145deg, #fde68a, var(--brand-gold) 55%, var(--brand-gold-dark)) !important;
      color: #422006 !important;
    }
    html.dark #work-area label.retouch-product-pick > .retouch-product-card {
      border-color: rgba(82, 82, 91, 0.72) !important;
      background: linear-gradient(180deg, rgba(39, 39, 42, 0.96), rgba(24, 24, 27, 0.98)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 28px -18px rgba(0, 0, 0, 0.65) !important;
    }
    html.dark #work-area label.retouch-product-pick > .retouch-product-card::after {
      border-color: rgba(113, 113, 122, 0.7);
      background: rgba(39, 39, 42, 0.9);
      box-shadow: none;
    }
    html.dark #work-area label.retouch-product-pick:hover > .retouch-product-card {
      border-color: rgba(229, 199, 107, 0.4) !important;
    }
    html.dark #work-area label.retouch-product-pick .peer:checked + .retouch-product-card {
      border-color: rgba(229, 199, 107, 0.65) !important;
      background:
        linear-gradient(155deg, rgba(113, 63, 18, 0.55) 0%, rgba(39, 39, 42, 0.96) 48%, rgba(24, 24, 27, 0.98) 100%) !important;
      box-shadow:
        0 0 0 2px rgba(229, 199, 107, 0.12),
        0 14px 32px -16px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }
    html.dark #work-area label.retouch-product-pick .peer:checked + .retouch-product-card::after {
      background:
        var(--brand-gold-light)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230c0a09' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.2 6.4 11l6.1-6.5'/%3E%3C/svg%3E")
        center / 0.72rem no-repeat;
    }
    html.dark #work-area label.retouch-product-pick > .retouch-product-card .retouch-product-card__icon {
      background: linear-gradient(145deg, rgba(113, 63, 18, 0.9), rgba(63, 63, 70, 0.9)) !important;
      color: #fef3c7 !important;
    }
    html.dark #work-area label.retouch-product-pick .peer:checked + .retouch-product-card .retouch-product-card__icon {
      background: linear-gradient(145deg, #fef3c7, var(--brand-gold-light) 55%, var(--brand-gold-dark)) !important;
      color: #0c0a09 !important;
    }

    .retouch-color-switch {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.45rem;
      width: min(100%, 26rem);
      padding: 0.35rem;
      border-radius: 1.25rem;
      border: 1px solid rgba(201, 162, 39, 0.22);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.9)),
        radial-gradient(circle at 12% 0%, rgba(245, 158, 11, 0.16), transparent 40%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px -22px rgba(120, 53, 15, 0.5);
    }
    .retouch-color-option {
      position: relative;
      display: flex;
      min-height: 3.65rem;
      cursor: pointer;
      border-radius: 0.95rem;
      -webkit-tap-highlight-color: transparent;
    }
    .retouch-color-option input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
    .retouch-color-card {
      position: relative;
      display: flex;
      width: 100%;
      align-items: center;
      gap: 0.7rem;
      overflow: hidden;
      border-radius: inherit;
      border: 1px solid transparent;
      padding: 0.72rem 0.85rem;
      color: #4b5563;
      background: rgba(255, 255, 255, 0.58);
      transition:
        transform 0.2s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.18s ease,
        opacity 0.18s ease;
    }
    .retouch-color-card::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.36) 45%, transparent 78%);
      transform: translateX(-55%);
      transition: opacity 0.22s ease, transform 0.5s ease;
      pointer-events: none;
    }
    .retouch-color-icon {
      display: inline-flex;
      width: 2.35rem;
      height: 2.35rem;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      border-radius: 0.85rem;
      font-weight: 800;
      line-height: 1;
      color: #92400e;
      background: linear-gradient(145deg, rgba(254, 243, 199, 0.96), rgba(253, 186, 116, 0.8));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    .retouch-color-copy {
      display: flex;
      min-width: 0;
      flex-direction: column;
      gap: 0.1rem;
    }
    .retouch-color-title {
      font-size: 0.92rem;
      font-weight: 750;
      line-height: 1.1;
      color: #1f2937;
    }
    .retouch-color-sub {
      font-size: 0.68rem;
      line-height: 1.15;
      color: #6b7280;
    }
    .retouch-color-option:hover .retouch-color-card {
      transform: translateY(-1px);
      border-color: rgba(201, 162, 39, 0.32);
      box-shadow: 0 10px 24px -18px rgba(120, 53, 15, 0.62);
    }
    .retouch-color-option input:checked + .retouch-color-card {
      color: #1c1917;
      border-color: rgba(201, 162, 39, 0.66);
      background:
        linear-gradient(135deg, rgba(254, 243, 199, 0.98) 0%, rgba(245, 158, 11, 0.32) 52%, rgba(255, 255, 255, 0.9) 100%);
      box-shadow:
        0 14px 32px -18px rgba(120, 53, 15, 0.85),
        0 0 0 2px rgba(201, 162, 39, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    .retouch-color-option input:checked + .retouch-color-card::after {
      opacity: 1;
      transform: translateX(55%);
    }
    .retouch-color-option input:checked + .retouch-color-card .retouch-color-icon {
      color: #451a03;
      background: linear-gradient(145deg, #fde68a, #d4af37 56%, #b7791f);
      box-shadow: 0 8px 16px -10px rgba(120, 53, 15, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }
    .retouch-color-option input:checked + .retouch-color-card .retouch-color-title {
      color: #111827;
    }
    .retouch-color-option input:checked + .retouch-color-card .retouch-color-sub {
      color: #78350f;
    }
    .retouch-color-option input:focus-visible + .retouch-color-card {
      outline: 2px solid rgba(201, 162, 39, 0.62);
      outline-offset: 2px;
    }
    .retouch-color-option input:disabled + .retouch-color-card {
      cursor: not-allowed;
      opacity: 0.5;
      filter: grayscale(0.35);
    }
    html.dark #work-area .retouch-color-switch {
      border-color: rgba(229, 199, 107, 0.22);
      background:
        linear-gradient(180deg, rgba(39, 39, 42, 0.92), rgba(24, 24, 27, 0.94)),
        radial-gradient(circle at 15% 0%, rgba(229, 199, 107, 0.16), transparent 45%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 34px -22px rgba(0, 0, 0, 0.75);
    }
    html.dark #work-area .retouch-color-card {
      color: #d4d4d8;
      background: rgba(39, 39, 42, 0.58);
    }
    html.dark #work-area .retouch-color-title {
      color: #f4f4f5;
    }
    html.dark #work-area .retouch-color-sub {
      color: #a1a1aa;
    }
    html.dark #work-area .retouch-color-icon {
      color: #fef3c7;
      background: linear-gradient(145deg, rgba(113, 63, 18, 0.92), rgba(63, 63, 70, 0.86));
    }
    html.dark #work-area .retouch-color-option:hover .retouch-color-card {
      border-color: rgba(229, 199, 107, 0.36);
      box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.8);
    }
    html.dark #work-area .retouch-color-option input:checked + .retouch-color-card {
      color: #fefce8;
      border-color: rgba(229, 199, 107, 0.7);
      background:
        linear-gradient(135deg, rgba(113, 63, 18, 0.92) 0%, rgba(201, 162, 39, 0.25) 46%, rgba(24, 24, 27, 0.96) 100%);
      box-shadow:
        0 14px 34px -18px rgba(0, 0, 0, 0.95),
        0 0 0 2px rgba(229, 199, 107, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    html.dark #work-area .retouch-color-option input:checked + .retouch-color-card .retouch-color-icon {
      color: #0c0a09;
      background: linear-gradient(145deg, #fef3c7, #e5c76b 55%, #b7791f);
    }
    html.dark #work-area .retouch-color-option input:checked + .retouch-color-card .retouch-color-title {
      color: #fff7ed;
    }
    html.dark #work-area .retouch-color-option input:checked + .retouch-color-card .retouch-color-sub {
      color: #fde68a;
    }
    .retouch-check-grid {
      display: grid;
      gap: 0.65rem;
      width: min(100%, 34rem);
    }
    .retouch-check-card {
      position: relative;
      display: flex;
      min-height: 4.45rem;
      cursor: pointer;
      border-radius: 1.15rem;
      -webkit-tap-highlight-color: transparent;
    }
    .retouch-check-card input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
    .retouch-check-body {
      position: relative;
      display: flex;
      width: 100%;
      align-items: flex-start;
      gap: 0.85rem;
      overflow: hidden;
      border-radius: inherit;
      border: 1px solid rgba(229, 231, 235, 0.95);
      padding: 0.9rem 1rem;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
        radial-gradient(circle at 0% 0%, rgba(201, 162, 39, 0.1), transparent 42%);
      box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.6);
      transition:
        transform 0.2s ease,
        box-shadow 0.24s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        opacity 0.18s ease;
    }
    .retouch-check-body::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.36) 46%, transparent 78%);
      transform: translateX(-55%);
      transition: opacity 0.22s ease, transform 0.5s ease;
      pointer-events: none;
    }
    .retouch-check-icon {
      position: relative;
      display: inline-flex;
      width: 2.45rem;
      height: 2.45rem;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      border-radius: 0.9rem;
      color: #92400e;
      background: linear-gradient(145deg, rgba(254, 243, 199, 0.98), rgba(253, 186, 116, 0.78));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    .retouch-check-icon svg {
      width: 1.25rem;
      height: 1.25rem;
    }
    .retouch-check-copy {
      position: relative;
      z-index: 1;
      min-width: 0;
      padding-top: 0.05rem;
    }
    .retouch-check-title {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.94rem;
      font-weight: 750;
      line-height: 1.2;
      color: #1f2937;
    }
    .retouch-check-title::after {
      content: 'Выкл.';
      border-radius: 999px;
      padding: 0.12rem 0.42rem;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: #78716c;
      background: rgba(120, 113, 108, 0.1);
    }
    .retouch-check-sub {
      display: block;
      margin-top: 0.24rem;
      font-size: 0.74rem;
      line-height: 1.32;
      color: #6b7280;
    }
    .retouch-check-card:hover .retouch-check-body {
      transform: translateY(-1px);
      border-color: rgba(201, 162, 39, 0.36);
      box-shadow: 0 14px 30px -22px rgba(120, 53, 15, 0.58);
    }
    .retouch-check-card input:checked + .retouch-check-body {
      border-color: rgba(201, 162, 39, 0.68);
      background:
        linear-gradient(135deg, rgba(254, 243, 199, 0.98) 0%, rgba(245, 158, 11, 0.24) 48%, rgba(255, 255, 255, 0.94) 100%);
      box-shadow:
        0 16px 34px -22px rgba(120, 53, 15, 0.82),
        0 0 0 2px rgba(201, 162, 39, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }
    .retouch-check-card input:checked + .retouch-check-body::after {
      opacity: 1;
      transform: translateX(55%);
    }
    .retouch-check-card input:checked + .retouch-check-body .retouch-check-icon {
      color: #451a03;
      background: linear-gradient(145deg, #fde68a, #d4af37 56%, #b7791f);
      box-shadow: 0 8px 16px -10px rgba(120, 53, 15, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }
    .retouch-check-card input:checked + .retouch-check-body .retouch-check-title::after {
      content: 'Вкл.';
      color: #451a03;
      background: rgba(212, 175, 55, 0.26);
    }
    .retouch-check-card input:focus-visible + .retouch-check-body {
      outline: 2px solid rgba(201, 162, 39, 0.62);
      outline-offset: 2px;
    }
    .retouch-check-card input:disabled + .retouch-check-body {
      cursor: not-allowed;
      opacity: 0.55;
      filter: grayscale(0.25);
    }
    html.dark #work-area .retouch-check-body {
      border-color: rgba(82, 82, 91, 0.68);
      background:
        linear-gradient(180deg, rgba(39, 39, 42, 0.92), rgba(24, 24, 27, 0.95)),
        radial-gradient(circle at 0% 0%, rgba(229, 199, 107, 0.12), transparent 45%);
      box-shadow: 0 16px 32px -24px rgba(0, 0, 0, 0.8);
    }
    html.dark #work-area .retouch-check-icon {
      color: #fef3c7;
      background: linear-gradient(145deg, rgba(113, 63, 18, 0.92), rgba(63, 63, 70, 0.86));
    }
    html.dark #work-area .retouch-check-title {
      color: #f4f4f5;
    }
    html.dark #work-area .retouch-check-title::after {
      color: #a8a29e;
      background: rgba(168, 162, 158, 0.12);
    }
    html.dark #work-area .retouch-check-sub {
      color: #a1a1aa;
    }
    html.dark #work-area .retouch-check-card:hover .retouch-check-body {
      border-color: rgba(229, 199, 107, 0.42);
      box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.9);
    }
    html.dark #work-area .retouch-check-card input:checked + .retouch-check-body {
      border-color: rgba(229, 199, 107, 0.7);
      background:
        linear-gradient(135deg, rgba(113, 63, 18, 0.9) 0%, rgba(201, 162, 39, 0.22) 48%, rgba(24, 24, 27, 0.96) 100%);
      box-shadow:
        0 16px 36px -22px rgba(0, 0, 0, 0.96),
        0 0 0 2px rgba(229, 199, 107, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    html.dark #work-area .retouch-check-card input:checked + .retouch-check-body .retouch-check-icon {
      color: #0c0a09;
      background: linear-gradient(145deg, #fef3c7, #e5c76b 55%, #b7791f);
    }
    html.dark #work-area .retouch-check-card input:checked + .retouch-check-body .retouch-check-title::after {
      color: #fef3c7;
      background: rgba(229, 199, 107, 0.2);
    }
    .retouch-size-panel {
      width: min(100%, 34rem);
      overflow: hidden;
      border-radius: 1.2rem;
      border: 1px solid rgba(201, 162, 39, 0.24);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
        radial-gradient(circle at 0% 0%, rgba(201, 162, 39, 0.12), transparent 46%);
      box-shadow: 0 14px 30px -24px rgba(120, 53, 15, 0.6);
    }
    .retouch-size-panel__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.85rem 0.95rem 0.65rem;
    }
    .retouch-size-panel__title {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 0.75rem;
    }
    .retouch-size-icon {
      display: inline-flex;
      width: 2.45rem;
      height: 2.45rem;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      border-radius: 0.9rem;
      color: #92400e;
      background: linear-gradient(145deg, rgba(254, 243, 199, 0.98), rgba(253, 186, 116, 0.78));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    .retouch-size-icon svg {
      width: 1.25rem;
      height: 1.25rem;
    }
    .retouch-size-kicker {
      display: block;
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #b45309;
      line-height: 1.15;
    }
    .retouch-size-label {
      display: block;
      margin-top: 0.08rem;
      font-size: 0.95rem;
      font-weight: 750;
      color: #1f2937;
      line-height: 1.2;
    }
    .retouch-size-orient {
      display: inline-flex;
      min-height: 2.35rem;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      border-radius: 0.82rem;
      border: 1px solid rgba(201, 162, 39, 0.28);
      padding: 0.55rem 0.7rem;
      color: #78350f;
      background: rgba(254, 243, 199, 0.46);
      font-size: 0.72rem;
      font-weight: 750;
      line-height: 1;
      transition: transform 0.18s ease, border-color 0.2s ease, background 0.2s ease, color 0.18s ease;
    }
    .retouch-size-orient:hover {
      transform: translateY(-1px);
      border-color: rgba(201, 162, 39, 0.54);
      background: rgba(254, 243, 199, 0.78);
    }
    .retouch-size-orient[aria-pressed='true'] {
      color: #451a03;
      border-color: rgba(201, 162, 39, 0.68);
      background: linear-gradient(135deg, rgba(254, 243, 199, 0.95), rgba(245, 158, 11, 0.28));
      box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.12);
    }
    .retouch-orient-seg {
      display: inline-flex;
      flex: 0 0 auto;
      gap: 0.18rem;
      padding: 0.2rem;
      border-radius: 0.95rem;
      border: 1px solid rgba(201, 162, 39, 0.32);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(254, 243, 199, 0.55));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    .retouch-orient-seg__btn {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      min-height: 2.15rem;
      padding: 0.42rem 0.7rem;
      border-radius: 0.78rem;
      border: 1px solid transparent;
      color: #92400e;
      font-size: 0.74rem;
      font-weight: 750;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: transparent;
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .retouch-orient-seg__ico {
      width: 1rem;
      height: 1rem;
      flex: 0 0 auto;
    }
    .retouch-orient-seg__btn:hover {
      color: #78350f;
      background: rgba(255, 255, 255, 0.62);
    }
    .retouch-orient-seg__btn.is-active {
      color: #422006;
      border-color: rgba(201, 162, 39, 0.45);
      background: linear-gradient(145deg, #fffbeb, #fde68a 70%, #fcd34d);
      box-shadow:
        0 2px 8px -3px rgba(120, 53, 15, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    .retouch-size-panel__control {
      padding: 0 0.95rem 0.95rem;
    }
    .retouch-size-select-wrap {
      position: relative;
    }
    .retouch-size-select-wrap::after {
      content: '';
      position: absolute;
      right: 1rem;
      top: 50%;
      width: 0.55rem;
      height: 0.55rem;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      color: #b45309;
      transform: translateY(-65%) rotate(45deg);
      pointer-events: none;
    }
    #work-area select.retouch-size-select {
      width: 100%;
      appearance: none;
      border-radius: 0.95rem;
      border: 1px solid rgba(201, 162, 39, 0.32);
      background: rgba(255, 255, 255, 0.9);
      padding: 0.82rem 2.4rem 0.82rem 0.95rem;
      color: #111827;
      font-size: 0.94rem;
      font-weight: 700;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    #work-area select.retouch-size-select:focus {
      border-color: rgba(201, 162, 39, 0.72);
      box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
    }
    .retouch-size-hint {
      margin-top: 0.55rem;
      font-size: 0.75rem;
      line-height: 1.35;
      color: #6b7280;
    }
    .retouch-frame-grid {
      display: grid;
      gap: 0.65rem;
      width: min(100%, 42rem);
    }
    @media (min-width: 640px) {
      .retouch-frame-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    .retouch-frame-card {
      position: relative;
      display: flex;
      min-height: 5.35rem;
      cursor: pointer;
      border-radius: 1.15rem;
      -webkit-tap-highlight-color: transparent;
    }
    .retouch-frame-card input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
    .retouch-frame-body {
      display: flex;
      width: 100%;
      align-items: flex-start;
      gap: 0.78rem;
      border-radius: inherit;
      border: 1px solid rgba(229, 231, 235, 0.95);
      padding: 0.9rem;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
      box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.6);
      transition: transform 0.2s ease, box-shadow 0.24s ease, border-color 0.22s ease, background 0.22s ease;
    }
    .retouch-frame-icon {
      display: inline-flex;
      width: 2.35rem;
      height: 2.35rem;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      border-radius: 0.85rem;
      color: #92400e;
      background: linear-gradient(145deg, rgba(254, 243, 199, 0.98), rgba(253, 186, 116, 0.75));
    }
    .retouch-frame-icon svg {
      width: 1.2rem;
      height: 1.2rem;
    }
    .retouch-frame-title {
      display: block;
      font-size: 0.92rem;
      font-weight: 750;
      line-height: 1.2;
      color: #1f2937;
    }
    .retouch-frame-sub {
      display: block;
      margin-top: 0.25rem;
      font-size: 0.72rem;
      line-height: 1.32;
      color: #6b7280;
    }
    .retouch-frame-card:hover .retouch-frame-body {
      transform: translateY(-1px);
      border-color: rgba(201, 162, 39, 0.36);
      box-shadow: 0 14px 30px -22px rgba(120, 53, 15, 0.58);
    }
    .retouch-frame-card input:checked + .retouch-frame-body {
      border-color: rgba(201, 162, 39, 0.68);
      background:
        linear-gradient(135deg, rgba(254, 243, 199, 0.98) 0%, rgba(245, 158, 11, 0.2) 52%, rgba(255, 255, 255, 0.94) 100%);
      box-shadow:
        0 16px 34px -22px rgba(120, 53, 15, 0.82),
        0 0 0 2px rgba(201, 162, 39, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }
    .retouch-frame-card input:checked + .retouch-frame-body .retouch-frame-icon {
      color: #451a03;
      background: linear-gradient(145deg, #fde68a, #d4af37 56%, #b7791f);
      box-shadow: 0 8px 16px -10px rgba(120, 53, 15, 0.9);
    }
    .retouch-frame-card input:focus-visible + .retouch-frame-body {
      outline: 2px solid rgba(201, 162, 39, 0.62);
      outline-offset: 2px;
    }
    html.dark #work-area .retouch-size-panel,
    html.dark #work-area .retouch-frame-body {
      border-color: rgba(82, 82, 91, 0.68);
      background:
        linear-gradient(180deg, rgba(39, 39, 42, 0.92), rgba(24, 24, 27, 0.95)),
        radial-gradient(circle at 0% 0%, rgba(229, 199, 107, 0.12), transparent 45%);
      box-shadow: 0 16px 32px -24px rgba(0, 0, 0, 0.8);
    }
    html.dark #work-area .retouch-size-label,
    html.dark #work-area .retouch-frame-title {
      color: #f4f4f5;
    }
    html.dark #work-area .retouch-size-kicker {
      color: #e5c76b;
    }
    html.dark #work-area .retouch-size-icon,
    html.dark #work-area .retouch-frame-icon {
      color: #fef3c7;
      background: linear-gradient(145deg, rgba(113, 63, 18, 0.92), rgba(63, 63, 70, 0.86));
    }
    html.dark #work-area .retouch-size-orient {
      color: #fde68a;
      border-color: rgba(229, 199, 107, 0.26);
      background: rgba(113, 63, 18, 0.34);
    }
    html.dark #work-area .retouch-size-orient:hover,
    html.dark #work-area .retouch-size-orient[aria-pressed='true'] {
      color: #fef3c7;
      border-color: rgba(229, 199, 107, 0.62);
      background: rgba(229, 199, 107, 0.14);
    }
    html.dark #work-area .retouch-orient-seg {
      border-color: rgba(229, 199, 107, 0.28);
      background: linear-gradient(180deg, rgba(63, 63, 70, 0.75), rgba(39, 39, 42, 0.9));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    html.dark #work-area .retouch-orient-seg__btn {
      color: #fde68a;
    }
    html.dark #work-area .retouch-orient-seg__btn:hover {
      color: #fef3c7;
      background: rgba(255, 255, 255, 0.06);
    }
    html.dark #work-area .retouch-orient-seg__btn.is-active {
      color: #0c0a09;
      border-color: rgba(229, 199, 107, 0.45);
      background: linear-gradient(145deg, #fef3c7, #e5c76b 60%, #d3a73f);
      box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }
    html.dark #work-area select.retouch-size-select {
      color: #f4f4f5;
      border-color: rgba(229, 199, 107, 0.28);
      background: rgba(9, 9, 11, 0.55);
    }
    html.dark #work-area select.retouch-size-select option {
      background: #18181b;
      color: #f4f4f5;
    }
    html.dark #work-area .retouch-size-hint,
    html.dark #work-area .retouch-frame-sub {
      color: #a1a1aa;
    }
    html.dark #work-area .retouch-frame-card:hover .retouch-frame-body {
      border-color: rgba(229, 199, 107, 0.42);
      box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.9);
    }
    html.dark #work-area .retouch-frame-card input:checked + .retouch-frame-body {
      border-color: rgba(229, 199, 107, 0.7);
      background:
        linear-gradient(135deg, rgba(113, 63, 18, 0.9) 0%, rgba(201, 162, 39, 0.2) 50%, rgba(24, 24, 27, 0.96) 100%);
      box-shadow:
        0 16px 36px -22px rgba(0, 0, 0, 0.96),
        0 0 0 2px rgba(229, 199, 107, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    html.dark #work-area .retouch-frame-card input:checked + .retouch-frame-body .retouch-frame-icon {
      color: #0c0a09;
      background: linear-gradient(145deg, #fef3c7, #e5c76b 55%, #b7791f);
    }
    html.dark #work-area .retouch-wishes-tabbar,
    html.dark #work-area .retouch-variant-filterbar {
      background: rgba(24, 24, 27, 0.85);
      border-color: rgba(82, 82, 91, 0.55);
    }
    html.dark #work-area .variant-card {
      background: rgba(24, 24, 27, 0.82);
      border-color: rgba(63, 63, 70, 0.5);
    }
    html.dark #work-area select.retouch-control,
    html.dark #work-area textarea.retouch-control {
      background: rgba(24, 24, 27, 0.92);
      border-color: rgba(82, 82, 91, 0.65);
      color: #f4f4f5;
    }
    html.dark #work-area select.retouch-control option {
      background: #18181b;
      color: #f4f4f5;
    }
    html.dark #work-area textarea.retouch-control::placeholder {
      color: rgba(161, 161, 170, 0.85);
    }
    html.dark #work-area #saved-prompts-empty {
      border-color: rgba(82, 82, 91, 0.55);
      color: #a1a1aa;
      background: rgba(24, 24, 27, 0.4);
    }
    /* Чипы одежды / фона (кнопки из wireChips) — тёмная тема без опоры на dark: из tailwind-built */
    html.dark #work-area .retouch-preset-chip:not(.retouch-preset-chip--on) {
      background: linear-gradient(180deg, rgba(39, 39, 42, 0.95), rgba(24, 24, 27, 0.98));
      border-color: rgba(82, 82, 91, 0.72);
      color: #e4e4e7;
    }
    html.dark #work-area .retouch-preset-chip:not(.retouch-preset-chip--on):hover {
      border-color: rgba(229, 199, 107, 0.48);
      background: linear-gradient(180deg, rgba(63, 63, 70, 0.95), rgba(39, 39, 42, 0.98));
      color: #fde68a;
    }
    html.dark #work-area .retouch-preset-chip.retouch-preset-chip--on {
      border-color: var(--brand-gold-light);
      background: linear-gradient(145deg, rgba(113, 63, 18, 0.9), rgba(63, 63, 70, 0.95));
      color: #fef3c7;
      box-shadow:
        0 0 0 2px rgba(229, 199, 107, 0.12),
        0 8px 16px -10px rgba(0, 0, 0, 0.55);
    }
    html.dark #work-area .retouch-preset-chip.retouch-preset-chip--on:hover {
      background: linear-gradient(145deg, rgba(146, 64, 14, 0.85), rgba(63, 63, 70, 0.98));
      border-color: #f0d080;
      color: #fef3c7;
    }
    html.dark #work-area .retouch-preset-chip:focus-visible {
      outline: 2px solid rgba(229, 199, 107, 0.55);
      outline-offset: 2px;
    }

    /* Оценка результата: плавное нажатие и тёмная тема */
    .retouch-feedback-btn {
      cursor: pointer;
      border-style: solid;
      border-width: 1px;
      transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.26s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.2s ease,
        opacity 0.22s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .retouch-feedback-btn:hover:not(:disabled) {
      transform: translateY(-2px);
    }
    .retouch-feedback-btn:active:not(:disabled) {
      transform: translateY(0) scale(0.96);
      transition-duration: 0.1s;
    }
    .retouch-feedback-btn:focus-visible {
      outline: 2px solid rgba(201, 162, 39, 0.45);
      outline-offset: 3px;
    }
    .retouch-feedback-btn--up {
      border-color: rgba(252, 211, 77, 0.9);
      background: rgba(254, 243, 199, 0.96);
      color: #422006;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .retouch-feedback-btn--up:hover:not(:disabled) {
      background: rgba(253, 230, 138, 0.99);
      border-color: rgba(245, 158, 11, 0.58);
      box-shadow: 0 12px 32px -12px rgba(201, 162, 39, 0.42);
    }
    .retouch-feedback-btn--down {
      border-color: rgba(209, 213, 219, 1);
      background: rgba(243, 244, 246, 1);
      color: #1f2937;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .retouch-feedback-btn--down:hover:not(:disabled) {
      background: rgba(229, 231, 235, 1);
      border-color: rgba(156, 163, 175, 0.9);
      box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.14);
    }
    .retouch-feedback-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none;
    }
    @keyframes retouch-feedback-success-pop {
      0% {
        transform: scale(1);
      }
      40% {
        transform: scale(1.07);
      }
      70% {
        transform: scale(0.97);
      }
      100% {
        transform: scale(1);
      }
    }
    .retouch-feedback-btn.retouch-feedback-btn--success-pulse {
      animation: retouch-feedback-success-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    html.dark #work-area .retouch-feedback-btn--up {
      border-color: rgba(229, 199, 107, 0.45);
      background: rgba(201, 162, 39, 0.18);
      color: #fef3c7;
      box-shadow: 0 2px 14px -4px rgba(0, 0, 0, 0.4);
    }
    html.dark #work-area .retouch-feedback-btn--up:hover:not(:disabled) {
      background: rgba(201, 162, 39, 0.3);
      border-color: rgba(229, 199, 107, 0.62);
      box-shadow: 0 14px 36px -14px rgba(201, 162, 39, 0.28);
    }
    html.dark #work-area .retouch-feedback-btn--down {
      border-color: rgba(82, 82, 91, 0.88);
      background: rgba(39, 39, 42, 0.94);
      color: #e4e4e7;
      box-shadow: 0 2px 14px -4px rgba(0, 0, 0, 0.45);
    }
    html.dark #work-area .retouch-feedback-btn--down:hover:not(:disabled) {
      background: rgba(63, 63, 70, 0.9);
      border-color: rgba(113, 113, 122, 0.95);
      box-shadow: 0 14px 36px -16px rgba(0, 0, 0, 0.5);
    }
    html.dark #work-area .retouch-feedback-btn:focus-visible {
      outline-color: rgba(229, 199, 107, 0.65);
    }
    html.dark #work-area .retouch-feedback-btn:disabled {
      opacity: 0.42;
    }
    @media (prefers-reduced-motion: reduce) {
      .retouch-feedback-btn {
        transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
      }
      .retouch-feedback-btn:hover:not(:disabled),
      .retouch-feedback-btn:active:not(:disabled) {
        transform: none;
      }
      .retouch-feedback-btn.retouch-feedback-btn--success-pulse {
        animation: none;
      }
    }

    .retouch-history-card {
      contain: layout;
      position: relative;
    }
    .retouch-select-cb {
      display: none;
      position: absolute;
      top: 10px; left: 10px;
      width: 22px; height: 22px;
      accent-color: rgb(201, 162, 39);
      cursor: pointer;
      z-index: 10;
    }
    .retouch-select-mode .retouch-select-cb { display: block; }
    .retouch-select-mode .retouch-history-card {
      cursor: pointer;
    }
    .retouch-history-card.retouch-selected {
      outline: 2px solid rgb(201, 162, 39);
      outline-offset: -2px;
      background: rgba(201, 162, 39, 0.06);
    }
    .profile-history-collapsed #profile-retouches-scroll {
      display: none;
    }
    .profile-retouches-scroll {
      scrollbar-gutter: stable;
    }
    .retouch-history-wishes-clamp {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .retouch-style-showcase {
      position: relative;
    }
    .retouch-style-showcase::before {
      content: '';
      position: absolute;
      inset: -1.25rem -0.8rem auto auto;
      width: 10rem;
      height: 10rem;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(201, 162, 39, 0.08), transparent 70%);
      filter: blur(8px);
      pointer-events: none;
    }
    .retouch-style-showcase::after {
      content: '';
      position: absolute;
      left: -1rem;
      bottom: 3rem;
      width: 8rem;
      height: 8rem;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(120, 113, 108, 0.06), transparent 72%);
      pointer-events: none;
    }
    /* Компактный режим блока «Одежда и фон» — обе колонки видны сразу */
    #retouch-style-showcase {
      --retouch-catalog-h: min(16rem, 42vh);
      --retouch-bg-tiles-h: min(9.25rem, 29vh);
      --retouch-bg-chips-h: min(5rem, 15vh);
    }
    .retouch-style-mobile-tabs { display: none; }
    @media (max-width: 639px) {
      .retouch-style-mobile-tabs {
        display: flex;
        gap: 0.45rem;
        margin-bottom: 0.65rem;
        padding: 0.2rem;
        border-radius: 0.85rem;
        background: rgba(228, 228, 231, 0.55);
      }
      html.dark .retouch-style-mobile-tabs {
        background: rgba(39, 39, 42, 0.85);
      }
      .retouch-style-mobile-tab {
        flex: 1 1 0;
        min-width: 0;
        min-height: 2.75rem;
        padding: 0.45rem 0.65rem;
        border-radius: 0.65rem;
        border: 1px solid transparent;
        background: transparent;
        color: #52525b;
        font-size: 0.8125rem;
        font-weight: 650;
        cursor: pointer;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        -webkit-tap-highlight-color: transparent;
      }
      html.dark .retouch-style-mobile-tab { color: #a1a1aa; }
      .retouch-style-mobile-tab--active {
        background: #fff;
        border-color: rgba(201, 162, 39, 0.35);
        color: #92400e;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
      }
      html.dark .retouch-style-mobile-tab--active {
        background: #27272a;
        color: #fcd34d;
        border-color: rgba(252, 211, 77, 0.25);
      }
      #retouch-style-showcase {
        --retouch-catalog-h: min(15rem, 40vh);
        --retouch-bg-tiles-h: min(14rem, 40vh);
        --retouch-bg-chips-h: min(7rem, 22vh);
      }
      #work-area #retouch-style-showcase .retouch-style-dual-grid {
        grid-template-columns: 1fr !important;
      }
      #work-area #retouch-style-showcase .retouch-style-dual-grid[data-retouch-style-tab="wardrobe"] .retouch-style-showcase__card--bg,
      #work-area #retouch-style-showcase .retouch-style-dual-grid[data-retouch-style-tab="bg"] .retouch-style-showcase__card--wardrobe {
        display: none !important;
      }
      #work-area #retouch-style-showcase .retouch-preset-tiles-scroll .retouch-preset-tile-caption {
        display: block !important;
      }
    }
    @media (min-width: 640px) {
      #retouch-style-showcase {
        --retouch-catalog-h: min(12.75rem, 38vh);
        --retouch-bg-tiles-h: min(11rem, 33vh);
        --retouch-bg-chips-h: min(5.75rem, 17vh);
      }
    }
    @media (min-width: 1024px) {
      #retouch-style-showcase {
        --retouch-catalog-h: min(14.5rem, 42vh);
        --retouch-bg-tiles-h: min(12.5rem, 36vh);
        --retouch-bg-chips-h: min(6.25rem, 18vh);
      }
    }
    #retouch-style-showcase .retouch-style-showcase__inner {
      padding: 0.65rem 0.7rem 0.75rem;
    }
    @media (min-width: 768px) {
      #retouch-style-showcase .retouch-style-showcase__inner {
        padding: 0.75rem 0.85rem 0.85rem;
      }
    }
    #retouch-style-showcase .retouch-style-dual-grid {
      gap: 0.5rem;
    }
    @media (min-width: 640px) {
      #retouch-style-showcase .retouch-style-dual-grid {
        gap: 0.65rem;
        align-items: stretch !important;
      }
      #retouch-style-showcase .retouch-style-showcase__card--bg {
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }
    }
    /* Панели фона: одновременно видна только активная (цвет или ч/б) */
    #retouch-style-showcase #retouch-bg-panel-color,
    #retouch-style-showcase #retouch-bg-panel-bw {
      display: none;
    }
    #retouch-style-showcase #retouch-bg-panel-color.retouch-bg-panel--active,
    #retouch-style-showcase #retouch-bg-panel-bw.retouch-bg-panel--active {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
    }
    @media (min-width: 640px) {
      #retouch-style-showcase #retouch-bg-panel-color.retouch-bg-panel--active,
      #retouch-style-showcase #retouch-bg-panel-bw.retouch-bg-panel--active {
        flex: 1 1 0;
        overflow: hidden;
      }
    }
    #retouch-style-showcase .retouch-style-showcase__card {
      padding: 0.5rem 0.5rem 0.55rem;
    }
    #retouch-style-showcase .retouch-style-showcase__card--wardrobe,
    #retouch-style-showcase .retouch-style-showcase__card--bg {
      padding: 0.55rem 0.5rem 0.6rem;
    }
    #retouch-style-showcase .retouch-style-card-sub,
    #retouch-style-showcase .retouch-style-picked,
    #retouch-style-showcase #retouch-bg-panel-footnote,
    #retouch-style-showcase .retouch-bg-scroll-hint,
    #retouch-style-showcase .retouch-bg-section-label {
      display: none !important;
    }
    #retouch-style-showcase #retouch-bg-panel-caption {
      display: block !important;
      font-size: 0.6875rem;
      line-height: 1.38;
      margin-bottom: 0.45rem;
      color: #6b7280;
    }
    html.dark #retouch-style-showcase #retouch-bg-panel-caption {
      color: #a1a1aa;
    }
    .retouch-bg-mode-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 0.35rem;
      padding: 0.12rem 0.42rem;
      border-radius: 999px;
      font-size: 0.5625rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1.2;
      border: 1px solid rgba(100, 116, 139, 0.35);
      background: rgba(241, 245, 249, 0.9);
      color: #475569;
      vertical-align: middle;
    }
    html.dark .retouch-bg-mode-badge {
      border-color: rgba(148, 163, 184, 0.35);
      background: rgba(39, 39, 42, 0.85);
      color: #cbd5e1;
    }
    .retouch-bg-mode-badge--bw {
      border-color: rgba(201, 162, 39, 0.4);
      background: rgba(201, 162, 39, 0.12);
      color: #92400e;
    }
    html.dark .retouch-bg-mode-badge--bw {
      border-color: rgba(201, 162, 39, 0.45);
      background: rgba(201, 162, 39, 0.14);
      color: #fde68a;
    }
    #retouch-style-showcase .retouch-style-card-head--compact {
      margin-bottom: 0.4rem;
      gap: 0.4rem;
      align-items: center;
    }
    #retouch-style-showcase .retouch-style-card-head--compact .retouch-style-card-icon {
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 0.5rem;
    }
    #retouch-style-showcase .retouch-style-showcase__card--wardrobe .retouch-style-card-icon {
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 0.5rem;
      box-shadow: none;
    }
    #retouch-style-showcase .retouch-style-card-head--compact .retouch-style-card-icon svg,
    #retouch-style-showcase .retouch-style-showcase__card--wardrobe .retouch-style-card-icon svg {
      width: 0.9rem;
      height: 0.9rem;
    }
    #retouch-style-showcase .retouch-style-card-head__main {
      display: flex;
      flex-direction: column;
      gap: 0.05rem;
      min-width: 0;
    }
    #retouch-style-showcase .retouch-style-card-title {
      font-size: 0.8125rem;
      line-height: 1.15;
    }
    #retouch-style-showcase .retouch-style-showcase__card--wardrobe .retouch-style-card-title {
      font-size: 0.8125rem;
    }
    #retouch-style-showcase .retouch-style-card-picked {
      font-size: 0.625rem;
      font-weight: 650;
      line-height: 1.2;
      color: #92400e;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #retouch-style-showcase .retouch-style-card-picked--bg {
      color: #475569;
    }
    .dark #retouch-style-showcase .retouch-style-card-picked {
      color: #fde68a;
    }
    .dark #retouch-style-showcase .retouch-style-card-picked--bg {
      color: #cbd5e1;
    }
    #retouch-style-showcase .retouch-wardrobe-toolbar--row {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 0.3rem;
      margin-bottom: 0.4rem;
    }
    #retouch-style-showcase .retouch-wardrobe-toolbar--row .retouch-style-keep-btn {
      flex: 0 1 auto;
      width: auto;
      min-width: 0;
      min-height: 1.85rem;
      padding: 0.28rem 0.45rem;
      border-radius: 0.55rem;
      border-width: 1px;
      font-size: 0.625rem;
      gap: 0.25rem;
    }
    #retouch-style-showcase .retouch-wardrobe-toolbar--row .retouch-style-keep-btn svg {
      width: 0.85rem;
      height: 0.85rem;
    }
    #retouch-style-showcase .retouch-wardrobe-toolbar--row .retouch-wardrobe-gender-switch {
      flex: 1 1 7.5rem;
      min-width: 0;
      border-radius: 0.55rem;
      padding: 2px;
    }
    #retouch-style-showcase .retouch-wardrobe-gender-switch button {
      padding: 0.3rem 0.35rem;
      font-size: 0.625rem;
      border-radius: 0.42rem;
    }
    #retouch-style-showcase .retouch-wardrobe-search {
      padding: 0.3rem 0.45rem 0.3rem 1.55rem;
      font-size: 0.6875rem;
      border-radius: 0.5rem;
      background-size: 0.75rem;
      background-position: 0.38rem center;
    }
    #retouch-style-showcase .retouch-style-section--wardrobe {
      padding: 0;
      border: none;
      background: transparent;
      margin: 0;
    }
    #retouch-style-showcase .retouch-wardrobe-tiles-scroll {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.28rem 0.22rem;
      max-height: var(--retouch-catalog-h);
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: thin;
      padding: 0.05rem 0.02rem 0.2rem;
    }
    @media (min-width: 640px) {
      #retouch-style-showcase .retouch-wardrobe-tiles-scroll {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.32rem 0.26rem;
      }
    }
    @media (min-width: 1024px) {
      #retouch-style-showcase .retouch-wardrobe-tiles-scroll {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
    #retouch-style-showcase .retouch-wardrobe-tiles-scroll .retouch-preset-tile {
      max-width: 100%;
      aspect-ratio: 4 / 5;
      border-radius: 0.45rem;
      border-width: 1.5px;
    }
    #retouch-style-showcase .retouch-wardrobe-tiles-scroll .retouch-preset-tile-caption,
    #retouch-style-showcase .retouch-preset-tiles-scroll .retouch-preset-tile-caption {
      display: none;
    }
    #retouch-style-showcase .retouch-preset-tiles-scroll {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.28rem 0.22rem;
      max-height: var(--retouch-bg-tiles-h);
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: thin;
      padding: 0.05rem 0.02rem 0.2rem;
    }
    @media (min-width: 640px) {
      #retouch-style-showcase .retouch-preset-tiles-scroll {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        overflow-y: scroll;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        scrollbar-gutter: stable;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.32rem 0.26rem;
      }
      #work-area #retouch-style-showcase .retouch-preset-tiles-scroll {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        overflow-y: scroll;
        overflow-x: hidden;
      }
    }
    @media (min-width: 1024px) {
      #retouch-style-showcase .retouch-preset-tiles-scroll {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
    }
    #retouch-style-showcase .retouch-preset-tiles-scroll .retouch-preset-tile-wrap {
      content-visibility: auto;
      contain-intrinsic-size: auto 5.5rem;
    }
    #retouch-style-showcase .retouch-preset-tiles-scroll .retouch-preset-tile {
      width: 100%;
      max-width: 100%;
      height: auto;
      aspect-ratio: 1;
      border-radius: 0.45rem;
      border-width: 1.5px;
    }
    #retouch-style-showcase .retouch-preset-tiles-scroll .retouch-bg-section-label--in-grid {
      grid-column: 1 / -1;
      margin: 0.4rem 0 0.1rem;
    }
    #retouch-style-showcase .retouch-preset-tiles-scroll .retouch-bg-section-label--in-grid:first-child {
      margin-top: 0;
    }
    #retouch-style-showcase .retouch-preset-tile.retouch-preset-tile--on::after {
      width: 0.8rem;
      height: 0.8rem;
      top: 0.15rem;
      right: 0.15rem;
      background-size: 0.55rem;
    }
    #retouch-style-showcase .retouch-bg-chips-grid {
      grid-template-columns: 1fr;
      gap: 0.28rem;
      flex: 0 0 auto;
      max-height: var(--retouch-bg-chips-h);
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: thin;
    }
    @media (min-width: 640px) {
      #retouch-style-showcase .retouch-bg-chips-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
        overflow: visible;
      }
    }
    #retouch-style-showcase .retouch-preset-chip {
      min-height: 1.65rem !important;
      padding: 0.28rem 0.35rem !important;
      font-size: 0.625rem !important;
      line-height: 1.15 !important;
      border-radius: 0.45rem !important;
    }
    /* Украшения — всегда видны, лёгкий золотой акцент */
    #retouch-style-showcase .retouch-jewelry-panel {
      margin-top: 0.45rem;
      padding: 0.5rem 0.52rem 0.55rem;
      border-radius: 0.65rem;
      border: 1.5px solid rgba(201, 162, 39, 0.42);
      background:
        linear-gradient(180deg, rgba(254, 243, 199, 0.52) 0%, rgba(255, 255, 255, 0.62) 100%);
      box-shadow:
        0 0 0 1px rgba(201, 162, 39, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    .dark #retouch-style-showcase .retouch-jewelry-panel {
      border-color: rgba(229, 199, 107, 0.38);
      background:
        linear-gradient(180deg, rgba(113, 63, 18, 0.38) 0%, rgba(39, 39, 42, 0.72) 100%);
      box-shadow:
        0 0 0 1px rgba(229, 199, 107, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    #retouch-style-showcase .retouch-jewelry-panel__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.35rem;
      margin-bottom: 0.42rem;
    }
    #retouch-style-showcase .retouch-jewelry-panel__title {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #92400e;
    }
    #retouch-style-showcase .retouch-jewelry-panel__title::before {
      content: '';
      width: 0.42rem;
      height: 0.42rem;
      border-radius: 999px;
      background: #d4af37;
      box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
      flex-shrink: 0;
    }
    .dark #retouch-style-showcase .retouch-jewelry-panel__title {
      color: #fde68a;
    }
    #retouch-style-showcase .retouch-jewelry-panel__picked {
      font-size: 0.625rem;
      font-weight: 650;
      color: #78350f;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 46%;
      text-align: right;
    }
    .dark #retouch-style-showcase .retouch-jewelry-panel__picked {
      color: #fde68a;
    }
    #retouch-style-showcase .retouch-jewelry-chips-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.32rem;
    }
    #retouch-style-showcase .retouch-jewelry-chips-grid .retouch-preset-chip {
      min-height: 1.85rem !important;
      font-size: 0.625rem !important;
      font-weight: 650 !important;
      border-width: 1.5px;
    }
    .retouch-chip-label { display: inline; line-height: 1.15; }
    .retouch-chip-label--short { display: none; }
    @media (max-width: 639px) {
      .retouch-jewelry-chips-grid .retouch-chip-label--long { display: none; }
      .retouch-jewelry-chips-grid .retouch-chip-label--short { display: inline; }
    }
    #retouch-style-showcase .retouch-jewelry-note-fold {
      margin-top: 0.35rem;
    }
    /* Цвет глаз — компактная сетка квадратных иконок */
    #retouch-style-showcase .retouch-eye-color-panel {
      margin-top: 0.45rem;
      padding: 0.5rem 0.52rem 0.55rem;
      border-radius: 0.65rem;
      border: 1.5px solid rgba(56, 189, 248, 0.35);
      background: linear-gradient(180deg, rgba(224, 242, 254, 0.55) 0%, rgba(255, 255, 255, 0.62) 100%);
      box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    html.dark #retouch-style-showcase .retouch-eye-color-panel {
      border-color: rgba(56, 189, 248, 0.28);
      background: linear-gradient(180deg, rgba(12, 74, 110, 0.35) 0%, rgba(39, 39, 42, 0.72) 100%);
      box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    #retouch-style-showcase .retouch-eye-color-panel__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.35rem;
      margin-bottom: 0.42rem;
    }
    #retouch-style-showcase .retouch-eye-color-panel__title {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #0369a1;
    }
    #retouch-style-showcase .retouch-eye-color-panel__title::before {
      content: '';
      width: 0.42rem;
      height: 0.42rem;
      border-radius: 999px;
      background: #38bdf8;
      box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
      flex-shrink: 0;
    }
    html.dark #retouch-style-showcase .retouch-eye-color-panel__title {
      color: #7dd3fc;
    }
    #retouch-style-showcase .retouch-eye-color-panel__picked {
      font-size: 0.625rem;
      font-weight: 650;
      color: #64748b;
      text-align: right;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 46%;
    }
    html.dark #retouch-style-showcase .retouch-eye-color-panel__picked {
      color: #a1a1aa;
    }
    #retouch-style-showcase .retouch-eye-color-tiles-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.35rem 0.25rem;
    }
    #retouch-style-showcase .retouch-eye-color-tile-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 0;
    }
    #retouch-style-showcase .retouch-preset-tile--eye-color {
      width: 100% !important;
      max-width: none !important;
      height: auto !important;
      min-height: 3.75rem;
      aspect-ratio: 5 / 4;
      border-radius: 0.55rem;
      flex-shrink: 1;
    }
    #retouch-style-showcase .retouch-preset-tile--eye-color img {
      object-fit: cover;
      object-position: center 38%;
    }
    #retouch-style-showcase .retouch-preset-tile--eye-color.retouch-preset-tile--keep {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.25rem;
    }
    #retouch-style-showcase .retouch-preset-keep-label--eye {
      font-size: 0.625rem;
      line-height: 1.2;
      text-align: center;
      padding: 0.2rem;
      font-weight: 650;
    }
    #retouch-style-showcase .retouch-eye-color-tile-caption {
      margin-top: 0.22rem;
      font-size: 0.625rem;
      line-height: 1.2;
      font-weight: 650;
      text-align: center;
      color: #57534e;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    html.dark #retouch-style-showcase .retouch-eye-color-tile-caption {
      color: #a1a1aa;
    }
    #retouch-style-showcase .retouch-style-subfold {
      border-radius: 0.55rem;
      margin-top: 0.35rem !important;
    }
    #retouch-style-showcase .retouch-style-subfold > summary {
      padding: 0.42rem 0.5rem;
      font-size: 0.625rem;
    }
    #retouch-style-showcase .retouch-style-subfold__body {
      padding: 0 0.5rem 0.45rem;
    }
    #retouch-style-showcase .retouch-style-subfold__body > p {
      display: none;
    }
    #retouch-style-showcase .retouch-style-note-fold {
      margin-top: 0.35rem;
      border-radius: 0.5rem;
      border: 1px dashed rgba(201, 162, 39, 0.28);
      background: rgba(255, 255, 255, 0.35);
      overflow: hidden;
    }
    .dark #retouch-style-showcase .retouch-style-note-fold {
      border-color: rgba(229, 199, 107, 0.2);
      background: rgba(24, 24, 27, 0.35);
    }
    #retouch-style-showcase .retouch-style-note-fold > summary {
      list-style: none;
      cursor: pointer;
      padding: 0.38rem 0.5rem;
      font-size: 0.625rem;
      font-weight: 650;
      color: #78716c;
    }
    #retouch-style-showcase .retouch-style-note-fold > summary::-webkit-details-marker {
      display: none;
    }
    #retouch-style-showcase .retouch-style-note-fold textarea {
      margin: 0;
      border: none !important;
      border-top: 1px solid rgba(229, 231, 235, 0.85) !important;
      border-radius: 0 !important;
      min-height: 0 !important;
      padding: 0.4rem 0.5rem !important;
      font-size: 0.6875rem !important;
    }
    .dark #retouch-style-showcase .retouch-style-note-fold textarea {
      border-top-color: rgba(63, 63, 70, 0.85) !important;
    }
    #retouch-style-showcase #retouch-per-variant-wrap {
      margin-bottom: 0.45rem !important;
    }
    #retouch-style-showcase .retouch-variant-mode__surface {
      padding: 0.5rem 0.6rem 0.55rem !important;
    }
    #retouch-style-showcase .retouch-variant-mode__desc {
      display: none;
    }
    #retouch-style-showcase .retouch-variant-mode__surface .flex.h-10 {
      display: none;
    }
    #retouch-style-showcase .retouch-variant-mode__surface .flex.items-start.gap-3 {
      gap: 0;
    }
    #retouch-style-showcase .retouch-variant-mode__surface .text-sm {
      font-size: 0.75rem;
    }
    #retouch-style-showcase .retouch-variant-mode-switch button {
      padding: 0.35rem 0.4rem;
      font-size: 0.6875rem;
    }
    #retouch-style-showcase #retouch-variant-tab-bar {
      margin-top: 0.45rem !important;
      padding-top: 0.45rem !important;
    }
    #retouch-style-showcase #retouch-variant-active-hint {
      display: none !important;
    }
    #retouch-style-showcase #retouch-variant-tab-bar > p {
      display: none;
    }
    #retouch-style-showcase #retouch-variant-tab-bar .retouch-vtab {
      min-height: 2rem;
      font-size: 0.875rem;
    }
    /* Текущий выбор одежды / фона */
    .retouch-style-picked {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      margin-bottom: 0.75rem;
      padding: 0.5rem 0.65rem;
      border-radius: 0.75rem;
      border: 1px solid rgba(201, 162, 39, 0.28);
      background: rgba(254, 243, 199, 0.35);
      font-size: 0.72rem;
      line-height: 1.35;
      color: #78350f;
    }
    .retouch-style-picked--bg {
      border-color: rgba(100, 116, 139, 0.28);
      background: rgba(241, 245, 249, 0.72);
      color: #334155;
    }
    .retouch-style-picked__label {
      flex-shrink: 0;
      font-weight: 750;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-size: 0.62rem;
      opacity: 0.82;
    }
    .retouch-style-picked__value {
      min-width: 0;
      font-weight: 650;
      color: inherit;
    }
    .dark .retouch-style-picked {
      border-color: rgba(229, 199, 107, 0.22);
      background: rgba(113, 63, 18, 0.28);
      color: #fde68a;
    }
    .dark .retouch-style-picked--bg {
      border-color: rgba(148, 163, 184, 0.22);
      background: rgba(51, 65, 85, 0.35);
      color: #cbd5e1;
    }
    /* Кнопка «Как на фото» и переключатель пола */
    .retouch-wardrobe-toolbar {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      margin-bottom: 0.65rem;
    }
    .retouch-style-keep-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      width: 100%;
      min-height: 2.65rem;
      padding: 0.5rem 0.75rem;
      border-radius: 0.8rem;
      border: 2px dashed rgba(201, 162, 39, 0.45);
      background: rgba(255, 255, 255, 0.65);
      font-size: 0.8125rem;
      font-weight: 700;
      color: #92400e;
      cursor: pointer;
      transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .retouch-style-keep-btn:hover {
      border-color: rgba(201, 162, 39, 0.72);
      background: rgba(254, 243, 199, 0.45);
      transform: translateY(-1px);
    }
    .retouch-style-keep-btn.retouch-style-keep-btn--on {
      border-style: solid;
      border-color: #c9a227;
      background: linear-gradient(135deg, rgba(254, 243, 199, 0.92), rgba(252, 211, 77, 0.35));
      box-shadow:
        0 0 0 3px rgba(201, 162, 39, 0.22),
        0 10px 24px -10px rgba(201, 162, 39, 0.35);
      color: #422006;
    }
    .dark .retouch-style-keep-btn {
      border-color: rgba(229, 199, 107, 0.35);
      background: rgba(39, 39, 42, 0.72);
      color: #fde68a;
    }
    .dark .retouch-style-keep-btn:hover {
      border-color: rgba(229, 199, 107, 0.55);
      background: rgba(63, 63, 70, 0.85);
    }
    .dark .retouch-style-keep-btn.retouch-style-keep-btn--on {
      border-color: #e5c76b;
      background: linear-gradient(135deg, rgba(113, 63, 18, 0.75), rgba(63, 63, 70, 0.9));
      box-shadow:
        0 0 0 3px rgba(229, 199, 107, 0.18),
        0 12px 28px -10px rgba(0, 0, 0, 0.55);
      color: #fef3c7;
    }
    .retouch-wardrobe-gender-switch {
      display: flex;
      width: 100%;
      padding: 3px;
      border-radius: 0.9rem;
      border: 1px solid rgba(201, 162, 39, 0.22);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(244, 244, 245, 0.95));
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .dark .retouch-wardrobe-gender-switch {
      border-color: rgba(229, 199, 107, 0.2);
      background: linear-gradient(180deg, rgba(39, 39, 42, 0.96), rgba(24, 24, 27, 0.98));
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    }
    .retouch-wardrobe-gender-switch button {
      flex: 1;
      border: 1px solid transparent;
      cursor: pointer;
      border-radius: 0.7rem;
      padding: 0.5rem 0.55rem;
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.2;
      color: rgb(82, 82, 91);
      background: transparent;
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .dark .retouch-wardrobe-gender-switch button {
      color: rgb(161, 161, 170);
    }
    .retouch-wardrobe-gender-switch button.retouch-wardrobe-gender-btn--on {
      color: #422006;
      border-color: rgba(201, 162, 39, 0.4);
      background: linear-gradient(145deg, #fffbeb, #fde68a 72%, #fcd34d);
      box-shadow:
        0 2px 8px -2px rgba(120, 53, 15, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    .dark .retouch-wardrobe-gender-switch button.retouch-wardrobe-gender-btn--on {
      color: #fef3c7;
      border-color: rgba(229, 199, 107, 0.35);
      background: linear-gradient(145deg, rgba(113, 63, 18, 0.85), rgba(63, 63, 70, 0.95));
      box-shadow:
        0 2px 10px -2px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .retouch-wardrobe-search {
      width: 100%;
      padding: 0.48rem 0.65rem 0.48rem 2rem;
      border-radius: 0.7rem;
      border: 1px solid rgba(209, 213, 219, 0.95);
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E")
        0.55rem center / 0.95rem no-repeat,
        rgba(255, 255, 255, 0.88);
      font-size: 0.8125rem;
      color: #1f2937;
      outline: none;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .retouch-wardrobe-search:focus {
      border-color: rgba(201, 162, 39, 0.55);
      box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
    }
    .dark .retouch-wardrobe-search {
      border-color: rgba(82, 82, 91, 0.72);
      background-color: rgba(24, 24, 27, 0.72);
      color: #f4f4f5;
    }
    .retouch-wardrobe-panel {
      margin-bottom: 0;
    }
    .retouch-wardrobe-panel.hidden {
      display: none;
    }
    .retouch-preset-tile-wrap--filtered {
      display: none !important;
    }
    .retouch-style-subfold {
      border-radius: 0.85rem;
      border: 1px solid rgba(229, 231, 235, 0.85);
      background: rgba(255, 255, 255, 0.42);
      overflow: hidden;
    }
    .retouch-style-subfold > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.62rem 0.7rem;
      font-size: 0.72rem;
      font-weight: 750;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #78716c;
    }
    .retouch-style-subfold > summary::-webkit-details-marker { display: none; }
    .retouch-style-subfold__chevron {
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
      color: #9ca3af;
      transition: transform 0.2s ease;
    }
    .retouch-style-subfold[open] .retouch-style-subfold__chevron {
      transform: rotate(180deg);
    }
    .retouch-style-subfold__body {
      padding: 0 0.7rem 0.75rem;
    }
    .dark .retouch-style-subfold {
      border-color: rgba(82, 82, 91, 0.55);
      background: rgba(24, 24, 27, 0.42);
    }
    .dark .retouch-style-subfold > summary {
      color: #a8a29e;
    }
    .retouch-bg-section-label {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.45rem;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #64748b;
    }
    .retouch-bg-section-label::before {
      content: '';
      width: 0.35rem;
      height: 0.35rem;
      border-radius: 999px;
      background: #94a3b8;
      box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
    }
    .dark .retouch-bg-section-label {
      color: #94a3b8;
    }
    .retouch-preset-tiles-scroll .retouch-bg-section-label--in-grid {
      grid-column: 1 / -1;
      margin: 0.4rem 0 0.1rem;
    }
    .retouch-preset-tiles-scroll .retouch-bg-section-label--in-grid:first-child {
      margin-top: 0;
    }
    .retouch-bg-chips-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.45rem;
    }
    @media (min-width: 640px) {
      .retouch-bg-chips-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    /* Карточка «Фон» — акцент как у одежды, но холодный */
    .retouch-style-showcase__card--bg {
      border-width: 2px;
      border-color: rgba(100, 116, 139, 0.38);
      background:
        radial-gradient(circle at 100% 0%, rgba(226, 232, 240, 0.65), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.78));
      box-shadow:
        0 0 0 1px rgba(100, 116, 139, 0.1),
        0 18px 42px -20px rgba(51, 65, 85, 0.22);
    }
    .retouch-style-showcase__card--bg::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: 1.1rem 1.1rem 0 0;
      background: linear-gradient(90deg, rgba(148, 163, 184, 0.15), rgba(100, 116, 139, 0.75) 40%, rgba(148, 163, 184, 0.55) 70%, rgba(148, 163, 184, 0.15));
      pointer-events: none;
    }
    .dark .retouch-style-showcase__card--bg {
      border-color: rgba(148, 163, 184, 0.32);
      background:
        radial-gradient(circle at 100% 0%, rgba(51, 65, 85, 0.45), transparent 45%),
        linear-gradient(180deg, rgba(39, 39, 42, 0.92), rgba(24, 24, 27, 0.88));
      box-shadow:
        0 0 0 1px rgba(148, 163, 184, 0.1),
        0 20px 48px -16px rgba(0, 0, 0, 0.65);
    }
    .retouch-preset-tile.retouch-preset-tile--on::after {
      content: '';
      position: absolute;
      top: 0.28rem;
      right: 0.28rem;
      width: 1.05rem;
      height: 1.05rem;
      border-radius: 999px;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.5'/%3E%3C/svg%3E")
        center / 0.7rem no-repeat,
        #c9a227;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
      pointer-events: none;
      z-index: 2;
    }
    .dark .retouch-preset-tile.retouch-preset-tile--on::after {
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%231a1a1a' stroke-width='2.5'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.5'/%3E%3C/svg%3E")
        center / 0.7rem no-repeat,
        #e5c76b;
    }
    .retouch-style-showcase__frame {
      position: relative;
      border-radius: 1.35rem;
      padding: 1px;
      background: linear-gradient(
        145deg,
        rgba(180, 150, 60, 0.22),
        rgba(214, 211, 209, 0.46) 44%,
        rgba(120, 113, 108, 0.14)
      );
      box-shadow:
        0 20px 46px -22px rgba(0, 0, 0, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    }
    .dark .retouch-style-showcase__frame {
      background: linear-gradient(
        145deg,
        rgba(229, 199, 107, 0.12),
        rgba(82, 82, 91, 0.32) 45%,
        rgba(120, 113, 108, 0.1)
      );
      box-shadow:
        0 28px 64px -14px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    }
    .retouch-style-showcase__inner {
      position: relative;
      overflow: hidden;
      border-radius: calc(1.35rem - 1px);
      padding: 1rem 0.95rem 1.15rem;
      background:
        radial-gradient(circle at 8% 0%, rgba(254, 243, 199, 0.34), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995) 0%, rgba(250, 250, 249, 0.98) 56%, rgba(245, 245, 244, 0.96) 100%);
    }
    @media (min-width: 768px) {
      .retouch-style-showcase__inner {
        padding: 1.35rem 1.5rem 1.5rem;
      }
    }
    .dark .retouch-style-showcase__inner {
      background:
        radial-gradient(circle at 8% 0%, rgba(113, 63, 18, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(39, 39, 42, 0.96) 0%, rgba(24, 24, 27, 0.99) 100%);
    }
    .retouch-style-showcase__hero {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      margin-bottom: 1rem;
      border-radius: 1.15rem;
      border: 1px solid rgba(201, 162, 39, 0.22);
      padding: 0.95rem;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(250, 250, 249, 0.74)),
        radial-gradient(circle at 0% 0%, rgba(201, 162, 39, 0.1), transparent 52%);
      box-shadow: 0 14px 28px -24px rgba(120, 53, 15, 0.42);
    }
    @media (min-width: 1024px) {
      .retouch-style-showcase__hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.05rem 1.15rem;
      }
    }
    .dark .retouch-style-showcase__hero {
      border-color: rgba(229, 199, 107, 0.18);
      background:
        linear-gradient(135deg, rgba(39, 39, 42, 0.78), rgba(24, 24, 27, 0.7)),
        radial-gradient(circle at 0% 0%, rgba(229, 199, 107, 0.08), transparent 52%);
      box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
    }
    .retouch-style-showcase__badge {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 0.45rem;
      border-radius: 999px;
      border: 1px solid rgba(201, 162, 39, 0.28);
      padding: 0.28rem 0.62rem;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #92400e;
      background: rgba(254, 243, 199, 0.48);
    }
    .dark .retouch-style-showcase__badge {
      border-color: rgba(229, 199, 107, 0.24);
      color: #fde68a;
      background: rgba(113, 63, 18, 0.34);
    }
    .retouch-style-showcase__status {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 0.5rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.24);
      padding: 0.42rem 0.72rem;
      font-size: 0.72rem;
      font-weight: 650;
      color: #64748b;
      background: rgba(255, 255, 255, 0.62);
    }
    .dark .retouch-style-showcase__status {
      border-color: rgba(82, 82, 91, 0.62);
      color: #a1a1aa;
      background: rgba(24, 24, 27, 0.62);
    }
    .retouch-style-showcase__card {
      position: relative;
      overflow: hidden;
      border-radius: 1.1rem;
      border: 1px solid rgba(201, 162, 39, 0.22);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 250, 249, 0.7));
      padding: 0.85rem 0.8rem 0.95rem;
      box-shadow: 0 12px 30px -24px rgba(15, 23, 42, 0.42);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    /* Карточка «Одежда» — главный акцент блока образа */
    .retouch-style-showcase__card--wardrobe {
      border-width: 2px;
      border-color: rgba(201, 162, 39, 0.48);
      padding: 1rem 0.9rem 1.05rem;
      background:
        radial-gradient(circle at 0% 0%, rgba(254, 243, 199, 0.55), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(254, 252, 232, 0.72));
      box-shadow:
        0 0 0 1px rgba(201, 162, 39, 0.14),
        0 18px 42px -20px rgba(180, 130, 20, 0.38);
    }
    .retouch-style-showcase__card--wardrobe::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: 1.1rem 1.1rem 0 0;
      background: linear-gradient(90deg, rgba(201, 162, 39, 0.15), rgba(201, 162, 39, 0.85) 35%, rgba(229, 199, 107, 0.75) 65%, rgba(201, 162, 39, 0.15));
      pointer-events: none;
    }
    .retouch-style-showcase__card--wardrobe .retouch-style-card-title {
      font-size: 1.0625rem;
      letter-spacing: -0.01em;
    }
    .retouch-style-showcase__card--wardrobe .retouch-style-card-icon {
      width: 2.85rem;
      height: 2.85rem;
      border-radius: 1rem;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 6px 16px -6px rgba(180, 130, 20, 0.45);
    }
    .retouch-style-section--wardrobe {
      border-color: rgba(201, 162, 39, 0.28);
      background: rgba(255, 255, 255, 0.72);
      padding: 0.8rem 0.75rem;
    }
    .retouch-style-section--wardrobe .retouch-style-section-title {
      font-size: 0.72rem;
      color: #92400e;
    }
    .retouch-style-showcase__card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 38%, transparent 74%, rgba(201, 162, 39, 0.035));
      pointer-events: none;
    }
    .retouch-style-card-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 0.85rem;
    }
    .retouch-style-card-icon {
      display: inline-flex;
      width: 2.45rem;
      height: 2.45rem;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      border-radius: 0.9rem;
      color: #92400e;
      background: linear-gradient(145deg, rgba(254, 243, 199, 0.92), rgba(245, 158, 11, 0.28));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    .retouch-style-card-icon--bg {
      color: #57534e;
      background: linear-gradient(145deg, rgba(245, 245, 244, 0.96), rgba(214, 211, 209, 0.72));
    }
    .retouch-style-card-icon svg {
      width: 1.25rem;
      height: 1.25rem;
    }
    .retouch-style-card-title {
      font-size: 0.98rem;
      font-weight: 780;
      line-height: 1.15;
      color: #111827;
    }
    .retouch-style-card-sub {
      margin-top: 0.18rem;
      font-size: 0.72rem;
      line-height: 1.3;
      color: #6b7280;
    }
    .retouch-style-section {
      position: relative;
      z-index: 1;
      border-radius: 0.92rem;
      border: 1px solid rgba(229, 231, 235, 0.78);
      padding: 0.72rem;
      background: rgba(255, 255, 255, 0.48);
    }
    .retouch-style-section + .retouch-style-section {
      margin-top: 0.62rem;
    }
    .retouch-style-section-title {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.5rem;
      font-size: 0.68rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #78716c;
    }
    .retouch-style-section-title::before {
      content: '';
      width: 0.38rem;
      height: 0.38rem;
      border-radius: 999px;
      background: #d4af37;
      box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
    }
    .retouch-style-textarea {
      position: relative;
      z-index: 1;
      border-color: rgba(201, 162, 39, 0.24) !important;
      border-radius: 0.9rem !important;
      background: rgba(255, 255, 255, 0.74) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }
    @media (min-width: 768px) {
      .retouch-style-showcase__card {
        padding: 1rem 1rem 1.15rem;
      }
    }
    .dark .retouch-style-showcase__card {
      border-color: rgba(229, 199, 107, 0.2);
      background:
        linear-gradient(180deg, rgba(39, 39, 42, 0.76), rgba(24, 24, 27, 0.74));
      box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.45);
    }
    .dark .retouch-style-showcase__card--wardrobe {
      border-color: rgba(229, 199, 107, 0.42);
      background:
        radial-gradient(circle at 0% 0%, rgba(113, 63, 18, 0.35), transparent 45%),
        linear-gradient(180deg, rgba(48, 45, 36, 0.92), rgba(24, 24, 27, 0.88));
      box-shadow:
        0 0 0 1px rgba(229, 199, 107, 0.12),
        0 20px 48px -16px rgba(0, 0, 0, 0.65);
    }
    .dark .retouch-style-section--wardrobe {
      border-color: rgba(229, 199, 107, 0.22);
      background: rgba(39, 39, 42, 0.72);
    }
    .dark .retouch-style-section--wardrobe .retouch-style-section-title {
      color: #fde68a;
    }
    .dark .retouch-style-card-icon {
      color: #fef3c7;
      background: linear-gradient(145deg, rgba(113, 63, 18, 0.92), rgba(63, 63, 70, 0.86));
    }
    .dark .retouch-style-card-icon--bg {
      color: #e7e5e4;
      background: linear-gradient(145deg, rgba(68, 64, 60, 0.92), rgba(63, 63, 70, 0.86));
    }
    .dark .retouch-style-card-title {
      color: #f4f4f5;
    }
    .dark .retouch-style-card-sub {
      color: #a1a1aa;
    }
    .dark .retouch-style-section {
      border-color: rgba(82, 82, 91, 0.55);
      background: rgba(24, 24, 27, 0.48);
    }
    .dark .retouch-style-section-title {
      color: #a8a29e;
    }
    html.dark #work-area .retouch-style-textarea {
      border-color: rgba(229, 199, 107, 0.22) !important;
      background: rgba(9, 9, 11, 0.42) !important;
    }
    /* Режим «один набор / по вариантам» — компактный блок над одеждой и фоном */
    .retouch-variant-mode {
      border-radius: 1.15rem;
      padding: 1px;
      background: linear-gradient(
        135deg,
        rgba(201, 162, 39, 0.35),
        rgba(148, 163, 184, 0.28) 50%,
        rgba(201, 162, 39, 0.15)
      );
    }
    .dark .retouch-variant-mode {
      background: linear-gradient(
        135deg,
        rgba(229, 199, 107, 0.22),
        rgba(63, 63, 70, 0.45) 48%,
        rgba(201, 162, 39, 0.1)
      );
    }
    .retouch-variant-mode__surface {
      border-radius: calc(1.15rem - 1px);
      padding: 0.85rem 0.95rem 1rem;
      background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 249, 0.96) 100%);
      box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.08);
    }
    @media (min-width: 768px) {
      .retouch-variant-mode__surface {
        padding: 1rem 1.1rem 1.1rem;
      }
    }
    .dark .retouch-variant-mode__surface {
      background: linear-gradient(165deg, rgba(39, 39, 42, 0.92) 0%, rgba(24, 24, 27, 0.98) 100%);
      box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
    }
    .retouch-variant-mode-switch {
      display: flex;
      width: 100%;
      max-width: 20rem;
      padding: 3px;
      border-radius: 0.85rem;
      background: rgba(228, 228, 231, 0.85);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .dark .retouch-variant-mode-switch {
      background: rgba(39, 39, 42, 0.95);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    }
    .retouch-variant-mode-switch button {
      flex: 1;
      border: none;
      cursor: pointer;
      border-radius: 0.65rem;
      padding: 0.5rem 0.65rem;
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: 0.01em;
      color: rgb(82, 82, 91);
      background: transparent;
      transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    }
    .dark .retouch-variant-mode-switch button {
      color: rgb(161, 161, 170);
    }
    .retouch-variant-mode-switch button:focus-visible {
      outline: 2px solid rgba(201, 162, 39, 0.55);
      outline-offset: 1px;
    }
    .retouch-variant-mode-switch button.retouch-variant-mode-btn--on {
      color: rgb(66, 32, 6);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(201, 162, 39, 0.25);
    }
    .dark .retouch-variant-mode-switch button.retouch-variant-mode-btn--on {
      color: rgb(254 243 199);
      background: rgba(63, 63, 70, 0.98);
      box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(229, 199, 107, 0.22);
    }
    #retouch-variant-tab-bar .retouch-vtab {
      flex: 1;
      min-height: 2.85rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.1rem;
      border: none;
      border-radius: 0.7rem;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: rgb(113, 113, 122);
      background: transparent;
      transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
    }
    .dark #retouch-variant-tab-bar .retouch-vtab {
      color: rgb(161, 161, 170);
    }
    #retouch-variant-tab-bar .retouch-vtab:focus-visible {
      outline: 2px solid rgba(201, 162, 39, 0.55);
      outline-offset: 1px;
    }
    #retouch-variant-tab-bar .retouch-vtab .retouch-vtab__sub {
      font-size: 0.62rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      opacity: 0.72;
    }
    #retouch-variant-tab-bar .retouch-vtab.retouch-vtab--active {
      color: rgb(120, 53, 15);
      background: rgba(255, 255, 255, 0.98);
      box-shadow:
        0 3px 14px -4px rgba(180, 83, 9, 0.25),
        0 0 0 1px rgba(201, 162, 39, 0.4);
      transform: translateY(-0.5px);
    }
    .dark #retouch-variant-tab-bar .retouch-vtab.retouch-vtab--active {
      color: rgb(253 230 138);
      background: rgba(63, 63, 70, 0.98);
      box-shadow:
        0 4px 18px -4px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(229, 199, 107, 0.28);
    }
    .retouch-preset-tile-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }
    /* Сетка пресетов фона — крупнее, 4 в ряд */
    .retouch-preset-tiles-scroll {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.5rem 0.4rem;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0.2rem 0.12rem 0.45rem;
      max-height: min(20rem, 50vh);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .retouch-preset-tiles-scroll .retouch-preset-tile-wrap {
      flex: unset;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      width: 100%;
      min-width: 0;
    }
    .retouch-preset-tiles-scroll .retouch-preset-tile {
      width: 100%;
      max-width: 4.25rem;
      aspect-ratio: 1;
      height: auto;
      margin: 0 auto;
      flex-shrink: 0;
      border-radius: 0.65rem;
      border-width: 2px;
    }
    .retouch-preset-tiles-scroll .retouch-preset-tile:hover {
      transform: translateY(-1px);
    }
    .retouch-preset-tiles-scroll .retouch-preset-tile-caption {
      max-width: 100%;
      flex: unset;
      min-width: 0;
      text-align: center;
      font-size: 0.625rem;
      line-height: 1.15;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .retouch-preset-tiles-scroll .retouch-preset-tile--keep .retouch-preset-keep-label {
      font-size: 0.625rem;
      padding: 0.25rem;
      line-height: 1.15;
    }
    .retouch-preset-tile-caption {
      max-width: 11rem;
      text-align: center;
      font-size: 0.7rem;
      line-height: 1.25;
      font-weight: 500;
      color: #4b5563;
    }
    @media (min-width: 640px) {
      .retouch-preset-tile-caption {
        font-size: 0.8125rem;
      }
      .retouch-preset-tiles-scroll .retouch-preset-tile {
        max-width: 4.75rem;
      }
      .retouch-preset-tiles-scroll .retouch-preset-tile-caption {
        font-size: 0.6875rem;
      }
    }
    .dark .retouch-preset-tile-caption {
      color: #9ca3af;
    }
    .retouch-preset-tile {
      position: relative;
      width: clamp(6.25rem, 20vw, 9.75rem);
      height: clamp(6.25rem, 20vw, 9.75rem);
      padding: 0;
      border-radius: 1rem;
      border: 2px solid rgba(209, 213, 219, 0.95);
      background: rgba(255, 255, 255, 0.9);
      overflow: hidden;
      flex-shrink: 0;
      transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    }
    .dark .retouch-preset-tile {
      border-color: rgba(63, 63, 70, 0.92);
      background: rgba(39, 39, 42, 0.92);
    }
    .retouch-preset-tile:hover {
      border-color: rgba(201, 162, 39, 0.7);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -8px rgba(201, 162, 39, 0.25);
    }
    .dark .retouch-preset-tile:hover {
      box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.5);
    }
    .retouch-preset-tile.retouch-preset-tile--on {
      border-color: var(--brand-gold);
      box-shadow:
        0 0 0 3px var(--brand-accent-ring),
        0 16px 32px -10px rgba(201, 162, 39, 0.2);
      transform: translateY(-1px);
    }
    .dark .retouch-preset-tile.retouch-preset-tile--on {
      border-color: var(--brand-gold-light);
      box-shadow:
        0 0 0 3px var(--brand-accent-ring),
        0 18px 36px -8px rgba(0, 0, 0, 0.5);
    }
    .retouch-preset-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Каталог одежды — вертикальные вырезки из PDF */
    .retouch-wardrobe-tiles-scroll {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.55rem 0.45rem;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0.2rem 0.15rem 0.45rem;
      max-height: min(26rem, 58vh);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    @media (min-width: 640px) {
      .retouch-wardrobe-tiles-scroll {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.6rem 0.5rem;
      }
    }
    @media (min-width: 1024px) {
      .retouch-wardrobe-tiles-scroll {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
    }
    .retouch-wardrobe-tiles-scroll .retouch-preset-tile-wrap {
      width: 100%;
      min-width: 0;
    }
    .retouch-wardrobe-tiles-scroll .retouch-preset-tile {
      width: 100%;
      max-width: min(100%, 5.75rem);
      aspect-ratio: 5 / 6;
      height: auto;
      margin: 0 auto;
    }
    .retouch-wardrobe-tiles-scroll .retouch-preset-tile.retouch-preset-tile--on {
      border-width: 2px;
      box-shadow:
        0 0 0 3px rgba(201, 162, 39, 0.38),
        0 14px 28px -8px rgba(201, 162, 39, 0.35);
    }
    .retouch-wardrobe-tiles-scroll .retouch-preset-tile--wardrobe img {
      object-fit: contain;
      object-position: center top;
      background: #fff;
    }
    .dark .retouch-wardrobe-tiles-scroll .retouch-preset-tile--wardrobe img {
      background: rgba(255, 255, 255, 0.96);
    }
    .retouch-wardrobe-tiles-scroll .retouch-preset-tile-caption {
      font-size: 0.625rem;
      line-height: 1.15;
      font-weight: 600;
      -webkit-line-clamp: 3;
    }
    .retouch-preset-tile--keep .retouch-preset-keep-label {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding: 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1.25;
      text-align: center;
      color: #6b7280;
    }
    .dark .retouch-preset-tile--keep .retouch-preset-keep-label {
      color: #9ca3af;
    }
    .retouch-preset-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      min-height: 2rem;
      padding: 0.35rem 0.65rem;
      border-radius: 999px;
      border: 1.5px solid rgba(212, 212, 216, 0.95);
      background: linear-gradient(180deg, #ffffff, #fafafa);
      color: #3f3f46;
      font-size: 0.75rem;
      font-weight: 650;
      line-height: 1.2;
      cursor: pointer;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
      transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .retouch-preset-chip:hover {
      border-color: rgba(201, 162, 39, 0.5);
      color: #78350f;
      background: linear-gradient(180deg, #fffbeb, #ffffff);
      transform: translateY(-1px);
    }
    .retouch-preset-chip.retouch-preset-chip--on {
      border-color: var(--brand-gold);
      background: linear-gradient(145deg, #fef3c7, #fde68a 55%, #fcd34d);
      color: #422006;
      box-shadow:
        0 0 0 2px var(--brand-accent-soft),
        0 6px 14px -8px rgba(120, 53, 15, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    .retouch-preset-chip.retouch-preset-chip--on:hover {
      border-color: var(--brand-gold-dark);
      color: #422006;
    }
    .dark .retouch-preset-chip {
      border-color: rgba(82, 82, 91, 0.85);
      background: linear-gradient(180deg, rgba(39, 39, 42, 0.95), rgba(24, 24, 27, 0.98));
      color: #d4d4d8;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    .dark .retouch-preset-chip:hover {
      border-color: rgba(229, 199, 107, 0.4);
      color: #fde68a;
      background: linear-gradient(180deg, rgba(63, 63, 70, 0.95), rgba(39, 39, 42, 0.98));
    }
    .dark .retouch-preset-chip.retouch-preset-chip--on {
      border-color: var(--brand-gold-light);
      background: linear-gradient(145deg, rgba(113, 63, 18, 0.9), rgba(63, 63, 70, 0.95));
      color: #fef3c7;
      box-shadow:
        0 0 0 2px rgba(229, 199, 107, 0.12),
        0 8px 16px -10px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .dark .retouch-preset-chip.retouch-preset-chip--on:hover {
      border-color: var(--brand-gold-light);
      color: #fef3c7;
    }
    .portfolio-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    @media (min-width: 768px) {
      .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1.5rem;
      }
      .portfolio-grid .portfolio-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 28rem;
        justify-self: center;
        width: 100%;
      }
    }
    @media (min-width: 1100px) {
      .portfolio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .portfolio-grid .portfolio-card:nth-child(3) {
        grid-column: auto;
        max-width: none;
        justify-self: stretch;
      }
    }
    .portfolio-card {
      border-radius: 16px;
      border: 1px solid rgba(201, 162, 39, 0.18);
      background: #fff;
      overflow: hidden;
      box-shadow: 0 12px 28px -20px rgba(24, 24, 27, 0.35);
    }
    .dark .portfolio-card {
      border-color: rgba(229, 199, 107, 0.16);
      background: rgba(255, 255, 255, 0.04);
    }
    .portfolio-inner {
      padding: 1rem 1rem 1.1rem;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .portfolio-scene {
      display: inline-block;
      align-self: flex-start;
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #a8841f;
      margin-bottom: 0.28rem;
    }
    .dark .portfolio-scene {
      color: #e5c76b;
    }
    .portfolio-label {
      font-size: 0.9375rem;
      font-weight: 700;
      line-height: 1.3;
      color: #18181b;
      margin-bottom: 0.75rem;
    }
    .dark .portfolio-label {
      color: #f4f4f5;
    }
    .portfolio-desc {
      font-size: 0.8125rem;
      line-height: 1.45;
      color: #6b7280;
      margin-top: 0.75rem;
    }
    .dark .portfolio-desc {
      color: #9ca3af;
    }
    .portfolio-cta-bar {
      margin-top: 0.25rem;
      padding: 1.15rem 1.25rem;
      border-radius: 14px;
      border: 1px solid rgba(201, 162, 39, 0.35);
      background: rgba(201, 162, 39, 0.08);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .dark .portfolio-cta-bar {
      border-color: rgba(201, 162, 39, 0.4);
      background: rgba(201, 162, 39, 0.1);
    }
    .portfolio-cta-copy {
      flex: 1 1 12rem;
      min-width: 0;
    }
    .portfolio-cta-title {
      font-size: 0.9375rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 0.2rem;
    }
    .dark .portfolio-cta-title {
      color: #f9fafb;
    }
    .portfolio-cta-sub {
      font-size: 0.8125rem;
      line-height: 1.4;
      color: #4b5563;
    }
    .dark .portfolio-cta-sub {
      color: #d1d5db;
    }
    .portfolio-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      flex: none;
      padding: 0.75rem 1.35rem;
      border-radius: 10px;
      background: #c9a227;
      color: #111827;
      font-size: 0.9375rem;
      font-weight: 700;
      line-height: 1.2;
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(201, 162, 39, 0.35);
      transition: background 0.15s ease, transform 0.15s ease;
    }
    .portfolio-cta-btn:hover {
      background: #d4ad2e;
      transform: translateY(-1px);
    }
    .portfolio-cta-btn svg {
      width: 1rem;
      height: 1rem;
    }
    #auth-strength-bar.strength-0 { width: 0% !important; background: #e5e7eb; }
    #auth-strength-bar.strength-1 { width: 25% !important; background: #ef4444; }
    #auth-strength-bar.strength-2 { width: 50% !important; background: #f59e0b; }
    #auth-strength-bar.strength-3 { width: 75% !important; background: #84cc16; }
    #auth-strength-bar.strength-4 { width: 100% !important; background: #22c55e; }
    #auth-modal .modal-panel-auth {
      transform: translateY(20px);
      opacity: 0;
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
    }
    #auth-modal.modal-open .modal-panel-auth {
      transform: translateY(0);
      opacity: 1;
    }
    #terms-gate-modal .modal-panel-terms {
      transform: scale(0.96) translateY(12px);
      opacity: 0;
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
    }
    #terms-gate-modal.modal-open .modal-panel-terms {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
    /* Подтверждение почты — модальное «окно» */
    .email-verify-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.55);
      backdrop-filter: blur(8px);
      cursor: pointer;
    }
    .dark .email-verify-backdrop {
      background: rgba(0, 0, 0, 0.72);
    }
    .email-verify-card {
      position: relative;
      width: 100%;
      max-width: 28rem;
      border-radius: 1.5rem;
      padding: 1.5rem 1.5rem 1.25rem;
      background: linear-gradient(165deg, rgba(255,255,255,0.98) 0%, rgba(250,250,249,0.98) 100%);
      box-shadow:
        0 0 0 1px rgba(201, 162, 39, 0.22),
        0 25px 50px -12px rgba(0, 0, 0, 0.28),
        0 0 80px -20px rgba(201, 162, 39, 0.35);
      animation: email-verify-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes email-verify-in {
      from { opacity: 0; transform: translateY(12px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .email-otp-digit {
      width: 2.75rem;
      height: 3.25rem;
      font-size: 1.35rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      border-radius: 0.875rem;
      border: 2px solid rgba(209, 213, 219, 0.95);
      background: rgba(255, 255, 255, 0.9);
      color: #111827;
      text-align: center;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    }
    .dark .email-otp-digit {
      border-color: rgba(82, 82, 91, 0.88);
      background: rgba(39, 39, 42, 0.96);
      color: #fafafa;
    }
    .email-otp-digit:focus {
      outline: none;
      border-color: #c9a227;
      box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22);
      transform: translateY(-1px);
    }
    .dark .email-otp-digit:focus {
      border-color: rgba(201, 162, 39, 0.75);
      box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.24);
    }
    @media (min-width: 640px) {
      .email-otp-digit {
        width: 3rem;
        height: 3.5rem;
        font-size: 1.5rem;
      }
    }
    .ba-pair {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
      align-items: start;
    }
    .ba-thumb {
      border-radius: 10px;
      overflow: hidden;
      background: #f3f4f6;
      border: 1px solid rgba(0, 0, 0, 0.06);
      width: 100%;
      aspect-ratio: 4 / 5;
      min-height: 0;
      display: block;
    }
    .dark .ba-thumb {
      background: #18181b;
      border-color: rgba(255, 255, 255, 0.08);
    }
    .ba-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }
    .ba-caption {
      font-size: 0.6875rem;
      font-weight: 600;
      text-align: center;
      margin-top: 0.35rem;
      color: #6b7280;
      letter-spacing: 0.04em;
    }
    .dark .ba-caption {
      color: #9ca3af;
    }
    .wish-tpl-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 6px 12px;
      border-radius: 9999px;
      font-size: 12px; line-height: 1.4;
      border: 1px solid rgba(0,0,0,0.1);
      background: rgba(0,0,0,0.03);
      color: #374151;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
    }
    .dark .wish-tpl-chip {
      border-color: rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.06);
      color: #d1d5db;
    }
    .wish-tpl-chip:hover {
      border-color: rgba(201,162,39,0.4);
      background: rgba(201,162,39,0.08);
    }
    .wish-tpl-chip.wish-tpl-chip--active {
      border-color: rgb(201,162,39);
      background: rgba(201,162,39,0.15);
      color: #92400e;
      font-weight: 600;
    }
    .dark .wish-tpl-chip.wish-tpl-chip--active {
      color: #fbbf24;
    }
    .retouch-templates-panel {
      margin-top: 0.65rem;
      padding-top: 0.65rem;
      border-top: 1px solid rgba(0, 0, 0, 0.07);
    }
    .dark .retouch-templates-panel {
      border-top-color: rgba(255, 255, 255, 0.08);
    }
    .retouch-templates-panel__head {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      flex-wrap: wrap;
      margin-bottom: 0.45rem;
    }
    .retouch-templates-panel__title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #6b7280;
    }
    .dark .retouch-templates-panel__title {
      color: #a1a1aa;
    }
    .retouch-templates-panel__count {
      font-size: 10px;
      font-weight: 600;
      color: #b45309;
    }
    .dark .retouch-templates-panel__count {
      color: #fbbf24;
    }
    .retouch-templates-panel__hint {
      font-size: 10px;
      color: #6b7280;
      margin-left: auto;
    }
    .dark .retouch-templates-panel__hint {
      color: #a1a1aa;
    }
    .retouch-templates-panel__row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      align-items: center;
    }
    .retouch-templates-panel__select {
      flex: 1 1 8.5rem;
      min-width: 0;
      max-width: 100%;
      padding: 0.35rem 0.55rem;
      border-radius: 0.6rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: rgba(255, 255, 255, 0.9);
      font-size: 11px;
      line-height: 1.3;
      color: #374151;
    }
    .dark .retouch-templates-panel__select {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(24, 24, 27, 0.85);
      color: #e4e4e7;
    }
    .retouch-templates-panel__name {
      flex: 1 1 7rem;
      min-width: 0;
      max-width: 100%;
      padding: 0.35rem 0.55rem;
      border-radius: 0.6rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: rgba(255, 255, 255, 0.9);
      font-size: 11px;
      color: #374151;
    }
    .dark .retouch-templates-panel__name {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(24, 24, 27, 0.85);
      color: #e4e4e7;
    }
    .retouch-templates-panel__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 1.75rem;
      padding: 0.25rem 0.55rem;
      border-radius: 0.55rem;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
      transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    }
    .retouch-templates-panel__btn--primary {
      border: 1px solid rgba(201, 162, 39, 0.45);
      background: rgba(201, 162, 39, 0.18);
      color: #92400e;
    }
    .dark .retouch-templates-panel__btn--primary {
      color: #fbbf24;
    }
    .retouch-templates-panel__btn--ghost {
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: rgba(0, 0, 0, 0.03);
      color: #4b5563;
    }
    .dark .retouch-templates-panel__btn--ghost {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.05);
      color: #d4d4d8;
    }
    .retouch-templates-panel__btn:disabled {
      opacity: 0.38;
      cursor: not-allowed;
    }
    .saved-prompts-scroll {
      max-height: min(18rem, 52vh);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .saved-prompts-scroll::-webkit-scrollbar {
      width: 6px;
    }
    .saved-prompts-scroll::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.45);
      border-radius: 4px;
    }
    .dark .saved-prompts-scroll::-webkit-scrollbar-thumb {
      background: rgba(100, 116, 139, 0.5);
    }
    .tab-wishes--active {
      background: rgba(201, 162, 39, 0.18);
      color: #111827;
    }
    .dark .tab-wishes--active {
      background: rgba(229, 199, 107, 0.16);
      color: #fafafa;
    }

    /* Заставка при первом открытии сайта за сессию */
    html.splash-active {
      overflow: hidden;
      height: 100%;
    }
    html.splash-active body {
      overflow: hidden;
    }
    .site-splash {
      position: fixed;
      inset: 0;
      z-index: 99999;
      margin: 0;
      /* Корень остаётся «стеклом» без собственного фона: сплошной цвет
         рисуется только в ::before. При уходе гасится opacity ::before,
         а не всего блока — иначе полупрозрачный splash смешивается с
         подложкой и даёт «чёрную пустоту» / мерцание. */
      background: transparent;
      display: none;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      overflow: hidden;
      opacity: 1;
    }
    .site-splash::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      /* Должен совпадать с Tailwind .bg-bgLight (rgb 248 247 245), иначе при
         растворении слоя виден «шов» и ощущение пустоты между заставкой и сайтом. */
      background: #f8f7f5;
      pointer-events: none;
    }
    html.dark .site-splash::before {
      background: #0c0c0c;
    }
    /* Плавное открытие: фон уходит вместе с контентом (контент не должен
       пропадать мгновенно — см. комментарий у .site-splash-inner). */
    .site-splash--leave::before {
      opacity: 1;
    }
    /* Опорные фоны: чтобы при любом моменте лоадинга / cleanup
       за splash не «просвечивал» дефолтный чёрный/белый фон браузера. */
    html {
      background-color: #f8f7f5;
      /* Резервируем место под скролл-бар всегда, даже когда html в
         режиме splash-active (overflow: hidden). Без этого скролл-бар
         «прыгал» при удалении splash и весь сайт сдвигался вправо. */
      scrollbar-gutter: stable;
    }
    html.dark { background-color: #0c0c0c; }
    /* !important — перебиваем Tailwind bg-bgLight / dark:bg-bgDark на body,
       чтобы под полупрозрачным splash и после него был тот же цвет, что и ::before. */
    html:not(.dark) body {
      background-color: #f8f7f5 !important;
    }
    html.dark body {
      background-color: #0c0c0c !important;
    }
    .site-splash--on {
      display: flex;
      opacity: 1;
    }
    /* Выход только через @keyframes: transition на корне с display:flex часто
       не даёт плавности между кадрами; animation стабильнее. */
    .site-splash--on.site-splash--leave {
      pointer-events: none;
      animation: siteSplashExit 2.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes siteSplashExit {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }
    .site-splash-inner {
      position: relative;
      z-index: 1;
      text-align: center;
      /* Важно: базовое opacity: 1 — при уходе снимается animation, и без этого
         блок мгновенно возвращается к opacity: 0 из каскада: логотип/текст
         пропадают сразу, а ::before ещё ~1.5s гаснет → «пустой» экран одного фона. */
      opacity: 1;
      transform: scale(1);
      animation: siteSplashReveal 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
      will-change: opacity, transform;
    }
    .site-splash--leave .site-splash-inner {
      animation: none;
      opacity: 1;
      transform: scale(1);
      transition: none;
    }
    .site-splash-logo-wrap {
      position: relative;
      width: 240px;
      max-width: min(240px, 80vw);
      margin: 0 auto 15px;
      background: transparent;
    }
    .site-splash-logo-wrap img {
      width: 100%;
      height: auto;
      display: block;
      background: transparent;
      transition: opacity 0.35s ease;
    }
    .site-splash-logo--light {
      position: relative;
      opacity: 1;
    }
    .site-splash-logo--dark {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      margin: 0 auto;
      opacity: 0;
      pointer-events: none;
    }
    html.dark .site-splash-logo--light {
      opacity: 0;
    }
    html.dark .site-splash-logo--dark {
      opacity: 1;
    }
    .site-splash-text {
      font-size: 22px;
      letter-spacing: 2px;
      color: #111;
      opacity: 1;
      animation: siteSplashTextFade 1s ease both;
      animation-delay: 0.5s;
    }
    .site-splash-text span {
      color: #caa45c;
    }
    .dark .site-splash-text {
      color: #fafafa;
    }
    .dark .site-splash-text span {
      color: #e7c56f;
    }
    .site-splash--leave .site-splash-logo-wrap {
      animation: none;
    }
    @keyframes siteSplashReveal {
      from {
        opacity: 0;
        transform: scale(1.04);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    @keyframes siteSplashTextFade {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .site-splash--on.site-splash--leave {
        animation-duration: 0.4s !important;
        animation-timing-function: ease !important;
      }
      .site-splash-inner,
      .site-splash-logo-wrap,
      .site-splash-text {
        animation: none !important;
        filter: none !important;
        transform: none !important;
        opacity: 1 !important;
      }
      .site-splash--leave::before {
        opacity: 1 !important;
      }
    }
    /* Единая горизонтальная сетка страницы (ПК — как раньше; safe-area только на узком экране) */
    .layout-shell {
      width: 100%;
      max-width: 72rem;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    @media (min-width: 640px) {
      .layout-shell {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }
    @media (min-width: 1024px) {
      .layout-shell {
        padding-left: 2rem;
        padding-right: 2rem;
      }
    }
    @media (max-width: 639px) {
      html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }
      body {
        overflow-x: hidden;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      .layout-shell {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
      }
      button,
      [role='button'],
      .retouch-choice-tile,
      .footer-site .footer-cta-upload,
      .footer-site .footer-cta-examples,
      input[type='checkbox'],
      input[type='radio'] {
        touch-action: manipulation;
      }
      /* Шапка (mobile): единая высота контролов, компактный логотип */
      #site-chrome {
        padding-top: env(safe-area-inset-top, 0px);
      }
      #site-chrome > header > .max-w-5xl.mx-auto {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem;
        min-width: 0;
        padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
      }
      #site-chrome .header-brand-link {
        flex: 0 0 auto;
        min-width: 0;
        gap: 0 !important;
        overflow: hidden;
      }
      #site-chrome .header-logo-stack {
        height: 2rem !important;
      }
      #site-chrome .header-brand-logo {
        height: 2rem !important;
        max-height: 2rem !important;
        width: auto !important;
      }
      #site-chrome .header-actions-cluster {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.3rem;
      }
      #site-chrome .header-tokens-buy {
        gap: 0.3rem;
        min-width: 0;
      }
      #site-chrome #token-balance-pill {
        height: 2rem;
        padding: 0 0.5rem;
        font-size: 0.6875rem;
        line-height: 1;
        gap: 0.25rem;
        min-width: 0;
        max-width: none;
        white-space: nowrap;
        align-items: center;
        border-radius: 999px;
      }
      #site-chrome #token-balance-pill .token-balance-label {
        font-size: 0.6875rem;
        font-weight: 600;
      }
      #site-chrome #token-balance-pill #token-balance {
        font-size: 0.75rem;
        font-weight: 700;
        min-width: 1.1rem;
        line-height: 1;
      }
      #site-chrome .header-buy-cta {
        height: 2rem;
        min-height: 2rem;
        padding: 0 0.7rem;
        font-size: 0.75rem;
        border-radius: 999px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 3px 10px rgba(201, 162, 39, 0.28);
      }
      #site-chrome .header-profile-btn {
        height: 2rem !important;
        width: 2rem !important;
        min-height: 2rem !important;
        min-width: 2rem !important;
        max-width: 2rem !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 0.55rem !important;
        flex-shrink: 0;
      }
      #site-chrome .header-profile-btn .header-profile-btn__icon {
        display: block !important;
        width: 1.05rem !important;
        height: 1.05rem !important;
        flex-shrink: 0;
      }
      #site-chrome .header-profile-btn .header-profile-btn__label {
        display: none !important;
      }
      #site-chrome #theme-toggle {
        width: 2rem !important;
        height: 2rem !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
        margin-left: 0;
        padding: 0 !important;
        border-radius: 0.55rem !important;
        flex-shrink: 0;
      }
      #site-chrome #theme-toggle .theme-toggle-icons {
        width: 1.15rem !important;
        height: 1.15rem !important;
      }
      #site-chrome #theme-toggle .theme-toggle-icon {
        width: 1.15rem !important;
        height: 1.15rem !important;
      }
      main.layout-shell {
        padding-top: 1.25rem;
        padding-bottom: 1.75rem;
      }
      .retouch-work-shell {
        padding: 1.1rem !important;
      }
      #work-area .grid.gap-8 {
        gap: 1.25rem;
      }

      /* Герой и плашки: меньше отступов, одна колонка до 639px, без тяжёлых анимаций */
      .gradient-hero {
        padding-top: 1.05rem !important;
        padding-bottom: 1.05rem !important;
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
        margin-bottom: 1.5rem !important;
        border-radius: 1.15rem !important;
      }
      .hero-eyebrow,
      .gradient-hero .relative.z-10 > p.text-sm.uppercase,
      .gradient-hero .relative.z-10 > p:first-of-type {
        font-size: 0.65rem;
        letter-spacing: 0.14em;
        margin-bottom: 0.4rem;
        line-height: 1.35;
      }
      .gradient-hero h1.hero-title-balance {
        font-size: clamp(1.32rem, 5.8vw, 1.7rem);
        line-height: 1.22;
        margin-bottom: 0.45rem;
      }
      .hero-hook {
        font-size: 0.8125rem;
        line-height: 1.4;
        margin-bottom: 0.5rem !important;
        text-align: center;
      }
      .hero-pricing-bar {
        margin-bottom: 0.7rem;
        padding: 0.42rem 0.7rem 0.45rem;
      }
      .hero-pricing-main {
        font-size: 0.875rem;
      }
      .hero-pricing-sub {
        font-size: 0.625rem;
      }
      .feature-plaque-grid {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        margin-bottom: 0.85rem;
        max-width: none;
      }
      .feature-plaque-grid::before {
        inset: -0.2rem;
        opacity: 0.45;
      }
      .feature-plaque {
        padding: 0.55rem 0.6rem 0.65rem;
        border-radius: 0.7rem;
        animation: none;
      }
      .feature-plaque-value {
        font-size: 1.2rem;
      }
      .feature-plaque-label {
        font-size: 0.68rem;
        margin-top: 0.12rem;
        line-height: 1.25;
      }
      .gradient-hero > .relative.z-10 > p.text-base,
      .gradient-hero > .relative.z-10 > p.text-lg {
        font-size: 0.875rem;
        line-height: 1.58;
        margin-bottom: 1rem !important;
        text-align: left;
      }
      .upload-zone-hero {
        animation: none;
      }
      #upload-zone.upload-zone-hero {
        padding: 1.15rem 0.9rem !important;
        border-radius: 1.05rem !important;
        max-width: 100% !important;
        text-align: center;
        border: 2px solid #c9a227;
        background: #fff;
        min-height: 8.25rem;
      }
      html.dark #upload-zone.upload-zone-hero {
        background: rgba(24, 24, 27, 0.94);
        border-color: #e5c76b;
      }
      #upload-zone.upload-zone-hero p {
        text-align: center;
      }
      #upload-zone.upload-zone-hero svg {
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 0.45rem;
      }
      #upload-zone.upload-zone-hero .text-base {
        font-size: 0.9rem;
      }
      #upload-zone.upload-zone-hero .text-sm {
        font-size: 0.78rem;
        line-height: 1.42;
      }
      .gradient-hero .hero-blob {
        display: none;
      }
      .gradient-hero .hero-shimmer {
        display: none;
      }

      section[aria-labelledby='how-it-works-heading'] {
        margin-bottom: 2.25rem;
      }
      section[aria-labelledby='how-it-works-heading'] .how-grid {
        gap: 0.85rem;
      }
      .how-card {
        padding: 0.85rem 0.95rem;
        border-radius: 0.9rem;
      }

      #examples-retouch {
        margin-bottom: 2.25rem;
        scroll-margin-top: 5.5rem;
      }
      #examples-retouch .examples-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
      }
      .portfolio-scroll-wrap {
        margin-left: max(-1rem, calc(-1 * env(safe-area-inset-left, 0px)));
        margin-right: max(-1rem, calc(-1 * env(safe-area-inset-right, 0px)));
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-behavior: smooth;
      }
      .portfolio-scroll-wrap::-webkit-scrollbar { display: none; }
      .portfolio-grid {
        display: flex;
        flex-direction: row;
        gap: 0.85rem;
        grid-template-columns: unset;
      }
      .portfolio-grid .portfolio-card {
        flex: 0 0 min(100%, calc(100vw - 2.5rem));
        scroll-snap-align: center;
      }
      .portfolio-grid .portfolio-card:first-child {
        margin-left: 0.15rem;
      }
      .portfolio-grid .portfolio-card:last-child {
        margin-right: 0.15rem;
      }
      .portfolio-dots:not(.hidden) {
        display: flex;
      }
      .portfolio-inner {
        padding: 0.9rem 0.85rem 1rem;
      }
      .portfolio-scene {
        font-size: 0.625rem;
      }
      .portfolio-label {
        font-size: 0.95rem;
        margin-bottom: 0.65rem;
      }
      .ba-pair {
        gap: 0.55rem;
      }
      .ba-thumb {
        aspect-ratio: 4 / 5;
        border-radius: 0.75rem;
      }
      .ba-caption {
        font-size: 0.72rem;
        margin-top: 0.4rem;
      }
      .portfolio-desc {
        font-size: 0.8125rem;
        margin-top: 0.65rem;
        line-height: 1.5;
      }
      .portfolio-cta-bar {
        flex-direction: column;
        align-items: stretch;
        margin-top: 1rem;
        padding: 1rem;
        gap: 0.85rem;
      }
      .portfolio-cta-btn {
        width: 100%;
        min-height: 3rem;
        font-size: 1rem;
        border-radius: 0.85rem;
      }

      .footer-site {
        padding-top: 2.25rem;
        padding-bottom: 2.5rem;
        margin-top: 2.5rem !important;
      }

      #work-area .retouch-work-shell {
        padding: 0.9rem !important;
        border-radius: 1rem !important;
        margin-bottom: 2rem !important;
      }

      .retouch-bg-scroll-hint {
        display: block;
      }

      /* Блок «Одежда и фон»: крупные тапы, сетка чипов, компактная сетка пресетов фона */
      #work-area #retouch-style-showcase .retouch-style-showcase__inner {
        padding: 0.75rem 0.6rem 0.9rem;
      }
      #work-area #retouch-style-showcase .retouch-style-showcase__frame {
        border-radius: 1.05rem;
      }
      #work-area #retouch-style-showcase .retouch-style-dual-grid,
      #work-area #retouch-style-showcase .grid.sm\:grid-cols-2 {
        gap: 0.5rem;
      }
      #work-area #retouch-style-showcase .retouch-style-showcase__card {
        min-width: 0;
        padding: 0.7rem 0.6rem 0.85rem;
      }
      #work-area #retouch-style-showcase .retouch-style-showcase__card--wardrobe {
        padding: 0.85rem 0.7rem 0.95rem;
      }
      #work-area #retouch-wardrobe-tiles-men,
      #work-area #retouch-wardrobe-tiles-women {
        max-height: var(--retouch-catalog-h, min(10.75rem, 34vh));
      }
      #work-area #retouch-wardrobe-tiles-men .retouch-preset-tile,
      #work-area #retouch-wardrobe-tiles-women .retouch-preset-tile {
        max-width: 100%;
      }
      #work-area #retouch-background-chips {
        gap: 0.45rem;
      }
      #work-area #retouch-style-showcase .retouch-preset-chip {
        width: 100%;
        min-height: 2.75rem;
        box-sizing: border-box;
        padding: 0.45rem 0.55rem;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 0.5rem;
        word-break: break-word;
        -webkit-tap-highlight-color: transparent;
      }
      #work-area #retouch-style-showcase .retouch-wardrobe-gender-switch button {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 0.8125rem;
      }
      #work-area #retouch-style-showcase .retouch-wardrobe-toolbar--row .retouch-style-keep-btn {
        min-height: 2.75rem;
        font-size: 0.75rem;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        padding: 0.35rem 0.45rem;
      }
      #work-area #retouch-style-showcase .retouch-jewelry-chips-grid .retouch-preset-chip {
        min-height: 2.5rem !important;
        font-size: 0.6875rem !important;
      }
      #work-area .retouch-preset-chip {
        width: 100%;
        min-height: 2.75rem;
        box-sizing: border-box;
        padding: 0.45rem 0.5rem;
        font-size: 0.8125rem !important;
        line-height: 1.25 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 0.65rem;
        word-break: break-word;
        -webkit-tap-highlight-color: transparent;
      }
      #work-area #retouch-style-showcase .space-y-3 > div + div {
        margin-top: 0.65rem;
        padding-top: 0.65rem;
        border-top: 1px solid rgba(229, 231, 235, 0.95);
      }
      html.dark #work-area #retouch-style-showcase .space-y-3 > div + div {
        border-top-color: rgba(63, 63, 70, 0.85);
      }
      #work-area #retouch-wardrobe-note,
      #work-area #retouch-background-note,
      #work-area #retouch-jewelry-note {
        font-size: 0.6875rem;
        line-height: 1.35;
        min-height: 0;
        padding: 0.4rem 0.5rem;
      }
      #work-area #retouch-style-showcase .retouch-preset-tiles-scroll {
        max-height: var(--retouch-bg-tiles-h, min(9.25rem, 29vh));
        overflow-y: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
      }
      #work-area #retouch-style-showcase .retouch-preset-tiles-scroll .retouch-preset-tile-wrap {
        content-visibility: visible;
        contain-intrinsic-size: unset;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.18rem;
        min-width: 0;
      }
      #work-area #retouch-style-showcase .retouch-preset-tiles-scroll .retouch-bg-section-label--in-grid {
        display: flex !important;
        grid-column: 1 / -1;
        margin: 0.35rem 0 0.08rem;
        font-size: 0.62rem;
      }
      #work-area .retouch-preset-tiles-scroll .retouch-preset-tile-caption {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100%;
        min-height: 2.35em;
        text-align: center;
        word-break: break-word;
      }
      #work-area .retouch-preset-tiles-scroll .retouch-preset-tile--keep .retouch-preset-keep-label {
        font-size: 0.625rem;
        padding: 0.28rem;
      }

      #auth-modal,
      #tokens-modal,
      #terms-gate-modal {
        padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px))
          max(0.85rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
      }

      /* ===== Mobile Variants Carousel ===== */
      #variants.mobile-carousel {
        display: flex !important;
        grid-template-columns: unset !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        gap: 0.75rem;
        padding: 0.25rem 0 0.75rem;
        scrollbar-width: none;
        scroll-behavior: smooth;
      }
      #variants.mobile-carousel::-webkit-scrollbar { display: none; }
      #variants.mobile-carousel > .variant-card {
        flex: 0 0 min(92%, calc(100vw - 2rem));
        max-width: min(92%, calc(100vw - 2rem));
        min-width: 0;
        scroll-snap-align: center;
        overflow: visible;
        padding: 0.85rem 0.75rem 1rem;
      }
      #variants.mobile-carousel > .variant-card:first-child { margin-left: 6%; }
      #variants.mobile-carousel > .variant-card:last-child { margin-right: 6%; }
      .variant-card { -webkit-tap-highlight-color: transparent; }
      .variant-card:hover {
        transform: none !important;
        box-shadow: none !important;
      }

      /* Carousel dots */
      .variants-dots {
        display: flex;
        justify-content: center;
        gap: 0.6rem;
        padding: 0.35rem 0 0.5rem;
      }
      .variants-dots .vdot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(156, 163, 175, 0.45);
        transition: background 0.2s, transform 0.2s;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .variants-dots .vdot.active {
        background: rgb(201, 162, 39);
        transform: scale(1.35);
      }
      .dark .variants-dots .vdot { background: rgba(113, 113, 122, 0.45); }
      .dark .variants-dots .vdot.active { background: rgb(229, 199, 107); }

      /* Свернуть оригинал на мобиле — без max-height-анимации (она даёт скачки layout) */
      .retouch-original-col.mobile-collapsed {
        display: none !important;
      }
      .retouch-original-col.mobile-expanded {
        display: flex !important;
        flex-direction: column;
        min-width: 0;
      }
      .retouch-results-col {
        min-height: 0;
      }
      html.work-area-active .support-widget-dock {
        padding-bottom: calc(5.25rem + max(0.75rem, env(safe-area-inset-bottom, 0px)));
      }
      html.has-site-announce .upload-zone {
        scroll-margin-top: calc(5.75rem + var(--site-announce-h, 2.75rem));
      }
      #email-verify-mini:not(.hidden) {
        top: max(4rem, calc(env(safe-area-inset-top, 0px) + 3.25rem));
      }
      html.has-site-announce #email-verify-mini:not(.hidden) {
        top: calc(var(--site-announce-h, 2.75rem) + 4rem);
      }
      #email-verify-banner {
        top: max(4rem, calc(env(safe-area-inset-top, 0px) + 3.25rem));
      }
      html.has-site-announce #email-verify-banner {
        top: calc(var(--site-announce-h, 2.75rem) + 4rem);
      }
      section[aria-labelledby='how-it-works-heading'],
      #instructions-retouch,
      #examples-retouch {
        contain-intrinsic-size: 1px 960px;
      }
      #profile-section {
        contain-intrinsic-size: 680px;
      }
      #profile-section.is-visible {
        content-visibility: visible;
        contain-intrinsic-size: unset;
      }
      .retouch-history-card {
        contain-intrinsic-size: 340px;
      }
      #profile-section.is-visible .retouch-history-card {
        content-visibility: visible;
        contain-intrinsic-size: unset;
      }
      #mobile-original-toggle {
        margin-bottom: 0.6rem;
      }
      #mobile-original-toggle-btn {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        padding: 0.6rem 0.85rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(209,213,219,0.8);
        background: rgba(249,250,251,0.9);
        font-size: 0.8125rem;
        font-weight: 600;
        color: #374151;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s;
      }
      #mobile-original-toggle-btn:active { background: rgba(243,244,246,1); }
      .dark #mobile-original-toggle-btn {
        border-color: rgba(63,63,70,0.7);
        background: rgba(39,39,42,0.85);
        color: #d4d4d8;
      }
      .dark #mobile-original-toggle-btn:active { background: rgba(39,39,42,1); }
      #mobile-original-toggle-btn .motb-thumb {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.5rem;
        object-fit: cover;
        flex-shrink: 0;
        border: 1px solid rgba(0,0,0,0.08);
      }
      .dark #mobile-original-toggle-btn .motb-thumb {
        border-color: rgba(255,255,255,0.08);
      }
      #mobile-original-toggle-btn .motb-chevron {
        margin-left: auto;
        transition: transform 0.25s;
        flex-shrink: 0;
        color: #9ca3af;
      }
      #mobile-original-toggle-btn #motb-label {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      #mobile-original-toggle-btn.expanded .motb-chevron {
        transform: rotate(180deg);
      }

      /* Mobile variant swipe hint */
      .mobile-swipe-hint {
        text-align: center;
        font-size: 0.7rem;
        color: #9ca3af;
        padding: 0 0 0.35rem;
        animation: mobileSwipeHintFade 3s ease forwards;
      }
      .dark .mobile-swipe-hint { color: #71717a; }
      @keyframes mobileSwipeHintFade {
        0%, 70% { opacity: 1; }
        100% { opacity: 0; pointer-events: none; }
      }

      /* Липкая панель «Отретушировать» — всегда под рукой (ниже модалок и редакторов) */
      #work-area:not(.hidden) .retouch-action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 55;
        margin: 0 !important;
        max-width: none !important;
        padding: 0.45rem max(1rem, env(safe-area-inset-left, 0px))
          calc(0.65rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-right, 0px));
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(229, 231, 235, 0.95);
        box-shadow: 0 -8px 28px -8px rgba(0, 0, 0, 0.12);
        gap: 0.4rem;
      }
      html.dark #work-area:not(.hidden) .retouch-action-bar {
        background: rgba(24, 24, 27, 0.94);
        border-top-color: rgba(63, 63, 70, 0.9);
      }
      #work-area:not(.hidden) .retouch-action-bar #process-btn,
      #work-area:not(.hidden) .retouch-action-bar #reset-btn {
        min-height: 3rem;
        max-width: none !important;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
      }
      #work-area:not(.hidden) .retouch-launch-warning {
        order: -1;
        margin-bottom: 0 !important;
      }
      .retouch-launch-warning {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0;
      }
      .retouch-launch-warning__inner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.42rem;
        text-align: center;
        width: fit-content;
        max-width: min(100%, 34rem);
        margin: 0 auto 0.08rem;
        border: 1px solid rgba(217, 119, 6, 0.18);
        background: linear-gradient(180deg, rgba(255, 251, 235, 0.82), rgba(255, 247, 237, 0.58));
        color: #75665a;
        border-radius: 999px;
        padding: 0.34rem 0.68rem;
        font-size: 0.73rem;
        line-height: 1.15;
        box-shadow: 0 8px 22px -18px rgba(146, 64, 14, 0.42);
      }
      html.dark .retouch-launch-warning {
        background: transparent;
      }
      html.dark .retouch-launch-warning__inner {
        border-color: rgba(251, 191, 36, 0.18);
        background: linear-gradient(180deg, rgba(39, 39, 42, 0.72), rgba(24, 24, 27, 0.62));
        color: #d4d4d8;
        box-shadow: 0 8px 22px -18px rgba(0, 0, 0, 0.7);
      }
      .retouch-launch-warning__inner::before {
        content: "";
        width: 0.38rem;
        height: 0.38rem;
        border-radius: 999px;
        background: #d97706;
        box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.14);
        flex: none;
      }
      html.dark .retouch-launch-warning__inner::before {
        background: #fbbf24;
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.13);
      }
      .retouch-launch-warning__link {
        color: #9a5a0a;
        text-decoration: none;
        border-bottom: 1px solid rgba(180, 83, 9, 0.34);
        font-weight: 800;
      }
      html.dark .retouch-launch-warning__link {
        color: #fbbf24;
        border-bottom-color: rgba(251, 191, 36, 0.38);
      }
      /* Не перекрывать кнопки инструментов липкой панелью */
      body:has(#preview-modal.modal-open) #work-area:not(.hidden) .retouch-action-bar,
      body:has(#download-modal:not(.hidden)) #work-area:not(.hidden) .retouch-action-bar,
      body:has(#mockup-modal.modal-open) #work-area:not(.hidden) .retouch-action-bar,
      body:has(#tokens-modal.modal-open) #work-area:not(.hidden) .retouch-action-bar,
      body:has(#auth-modal.modal-open) #work-area:not(.hidden) .retouch-action-bar,
      body:has(#terms-gate-modal.modal-open) #work-area:not(.hidden) .retouch-action-bar,
      body:has(#crop-modal.crop-modal--open) #work-area:not(.hidden) .retouch-action-bar,
      body:has(.padj-overlay.is-open) #work-area:not(.hidden) .retouch-action-bar,
      body:has(.inscribe-overlay.is-open) #work-area:not(.hidden) .retouch-action-bar {
        display: none !important;
      }
      body:has(#preview-modal.modal-open) #work-area:not(.hidden),
      body:has(#download-modal:not(.hidden)) #work-area:not(.hidden),
      body:has(#mockup-modal.modal-open) #work-area:not(.hidden),
      body:has(#tokens-modal.modal-open) #work-area:not(.hidden),
      body:has(#auth-modal.modal-open) #work-area:not(.hidden),
      body:has(#terms-gate-modal.modal-open) #work-area:not(.hidden),
      body:has(#crop-modal.crop-modal--open) #work-area:not(.hidden),
      body:has(.padj-overlay.is-open) #work-area:not(.hidden),
      body:has(.inscribe-overlay.is-open) #work-area:not(.hidden) {
        padding-bottom: 0 !important;
      }
      #preview-modal.modal-open,
      #download-modal:not(.hidden),
      #mockup-modal.modal-open,
      #tokens-modal.modal-open,
      #auth-modal.modal-open,
      #terms-gate-modal.modal-open {
        z-index: 100000 !important;
      }

      /* Не перекрывать кнопки инструментов липкой панелью */
      #variants-feedback-row .flex.flex-wrap.items-center.gap-3 {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
      }
      #variants-feedback-row .retouch-feedback-btn {
        width: 100%;
        justify-content: center;
      }
      #variants-feedback-row #feedback-save-comment {
        width: 100%;
      }

      /* Crop у upload — tertiary-ссылка, не второй CTA */
      .hero-upload-actions {
        max-width: 100%;
        margin-top: 0.45rem;
        padding: 0;
      }
      .hero-tool-btn,
      #open-crop-tool-near-upload {
        width: auto;
        min-height: 2.5rem;
        padding: 0.35rem 0.2rem;
        border: 0;
        border-radius: 0;
        background: none;
        text-decoration: underline !important;
        text-underline-offset: 0.18em;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
        font-size: 0.8125rem;
        font-weight: 600;
        overflow-wrap: anywhere;
        -webkit-tap-highlight-color: transparent;
      }
      .hero-tool-btn:active,
      #open-crop-tool-near-upload:active {
        transform: none;
        background: none;
        opacity: 0.75;
      }
      #upload-zone.upload-zone-hero {
        min-height: 8.25rem;
      }
      .footer-site .footer-cta-upload,
      .footer-site .footer-cta-examples {
        width: 100%;
        min-height: 3rem;
        font-size: 0.9375rem;
        justify-content: center;
      }
      #work-area .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 0.65rem;
      }
      #work-area .retouch-color-switch {
        width: 100%;
        max-width: none;
      }
      #work-area .retouch-size-panel__head {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
      }
      #work-area .retouch-size-orient {
        width: 100%;
        min-height: 2.85rem;
        justify-content: center;
      }
      #work-area .retouch-orient-seg {
        width: 100%;
      }
      #work-area .retouch-orient-seg__btn {
        flex: 1 1 0;
        justify-content: center;
        min-height: 2.7rem;
        font-size: 0.82rem;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
        padding-inline: 0.35rem;
      }
      #work-area select.retouch-size-select {
        min-height: 3rem;
        font-size: 1rem;
      }
      #work-area .retouch-variant-mode-switch {
        max-width: none;
        width: 100%;
      }
      #work-area .retouch-variant-mode-switch button {
        min-height: 2.85rem;
        font-size: 0.8125rem;
        padding: 0.55rem 0.45rem;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        overflow-wrap: anywhere;
        hyphens: auto;
        min-width: 0;
      }
      #work-area #retouch-variant-tab-bar:not(.hidden) {
        display: block !important;
        width: 100%;
      }
      #work-area #retouch-variant-tab-bar [role="tablist"] {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
        width: 100%;
        padding: 0.35rem !important;
        border-radius: 0.85rem !important;
      }
      #work-area #retouch-style-showcase #retouch-variant-tab-bar .retouch-vtab {
        min-height: 3.35rem;
        padding: 0.45rem 0.3rem;
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1;
        border-radius: 0.65rem;
        gap: 0.12rem;
      }
      #work-area #retouch-variant-tab-bar .retouch-vtab .retouch-vtab__sub {
        font-size: 0.5625rem;
        font-weight: 650;
        letter-spacing: 0.03em;
        opacity: 0.9;
      }
      #work-area #retouch-variant-tab-bar .retouch-vtab.retouch-vtab--active {
        transform: none;
      }
      .retouch-wishes-tabbar {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100% !important;
        gap: 0.25rem;
        padding: 0.3rem !important;
      }
      .retouch-wishes-tabbar .tab-wishes {
        min-height: 2.85rem;
        font-size: 0.6875rem !important;
        padding: 0.4rem 0.2rem !important;
        text-align: center;
        line-height: 1.2;
        justify-content: center;
        white-space: normal;
        word-break: break-word;
        hyphens: auto;
      }
      #save-prompt-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.85rem;
        padding: 0.55rem 1rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(201, 162, 39, 0.42);
        background: rgba(201, 162, 39, 0.1);
        font-size: 0.8125rem;
        font-weight: 600;
        text-decoration: none !important;
      }
      #work-area #retouch-jewelry-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
      }
      #work-area #retouch-style-showcase .retouch-jewelry-panel {
        margin-top: 0.5rem;
        padding: 0.48rem 0.45rem 0.5rem;
        overflow: visible;
        flex-shrink: 0;
      }
      #work-area #retouch-style-showcase .retouch-jewelry-panel__head {
        flex-direction: column;
        align-items: stretch;
        gap: 0.18rem;
        margin-bottom: 0.32rem;
      }
      #work-area #retouch-style-showcase .retouch-jewelry-panel__picked {
        max-width: 100%;
        text-align: left;
      }
      #work-area #retouch-jewelry-chips .retouch-preset-chip {
        min-height: 2.5rem !important;
        padding: 0.38rem 0.32rem !important;
        font-size: 0.6875rem !important;
        line-height: 1.15 !important;
        white-space: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
        word-break: break-word;
      }
      #work-area #retouch-style-showcase .retouch-jewelry-note-fold > summary {
        font-size: 0.6875rem;
        padding: 0.38rem 0.42rem;
      }
      #work-area #retouch-style-showcase .retouch-style-showcase__card--wardrobe {
        padding: 0.85rem 0.7rem 0.95rem;
        overflow: visible;
      }
      #work-area #retouch-style-showcase .retouch-eye-color-panel {
        margin-top: 0.55rem;
        padding: 0.55rem 0.5rem 0.6rem;
        overflow: visible;
        box-sizing: border-box;
        flex-shrink: 0;
      }
      #work-area #retouch-style-showcase .retouch-eye-color-panel__head {
        margin-bottom: 0.4rem;
        gap: 0.25rem;
      }
      #work-area #retouch-style-showcase .retouch-eye-color-panel__picked,
      #work-area #retouch-style-showcase .retouch-jewelry-panel__picked,
      #work-area #retouch-style-showcase .retouch-style-card-picked {
        max-width: 52%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.2;
        flex-shrink: 1;
      }
      #work-area #retouch-style-showcase .retouch-eye-color-panel__head,
      #work-area #retouch-style-showcase .retouch-jewelry-panel__head {
        align-items: flex-start;
      }
      #work-area #retouch-style-showcase .retouch-wardrobe-toolbar--row .retouch-wardrobe-search {
        flex: 1 1 100%;
        min-width: 0;
      }
      #work-area #retouch-style-showcase .retouch-eye-color-tiles-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem 0.4rem;
      }
      #work-area #retouch-style-showcase .retouch-eye-color-tile-wrap {
        width: 100%;
        min-width: 0;
      }
      #work-area #retouch-style-showcase .retouch-preset-tile--eye-color {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        min-height: 4.25rem;
        height: auto !important;
        border-radius: 0.6rem;
      }
      #work-area #retouch-style-showcase .retouch-preset-keep-label--eye {
        font-size: 0.6875rem;
        line-height: 1.2;
        padding: 0.2rem;
      }
      #work-area #retouch-style-showcase .retouch-eye-color-tile-caption {
        font-size: 0.6875rem;
        margin-top: 0.22rem;
        white-space: normal;
        line-height: 1.2;
        text-align: center;
      }
      .wish-tpl-chip {
        min-height: 2.75rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        justify-content: center;
        text-align: center;
      }
      #work-area .retouch-templates-panel__row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.4rem;
      }
      #work-area .retouch-templates-panel__select {
        grid-column: 1 / -1;
      }
      #work-area .retouch-templates-panel__name {
        grid-column: 1 / 3;
      }
      #work-area .retouch-templates-panel__btn {
        min-height: 2.5rem;
        padding: 0.45rem 0.65rem;
      }
      #retouch-retry-btn {
        width: 100%;
        min-height: 3rem;
        font-size: 0.9375rem;
      }
      #retouch-header-progress button {
        min-height: 2.75rem;
      }
      #retouch-header-progress .layout-shell {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
      }
      #retouch-header-progress .flex.items-center.gap-2.shrink-0 {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
      }
      #retouch-header-to-profile,
      #retouch-header-to-results {
        width: 100%;
        text-align: center;
      }
      .profile-hero-stats .profile-stat-cell p:last-child {
        font-size: 0.625rem !important;
      }
      #email-verify-mini .flex.items-center.gap-2 {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
      }
      #email-verify-open-btn {
        width: 100%;
        min-height: 2.85rem;
        font-size: 0.9375rem;
      }
      #email-verify-mini-dismiss {
        min-height: 2.5rem;
        width: 100%;
        text-align: center;
      }
      #email-verify-banner .flex.flex-col.sm\:flex-row {
        flex-direction: column;
      }
      #email-verify-submit,
      #email-verify-resend,
      #email-verify-later {
        width: 100%;
        min-height: 3rem;
      }
      .instructions-summary {
        min-height: 3.5rem;
      }
      .instructions-body > .flex.items-end a[href="#upload-zone"] {
        width: 100%;
        min-height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9375rem;
      }
      #open-crop-tool-from-memo {
        width: 100%;
        justify-content: center;
        min-height: 3rem;
        margin-top: 0.65rem;
        font-size: 0.875rem;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
        overflow-wrap: anywhere;
      }
      .profile-pill-btn {
        min-height: 3rem;
        width: 100%;
        justify-content: center;
      }
      button.support-fab-gold {
        width: 3.25rem;
        height: 3.25rem;
      }
      .crop-card-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "apply apply"
          "download download"
          "cancel cancel"
          "loadother loadother";
        gap: 0.45rem;
        align-items: stretch;
      }
      .crop-card-footer .crop-footer-spacer {
        display: none !important;
      }
      #crop-apply { grid-area: apply; }
      #crop-download { grid-area: download; }
      #crop-cancel { grid-area: cancel; }
      #crop-load-other { grid-area: loadother; }
      .crop-card-footer #crop-cancel,
      .crop-card-footer #crop-load-other {
        min-height: 2.75rem;
        font-size: 0.875rem;
        width: 100%;
      }
      .crop-card-footer .crop-btn-primary,
      .crop-card-footer #crop-download {
        min-height: 3rem;
        font-size: 0.9375rem;
      }
      .crop-card-footer .crop-btn,
      .crop-toolbar-tools .crop-reset-btn {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        overflow-wrap: anywhere;
        hyphens: auto;
      }
      #download-modal .mt-6.flex.gap-3 {
        flex-direction: column-reverse;
        gap: 0.45rem;
      }
      #download-modal-ok,
      #download-modal-cancel {
        width: 100%;
        min-height: 3rem;
        font-size: 0.9375rem;
      }
      #download-format,
      #download-size {
        min-height: 3rem;
      }
      #preview-modal .flex.flex-wrap.justify-between.items-center.gap-3 {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
      }
      #preview-modal .flex.flex-wrap.justify-between.items-center.gap-3 > div {
        width: 100%;
      }
      #preview-modal .flex.flex-wrap.items-center.gap-2,
      #preview-modal .flex.flex-wrap.gap-2.justify-end {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.4rem;
        width: 100%;
        justify-content: stretch;
      }
      #preview-download,
      #preview-close-bottom {
        grid-column: 1 / -1;
        min-height: 3rem;
        font-size: 0.9375rem !important;
      }
      #preview-favorite-btn,
      #preview-remove-bg,
      #preview-export-pdf {
        min-height: 2.85rem;
        justify-content: center;
        width: 100%;
      }
      #mockup-modal .flex.flex-wrap.items-center.justify-between.gap-3 {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
      }
      #mockup-modal .mockup-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 0.35rem;
      }
      .mockup-tab {
        min-height: 2.85rem;
        width: 100%;
        justify-content: center;
      }
      #mockup-granite-picker,
      #mockup-shape-picker {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.45rem;
        width: 100%;
      }
      #mockup-close-bottom {
        width: 100%;
        min-height: 3rem;
        margin-top: 0.35rem;
      }
      #tokens-currency-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
      }
      #tokens-currency-tabs button {
        min-height: 2.85rem;
      }
      .tokens-packs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
      }
      .token-pack {
        min-height: 5rem;
        padding-top: 0.75rem;
      }
      .token-pack__amount {
        font-size: 1.2rem;
      }
      .tokens-custom-input {
        min-height: 3rem;
      }
      .tokens-modal-actions {
        flex-direction: column-reverse;
        gap: 0.45rem;
      }
      .tokens-modal-actions button {
        width: 100%;
        min-height: 3rem;
      }
      #auth-tab-login,
      #auth-tab-register {
        min-height: 2.85rem;
      }
      #auth-submit-btn {
        min-height: 3rem;
        font-size: 1rem;
      }
      #cookie-consent-accept {
        min-height: 3rem;
        font-size: 0.9375rem;
      }
      #maintenance-reload-btn {
        min-height: 3rem;
        width: 100%;
        max-width: 16rem;
      }

      /* ===== Результаты: кнопки и «Ещё» на телефоне (без вылезания за край) ===== */
      #work-area #variants .variant-actions-bar {
        grid-template-columns: 1fr;
        grid-template-areas:
          "download"
          "preview"
          "pdf"
          "more";
        gap: 0.4rem;
        min-width: 0;
      }
      #work-area #variants .variant-btn {
        min-height: 3rem;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        font-size: 0.875rem !important;
        white-space: normal;
      }
      #work-area #variants .variant-btn > span:not(.favorite-star-icon):not(.inscribe-trigger-icon):not(.padj-trigger-icon) {
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
      }
      #work-area #variants .variant-more__toggle,
      #work-area #variants .variant-more__panel .variant-btn {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
      }
      #work-area #variants .variant-btn--primary {
        font-size: 0.9375rem !important;
        font-weight: 700 !important;
      }
      #work-area #variants .variant-btn__ico {
        width: 1.125rem;
        height: 1.125rem;
      }
      #work-area #variants .variant-more__panel {
        position: static;
        box-shadow: none;
        border: 1px dashed rgba(201, 162, 39, 0.38);
        background: rgba(251, 191, 36, 0.07);
        padding: 0.4rem;
        margin-top: 0.15rem;
      }
      html.dark #work-area #variants .variant-more__panel {
        border-color: rgba(251, 191, 36, 0.22);
        background: rgba(39, 39, 42, 0.55);
      }
      #work-area #variants .variant-more__panel .variant-btn {
        min-height: 2.85rem;
        font-size: 0.8125rem !important;
      }
      #work-area #variants .variant-edit-tools {
        margin-top: 0.55rem;
        padding-top: 0.55rem;
      }
      #work-area #variants .variant-edit-tools__row {
        gap: 0.4rem;
        grid-template-columns: 1fr !important;
      }
      #work-area #variants .variant-edit-tools__row .inscribe-trigger,
      #work-area #variants .variant-edit-tools__row .padj-trigger {
        min-height: 3rem;
        font-size: 0.875rem;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        white-space: normal;
        text-overflow: unset;
        overflow: visible;
        line-height: 1.2;
      }

      /* Липкая панель «Отретушировать» + отступ контента */
      #work-area:not(.hidden) {
        padding-bottom: calc(7.25rem + env(safe-area-inset-bottom, 0px));
      }
      #work-area:not(.hidden):has(#variants:not(.hidden)) {
        padding-bottom: calc(7.75rem + env(safe-area-inset-bottom, 0px));
      }
      #work-area:not(.hidden) .app-toast-stack {
        bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
      }
      #work-area:not(.hidden) .retouch-action-bar {
        max-width: none !important;
        padding-top: 0.5rem;
        gap: 0.45rem;
      }
      #work-area:not(.hidden) .retouch-action-bar__row {
        width: 100%;
        gap: 0.45rem;
        flex-wrap: wrap;
      }
      #work-area:not(.hidden) #process-btn {
        flex: 1 1 58%;
        min-width: 0;
        min-height: 3.15rem;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.1rem;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
      }
      #work-area:not(.hidden) #process-btn .process-btn__title {
        line-height: 1.15;
        text-align: center;
      }
      #work-area:not(.hidden) #reset-btn {
        flex: 1 1 38%;
        min-width: 0;
        max-width: none !important;
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
        font-size: 0.8125rem;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
      }

      /* Аккордеон «Одежда и фон» */
      #retouch-style-showcase.retouch-style-accordion > summary.retouch-style-showcase__hero {
        min-height: 3.25rem;
        padding: 0.85rem 0.75rem !important;
        margin-bottom: 0;
      }
      #retouch-style-showcase .retouch-style-accordion__chevron {
        width: 1.35rem;
        height: 1.35rem;
        padding: 0.15rem;
      }

      /* Настройки ретуши — крупные зоны нажатия */
      #work-area .retouch-settings-surface {
        padding: 0.85rem !important;
      }
      #work-area label.retouch-product-pick .retouch-product-card {
        padding: 0.85rem !important;
      }
      #work-area .retouch-color-card {
        min-height: 3.35rem;
        padding: 0.65rem 0.75rem !important;
      }
      #work-area .retouch-check-body,
      #work-area .retouch-frame-body {
        padding: 0.75rem 0.85rem !important;
      }
      #work-area .retouch-orient-seg__btn {
        min-height: 3rem;
        font-size: 0.8125rem;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
      }

      /* Фильтр «Все / 1 / 2 / 3» */
      #variants-compare-toolbar {
        position: sticky;
        top: calc(3.5rem + env(safe-area-inset-top, 0px));
        z-index: 12;
        background: rgba(248, 247, 245, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        margin: 0 -0.15rem 0.65rem;
        padding: 0.35rem 0.15rem 0.5rem;
        border-radius: 0.75rem;
      }
      html.dark #variants-compare-toolbar {
        background: rgba(24, 24, 27, 0.92);
      }
      html.has-site-announce #variants-compare-toolbar {
        top: calc(3.5rem + var(--site-announce-h, 2.75rem) + env(safe-area-inset-top, 0px));
      }
      #variants-compare-toolbar .variant-filter {
        min-height: 3rem;
        font-size: 0.8125rem !important;
        min-width: 0;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
        overflow-wrap: anywhere;
        padding-inline: 0.3rem !important;
      }

      /* Отзыв о результате */
      #variants-feedback-row .retouch-feedback-btn,
      #variants-feedback-row #feedback-save-comment {
        min-height: 3rem;
        font-size: 0.9375rem;
      }
      #variants-feedback-row textarea {
        font-size: 16px !important;
      }

      /* Настройки ретуши — минимальная высота карточек */
      #work-area .retouch-product-card,
      #work-area .retouch-check-body,
      #work-area .retouch-frame-body {
        min-height: 3.35rem;
      }

      /* Архив ретушей — мобильный просмотр вариантов */
      #profile-retouches-scroll {
        max-height: none !important;
        overflow-y: visible !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
      }
      #profile-retouches-outer {
        padding-left: 0;
        padding-right: 0;
      }
      .retouch-history-card {
        padding: 0.85rem !important;
        gap: 0.65rem !important;
      }
      .retouch-history-variants--mobile {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        min-width: 0;
      }
      .history-mobile-vtabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
        padding: 0.3rem;
        border-radius: 0.85rem;
        background: rgba(243, 244, 246, 0.92);
        border: 1px solid rgba(209, 213, 219, 0.75);
      }
      html.dark .history-mobile-vtabs {
        background: rgba(39, 39, 42, 0.88);
        border-color: rgba(63, 63, 70, 0.8);
      }
      .history-mobile-vtab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.1rem;
        min-height: 3.1rem;
        padding: 0.4rem 0.25rem;
        border-radius: 0.65rem;
        border: 1px solid transparent;
        background: transparent;
        color: #6b7280;
        font-weight: 800;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
      }
      html.dark .history-mobile-vtab {
        color: #a1a1aa;
      }
      .history-mobile-vtab__num {
        font-size: 1.2rem;
      }
      .history-mobile-vtab__sub {
        font-size: 0.5625rem;
        font-weight: 650;
        letter-spacing: 0.03em;
        opacity: 0.88;
        text-transform: lowercase;
      }
      .history-mobile-vtab--active {
        background: #fff;
        border-color: rgba(201, 162, 39, 0.45);
        color: #1f2937;
        box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.28);
      }
      html.dark .history-mobile-vtab--active {
        background: rgb(24 24 27);
        border-color: rgba(201, 162, 39, 0.5);
        color: #f4f4f5;
      }
      .history-mobile-vtab--fav .history-mobile-vtab__num::after {
        content: '★';
        margin-left: 0.15rem;
        font-size: 0.72rem;
        color: #d97706;
      }
      html.dark .history-mobile-vtab--fav .history-mobile-vtab__num::after {
        color: #fbbf24;
      }
      .history-mobile-stage {
        min-width: 0;
        touch-action: pan-y;
      }
      .history-mobile-preview {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        border-radius: 0.9rem;
        overflow: hidden;
        background: #f3f4f6;
        line-height: 0;
        -webkit-tap-highlight-color: transparent;
      }
      html.dark .history-mobile-preview {
        background: rgb(39 39 42);
      }
      .history-mobile-preview__img {
        width: 100%;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        display: block;
        background: #e5e7eb;
      }
      html.dark .history-mobile-preview__img {
        background: rgb(63 63 70);
      }
      .history-mobile-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        margin-top: 0.55rem;
      }
      .history-mobile-act {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        min-width: 0;
        min-height: 3.1rem;
        padding: 0.45rem 0.35rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(209, 213, 219, 0.85);
        background: #fff;
        color: #374151;
        font-size: 0.6875rem;
        font-weight: 650;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
        -webkit-tap-highlight-color: transparent;
      }
      .history-mobile-act > span:last-child {
        max-width: 100%;
        line-height: 1.15;
      }
      html.dark .history-mobile-act {
        border-color: rgba(63, 63, 70, 0.9);
        background: rgb(24 24 27);
        color: #d4d4d8;
      }
      .history-mobile-act__icon {
        font-size: 1.05rem;
        line-height: 1;
      }
      .history-mobile-act--primary {
        border-color: rgba(201, 162, 39, 0.55);
        background: rgba(201, 162, 39, 0.12);
        color: #92400e;
      }
      html.dark .history-mobile-act--primary {
        border-color: rgba(201, 162, 39, 0.45);
        background: rgba(201, 162, 39, 0.14);
        color: #fde68a;
      }
      .history-mobile-act--fav.history-mobile-act--fav-on {
        border-color: rgba(245, 158, 11, 0.55);
        color: #b45309;
      }
      html.dark .history-mobile-act--fav.history-mobile-act--fav-on {
        color: #fbbf24;
      }
      .retouch-history-variants--loading .history-mobile-preview__skel {
        width: 100%;
        aspect-ratio: 3 / 4;
        border-radius: 0.9rem;
        background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
        background-size: 200% 100%;
        animation: history-skel-shimmer 1.2s ease-in-out infinite;
      }
      html.dark .retouch-history-variants--loading .history-mobile-preview__skel {
        background: linear-gradient(90deg, #3f3f46 0%, #52525b 50%, #3f3f46 100%);
        background-size: 200% 100%;
      }
      @keyframes history-skel-shimmer {
        0% { background-position: 100% 0; }
        100% { background-position: -100% 0; }
      }

      /* Архив ретушей: десктопная сетка 3 колонки (если вдруг отрисована на узком экране) */
      .retouch-history-variants:not(.retouch-history-variants--mobile) .flex.flex-wrap.justify-between {
        font-size: 0.6875rem !important;
        gap: 0.35rem;
        padding: 0.4rem 0.45rem !important;
      }
      .retouch-history-variants:not(.retouch-history-variants--mobile) .flex.flex-wrap.justify-between button {
        min-height: 2rem;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
      }

      /* Модалка просмотра — полноэкранный режим на телефоне */
      #preview-modal.modal-open {
        padding: 0 !important;
        align-items: stretch !important;
        background: rgba(0, 0, 0, 0.88) !important;
      }
      #preview-modal.modal-open #preview-modal-shell {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
      }
      #preview-modal.modal-open #preview-modal-shell > div:first-child {
        padding: max(0.75rem, env(safe-area-inset-top, 0px)) 1rem 0.65rem !important;
      }
      #preview-modal.modal-open #preview-modal-shell > div:first-child p {
        display: none;
      }
      #preview-modal.modal-open #preview-modal-shell > div:last-child {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px)) !important;
      }
      #preview-modal.modal-open #preview-modal-shell > div:last-child > div {
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0 !important;
        gap: 0.65rem !important;
      }
      #preview-mobile-view-tabs {
        display: flex;
        gap: 0.35rem;
        padding: 0.25rem;
        border-radius: 0.85rem;
        background: rgba(0, 0, 0, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .preview-mobile-view-tab {
        flex: 1 1 0;
        min-height: 2.75rem;
        border-radius: 0.65rem;
        border: 1px solid transparent;
        background: transparent;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.8125rem;
        font-weight: 650;
        -webkit-tap-highlight-color: transparent;
      }
      .preview-mobile-view-tab--active {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(201, 162, 39, 0.45);
        color: #fff;
      }
      #preview-compare-grid.preview-mobile--result {
        grid-template-columns: 1fr !important;
      }
      #preview-compare-grid.preview-mobile--result #preview-col-before,
      #preview-compare-grid.preview-mobile--result #preview-modal-caption-left {
        display: none !important;
      }
      #preview-compare-grid.preview-mobile--result #preview-modal-caption-right {
        grid-column: 1 / -1;
        justify-content: flex-start !important;
        text-align: left !important;
      }
      #preview-compare-grid.preview-mobile--result .preview-modal-frame img,
      #preview-compare-grid.preview-mobile--compare .preview-modal-frame img {
        max-height: min(58dvh, 640px) !important;
        width: 100% !important;
        object-fit: contain !important;
      }
      #preview-compare-grid.preview-mobile--compare {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
      }
      #preview-modal .preview-modal-actions-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
        width: 100%;
      }
      #preview-modal .preview-modal-actions-primary,
      #preview-modal .preview-modal-actions-secondary {
        display: contents;
      }
      #preview-modal .preview-modal-actions-mobile #preview-download,
      #preview-modal .preview-modal-actions-mobile #preview-close-bottom {
        grid-column: 1 / -1;
      }
      #preview-modal .preview-modal-actions-mobile button {
        min-height: 2.85rem;
        width: 100%;
        justify-content: center;
      }

      /* Мокап и токены: подписи в кнопках */
      .mockup-tab,
      #tokens-currency-tabs button,
      .token-pack {
        white-space: normal;
        text-align: center;
        line-height: 1.15;
        overflow-wrap: anywhere;
      }

      /* Превью и модалки: длинные подписи в кнопках */
      #preview-modal button,
      #download-modal button,
      #mockup-modal button,
      #auth-modal button,
      .footer-cta-upload,
      .footer-cta-examples {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        overflow-wrap: anywhere;
      }

      /* Плашка подтверждения почты */
      #email-verify-mini .layout-shell > span {
        line-height: 1.45;
      }
    }
    @media (max-width: 380px) {
      .email-otp-digit {
        width: 2.4rem;
        height: 3rem;
        font-size: 1.2rem;
      }
      #site-chrome > header > .max-w-5xl.mx-auto {
        gap: 0.3rem;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
      }
      #site-chrome .header-logo-stack,
      #site-chrome .header-brand-logo {
        height: 1.85rem !important;
        max-height: 1.85rem !important;
      }
      #site-chrome #token-balance-pill {
        height: 1.85rem;
        padding: 0 0.4rem;
        font-size: 0.625rem;
      }
      #site-chrome #token-balance-pill .token-balance-label {
        font-size: 0.625rem;
      }
      #site-chrome #token-balance-pill #token-balance {
        font-size: 0.6875rem;
        min-width: 1rem;
      }
      #site-chrome .header-buy-cta {
        height: 1.85rem;
        min-height: 1.85rem;
        padding: 0 0.55rem;
        font-size: 0.6875rem;
      }
      #site-chrome .header-profile-btn,
      #site-chrome #theme-toggle {
        height: 1.85rem;
        width: 1.85rem;
        min-height: 1.85rem;
        min-width: 1.85rem;
        max-width: 1.85rem;
      }
      #work-area:not(.hidden) .retouch-action-bar__row {
        flex-direction: column;
      }
      #work-area:not(.hidden) #process-btn,
      #work-area:not(.hidden) #reset-btn {
        flex: 1 1 auto;
        width: 100%;
      }
      #work-area #retouch-jewelry-chips {
        grid-template-columns: 1fr;
      }
    }
    ::selection {
      background: rgba(201, 162, 39, 0.3);
      color: inherit;
    }
    .dark ::selection {
      background: rgba(229, 199, 107, 0.28);
    }

    /* ---------- Тёмная тема: страница, скролл, общие поверхности ---------- */
    html {
      color-scheme: light dark;
    }
    html.dark {
      color-scheme: dark;
    }
    html.dark body.page-enter {
      background-color: #0c0c0c !important;
      background-image:
        radial-gradient(ellipse 120% 75% at 50% -28%, rgba(201, 162, 39, 0.1), transparent 56%),
        radial-gradient(ellipse 50% 42% at 100% 0%, rgba(201, 162, 39, 0.05), transparent 52%),
        radial-gradient(ellipse 45% 38% at 0% 90%, rgba(201, 162, 39, 0.04), transparent 50%);
    }
    .dark .hero-shimmer {
      background: linear-gradient(105deg, transparent 37%, rgba(229, 199, 107, 0.1) 50%, transparent 63%);
      background-size: 200% 100%;
    }
    html.dark {
      scrollbar-color: rgba(113, 113, 122, 0.9) rgba(24, 24, 27, 0.75);
    }
    html.dark ::-webkit-scrollbar {
      width: 11px;
      height: 11px;
    }
    html.dark ::-webkit-scrollbar-track {
      background: rgba(24, 24, 27, 0.72);
      border-radius: 999px;
    }
    html.dark ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(91, 91, 101, 0.98), rgba(63, 63, 70, 0.92));
      border-radius: 999px;
      border: 2px solid rgba(24, 24, 27, 0.72);
    }
    html.dark ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(113, 113, 122, 0.98), rgba(82, 82, 91, 0.95));
    }
    .dark .skip-to-upload:focus {
      box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(229, 199, 107, 0.35);
    }
    .dark .variant-card:hover {
      box-shadow: 0 28px 52px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(229, 199, 107, 0.12);
      border-color: rgba(229, 199, 107, 0.38);
    }
    .dark .upload-zone:hover {
      box-shadow: 0 0 0 4px rgba(229, 199, 107, 0.14);
    }
    .dark .upload-zone:focus-visible {
      box-shadow:
        0 0 0 4px rgba(229, 199, 107, 0.26),
        0 14px 44px rgba(0, 0, 0, 0.35);
    }
    /* Модалки и крупные панели — единый zinc, без «серого провала» */
    html.dark #download-modal > div,
    html.dark #tokens-modal .modal-panel,
    html.dark #auth-modal .modal-panel-auth,
    html.dark #terms-gate-modal .modal-panel-terms {
      background-color: rgba(24, 24, 27, 0.98) !important;
      border-color: rgba(63, 63, 70, 0.92) !important;
      box-shadow:
        0 28px 64px -14px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    }
    html.dark #preview-modal #preview-modal-shell {
      background-color: rgba(24, 24, 27, 0.97) !important;
      border-color: rgba(63, 63, 70, 0.9) !important;
      box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
    }
    html.dark #download-modal,
    html.dark #auth-modal,
    html.dark #tokens-modal,
    html.dark #terms-gate-modal {
      background-color: rgba(0, 0, 0, 0.72) !important;
    }
    html.dark #preview-modal {
      background-color: rgba(0, 0, 0, 0.72) !important;
    }
    html.dark #mockup-modal {
      background-color: rgba(0, 0, 0, 0.76) !important;
    }
    html.dark #mockup-modal #mockup-modal-shell {
      background-color: rgba(24, 24, 27, 0.97) !important;
      border-color: rgba(63, 63, 70, 0.9) !important;
      box-shadow:
        0 28px 64px -14px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    }

    /* Шапка: кнопка входа / профиля */
    @media (min-width: 640px) {
      #profile-btn.header-profile-btn,
      body > header.sticky .header-profile-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: auto !important;
        min-width: 0 !important;
        max-width: 8.5rem;
        min-height: 0;
        padding: 0.35rem 0.65rem !important;
        font-size: 0.8125rem;
        line-height: 1.2;
        border-radius: 999px;
        overflow: hidden;
      }
      .header-profile-btn__icon {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden;
      }
      .header-profile-btn__label {
        display: block !important;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
      }
    }

    html.dark #profile-btn.header-profile-btn {
      background: rgba(39, 39, 42, 0.95);
      border-color: rgba(113, 113, 122, 0.65);
      color: #f4f4f5;
    }
    html.dark #profile-btn.header-profile-btn:hover {
      background: rgba(63, 63, 70, 0.92);
      border-color: rgba(161, 161, 170, 0.45);
      color: #fff;
    }

    /* Модальное окно входа: вкладки и поля (дополнение к утилитам Tailwind) */
    html.dark #auth-modal #auth-mode-tabs {
      border-color: rgba(63, 63, 70, 0.88) !important;
      background: rgba(24, 24, 27, 0.65);
    }
    html.dark #auth-modal #auth-tab-login:not(.bg-gray-100),
    html.dark #auth-modal #auth-tab-register:not(.bg-gray-100) {
      color: #a1a1aa;
    }
    html.dark #auth-modal #auth-tab-login.bg-gray-100,
    html.dark #auth-modal #auth-tab-register.bg-gray-100 {
      background: rgba(63, 63, 70, 0.9) !important;
      color: #fafafa !important;
    }
    html.dark #auth-modal input[type='email'],
    html.dark #auth-modal input[type='password'],
    html.dark #auth-modal input[type='text'] {
      background: rgba(24, 24, 27, 0.94) !important;
      border-color: rgba(82, 82, 91, 0.72) !important;
      color: #f4f4f5 !important;
    }
    html.dark #auth-modal #auth-forgot-send,
    html.dark #auth-modal #auth-forgot-back {
      background: rgba(39, 39, 42, 0.88);
      border-color: rgba(82, 82, 91, 0.72);
      color: #e4e4e7;
    }
    html.dark #auth-modal #auth-forgot-send:hover,
    html.dark #auth-modal #auth-forgot-back:hover {
      background: rgba(63, 63, 70, 0.75);
    }
    html.dark #auth-modal .border-gray-200 {
      border-color: rgba(63, 63, 70, 0.75) !important;
    }

    .dark .email-verify-card {
      background: linear-gradient(165deg, rgba(30, 30, 33, 0.99) 0%, rgba(14, 14, 16, 0.99) 100%);
      box-shadow:
        0 0 0 1px rgba(201, 162, 39, 0.32),
        0 28px 56px -12px rgba(0, 0, 0, 0.6),
        0 0 72px -28px rgba(201, 162, 39, 0.18);
    }

    .hero-title-balance {
      text-wrap: balance;
    }
    .upload-zone-hero {
      border: 2px solid #c9a227;
      box-shadow:
        0 18px 40px -16px rgba(201, 162, 39, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }
    .dark .upload-zone-hero {
      border-color: #e5c76b;
      box-shadow:
        0 18px 40px -16px rgba(201, 162, 39, 0.22),
        0 12px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    .footer-site {
      background: linear-gradient(to bottom, transparent, rgba(249, 250, 251, 0.65));
    }
    .dark .footer-site {
      background:
        linear-gradient(to bottom, transparent, rgba(9, 9, 11, 0.92)),
        radial-gradient(ellipse 90% 55% at 50% 100%, rgba(201, 162, 39, 0.055), transparent 72%);
      border-top-color: rgba(63, 63, 70, 0.75);
    }
    .footer-site a:focus-visible {
      outline: 2px solid rgba(201, 162, 39, 0.75);
      outline-offset: 3px;
      border-radius: 0.25rem;
    }
    .footer-site .footer-cta-upload {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      padding: 0.65rem 1.35rem;
      border-radius: 0.875rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: #111827;
      background: linear-gradient(180deg, #e8c658 0%, #c9a227 100%);
      box-shadow: 0 10px 28px -6px rgba(180, 83, 9, 0.45);
      transition: filter 0.2s ease, transform 0.2s ease;
    }
    .footer-site .footer-cta-upload:hover {
      filter: brightness(1.06);
    }
    .footer-site .footer-cta-upload:active {
      transform: scale(0.98);
    }
    .dark .footer-site .footer-cta-upload {
      color: #0c0a09;
      box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5);
    }
    .footer-site .footer-cta-examples {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.65rem 1.15rem;
      border-radius: 0.875rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: #374151;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(229, 231, 235, 0.95);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
    }
    .footer-site .footer-cta-examples:hover {
      background: rgba(255, 251, 235, 0.95);
      border-color: rgba(251, 191, 36, 0.45);
      color: #1f2937;
    }
    html.dark .footer-site .footer-cta-examples {
      color: #e4e4e7;
      background: rgba(24, 24, 27, 0.94);
      border-color: rgba(82, 82, 91, 0.88);
      box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.45);
    }
    html.dark .footer-site .footer-cta-examples:hover {
      background: rgba(39, 39, 42, 0.96);
      border-color: rgba(251, 191, 36, 0.42);
      color: #fafafa;
    }
    .footer-site .footer-cta-examples:focus-visible {
      outline: 2px solid rgba(201, 162, 39, 0.75);
      outline-offset: 3px;
    }
    .footer-social {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: 0.75rem;
      margin: 0;
    }
    .footer-social-label {
      width: 100%;
      margin: 0 0 0.15rem;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #9ca3af;
    }
    html.dark .footer-social-label {
      color: #71717a;
    }
    .footer-social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      min-width: 10.5rem;
      padding: 0.7rem 1.25rem;
      border-radius: 0.875rem;
      font-size: 0.875rem;
      font-weight: 600;
      text-decoration: none;
      transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .footer-social-btn svg {
      width: 1.15rem;
      height: 1.15rem;
      flex-shrink: 0;
    }
    .footer-social-btn:hover {
      filter: brightness(1.06);
    }
    .footer-social-btn:active {
      transform: scale(0.98);
    }
    .footer-social-btn--instagram {
      color: #fff;
      background: linear-gradient(135deg, #fbbf24 0%, #f97316 42%, #e11d48 100%);
      box-shadow: 0 10px 26px -8px rgba(225, 29, 72, 0.4);
    }
    .footer-social-btn--telegram {
      color: #fff;
      background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
      box-shadow: 0 10px 26px -8px rgba(2, 132, 199, 0.45);
    }
    html.dark .footer-social-btn--instagram {
      box-shadow: 0 12px 30px -6px rgba(0, 0, 0, 0.55);
    }
    html.dark .footer-social-btn--telegram {
      box-shadow: 0 12px 30px -6px rgba(0, 0, 0, 0.55);
    }
    @media (prefers-reduced-motion: reduce) {
      .footer-site .footer-cta-upload:active {
        transform: none;
      }
    }
    .footer-legal {
      margin-top: 2.5rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(229, 231, 235, 0.9);
      text-align: left;
    }
    html.dark .footer-legal {
      border-top-color: rgba(63, 63, 70, 0.75);
    }
    .footer-legal-inner {
      max-width: 42rem;
      margin-left: auto;
      margin-right: auto;
    }
    .footer-legal-title {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #6b7280;
      margin-bottom: 0.75rem;
    }
    html.dark .footer-legal-title {
      color: #a1a1aa;
    }
    .footer-legal-requisites {
      font-size: 0.6875rem;
      line-height: 1.55;
      color: #6b7280;
    }
    html.dark .footer-legal-requisites {
      color: #a1a1aa;
    }
    .footer-legal-requisites a {
      color: #b45309;
      text-decoration: none;
    }
    html.dark .footer-legal-requisites a {
      color: #e7c56f;
    }
    .footer-legal-requisites a:hover {
      text-decoration: underline;
    }
    .footer-pay-banner-wrap {
      position: relative;
      margin: 1.25rem 0 1rem;
      padding: 1rem 1.1rem 0.85rem;
      background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
      border: 1px solid rgba(229, 231, 235, 0.95);
      border-radius: 1rem;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    .footer-pay-banner-wrap::before {
      content: 'Способы оплаты';
      position: absolute;
      top: -0.55rem;
      left: 1rem;
      padding: 0.1rem 0.55rem;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #92400e;
      background: linear-gradient(180deg, #fff 0%, #fefce8 100%);
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: 0.5rem;
    }
    html.dark .footer-pay-banner-wrap {
      background:
        radial-gradient(120% 200% at 50% 0%, #1c1917 0%, #0c0a09 100%);
      border-color: rgba(168, 130, 39, 0.32);
      box-shadow:
        0 8px 24px -8px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(201, 162, 39, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    html.dark .footer-pay-banner-wrap::before {
      color: #fcd34d;
      background: linear-gradient(180deg, #1c1917 0%, #0c0a09 100%);
      border-color: rgba(201, 162, 39, 0.4);
    }
    .footer-pay-banner {
      display: block;
      width: 100%;
      max-width: 36rem;
      height: auto;
      margin: 0 auto;
      image-rendering: auto;
    }
    .footer-pay-banner--dark {
      display: none;
    }
    html.dark .footer-pay-banner--light {
      display: none;
    }
    html.dark .footer-pay-banner--dark {
      display: block;
    }
    .footer-legal-prose {
      font-size: 0.625rem;
      line-height: 1.6;
      color: #9ca3af;
    }
    html.dark .footer-legal-prose {
      color: #71717a;
    }
    .footer-legal-prose p + p {
      margin-top: 0.65rem;
    }
    .footer-legal-prose strong {
      font-weight: 600;
      color: #6b7280;
    }
    html.dark .footer-legal-prose strong {
      color: #a1a1aa;
    }
    .footer-legal-prose a {
      color: #b45309;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    html.dark .footer-legal-prose a {
      color: #d4a84b;
    }

    /* ============================================================
       Мобильная оптимизация: общая для всего сайта
       ============================================================ */

    /* iOS не зумит input при фокусе, если font-size >= 16px.
       Принудительно повышаем размер шрифта для всех текстовых полей,
       чтобы фокус не вызывал болезненный авто-зум на iPhone. */
    @supports (-webkit-touch-callout: none) {
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="tel"],
      input[type="number"],
      input[type="search"],
      input[type="url"],
      input[type="date"],
      input[type="time"],
      select,
      textarea {
        font-size: 16px !important;
      }
    }

    /* Safe area для прилипающих к низу элементов на iPhone с домом-баром */
    #cookie-bar,
    #tokens-success-pop {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Тач-таргеты: на устройствах без точного указателя
       делаем важные элементы (формы, action-кнопки) удобными для пальца.
       Не применяем глобально к <button>, чтобы не ломать мелкие иконки. */
    @media (hover: none) and (pointer: coarse) {
      .btn-primary,
      .token-pack,
      .tokens-currency-btn,
      #tokens-buy-btn,
      #tokens-close-bottom,
      #auth-submit-btn,
      #auth-tab-login,
      #auth-tab-register,
      #auth-forgot-send,
      #auth-forgot-reset-btn,
      #auth-forgot-back,
      #download-modal-ok,
      #download-modal-cancel,
      #preview-download,
      #preview-close-bottom,
      #preview-export-pdf,
      #preview-favorite-btn,
      #preview-remove-bg,
      #preview-close,
      #mockup-close-bottom,
      #support-send,
      #support-close-bottom,
      .mockup-tab,
      .variant-filter,
      .download-btn,
      .download-options-btn,
      .preview-variant-btn,
      .remove-bg-variant-btn,
      .pdf-variant-btn,
      .variant-btn,
      .variant-more__toggle,
      .variant-more__panel .variant-btn,
      .inscribe-trigger,
      .padj-trigger,
      .hero-tool-btn,
      #open-crop-tool-near-upload,
      #open-crop-tool-from-memo,
      .retouch-variant-mode-btn,
      .retouch-vtab,
      .tab-wishes,
      .profile-pill-btn,
      #email-verify-open-btn,
      #email-verify-submit,
      #email-verify-resend,
      #email-verify-later,
      .crop-cta-tip,
      .crop-btn,
      .footer-cta-upload,
      .footer-cta-examples,
      #process-btn,
      #reset-btn,
      #retouch-retry-btn,
      #retouch-collapse-btn,
      #save-prompt-btn,
      .wish-tpl-chip,
      .retouch-preset-chip,
      #cookie-consent-accept,
      .portfolio-cta-btn,
      .retouch-feedback-btn,
      #feedback-save-comment,
      .retouch-orient-seg__btn,
      .retouch-style-accordion__summary,
      #mobile-original-toggle-btn,
      .pdot,
      .vdot {
        min-height: 44px;
      }
    }

    @media (hover: none) and (pointer: coarse) and (min-width: 640px) {
      .variant-filter {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 14px !important;
        font-size: 13px !important;
      }
      .retouch-variant-filterbar { padding: 4px !important; }
      .variant-edit-tools__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
      }
      .variant-edit-tools__row .inscribe-trigger,
      .variant-edit-tools__row .padj-trigger {
        margin-top: 0;
        min-height: 52px;
        font-size: 14px;
        font-weight: 600;
        border-width: 2px;
        border-style: solid;
        border-radius: 12px;
      }
      .variant-edit-tools__row .inscribe-trigger {
        background: rgba(201, 162, 39, 0.12);
        border-color: rgba(201, 162, 39, 0.55);
      }
      .variant-edit-tools__row .padj-trigger {
        background: rgba(99, 102, 241, 0.1);
        border-color: rgba(99, 102, 241, 0.45);
        border-style: solid;
      }
    }

    /* На очень узких экранах (<480px) даём модалкам почти всю ширину */
    @media (max-width: 480px) {
      #download-modal,
      #preview-modal,
      #mockup-modal {
        padding: 0 12px max(12px, env(safe-area-inset-bottom, 12px));
        align-items: flex-end;
      }
      #download-modal { padding-top: 12px; }
      #download-modal > div {
        padding: 18px 16px max(18px, env(safe-area-inset-bottom, 18px));
        max-width: 100%;
        width: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-height: 92dvh;
        overflow-y: auto;
      }
      #download-modal:not(.hidden) > div,
      #preview-modal.modal-open #preview-modal-shell,
      #mockup-modal.modal-open #mockup-modal-shell {
        animation: mobileSheetIn .22s cubic-bezier(.22, .85, .35, 1);
      }
      #preview-modal-shell,
      #mockup-modal-shell {
        width: 100%;
        max-width: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-height: 94dvh;
      }
      #preview-close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      #tokens-modal { padding: 12px; align-items: flex-end; }
      #tokens-modal .modal-panel { padding: 18px 16px 20px; border-radius: 18px; max-height: 92dvh; overflow-y: auto; }
      #auth-modal { padding: 12px; align-items: flex-end; }
      #auth-modal .modal-panel-auth { padding: 18px 16px 20px; border-radius: 18px; max-height: 92dvh; overflow-y: auto; }

      /* Кнопки выбора валюты + быстрый выбор количества компактнее */
      #tokens-count { width: 88px; }
      #tokens-currency-tabs button { padding: 10px 8px; }

      /* Форма восстановления пароля: 3 кнопки в одну строку — это перебор на узких */
      #auth-forgot-block > div.flex {
        flex-wrap: wrap;
      }
      #auth-forgot-block > div.flex > button {
        flex-basis: 100%;
        width: 100%;
        min-height: 3rem;
      }

      /* Tabs «Вход/Регистрация» — крупнее */
      #auth-tab-login,
      #auth-tab-register { padding: 10px 12px; }

      /* Preview modal — кнопки внизу могут переполняться */
      #preview-modal .flex.flex-wrap > button { flex: 1 1 auto; }

      /* Mockup modal — табы и пикеры в столбец */
      #mockup-modal .mockup-tabs,
      #mockup-modal .mockup-granite-picker,
      #mockup-modal .mockup-shape-picker {
        flex-wrap: wrap;
      }

      /* Cookie bar в узком виде */
      #cookie-bar-wrap { padding: 14px 16px; }
      #cookie-bar-text { min-width: 0; flex-basis: 100%; }
      #cookie-consent-accept { width: 100%; padding: 12px 16px; min-height: 44px; }
    }

    /* Очень-очень узкие экраны (старые мобильники ~320px) */
    @media (max-width: 360px) {
      #tokens-modal .modal-panel,
      #auth-modal .modal-panel-auth { padding: 16px 14px 18px; }
      .token-pack { padding-left: 0.25rem; padding-right: 0.25rem; }
      .token-pack__badge { font-size: 0.5rem; padding: 0.1rem 0.35rem; }
    }

    /* Запрещаем горизонтальный скролл всего документа на мобильнике —
       но используем `clip`, чтобы не ломать sticky-шапку. */
    body { overflow-x: clip; }
    @supports not (overflow: clip) {
      body { overflow-x: hidden; }
    }

    /* На мобильнике bottom-sheet анимация для модалок + safe-area под низ */
    @media (max-width: 480px) {
      #tokens-modal,
      #auth-modal {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
      }
      #tokens-modal:not(.hidden) .modal-panel,
      #auth-modal:not(.hidden) .modal-panel-auth {
        animation: mobileSheetIn .22s cubic-bezier(.22, .85, .35, 1);
      }
      @keyframes mobileSheetIn {
        from { transform: translateY(24px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }

      /* Info-pop про токены не должен вылазить за края экрана */
      #token-info-pop {
        width: min(280px, calc(100vw - 24px));
        right: 0;
      }
    }

    @media (min-width: 640px) {
      #preview-mobile-view-tabs {
        display: none !important;
      }
      #preview-modal .preview-modal-actions-mobile {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        grid-template-columns: unset;
      }
      #preview-modal .preview-modal-actions-primary,
      #preview-modal .preview-modal-actions-secondary {
        display: flex;
      }
      #preview-modal .preview-modal-actions-mobile #preview-download,
      #preview-modal .preview-modal-actions-mobile #preview-close-bottom {
        grid-column: unset;
        width: auto;
      }
      #preview-modal .preview-modal-actions-mobile button {
        width: auto;
      }
    }

    @media (max-width: 639px) {
      #work-area .retouch-launch-warning__inner {
        white-space: normal !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0.7rem !important;
        line-height: 1.35 !important;
        flex-wrap: wrap !important;
        font-size: 0.6875rem !important;
        padding: 0.4rem 0.55rem !important;
      }
      #work-area:not(.hidden) #process-btn .process-btn__sub {
        font-size: 0.625rem;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
        max-width: 100%;
      }

      /* Профиль: вкладки без вылезания подписей */
      .profile-tabs .profile-tab-pill {
        min-width: 0;
        white-space: normal;
        line-height: 1.2;
        font-size: 0.8125rem;
        padding-inline: 0.5rem;
        text-align: center;
      }
    }

    /* Compact instruction note near retouch launch buttons (desktop pill). */
    @media (min-width: 640px) {
      #work-area .retouch-launch-warning__inner {
        white-space: nowrap !important;
        border-radius: 999px !important;
      }
    }
    #work-area .retouch-launch-warning {
      flex: 0 0 auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      padding: 0 !important;
      margin: 0 !important;
      color: inherit !important;
    }
    #work-area .retouch-launch-warning__inner {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.42rem !important;
      width: auto !important;
      max-width: min(100%, 32rem) !important;
      padding: 0.34rem 0.68rem !important;
      border: 1px solid rgba(217, 119, 6, 0.18) !important;
      border-radius: 999px !important;
      background: linear-gradient(180deg, rgba(255, 251, 235, 0.86), rgba(255, 247, 237, 0.64)) !important;
      color: #75665a !important;
      font-size: 0.73rem !important;
      line-height: 1.15 !important;
      box-shadow: 0 8px 22px -18px rgba(146, 64, 14, 0.42) !important;
    }
    html.dark #work-area .retouch-launch-warning__inner {
      border-color: rgba(251, 191, 36, 0.18) !important;
      background: linear-gradient(180deg, rgba(39, 39, 42, 0.72), rgba(24, 24, 27, 0.62)) !important;
      color: #d4d4d8 !important;
      box-shadow: 0 8px 22px -18px rgba(0, 0, 0, 0.7) !important;
    }
    #work-area .retouch-launch-warning__inner::before {
      content: "" !important;
      width: 0.38rem !important;
      height: 0.38rem !important;
      border-radius: 999px !important;
      background: #d97706 !important;
      box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.14) !important;
      flex: none !important;
    }
    html.dark #work-area .retouch-launch-warning__inner::before {
      background: #fbbf24 !important;
      box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.13) !important;
    }
    #work-area .retouch-launch-warning__link {
      color: #9a5a0a !important;
      text-decoration: none !important;
      border-bottom: 1px solid rgba(180, 83, 9, 0.34) !important;
      font-weight: 800 !important;
    }
    html.dark #work-area .retouch-launch-warning__link {
      color: #fbbf24 !important;
      border-bottom-color: rgba(251, 191, 36, 0.38) !important;
    }

html.del-acc-scroll-lock,
    body.del-acc-scroll-lock {
      overflow: hidden !important;
      touch-action: none;
      overscroll-behavior: none;
    }
    #delete-account-modal {
      position: fixed !important;
      inset: 0 !important;
      z-index: 2147483000 !important;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      padding-top: max(1rem, env(safe-area-inset-top, 0px));
      padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
      padding-left: max(1rem, env(safe-area-inset-left, 0px));
      padding-right: max(1rem, env(safe-area-inset-right, 0px));
      background: rgba(15, 15, 20, 0.55);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
      backdrop-filter: blur(10px) saturate(140%);
      isolation: isolate;
    }
    html.dark #delete-account-modal {
      background: rgba(0, 0, 0, 0.72);
    }
    #delete-account-modal.is-open {
      display: flex !important;
    }
    #delete-account-modal.is-open .delete-account-card {
      animation: delAccIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes delAccIn {
      from { opacity: 0; transform: translateY(16px) scale(0.96); }
      to { opacity: 1; transform: none; }
    }
    .delete-account-card {
      width: 100%;
      max-width: 26rem;
      max-height: calc(100dvh - 2rem);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 1.25rem;
      background:
        linear-gradient(165deg, rgba(255,255,255,0.98) 0%, rgba(250,250,252,0.98) 100%);
      border: 1px solid rgba(244, 63, 94, 0.22);
      box-shadow:
        0 28px 72px -20px rgba(244, 63, 94, 0.28),
        0 16px 40px -16px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    }
    html.dark .delete-account-card {
      background:
        linear-gradient(165deg, #1b1b1e 0%, #0f0f12 100%);
      border-color: rgba(244, 63, 94, 0.35);
      box-shadow:
        0 28px 80px -20px rgba(244, 63, 94, 0.35),
        0 20px 56px -18px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    }
    .delete-account-card::-webkit-scrollbar { width: 0; height: 0; }
    .delete-account-card .del-acc-icon {
      background: radial-gradient(circle at 30% 20%, rgba(244, 63, 94, 0.28), rgba(244, 63, 94, 0.06) 70%);
      box-shadow:
        inset 0 0 0 1px rgba(244, 63, 94, 0.25),
        0 8px 22px -6px rgba(244, 63, 94, 0.28);
      position: relative;
    }
    .delete-account-card .del-acc-icon::after {
      content: '';
      position: absolute; inset: -6px;
      border-radius: 9999px;
      border: 1px dashed rgba(244, 63, 94, 0.28);
      animation: delAccHalo 3.2s linear infinite;
    }
    @keyframes delAccHalo {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .delete-account-card .del-acc-input {
      background: rgba(244, 244, 246, 0.85);
      border: 1px solid rgba(24, 24, 27, 0.1);
      color: rgb(24, 24, 27);
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
      font-size: 16px;
    }
    .delete-account-card .del-acc-input::placeholder { color: rgba(82, 82, 91, 0.55); }
    .delete-account-card .del-acc-input:focus {
      border-color: rgba(244, 63, 94, 0.55);
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.14);
      outline: none;
    }
    html.dark .delete-account-card .del-acc-input {
      background: rgba(39, 39, 42, 0.8);
      border-color: rgba(255, 255, 255, 0.1);
      color: rgb(244, 244, 245);
    }
    html.dark .delete-account-card .del-acc-input::placeholder { color: rgba(161, 161, 170, 0.55); }
    html.dark .delete-account-card .del-acc-input:focus {
      background: rgba(24, 24, 27, 0.9);
      border-color: rgba(244, 63, 94, 0.6);
      box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.2);
    }
    .delete-account-card .del-acc-pw-wrap {
      position: relative;
      display: block;
    }
    .delete-account-card .del-acc-toggle-pw {
      position: absolute;
      top: 50%;
      right: 6px;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin: 0;
      border: 0;
      border-radius: 0.5rem;
      background: transparent;
      color: rgba(82, 82, 91, 0.75);
      cursor: pointer;
      transition: color 0.15s, background 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .delete-account-card .del-acc-toggle-pw:hover { color: rgb(24, 24, 27); background: rgba(24, 24, 27, 0.06); }
    .delete-account-card .del-acc-toggle-pw:focus-visible {
      outline: 2px solid rgba(244, 63, 94, 0.55);
      outline-offset: 1px;
    }
    html.dark .delete-account-card .del-acc-toggle-pw { color: rgba(161, 161, 170, 0.9); }
    html.dark .delete-account-card .del-acc-toggle-pw:hover { color: rgb(244, 244, 245); background: rgba(255, 255, 255, 0.08); }
    .delete-account-card .del-acc-cancel {
      background: rgba(244, 244, 246, 0.9);
      border: 1px solid rgba(24, 24, 27, 0.1);
      color: rgb(39, 39, 42);
      min-height: 44px;
    }
    .delete-account-card .del-acc-cancel:hover { background: rgba(228, 228, 231, 0.95); }
    html.dark .delete-account-card .del-acc-cancel {
      background: rgba(39, 39, 42, 0.7);
      border-color: rgba(255, 255, 255, 0.08);
      color: rgb(228, 228, 231);
    }
    html.dark .delete-account-card .del-acc-cancel:hover { background: rgba(63, 63, 70, 0.85); }
    .delete-account-card .del-acc-confirm {
      background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
      color: #ffffff;
      box-shadow:
        0 10px 24px -8px rgba(220, 38, 38, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
      min-height: 44px;
    }
    .delete-account-card .del-acc-confirm:hover:not(:disabled) {
      background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
      box-shadow: 0 14px 28px -8px rgba(220, 38, 38, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    .delete-account-card .del-acc-confirm:active:not(:disabled) { transform: translateY(1px); }
    .delete-account-card .del-acc-confirm:disabled { opacity: 0.75; cursor: progress; }
    .delete-account-card .del-acc-warn-list {
      border-radius: 0.75rem;
      padding: 0.65rem 0.85rem;
      background: rgba(254, 226, 226, 0.6);
      border: 1px solid rgba(244, 63, 94, 0.18);
    }
    html.dark .delete-account-card .del-acc-warn-list {
      background: rgba(127, 29, 29, 0.18);
      border-color: rgba(244, 63, 94, 0.25);
    }
    .delete-account-card .del-acc-warn-list li {
      color: rgb(127, 29, 29);
    }
    html.dark .delete-account-card .del-acc-warn-list li {
      color: rgba(254, 202, 202, 0.92);
    }
    .delete-account-card .del-acc-error {
      background: rgba(254, 226, 226, 0.85);
      border: 1px solid rgba(244, 63, 94, 0.28);
      color: rgb(153, 27, 27);
    }
    html.dark .delete-account-card .del-acc-error {
      background: rgba(127, 29, 29, 0.28);
      border-color: rgba(244, 63, 94, 0.4);
      color: rgb(254, 202, 202);
    }
    @media (max-width: 480px) {
      #delete-account-modal {
        align-items: flex-end;
        padding: 0;
      }
      .delete-account-card {
        max-width: 100%;
        max-height: 90dvh;
        border-radius: 1.25rem 1.25rem 0 0;
        border-bottom: 0;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
      }
      @keyframes delAccIn {
        from { opacity: 0; transform: translateY(100%); }
        to { opacity: 1; transform: none; }
      }
      .delete-account-card::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 9999px;
        background: rgba(82, 82, 91, 0.25);
        margin: 8px auto 0;
      }
      html.dark .delete-account-card::before {
        background: rgba(255, 255, 255, 0.18);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #delete-account-modal.is-open .delete-account-card { animation: none; }
      .delete-account-card .del-acc-icon::after { animation: none; }
    }

#cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:99999}
    #cookie-bar-inner{background:#ffffff;border-top:2px solid #d4d4d8;box-shadow:0 -6px 28px rgba(0,0,0,0.12)}
    #cookie-bar-wrap{max-width:900px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
    #cookie-bar-icon{font-size:28px;line-height:1;flex-shrink:0}
    #cookie-bar-text{flex:1;min-width:200px}
    #cookie-bar-title{margin:0 0 4px;font-size:14px;font-weight:700;color:#18181b}
    #cookie-bar-desc{margin:0;font-size:12px;line-height:1.55;color:#52525b}
    #cookie-bar-desc b{color:#27272a}
    #cookie-consent-accept{flex-shrink:0;padding:10px 28px;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;background:#f5cb5c;color:#18181b;box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:background .15s,transform .1s}
    #cookie-consent-accept:hover{background:#eebd38}
    #cookie-consent-accept:active{transform:scale(0.97)}

    .dark #cookie-bar-inner{background:#18181b;border-top-color:#3f3f46;box-shadow:0 -6px 28px rgba(0,0,0,0.5)}
    .dark #cookie-bar-title{color:#fafafa}
    .dark #cookie-bar-desc{color:#a1a1aa}
    .dark #cookie-bar-desc b{color:#e4e4e7}

    @media(prefers-color-scheme:dark){
      html:not(.light) #cookie-bar-inner{background:#18181b;border-top-color:#3f3f46;box-shadow:0 -6px 28px rgba(0,0,0,0.5)}
      html:not(.light) #cookie-bar-title{color:#fafafa}
      html:not(.light) #cookie-bar-desc{color:#a1a1aa}
      html:not(.light) #cookie-bar-desc b{color:#e4e4e7}
    }

#site-chrome {
      position: sticky;
      top: 0;
      z-index: 90;
      background: rgba(255, 255, 255, 0.96);
      -webkit-backdrop-filter: blur(12px) saturate(160%);
      backdrop-filter: blur(12px) saturate(160%);
      border-bottom: 1px solid rgba(229, 231, 235, 0.9);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    html.dark #site-chrome {
      background: rgba(9, 9, 11, 0.96);
      border-bottom-color: rgba(39, 39, 42, 0.95);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    html.has-site-announce {
      --site-announce-h: 2.75rem;
    }
    #site-chrome > header {
      position: relative;
      background: transparent !important;
      border-bottom: none !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }