/* "Me in 360" studio (js/me360.js) */
.m3-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(132,214,255,.6), rgba(45,42,69,.78)); animation: sk-fade .25s; }
.m3-card { position: relative; width: min(620px, 100%); max-height: 100%; overflow: auto; background: #fff; border-radius: 36px;
  padding: 18px 18px 22px; text-align: center; box-shadow: 0 12px 0 #a5d8ff, 0 30px 60px rgba(0,0,0,.3); animation: sk-pop .45s cubic-bezier(.34,1.56,.64,1); }
.m3-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; }
.m3-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 60px 12px; font-size: 32px; color: #0984e3; }
.m3-say { width: 52px; height: 52px; cursor: pointer; }
.m3-cam { position: relative; width: min(420px, 82vw); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: 28px; overflow: hidden;
  background: #dbe9ff; box-shadow: 0 0 0 6px #fff, 0 0 0 12px #74c0fc, 0 14px 30px rgba(0,0,0,.18); }
.m3-cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.m3-guide { position: absolute; left: 30%; right: 30%; top: 6%; bottom: 4%; border: 5px dashed rgba(255,255,255,.95); border-radius: 46% 46% 18% 18% / 22% 22% 8% 8%;
  display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.m3-guide span { font-size: 54px; opacity: .55; margin-bottom: 8px; }
.m3-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 150px; font-weight: 800; color: #fff;
  text-shadow: 0 6px 0 #0984e3, 0 10px 30px rgba(0,0,0,.4); }
.m3-spin { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 54px; }
.m3-spin span { display: inline-block; animation: m3-rot 1.4s linear infinite; }
.m3-ring { position: absolute; right: 12px; bottom: 12px; width: 70px; height: 70px; transform: rotate(-90deg); }
.m3-ring circle { fill: rgba(255,255,255,.5); stroke: #51cf66; stroke-width: 9; stroke-dasharray: 289; stroke-dashoffset: calc(289 * (1 - var(--p, 0))); }
.m3-tip { margin: 12px 8px 0; font-size: 18px; color: #4b4766; }
.m3-note { margin: 8px 0 0; font-size: 14px; color: #8b87a3; }
.m3-row { display: flex; justify-content: center; gap: 14px; margin-top: 14px; }
.m3-row .sk-btn { min-width: 110px; height: 84px; font-size: 40px; }
.m3-busy { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 10px; }
.m3-busy span { font-size: 90px; animation: sk-float 1.6s ease-in-out infinite; }
.m3-busy b { font-size: 26px; color: #4b4766; }
.m3-bar { width: min(320px, 80%); height: 22px; border-radius: 999px; background: #e7f5ff; overflow: hidden; box-shadow: inset 0 3px 0 rgba(0,0,0,.06); }
.m3-bar em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #74c0fc, #51cf66); transition: width .2s; }
.m3-view { position: relative; width: min(240px, 60vw); aspect-ratio: 1 / 2; margin: 0 auto; }
.m3-view canvas { position: relative; z-index: 1; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.m3-floor { position: absolute; left: 10%; right: 10%; bottom: -4%; height: 16%; border-radius: 50%; background: radial-gradient(#b2f2bb, transparent 70%); }
@keyframes m3-rot { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .m3-head { font-size: 24px; } .m3-row .sk-btn { min-width: 90px; height: 74px; } .m3-view { width: min(200px, 54vw); } }
.m3-rec { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 84px; font-size: 44px; cursor: pointer; }
.m3-rec[hidden], .m3-go[hidden] { display: none; }
.m3-why { margin: 12px 8px 0; padding: 10px 14px; border-radius: 16px; background: #fff4e6; color: #8a5a00; font-size: 16px; }
.m3-cam.m3-nocam video { display: none; }
.m3-cam.m3-nocam::after { content: '🎥'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 110px; opacity: .45; }
/* pehle se bana avatar: chhoti photo + hata do */
.m3-have { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 auto 12px;
  padding: 8px 12px; border-radius: 22px; background: #fff0f3; width: fit-content; }
.m3-have img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #ffe9dc; box-shadow: 0 0 0 4px #fff; }
.m3-have .sk-btn { min-width: 72px; height: 64px; font-size: 30px; padding: 0 14px; }
.m3-sure { display: flex; align-items: center; gap: 10px; }
.m3-sure b { font-size: 22px; color: #c2255c; }
.m3-have [hidden] { display: none; }
/* ek-photo wala 3D preview + 📸/🖼️ buttons */
.m3-view3d { width: min(300px, 72vw); height: min(360px, 46vh); margin: 0 auto; border-radius: 28px; touch-action: none;
  background: radial-gradient(circle at 50% 88%, #d3f9d8 0 26%, transparent 27%), linear-gradient(#bfe3ff, #f3eeff); }
.m3-pick { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 84px; font-size: 44px; cursor: pointer; }
.m3-snap { min-width: 120px; height: 84px; font-size: 44px; }
.m3-snap[hidden] { display: none; }
.m3-cam.m3-nocam::after { content: '🖼️'; }