/* Compact, page-like settings dialog for desktop and mobile */
@media(min-width:701px){
html body #root dialog.userSettingsBackdrop[open]{
 position:fixed!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
 width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:20px!important;
 box-sizing:border-box!important;overflow:hidden!important;background:rgba(29,14,40,.72)!important;
 -webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important
}
html body #root dialog.userSettingsBackdrop[open]>.userSettingsModal{
 position:relative!important;inset:auto!important;transform:none!important;flex:0 1 auto!important;display:flex!important;flex-direction:column!important;
 box-sizing:border-box!important;width:min(1060px,calc(100vw - 48px))!important;min-width:0!important;max-width:calc(100vw - 48px)!important;
 height:min(720px,calc(100dvh - 48px))!important;min-height:0!important;max-height:calc(100dvh - 48px)!important;margin:0 auto!important;
 padding:0!important;border:1px solid #c6abd7!important;border-radius:20px!important;overflow:hidden!important;
 background:#edf3fc!important;box-shadow:0 26px 80px rgba(19,8,28,.48)!important
}
html body #root dialog.userSettingsBackdrop[open]>.userSettingsModal>.userSettingsHead{flex:0 0 56px!important;min-height:56px!important}
html body #root dialog.userSettingsBackdrop[open]>.userSettingsModal>.userSettingsBody{
 display:grid!important;grid-template-columns:190px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;
 flex:1 1 0!important;width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important
}
html body #root dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsNav{grid-column:1!important;grid-row:1!important;width:190px!important;min-width:0!important;max-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important}
html body #root dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsContent{grid-column:2!important;grid-row:1!important;min-width:0!important;min-height:0!important;max-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important}
}
@media(max-width:700px){
html body #root dialog.userSettingsBackdrop[open]{
 position:fixed!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
 width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:8px!important;
 box-sizing:border-box!important;overflow:hidden!important;background:rgba(24,10,34,.72)!important;
 -webkit-backdrop-filter:blur(5px)!important;backdrop-filter:blur(5px)!important
}
html body #root dialog.userSettingsBackdrop[open]>.userSettingsModal{
 position:relative!important;inset:auto!important;transform:none!important;display:flex!important;flex-direction:column!important;flex:0 1 auto!important;
 width:min(520px,calc(100vw - 16px))!important;min-width:0!important;max-width:calc(100vw - 16px)!important;
 height:min(820px,calc(100dvh - 16px))!important;min-height:0!important;max-height:calc(100dvh - 16px)!important;margin:0 auto!important;
 padding:0!important;border:1px solid #c6abd7!important;border-radius:18px!important;overflow:hidden!important;
 background:#edf3fc!important;box-shadow:0 22px 64px rgba(19,8,28,.48)!important
}
html body #root dialog.userSettingsBackdrop[open]>.userSettingsModal>.userSettingsHead{flex:0 0 50px!important;min-height:50px!important}
html body #root dialog.userSettingsBackdrop[open]>.userSettingsModal>.userSettingsBody{
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important;
 flex:1 1 0!important;width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important
}
html body #root dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsNav{
 display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;grid-column:1!important;grid-row:1!important;
 width:100%!important;height:auto!important;min-width:0!important;max-height:60px!important;overflow-x:auto!important;overflow-y:hidden!important;
 padding:6px!important;gap:6px!important;scrollbar-width:thin!important
}
html body #root dialog.userSettingsBackdrop[open] .userSettingsNav>.settingsNavLabel{display:none!important}
html body #root dialog.userSettingsBackdrop[open] .userSettingsNav>button{flex:0 0 auto!important;min-width:max-content!important;min-height:38px!important;white-space:nowrap!important}
html body #root dialog.userSettingsBackdrop[open] .userSettingsBody>.userSettingsContent{
 display:block!important;grid-column:1!important;grid-row:2!important;width:100%!important;min-width:0!important;height:100%!important;min-height:0!important;
 max-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;padding:12px!important
}
}
html body #root dialog.userSettingsBackdrop[open] .userSettingsModal .userSettingsClose{
 border-radius:11px!important;transition:background .15s ease,transform .15s ease!important
}
html body #root dialog.userSettingsBackdrop[open] .userSettingsModal .userSettingsClose:hover{background:#e6d5f0!important;transform:translateY(-1px)!important}