/* Liry v50 mobile create polish
   Goal: raise mobile next button closer to the active field while keeping clean spacing */

:root{
  --liry-v49-ink:#17110d;
  --liry-v49-muted:#77685e;
  --liry-v49-orange:#ff741f;
  --liry-v49-orange2:#ff9a42;
  --liry-v49-line:#eadcd0;
  --liry-v49-bg:#fffaf6;
}

html,body{overflow-x:hidden!important;}
body.liry-create-page{background:linear-gradient(180deg,#fffdfb 0%,#fff8f1 100%)!important;}

/* Desktop/tablet: make the creation inputs feel wider and more serious */
body.liry-create-page .create-card-v43,
body.liry-create-page .create-card-v42,
body.liry-create-page .create-card{
  max-width:1320px!important;
}
body.liry-create-page .wizard-form-v43,
body.liry-create-page .wizard-form{
  width:100%!important;
  max-width:1160px!important;
}
body.liry-create-page .create-card-v43 .step,
body.liry-create-page .create-card .step{
  max-width:1160px!important;
}
body.liry-create-page .create-card-v43 .step input,
body.liry-create-page .create-card-v43 .step select,
body.liry-create-page .create-card-v43 .step textarea,
body.liry-create-page .create-card .step input,
body.liry-create-page .create-card .step select,
body.liry-create-page .create-card .step textarea{
  width:min(1080px,100%)!important;
  max-width:1080px!important;
  box-sizing:border-box!important;
}
body.liry-create-page .create-card-v43 .mini-label,
body.liry-create-page .create-card .mini-label{
  width:min(1080px,100%)!important;
  max-width:1080px!important;
}

/* Remove step labels entirely, including old variants */
body.liry-create-page #stepLabel,
body.liry-create-page .step-count,
body.liry-create-page .step-kicker,
body.liry-create-page .step-label,
body.liry-create-page .step-badge,
body.liry-create-page .wizard-step-label,
body.liry-create-page [data-step-label]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Keep examples cards from breaking titles */
.featured-examples .examples-head,
.featured-examples-v43 .examples-head{
  align-items:flex-start!important;
  gap:16px!important;
  min-width:0!important;
}
.featured-examples .examples-head div,
.featured-examples-v43 .examples-head div{
  min-width:0!important;
  max-width:100%!important;
}
.featured-examples .examples-head h2,
.featured-examples-v43 .examples-head h2,
.example-card h3,
.example-copy h3{
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  line-height:1.08!important;
  max-width:100%!important;
}
.example-card,
.example-copy{min-width:0!important;overflow:hidden!important;}

@media (max-width: 900px){
  body.liry-create-page .liry-topbar-v43,
  body.liry-create-page .liry-app-topbar,
  body.liry-create-page .topbar{
    min-height:66px!important;
    padding:8px 12px!important;
  }

  body.liry-create-page .liry-topbar-v43 .main-logo,
  body.liry-create-page .logo-wrap img,
  body.liry-create-page .main-logo{
    height:54px!important;
    max-width:178px!important;
    object-fit:contain!important;
  }

  /* Mobile menu should be clean and above content */
  body.liry-create-page .mobile-menu-toggle-v43{
    width:44px!important;
    height:44px!important;
    border-radius:14px!important;
    flex:0 0 44px!important;
  }
  body.liry-create-page .liry-topbar-v43 .top-actions{
    top:70px!important;
    right:10px!important;
    left:10px!important;
    border-radius:20px!important;
  }

  /* Bring the whole app up and remove heavy white space */
  body.liry-create-page .create-shell-v43,
  body.liry-create-page .create-shell-v42,
  body.liry-create-page .create-shell{
    min-height:auto!important;
    padding:6px 8px 24px!important;
    display:block!important;
  }
  body.liry-create-page .create-stage-v43,
  body.liry-create-page .create-stage-v42,
  body.liry-create-page .create-stage{
    width:100%!important;
    max-width:none!important;
    gap:10px!important;
    margin:0 auto!important;
  }
  body.liry-create-page .create-card-v43,
  body.liry-create-page .create-card-v42,
  body.liry-create-page .create-card,
  body.liry-create-page .app-card{
    width:100%!important;
    max-width:100%!important;
    min-height:calc(100svh - 86px)!important;
    margin:0 auto!important;
    padding:12px 13px 82px!important;
    border-radius:22px!important;
    border:1px solid rgba(234,220,208,.95)!important;
    box-shadow:0 18px 55px rgba(40,22,10,.075)!important;
    background:rgba(255,255,255,.94)!important;
  }

  /* Head area: compact and premium */
  body.liry-create-page .card-head-v43,
  body.liry-create-page .card-head-v42,
  body.liry-create-page .card-head{
    margin:0 auto 6px!important;
    padding:0!important;
    text-align:center!important;
    max-width:100%!important;
  }
  body.liry-create-page .card-head h2{
    font-size:20px!important;
    line-height:1.1!important;
    margin:0!important;
    letter-spacing:-.03em!important;
  }
  body.liry-create-page .card-head p{
    display:none!important;
  }

  /* Tiny progress gap only */
  body.liry-create-page .progress-line,
  body.liry-create-page .create-card-v43 .progress-line,
  body.liry-create-page .create-card .progress-line{
    width:100%!important;
    max-width:100%!important;
    height:4px!important;
    margin:6px auto 8px!important;
    border-radius:999px!important;
    background:#f0e4dc!important;
  }

  /* Form: no giant top/bottom dead zones */
  body.liry-create-page .wizard-form-v43,
  body.liry-create-page .wizard-form{
    width:100%!important;
    max-width:100%!important;
    min-height:calc(100svh - 190px)!important;
    margin:0 auto!important;
    padding:0!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    position:relative!important;
  }
  body.liry-create-page .step,
  body.liry-create-page .create-card-v43 .step,
  body.liry-create-page .create-card .step{
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    padding:10px 0 88px!important;
    text-align:center!important;
    justify-items:center!important;
    align-content:flex-start!important;
    place-content:start center!important;
  }
  body.liry-create-page .step.active{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  body.liry-create-page .step h1,
  body.liry-create-page .create-card-v43 .step h1{
    font-size:clamp(32px,10.2vw,46px)!important;
    line-height:1!important;
    letter-spacing:-.055em!important;
    margin:2px auto 8px!important;
    color:var(--liry-v49-ink)!important;
  }
  body.liry-create-page .step p,
  body.liry-create-page .create-card-v43 .step p{
    width:min(100%,460px)!important;
    max-width:460px!important;
    margin:0 auto 14px!important;
    font-size:13.5px!important;
    line-height:1.45!important;
    color:var(--liry-v49-muted)!important;
    font-weight:700!important;
  }

  /* Inputs: wider and easy to tap */
  body.liry-create-page .step input,
  body.liry-create-page .step select,
  body.liry-create-page .step textarea,
  body.liry-create-page .lyrics-editor,
  body.liry-create-page .create-card-v43 .step input,
  body.liry-create-page .create-card-v43 .step select,
  body.liry-create-page .create-card-v43 .step textarea{
    width:100%!important;
    max-width:100%!important;
    min-height:58px!important;
    border-radius:18px!important;
    padding:15px 16px!important;
    font-size:16px!important;
    line-height:1.45!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:1px solid rgba(214,197,183,.98)!important;
    box-shadow:0 12px 28px rgba(40,22,10,.045)!important;
  }
  body.liry-create-page .step textarea,
  body.liry-create-page .lyrics-editor{
    min-height:132px!important;
    resize:vertical!important;
  }
  body.liry-create-page .mini-label,
  body.liry-create-page .create-card-v43 .mini-label{
    width:100%!important;
    max-width:100%!important;
    margin:14px 0 7px!important;
    font-size:13px!important;
    line-height:1.25!important;
  }

  /* Center the next button. Back button stays small and does not push next aside. */
  body.liry-create-page .wizard-nav,
  body.liry-create-page .create-card-v43 .wizard-nav{
    position:absolute!important;
    right:0!important;
    left:0!important;
    bottom:64px!important;
    min-height:58px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    padding:0!important;
    z-index:30!important;
    pointer-events:none!important;
  }
  body.liry-create-page .wizard-nav button{
    pointer-events:auto!important;
  }
  body.liry-create-page #nextBtn,
  body.liry-create-page .wizard-nav .primary-btn{
    min-width:min(360px,72vw)!important;
    justify-content:center!important;
    margin:0 auto!important;
  }
  body.liry-create-page #prevBtn,
  body.liry-create-page .wizard-nav .ghost-btn{
    position:absolute!important;
    right:0!important;
    min-width:78px!important;
    padding-inline:12px!important;
    background:#fff!important;
  }

  /* The last submit button should also sit cleanly */
  body.liry-create-page .primary-btn.wide{
    width:100%!important;
    max-width:380px!important;
    min-width:0!important;
    margin:0 auto!important;
  }

  /* Bottom explanation should not create a huge gap on mobile */
  body.liry-create-page .create-info-under-v43,
  body.liry-create-page .create-info-under-v42{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding:0 2px!important;
  }
  body.liry-create-page .create-info-under-v43 div,
  body.liry-create-page .create-info-under-v42 div{
    min-height:58px!important;
    border-radius:16px!important;
    padding:12px 10px!important;
  }
  body.liry-create-page .create-info-under-v43 span,
  body.liry-create-page .create-info-under-v42 span{
    font-size:12.5px!important;
    line-height:1.25!important;
  }
}

@media (max-width: 520px){
  body.liry-create-page .create-card-v43,
  body.liry-create-page .create-card-v42,
  body.liry-create-page .create-card,
  body.liry-create-page .app-card{
    border-radius:18px!important;
    padding:10px 12px 118px!important;
    min-height:calc(100svh - 78px)!important;
  }
  body.liry-create-page .wizard-form-v43,
  body.liry-create-page .wizard-form{
    min-height:calc(100svh - 174px)!important;
  }
  body.liry-create-page .wizard-nav,
  body.liry-create-page .create-card-v43 .wizard-nav{
    bottom:58px!important;
  }
  body.liry-create-page .step,
  body.liry-create-page .create-card-v43 .step{
    padding-top:8px!important;
  }
  body.liry-create-page .step h1,
  body.liry-create-page .create-card-v43 .step h1{
    margin-top:0!important;
    margin-bottom:7px!important;
  }
  body.liry-create-page .progress-line,
  body.liry-create-page .create-card-v43 .progress-line{
    margin-bottom:6px!important;
  }
  body.liry-create-page .step p,
  body.liry-create-page .create-card-v43 .step p{
    margin-bottom:12px!important;
  }
  .featured-examples .examples-head,
  .featured-examples-v43 .examples-head{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .featured-examples .examples-head h2,
  .featured-examples-v43 .examples-head h2{
    font-size:clamp(28px,9vw,40px)!important;
  }
}

@media (max-width: 380px){
  body.liry-create-page .step h1,
  body.liry-create-page .create-card-v43 .step h1{
    font-size:31px!important;
  }
  body.liry-create-page #nextBtn,
  body.liry-create-page .wizard-nav .primary-btn{
    min-width:68vw!important;
  }
  body.liry-create-page #prevBtn,
  body.liry-create-page .wizard-nav .ghost-btn{
    min-width:66px!important;
    font-size:13px!important;
  }
}