#mobile-navigation,.mn-workspace,.mn-mini{display:none}
#listening-page{position:fixed;inset:0;width:100%;height:100dvh;border:0;background:#f6f5ef;z-index:1000}
#listening-page[hidden]{display:none}
.listening-shell{overflow:hidden}
.listening-shell .mn-bar{display:none}
.listening-shell .mn-mini:not([hidden]){z-index:1001}
.listening-page-content.listening-mini-visible body{padding-bottom:76px}
@media(max-width:767px){.listening-page-content.listening-mini-visible body:has(#mobile-navigation){padding-bottom:calc(var(--mn-height) + 58px)}}
@media(min-width:768px){
    .mn-mini:not([hidden]){display:flex;position:fixed;z-index:89;bottom:16px;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 32px));gap:8px;padding:6px 12px;border:1px solid #dce4da;border-radius:12px;background:#eef3ec;color:#245747;box-shadow:0 4px 20px #183d3520}
    .mn-mini button{min-height:44px;min-width:44px;border:0;background:transparent;color:inherit}
    .mn-mini [data-mini-open]{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:767px){
    :root{--mn-height:calc(66px + env(safe-area-inset-bottom,0px))}
    body:has(#mobile-navigation){padding-bottom:var(--mn-height)}
    body:has(#mobile-navigation):has(.mn-mini:not([hidden])){padding-bottom:calc(var(--mn-height) + 58px)}
    #mobile-navigation{display:contents}
    .mn-bar{position:fixed;z-index:90;inset:auto 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:5px max(4px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));background:#fffefa;border-top:1px solid #dce4da;box-shadow:0 -3px 18px #183d3510;color:#245747}
    .mn-bar>a,.mn-bar>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;min-width:0;padding:3px 1px;border:0;border-radius:10px;background:transparent;color:inherit;text-decoration:none;font:500 11px/1.2 Inter,system-ui,sans-serif;cursor:pointer}
    .mn-bar svg{width:23px;height:23px;flex-shrink:0}
    .mn-bar>button>img,.mn-bar>button>div{width:25px!important;height:25px!important;min-width:25px;border-radius:50%;object-fit:cover;font-size:12px}
    .mn-bar [aria-current=page],.mn-bar [aria-expanded=true]{background:#eaf1e8;color:#143d2d;font-weight:700}
    .mn-bar .mn-add svg{background:#245747;color:#fff;border-radius:10px;padding:5px;box-sizing:content-box;width:22px;height:22px;margin-top:-5px}
    .mn-bar :focus-visible,.mn-panel :focus-visible{outline:2px solid #245747;outline-offset:-2px}
    .mn-panel{box-sizing:border-box;width:100%;max-width:100%;max-height:calc(85dvh - var(--mn-height));margin:auto 0 var(--mn-height);padding:16px 20px;border:0;border-radius:18px 18px 0 0;background:#fffefa;color:#29382e;overflow:auto;overscroll-behavior:contain}
    .mn-panel::backdrop,.mn-workspace::backdrop{background:#142b2455}
    .mn-panel header,.mn-workspace header{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .mn-panel h2{margin:0;font:600 18px/1.4 Inter,system-ui,sans-serif}
    .mn-panel header button,.mn-workspace header button{width:44px;height:44px;border:0;background:transparent;color:#245747;font-size:28px}
    .mn-panel nav{display:grid;gap:2px}.mn-panel nav a,.mn-panel nav button{display:block;text-align:left;min-height:44px;padding:12px 8px;box-sizing:border-box;border:0;border-radius:8px;color:#245747;background:transparent;text-decoration:none;font:500 15px/1.4 Inter,system-ui,sans-serif}
    #mobile-menu .mn-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
    #mobile-menu .mn-menu-grid a,#mobile-menu .mn-menu-grid button{display:flex;align-items:center;gap:9px;min-width:0;min-height:52px;padding:12px 10px;border:1px solid #e0e7dc;border-radius:12px;background:#f5f7f1;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
    #mobile-menu .mn-menu-grid svg{flex-shrink:0;width:20px;height:20px}
    #mobile-menu .mn-menu-grid a:hover,#mobile-menu .mn-menu-grid button:hover,#mobile-menu .mn-menu-grid [aria-current=page]{background:#e6efe4;border-color:#b8cdbb;color:#143d2d}
    #mobile-menu .mn-menu-logout{grid-column:1/-1;margin-top:4px}
    #mobile-menu .mn-menu-logout button{width:100%;justify-content:center;background:transparent}
    .mn-panel p{font:400 16px/1.5 Inter,system-ui,sans-serif}
    .mn-workspace[open]{display:flex;flex-direction:column;position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;box-sizing:border-box;margin:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);border:0;border-radius:0;background:#f6f5ef;color:#245747}
    .mn-workspace header{padding:0 16px;flex-shrink:0}.mn-workspace iframe{width:100%;flex:1;min-height:0;border:0}
    .mn-mini:not([hidden]){position:fixed;z-index:89;bottom:var(--mn-height);left:0;right:0;display:flex;align-items:center;gap:8px;padding:6px 12px;min-height:56px;box-sizing:border-box;background:#eef3ec;border-top:1px solid #dce4da;color:#245747}
    .mn-mini button{min-height:44px;min-width:44px;border:0;background:transparent;color:inherit;font:500 13px/1.3 Inter,system-ui,sans-serif}
    .mn-mini [data-mini-open]{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
    body:has(#mobile-navigation) :is(.fab-add,.sidebar-toggle-btn,.shoutbox__toggle,.v2-mobile-nav){display:none!important}
    html:has(.mn-panel[open],.mn-workspace[open]){overflow:hidden}
    .v2-player{bottom:var(--mn-height)!important}
    html.mn-embedded body{padding-bottom:0!important}
    html.mn-embedded :is(body>header,body>footer,#mobile-navigation,.mn-mini,.fab-add,.sidebar-toggle-btn,#shoutbox-widget,.v2-mobile-nav){display:none!important}
}
