/* src/styles/v44-duration-mobile-fix-style.css — extracted from index.html (id=v44-duration-mobile-fix-style). */

#durationCard{
  display:block!important;visibility:visible!important;opacity:1!important;
  margin:12px auto 0!important;width:min(760px,calc(100% - 34px))!important;max-width:760px!important;
  padding:12px 14px!important;border-radius:18px!important;border:1px solid rgba(130,150,210,.22)!important;
  background:rgba(6,10,22,.88)!important;box-shadow:0 18px 50px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.02)!important;
  backdrop-filter:blur(10px)!important;
}
#durationCard h4{margin:0 0 10px!important;color:var(--cyan,#5fe3ff)!important;font-weight:900!important;letter-spacing:.02em!important}
#durationSelect{
  width:100%!important;min-height:46px!important;color:var(--text,#f6f7ff)!important;
  background:rgba(3,6,14,.92)!important;border:1px solid rgba(207,72,255,.34)!important;
  border-radius:13px!important;padding:0 14px!important;font-weight:800!important;outline:none!important;
}
#durationSelect option{background:#07101f!important;color:#f8f7ff!important}
.duration-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:12px!important}
.duration-box{border:1px solid rgba(130,150,210,.14)!important;border-radius:14px!important;background:rgba(3,6,14,.48)!important;padding:10px 12px!important}
.duration-box span{display:block!important;color:var(--muted,#aeb7cb)!important;font-size:.75rem!important;margin-bottom:4px!important}
.duration-box strong{display:block!important;color:#fff!important;font-size:1.08rem!important;letter-spacing:.04em!important}
.duration-note{margin-top:8px!important;color:var(--muted,#aeb7cb)!important;font-size:12px!important;opacity:.82!important}

@media (max-width:760px){
  html,body{background:#02030a!important;overflow-x:hidden!important}
  .app{width:100%!important;max-width:100%!important;padding:0!important;overflow-x:hidden!important;background:#02030a!important}
  .shell,.main,#player{width:100%!important;max-width:100%!important;overflow:hidden!important;background:#02030a!important}
  .mobile-nav{margin:0!important;padding:10px 14px 12px!important;background:rgba(2,3,10,.92)!important;border-bottom:1px solid rgba(130,150,210,.14)!important}
  .topbar{padding:0!important;margin:0!important;background:#02030a!important}
  .topbar h1,.topbar .subtitle,.topbar .badge{display:none!important}
  .hero{
    margin:0!important;width:100%!important;min-height:auto!important;height:auto!important;overflow:hidden!important;border-radius:0!important;
    background:radial-gradient(circle at 50% 38%,rgba(95,227,255,.14) 0%,rgba(95,227,255,.05) 28%,transparent 52%),
               radial-gradient(circle at 50% 66%,rgba(217,65,255,.12),transparent 38%),
               linear-gradient(180deg,#02030a,#050816 70%,#02030a)!important;
  }
  .hero-heading{display:block!important;padding:18px 12px 12px!important;background:linear-gradient(180deg,rgba(2,3,10,.96),rgba(4,8,18,.92))!important}
  .hero-heading h2{font-size:1.55rem!important;line-height:1.1!important}
  .hero-heading p{font-size:.93rem!important;line-height:1.35!important}
  .figure-stage{display:block!important;position:relative!important;min-height:0!important;height:auto!important;padding:0 0 8px!important;margin:0!important;overflow:hidden!important;background:#02030a!important}
  .figure-wrap{
    position:relative!important;display:block!important;width:min(430px,100vw)!important;max-width:430px!important;height:auto!important;
    aspect-ratio:720/1280!important;margin:0 auto!important;overflow:hidden!important;border-radius:0!important;
    background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.24) 60%,rgba(0,0,0,0) 76%)!important;
    isolation:isolate!important;transform:none!important;
  }
  .figure-wrap::before,.figure-wrap::after{
    content:""!important;position:absolute!important;inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;
    transform:none!important;pointer-events:none!important;border-radius:0!important;z-index:0!important;
  }
  .figure-wrap::before{
    background:radial-gradient(ellipse at 50% 48%,rgba(87,166,255,.22) 0%,rgba(143,69,255,.13) 36%,rgba(217,65,255,.06) 50%,rgba(0,0,0,0) 72%)!important;
    filter:blur(10px)!important;
  }
  .figure-wrap::after{
    background:radial-gradient(ellipse at 50% 49%,transparent 0 45%,rgba(95,227,255,.16) 49%,rgba(143,69,255,.14) 52%,transparent 61%),
               repeating-radial-gradient(ellipse at 50% 49%,rgba(95,227,255,.045) 0 1px,transparent 2px 24px)!important;
    opacity:.66!important;
  }
  .figure-img{
    position:relative!important;z-index:2!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;
    object-fit:contain!important;object-position:center top!important;opacity:1!important;mix-blend-mode:normal!important;background:transparent!important;
  }
  .hotspot{z-index:5!important;font-size:.58rem!important;padding:5px 8px!important}
  .hotspot[data-zone="head"]{left:50%!important;top:8.2%!important}
  .hotspot[data-zone="throat"]{left:50%!important;top:21.2%!important}
  .hotspot[data-zone="heart"]{left:50%!important;top:29.8%!important}
  .hotspot[data-zone="upperAbdomen"]{left:50%!important;top:41.3%!important}
  .hotspot[data-zone="abdomen"]{left:50%!important;top:50.5%!important}
  .hotspot[data-zone="hips"]{left:50%!important;top:57.2%!important}
  .hotspot[data-zone="knees"]{left:50%!important;top:73.2%!important}
  .hotspot[data-zone="feet"]{left:50%!important;top:91.7%!important}
  .hotspot.side-left[data-zone="shoulders"]{left:23%!important;top:28.4%!important}
  .hotspot.side-right[data-zone="shoulders"]{left:77%!important;top:28.4%!important}
  .hotspot.side-left[data-zone="hands"]{left:18.5%!important;top:55.2%!important}
  .hotspot.side-right[data-zone="hands"]{left:81.5%!important;top:55.2%!important}
  .dock{width:calc(100% - 16px)!important;margin:8px auto 0!important;grid-template-columns:1fr!important;gap:12px!important}
  #durationCard,#ambienceCard,#vocalGuidanceCard,#soundEffectsCard{width:calc(100% - 16px)!important;margin:10px auto 0!important}
  .duration-grid{grid-template-columns:1fr!important}
}