#main-search .search-screen-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#main-search .header {
    margin-bottom: 24px;
}

#main-search #searchForm {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
}

#main-search #songName {
    flex: 1;
}

#main-search #results {
    flex: 1 1 auto;
    min-height: 0;
}

/* Enhanced empty state */
#main-search .search-form { display:flex; gap:12px; align-items:center; }
#main-search .search-form #songName { flex:1; padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); color:#fff; }
#main-search .search-form .search-btn { background: linear-gradient(90deg,#a259ff 0%,#8528ff 100%); color:#fff; border:none; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:700 }

/* Center empty-state vertically and horizontally by default.
    When results are populated the container gains `.full-bleed` and
    aligns items to the top so real results render from the top. */
#main-search .results { display:flex; align-items:center; justify-content:center; padding:0 16px; width:100%; }
#main-search .empty-state { text-align:center; color:#ddd; max-width:720px; padding:40px 24px; border-radius:12px; margin:auto; }
#main-search .empty-illustration { font-size:72px; margin-bottom:12px; opacity:0.95 }
#main-search .empty-state h3 { color:#fff; margin:6px 0 8px 0; font-size:1.6rem }
#main-search .empty-state .muted { color:#cfc7df; margin-bottom:14px }
#main-search .suggestions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:14px 0 }
#main-search .pill { background: rgba(255,255,255,0.04); color:#fff; border:1px solid rgba(255,255,255,0.03); padding:8px 12px; border-radius:999px; cursor:pointer }
#main-search .pill:hover { background: rgba(255,255,255,0.06) }
#main-search .hint { margin-top:10px; color:#bbaee3; font-size:0.95rem }

/* Results area when populated */
/* When results are shown, switch to top-aligned flow */
#main-search #results.full-bleed { align-items:flex-start; justify-content:flex-start; padding-top:20px; }

/* Small screens: ensure the empty state has breathing room */
@media (max-width: 640px) {
    #main-search .empty-state { padding:36px 18px; }
    #main-search .empty-illustration { font-size:64px }
}
