/* ========== СЕТКА СТИЛЕЙ ART AI ========== */
.art-styles-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
  gap: 10px; 
  max-height: 55vh; 
  overflow-y: auto; 
  padding: 4px; 
}
.art-style-card { 
  background: var(--bg-card); 
  border: 1px solid var(--border-l2); 
  border-radius: var(--radius-lg); 
  overflow: hidden; 
  cursor: pointer; 
  transition: all 0.25s ease; 
  display: flex; 
  flex-direction: column; 
}
.art-style-card:hover { 
  border-color: #f3d779; 
  transform: translateY(-3px); 
  box-shadow: 0 8px 24px rgba(243, 215, 121, 0.15); 
}
.art-style-image { 
  width: 100%; 
  aspect-ratio: 3/4; 
  background: var(--bg-input); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden; 
}
.art-style-placeholder { font-size: 44px; opacity: 0.3; }
.art-style-image img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}
.art-style-name { 
  padding: 10px 12px; 
  font-size: 12px; 
  font-weight: 500; 
  color: var(--text-primary); 
  text-align: center; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

/* ========== КАРУСЕЛЬ ART AI ========== */
.art-carousel { 
  display: flex; 
  gap: 8px; 
  overflow-x: auto; 
  scroll-behavior: smooth; 
  scrollbar-width: none; 
  -webkit-overflow-scrolling: touch; 
  padding: 4px 2px 8px; 
  scroll-snap-type: x mandatory; 
  width: 100%; 
  max-width: 850px; 
  margin: 0 auto; 
}
.art-carousel::-webkit-scrollbar { display: none; }

.art-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  padding: 0 8px;
}

.art-carousel-card { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 6px; 
  padding: 0; 
  background: var(--bg-card); 
  border: 1px solid var(--border-l2); 
  border-radius: var(--radius-lg); 
  cursor: pointer; 
  min-width: 155px; 
  flex-shrink: 0; 
  scroll-snap-align: start; 
  transition: all 0.3s cubic-bezier(0.22,0.61,0.36,1); 
  overflow: hidden; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
}
.art-carousel-card:hover { 
  transform: translateY(-4px); 
  border-color: #f3d779; 
  box-shadow: 0 12px 32px rgba(243,215,121,0.2); 
}
.art-carousel-image { 
  width: 155px; 
  height: 195px; 
  background: var(--bg-input); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden; 
}
.art-carousel-placeholder { font-size: 52px; opacity: 0.25; }
.art-carousel-image img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}
.art-carousel-label { 
  padding: 10px 10px 12px; 
  font-size: 12px; 
  font-weight: 500; 
  color: var(--text-primary); 
  text-align: center; 
  width: 100%; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

/* Стрелки для Art AI карусели */
.art-carousel-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(44, 44, 46, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  transition: all 0.2s ease;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.art-carousel-arrow:hover {
  background: var(--bg-hover);
  border-color: #f3d779;
  transform: scale(1.1);
}
.art-carousel-arrow:active {
  transform: scale(0.95);
}

/* ========== РАМКА ГЕНЕРАЦИИ ART AI ========== */
.art-generating-frame { 
  margin: 16px 0; 
  border-radius: 16px; 
  overflow: hidden; 
  border: 2px dashed rgba(243,215,121,0.3); 
  background: rgba(243,215,121,0.03); 
  min-height: 280px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.art-generating-inner { text-align: center; padding: 40px; }
.art-generating-spinner { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 16px; 
}
.art-spinner-ring { 
  width: 48px; 
  height: 48px; 
  border: 3px solid rgba(243,215,121,0.15); 
  border-top-color: #f3d779; 
  border-radius: 50%; 
  animation: artSpin 1s linear infinite; 
}
@keyframes artSpin { to{transform:rotate(360deg)} }
.art-generating-text { 
  font-size: 14px; 
  color: #f3d779; 
  font-weight: 500; 
  animation: artPulse 1.5s ease-in-out infinite; 
}
@keyframes artPulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.art-generated-image { position: relative; width: 100%; }
.art-generated-image img { 
  width: 100%; 
  border-radius: 14px; 
  display: block; 
  animation: artReveal 0.6s cubic-bezier(0.22,0.61,0.36,1); 
}
@keyframes artReveal { 
  from{opacity:0;transform:scale(.92);filter:blur(10px)} 
  to{opacity:1;transform:scale(1);filter:blur(0)} 
}
.art-download-btn { 
  position: absolute; 
  bottom: 10px; 
  right: 10px; 
  display: flex; 
  align-items: center; 
  gap: 4px; 
  padding: 6px 12px; 
  border-radius: 8px; 
  border: none; 
  background: rgba(0,0,0,0.7); 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px); 
  color: #fff; 
  font-size: 11px; 
  font-weight: 500; 
  cursor: pointer; 
  font-family: inherit; 
  transition: all 0.3s; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); 
}
.art-download-btn:hover { 
  background: rgba(0,0,0,0.85); 
  transform: translateY(-1px); 
  box-shadow: 0 4px 16px rgba(0,0,0,0.4); 
}
.art-download-btn:active { transform: scale(0.95); }
.art-download-btn svg { width: 14px; height: 14px; }
.art-frame-done { 
  border: 2px solid rgba(243,215,121,0.4) !important; 
  background: rgba(243,215,121,0.05) !important; 
}
[data-theme="dark"] .art-generating-frame { 
  border-color: rgba(243,215,121,0.2); 
  background: rgba(243,215,121,0.02); 
}

/* ========== КОНФЕТТИ И ЧАСТИЦЫ ========== */
.confetti-particle { 
  position: fixed; 
  pointer-events: none; 
  z-index: 9999; 
  opacity: 1; 
  animation: confettiFall var(--duration,3s) cubic-bezier(0.22,0.61,0.36,1) forwards; 
}
@keyframes confettiFall { 
  0%{transform:translate(0,0) rotate(0deg);opacity:1} 
  100%{transform:translate(var(--drift,0px),100vh) rotate(var(--rotation,360deg));opacity:0} 
}
.send-particle { 
  position: fixed; 
  pointer-events: none; 
  z-index: 999; 
  border-radius: 50%; 
  opacity: 1; 
  animation: particleBurst 0.7s cubic-bezier(0.22,0.61,0.36,1) forwards; 
}
@keyframes particleBurst { 
  0%{transform:translate(0,0) scale(1);opacity:1} 
  100%{transform:translate(var(--tx,0px),var(--ty,0px)) scale(0);opacity:0} 
}