.topbar{isolation:isolate;overflow:hidden}
.topbar::before{content:"";position:absolute;inset:0;background:url('/assets/najma-pattern.png') center/175px auto repeat;opacity:.055;pointer-events:none;z-index:0}
.topbar>*{position:relative;z-index:1}
[data-theme="dark"] .topbar::before{opacity:.09}
.personal-greeting{width:max-content;max-width:100%;margin:0 0 18px;margin-inline-start:auto;padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-family:Morabba,Dana,sans-serif;font-size:1.3rem;font-weight:700;color:var(--text);line-height:1.5}
.personal-greeting .icon{width:20px;height:20px}
#login-accounts-list{padding:22px;overflow:hidden}
.login-accounts-header{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.login-accounts-header p{flex:1;min-width:240px;margin:0;line-height:1.9}
.login-accounts-header .button{flex:none;white-space:normal;text-align:center}
#login-accounts-list .table-scroll{margin-top:18px;overflow-x:auto}
.mobile-nav-picker{margin-top:24px;padding:19px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.mobile-nav-picker h3{display:flex;align-items:center;gap:9px;margin:0 0 4px}
.mobile-nav-picker .help-text{margin-bottom:12px}
.mobile-nav-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mobile-nav-choice{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:.83rem;min-width:0}
.mobile-nav-choice .icon{width:17px;height:17px;color:var(--orange-dark)}
.mobile-nav-choice span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-nav-choice:has(input:disabled){opacity:.48}
.mobile-nav-choice:has(input:checked){border-color:var(--orange);background:var(--orange-soft)}
@media(max-width:850px){.mobile-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .topbar::before{background-size:130px auto;opacity:.04}
  .personal-greeting{font-size:1.15rem;padding:6px 12px;margin-bottom:14px}
  #login-accounts-list{padding:16px}
  .login-accounts-header{align-items:stretch;flex-direction:column;gap:12px}
  .login-accounts-header p{min-width:0}
  .login-accounts-header .button{align-self:flex-start}
  .mobile-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobile-bottom a{flex:1;min-width:0;max-width:110px;overflow:hidden}
  .mobile-bottom a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}