.ys-mobile-navigation { display: none; }
.ys-mobile-back { display: none; }
.ys-mobile-back[hidden] { display: none; }
.ys-mobile-search-dialog {
    width: calc(100% - 28px);
    max-width: 460px;
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 20px;
    border: 1px solid #e2e3e5;
    border-radius: 8px;
    background: #fff;
    color: #242424;
    font-family: inherit;
    letter-spacing: 0;
    box-sizing: border-box;
    overflow: auto;
}
.ys-mobile-search-dialog::backdrop { background: #0008; }
.ys-mobile-search-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ys-mobile-search-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 1.6; }
.ys-mobile-search-head button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: #f3f4f5; color: #555; cursor: pointer; }
.ys-mobile-search-field { display: flex; gap: 8px; }
.ys-mobile-search-field input { flex: 1; min-width: 0; height: 48px; padding: 10px 12px; border: 1px solid #b9bdc3; border-radius: 6px; background: #fff; color: #242424; font: inherit; font-size: 16px; }
.ys-mobile-search-field button { display: grid; place-items: center; flex: 0 0 48px; height: 48px; padding: 0; border: 0; border-radius: 6px; background: #dc3545; color: #fff; font-size: 18px; cursor: pointer; }
.ys-mobile-search-dialog :focus-visible { outline: 2px solid #dc3545; outline-offset: 3px; }
@media (max-width: 767px) {
    .ys-mobile-back:not([hidden]) {
        align-items: center;
        background: #fff;
        border: 1px solid #dce0e4;
        border-radius: 8px;
        color: #24272c;
        display: inline-flex;
        flex: 0 0 44px;
        height: 44px;
        justify-content: center;
        text-decoration: none;
        width: 44px;
    }
    .ys-mobile-back:hover { background: #f1f3f5; color: #dc3545; }
    .ys-mobile-back:focus-visible { outline: 2px solid #dc3545; outline-offset: 3px; }
    [dir="ltr"] .ys-mobile-back i { transform: rotate(180deg); }
    :root { --ys-mobile-nav-height: calc(88px + env(safe-area-inset-bottom, 0px)); }
    body { padding-bottom: calc(var(--ys-mobile-nav-height) + var(--ys-mobile-player-height, 0px)); }
    .ys-mobile-navigation {
        position: fixed;
        inset-inline: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
        align-items: stretch;
        height: 72px;
        max-width: 560px;
        margin-inline: auto;
        padding: 4px;
        border: 1px solid #45484d;
        border-radius: 8px;
        background: #24272c;
        box-shadow: 0 8px 28px #0005, 0 0 0 4px #ffffffd9;
        box-sizing: border-box;
        font-family: inherit;
        letter-spacing: 0;
    }
    .ys-mobile-navigation-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        padding: 4px 1px;
        color: #c5c8cc;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .ys-mobile-navigation-item i { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 6px; font-size: 19px; transition: background-color .15s, color .15s; }
    .ys-mobile-navigation-item span { font-size: 10px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
    .ys-mobile-navigation-item.is-active, .ys-mobile-navigation-item:hover, .ys-mobile-navigation-item[aria-expanded="true"] { color: #fff; }
    .ys-mobile-navigation-item.is-active i, .ys-mobile-navigation-item[aria-expanded="true"] i { background: #dc3545; color: #fff; box-shadow: 0 3px 10px #dc354540; }
    .ys-mobile-navigation-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 6px; }
    #footer-player { bottom: var(--ys-mobile-nav-height); padding-bottom: 10px !important; }
    #ys-install-banner { bottom: calc(var(--ys-mobile-nav-height) + 12px); }
}