/* v0.10.0 layout: 20px frames, larger modern menu icons, sidebar toggle, avatars, right-aligned dialog actions. */
header{padding:0 20px}
main{padding:20px}
dialog{padding:20px}
.card{padding:20px}
.brand{padding:12px 20px}
nav a,nav button,nav details>summary{padding:9px 20px;gap:12px}
nav details a,nav details .active{padding:9px 20px 9px 52px}
nav .solid-icon,nav details>summary .solid-icon{width:20px;height:20px;flex:0 0 20px}
.brand [data-act=collapse]{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:8px;color:#aeb4bf}
.brand [data-act=collapse]:hover{background:#2a2a2a;color:#fff}
.brand [data-act=collapse] .solid-icon{width:24px;height:24px;flex-basis:24px}
.brand .collapse-open{display:none}
.compact .brand [data-act=collapse] .collapse-close{display:none}
.compact .brand [data-act=collapse] .collapse-open,.compact .brand [data-act=collapse] .solid-icon{display:inline-block}
.compact .brand{justify-content:center;padding:12px 0}
.compact nav a,.compact nav details a,.compact nav details .active,.compact nav details>summary{justify-content:center;padding:10px 0}
.compact nav details>summary:after{display:none}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.avatar.has-img{overflow:hidden;padding:0}
.avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.user-cell{display:flex;align-items:center;gap:10px}
.user-cell .avatar{flex:none;width:32px;height:32px;margin:0}
@media(max-width:760px){header{padding:0 12px}main{padding:14px}.compact .brand{justify-content:flex-start;padding:12px 20px}.compact nav a,.compact nav details>summary{justify-content:flex-start;padding:9px 20px}.compact nav details a,.compact nav details .active{justify-content:flex-start;padding-left:52px}}