/* "My 3D Me" studio (js/avatar.js) */
.av-ov { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: radial-gradient(circle at 50% 30%, rgba(171,156,255,.55), rgba(45,42,69,.75)); animation: sk-fade .25s; }
.av-card { position: relative; width: min(560px, 100%); max-height: 100%; overflow: auto; background: #fff; border-radius: 36px;
  padding: 18px 18px 22px; text-align: center; box-shadow: 0 12px 0 #c9bdff, 0 30px 60px rgba(0,0,0,.3);
  animation: sk-pop .45s cubic-bezier(.34,1.56,.64,1); }
.av-x { position: absolute; right: 12px; top: 12px; width: 56px; height: 56px; border-radius: 50%; background: #ffe3ea;
  font-size: 26px; box-shadow: 0 5px 0 #ffb3c6; }
.av-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 60px 12px; }
.av-say { width: 52px; height: 52px; cursor: pointer; filter: drop-shadow(0 3px 2px rgba(0,0,0,.15)); }
.av-title { font-size: 32px; color: #6c5ce7; }
.av-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.av-row .sk-btn { min-width: 84px; height: 80px; font-size: 38px; padding: 0 18px; }
.av-file { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.av-note { margin: 10px 0 0; font-size: 15px; color: #8b87a3; }

.av-cam, .av-crop { position: relative; width: min(340px, 78vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, #e9e4ff, #d6f0ff); box-shadow: 0 0 0 8px #fff, 0 0 0 14px #ab9cff, 0 14px 30px rgba(0,0,0,.18); }
.av-cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.av-cam.av-nocam video { display: none; }
.av-cam.av-nocam::after { content: '🖼️'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 110px; opacity: .5; }
.av-oval { position: absolute; left: 22%; top: 12%; width: 56%; height: 70%; border: 5px dashed rgba(255,255,255,.9); border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(108,92,231,.18); pointer-events: none; animation: sk-float 2.4s ease-in-out infinite; }
.av-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 140px; font-weight: 800; color: #fff;
  text-shadow: 0 6px 0 #6c5ce7, 0 10px 30px rgba(0,0,0,.4); animation: sk-pop .35s; }
.av-crop canvas { width: 100%; height: 100%; touch-action: none; cursor: grab; }
.av-ring { position: absolute; inset: 4%; border: 5px solid rgba(255,255,255,.95); border-radius: 50%; pointer-events: none; }

.av-prev { width: min(300px, 70vw); height: min(320px, 46vh); margin: 0 auto; border-radius: 30px; touch-action: none;
  background: radial-gradient(circle at 50% 85%, #c8f5c0 0 30%, transparent 31%), linear-gradient(#bfe3ff, #f2ecff); }
.av-pals { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.av-pal { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.av-pal-ico { font-size: 30px; width: 44px; }
.av-dot { width: 46px; height: 46px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px #ddd6ff, 0 4px 0 rgba(0,0,0,.12); }
.av-dot.on { transform: scale(1.18); box-shadow: 0 0 0 4px #6c5ce7, 0 6px 10px rgba(0,0,0,.2); }
@media (max-width: 600px) {
  .av-title { font-size: 24px; }
  .av-row .sk-btn { min-width: 72px; height: 70px; font-size: 32px; }
  .av-dot { width: 40px; height: 40px; }
}
.av-styles { gap: 10px; }
.av-style { width: 64px; height: 64px; border-radius: 20px; background: #f3f0ff; font-size: 34px;
  box-shadow: 0 5px 0 #ddd6ff; transition: transform .12s; }
.av-style.on { background: #e5dcff; transform: translateY(-3px) scale(1.08); box-shadow: 0 0 0 4px #6c5ce7, 0 8px 0 #c9bdff; }
@media (max-width: 600px) { .av-style { width: 54px; height: 54px; font-size: 28px; } }