/* Liry v51 mobile app-quality create screen
   Clean mobile layout: no giant gaps, inline navigation, bottom widgets reduced */

:root{
  --liry-v51-ink:#17110d;
  --liry-v51-muted:#7b6d63;
  --liry-v51-orange:#ff741f;
  --liry-v51-orange2:#ff9a35;
  --liry-v51-line:#eadbd0;
  --liry-v51-bg:#fff8f1;
}

@media (max-width: 820px){
  html,body{overflow-x:hidden!important;background:var(--liry-v51-bg)!important;}
  body.liry-create-page{background:linear-gradient(180deg,#fffdfb 0%,#fff7ef 100%)!important;min-height:100svh!important;}

  /* Header like a clean mobile app */
  body.liry-create-page .topbar,
  body.liry-create-page .liry-app-topbar,
  body.liry-create-page .liry-topbar-v43{
    height:auto!important;
    min-height:76px!important;
    padding:12px 18px 10px!important;
    border-bottom:1px solid rgba(234,219,208,.75)!important;
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:blur(18px)!important;
    box-shadow:0 8px 28px rgba(35,20,9,.055)!important;
  }
  body.liry-create-page .logo-wrap{display:flex!important;align-items:center!important;}
  body.liry-create-page .logo-wrap img,
  body.liry-create-page .main-logo,
  body.liry-create-page .liry-topbar-v43 .main-logo{
    height:58px!important;
    max-width:184px!important;
    object-fit:contain!important;
  }
  body.liry-create-page .mobile-menu-toggle-v43{
    width:48px!important;
    height:48px!important;
    border-radius:16px!important;
    background:#17110d!important;
    box-shadow:0 12px 28px rgba(20,12,5,.16)!important;
    border:1px solid rgba(255,255,255,.58)!important;
  }
  body.liry-create-page .mobile-menu-toggle-v43 span{height:2px!important;border-radius:999px!important;background:#fff!important;}

  /* App canvas */
  body.liry-create-page .create-shell,
  body.liry-create-page .create-shell-v42,
  body.liry-create-page .create-shell-v43{
    display:block!important;
    width:100%!important;
    min-height:auto!important;
    padding:10px 10px 18px!important;
    margin:0!important;
  }
  body.liry-create-page .create-stage,
  body.liry-create-page .create-stage-v42,
  body.liry-create-page .create-stage-v43{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0 auto!important;
    gap:0!important;
  }

  /* Main card: content height, not full empty screen */
  body.liry-create-page .app-card,
  body.liry-create-page .create-card,
  body.liry-create-page .create-card-v42,
  body.liry-create-page .create-card-v43{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0 auto!important;
    padding:16px 18px 20px!important;
    border-radius:24px!important;
    border:1px solid rgba(229,213,200,.98)!important;
    background:rgba(255,255,255,.965)!important;
    box-shadow:0 16px 46px rgba(35,20,9,.075)!important;
    overflow:visible!important;
  }

  body.liry-create-page .card-head,
  body.liry-create-page .card-head-v42,
  body.liry-create-page .card-head-v43{
    margin:0 auto 8px!important;
    padding:0!important;
    text-align:center!important;
    max-width:100%!important;
  }
  body.liry-create-page .card-head h2,
  body.liry-create-page .card-head-v43 h2{
    font-size:24px!important;
    line-height:1.08!important;
    margin:0!important;
    letter-spacing:-.045em!important;
    font-weight:950!important;
    color:var(--liry-v51-ink)!important;
  }
  body.liry-create-page .card-head p,
  body.liry-create-page .card-head-v43 p{display:none!important;}

  body.liry-create-page .progress-line,
  body.liry-create-page .create-card-v43 .progress-line{
    width:100%!important;
    max-width:100%!important;
    height:5px!important;
    margin:8px auto 14px!important;
    border-radius:999px!important;
    overflow:hidden!important;
    background:#f0e3da!important;
  }
  body.liry-create-page .progress-line span{border-radius:999px!important;}

  /* Form: no artificial min-height, no huge empty space */
  body.liry-create-page #songForm,
  body.liry-create-page .wizard-form,
  body.liry-create-page .wizard-form-v43{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
  }
  body.liry-create-page .step:not(.active){display:none!important;}
  body.liry-create-page .step,
  body.liry-create-page .step.active,
  body.liry-create-page .create-card-v43 .step,
  body.liry-create-page .create-card-v43 .step.active{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
  }
  body.liry-create-page .step:not(.active),
  body.liry-create-page .create-card-v43 .step:not(.active){display:none!important;}

  body.liry-create-page .step h1,
  body.liry-create-page .create-card-v43 .step h1{
    font-size:clamp(34px,10vw,44px)!important;
    line-height:.98!important;
    letter-spacing:-.065em!important;
    margin:6px auto 10px!important;
    color:var(--liry-v51-ink)!important;
    font-weight:950!important;
  }
  body.liry-create-page .step p,
  body.liry-create-page .create-card-v43 .step p{
    width:100%!important;
    max-width:330px!important;
    margin:0 auto 14px!important;
    font-size:14px!important;
    line-height:1.42!important;
    color:var(--liry-v51-muted)!important;
    font-weight:800!important;
  }
  body.liry-create-page .step input,
  body.liry-create-page .step select,
  body.liry-create-page .step textarea,
  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 .lyrics-editor{
    width:100%!important;
    max-width:100%!important;
    min-height:58px!important;
    margin:0 auto 12px!important;
    padding:15px 16px!important;
    border-radius:18px!important;
    border:1px solid rgba(211,194,181,.98)!important;
    background:#fff!important;
    box-shadow:0 10px 25px rgba(35,20,9,.045)!important;
    color:var(--liry-v51-ink)!important;
    font-size:16px!important;
    font-weight:800!important;
    line-height:1.35!important;
    box-sizing:border-box!important;
  }
  body.liry-create-page .step textarea,
  body.liry-create-page .create-card-v43 .step textarea,
  body.liry-create-page .lyrics-editor{
    min-height:128px!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;
    display:block!important;
    margin:0 0 8px!important;
    text-align:right!important;
    font-size:13.5px!important;
    line-height:1.25!important;
    font-weight:950!important;
    color:#2f241e!important;
  }

  /* Navigation button is part of the card, centered, not stuck at screen bottom */
  body.liry-create-page .wizard-nav,
  body.liry-create-page .create-card-v43 .wizard-nav{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:4px auto 0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    pointer-events:auto!important;
    z-index:auto!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{
    position:static!important;
    width:min(100%,360px)!important;
    min-width:0!important;
    max-width:360px!important;
    min-height:56px!important;
    margin:0 auto!important;
    border-radius:18px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:17px!important;
    font-weight:950!important;
    box-shadow:0 16px 34px rgba(255,116,31,.25)!important;
  }
  body.liry-create-page #prevBtn,
  body.liry-create-page .wizard-nav .ghost-btn{
    position:static!important;
    flex:0 0 auto!important;
    min-width:84px!important;
    max-width:104px!important;
    min-height:52px!important;
    padding:12px 14px!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  body.liry-create-page .wizard-nav .ghost-btn[style*="display: none"] + .primary-btn,
  body.liry-create-page .wizard-nav .primary-btn:first-child{
    margin-inline:auto!important;
  }
  body.liry-create-page .primary-btn.wide{
    width:100%!important;
    max-width:360px!important;
    min-height:56px!important;
    margin:8px auto 0!important;
    border-radius:18px!important;
  }

  /* Bottom explanation: compact, below the card only */
  body.liry-create-page .create-info-under-v42,
  body.liry-create-page .create-info-under-v43{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin:10px auto 0!important;
    padding:0!important;
  }
  body.liry-create-page .create-info-under-v42 div,
  body.liry-create-page .create-info-under-v43 div{
    min-height:54px!important;
    padding:10px 10px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.82)!important;
    border:1px solid rgba(234,219,208,.82)!important;
    box-shadow:none!important;
  }
  body.liry-create-page .create-info-under-v42 b,
  body.liry-create-page .create-info-under-v43 b{font-size:12px!important;}
  body.liry-create-page .create-info-under-v42 span,
  body.liry-create-page .create-info-under-v43 span{font-size:12px!important;line-height:1.25!important;}

  /* Examples and footer get breathing room */
  body.liry-create-page .featured-examples,
  body.liry-create-page .featured-examples-v43{
    margin-top:14px!important;
    width:100%!important;
    border-radius:22px!important;
  }
}

@media (max-width: 480px){
  body.liry-create-page .create-shell-v42,
  body.liry-create-page .create-shell-v43{padding:8px 8px 16px!important;}
  body.liry-create-page .app-card,
  body.liry-create-page .create-card,
  body.liry-create-page .create-card-v43{
    padding:14px 16px 18px!important;
    border-radius:22px!important;
  }
  body.liry-create-page .card-head h2,
  body.liry-create-page .card-head-v43 h2{font-size:23px!important;}
  body.liry-create-page .progress-line{margin:7px auto 12px!important;}
  body.liry-create-page .step h1,
  body.liry-create-page .create-card-v43 .step h1{
    font-size:clamp(33px,10.4vw,42px)!important;
    margin:4px auto 9px!important;
  }
  body.liry-create-page .step p,
  body.liry-create-page .create-card-v43 .step p{margin-bottom:13px!important;}
  body.liry-create-page .step input,
  body.liry-create-page .step select,
  body.liry-create-page .step textarea{margin-bottom:11px!important;}
  body.liry-create-page .wizard-nav,
  body.liry-create-page .create-card-v43 .wizard-nav{margin-top:2px!important;}
  body.liry-create-page #nextBtn,
  body.liry-create-page .wizard-nav .primary-btn{width:min(100%,340px)!important;}
}

@media (max-width: 380px){
  body.liry-create-page .logo-wrap img,
  body.liry-create-page .main-logo{height:52px!important;max-width:164px!important;}
  body.liry-create-page .mobile-menu-toggle-v43{width:44px!important;height:44px!important;}
  body.liry-create-page .step h1,
  body.liry-create-page .create-card-v43 .step h1{font-size:32px!important;}
  body.liry-create-page .step p,
  body.liry-create-page .create-card-v43 .step p{font-size:13px!important;}
}

/* Floating support and accessibility: compact and at the very bottom */
@media (max-width: 820px){
  .support-widget{
    left:8px!important;
    bottom:max(6px, env(safe-area-inset-bottom))!important;
    z-index:99990!important;
  }
  .access-widget{
    right:8px!important;
    bottom:max(6px, env(safe-area-inset-bottom))!important;
    z-index:99991!important;
  }
  .support-fab,
  .access-toggle{
    min-height:40px!important;
    height:40px!important;
    min-width:92px!important;
    padding:7px 12px!important;
    border-radius:999px!important;
    font-size:13px!important;
    line-height:1!important;
    box-shadow:0 10px 24px rgba(255,116,31,.24)!important;
  }
  .support-fab{gap:7px!important;}
  .support-fab span{
    width:24px!important;
    height:24px!important;
    font-size:14px!important;
  }
  .access-toggle:before{font-size:14px!important;}
  .support-panel{
    left:8px!important;
    right:8px!important;
    bottom:54px!important;
    width:calc(100vw - 16px)!important;
    height:min(68vh,560px)!important;
    border-radius:22px!important;
  }
  .access-panel{
    right:0!important;
    bottom:52px!important;
    width:calc(100vw - 16px)!important;
    max-width:360px!important;
    border-radius:22px!important;
  }
}

/* Keep bottom floating widgets from covering the footer text too badly */
@media (max-width: 820px){
  .liry-footer{padding-bottom:58px!important;}
}