/* App shell: bottom bar (phone / tablet portrait) -> icon rail (tablet landscape) -> full sidebar (desktop).
 * Mobile-first: the default is the bottom bar; later media blocks override it. */
.sb,.bb,.mtop{font-size:14px}
body.has-shell{padding-bottom:calc(var(--bbh) + 1px + env(safe-area-inset-bottom))}
.sb{display:none}
.mtop{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:0 8px 0 16px;background:var(--card);border-bottom:1px solid var(--bd)}
.mtop b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--mut)}
.avatar svg{width:26px;height:26px}
.bb{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--card);border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom)}
.bb a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--bbh);padding:6px 2px;color:var(--mut);font-size:12px}
.bb a[aria-current=page]{color:var(--ac);font-weight:600}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sb .brand{display:flex;flex-direction:column;line-height:1.2;padding:6px 10px 14px}
.sb .brand b{font-size:18px}.sb .brand span{font-size:12px;color:var(--mut)}
.sb .item{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--fg)}
.sb .item .ic{opacity:.65;width:20px;height:20px}
.sb .item:hover{background:var(--card2)}
.sb .item[aria-current=page]{background:var(--ac-soft);font-weight:600}
.sb .item[aria-current=page] .ic{opacity:1;color:var(--ac)}
.sb .sep{height:1px;background:var(--bd);margin:8px 6px}
.sb .grow{flex:1}
.sb .guest{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 10px;border-radius:10px;color:var(--fg)}
.sb .guest:hover{background:var(--card2)}
.sb .guest .av{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ac-soft);color:var(--ac);flex:none}
.sb .guest .av svg{width:20px;height:20px}
.sb .guest div{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sb .guest b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb .guest small{color:var(--mut);font-size:11px}
.sb .tog{display:none}
@media (min-width:700px) and (orientation:landscape){            /* tablet landscape: icon rail, can expand */
  :root{--sbw:64px}
  body.has-shell{padding-left:var(--sbw);padding-bottom:0}
  .bb,.mtop{display:none}
  .sb{display:flex;flex-direction:column;gap:4px;position:fixed;left:0;top:0;bottom:0;width:var(--sbw);padding:10px 8px;z-index:30;background:var(--card);border-right:1px solid var(--bd);overflow:hidden}
  .sb .lbl,.sb .brand,.sb .guest div{display:none}
  .sb .item,.sb .guest{justify-content:center;padding:0}
    .sb .tog{display:flex;align-items:center;justify-content:center;min-height:44px;border:0;background:none;color:var(--mut);cursor:pointer;border-radius:10px}
  .sb.open{width:232px;box-shadow:4px 0 24px rgba(0,0,0,.18)}
  .sb.open .lbl,.sb.open .brand,.sb.open .guest div{display:revert}
  .sb.open .brand,.sb.open .guest div{display:flex}
  .sb.open .item,.sb.open .guest{justify-content:flex-start;padding:0 12px}
  .sb.open .guest{padding:6px 10px}
}
@media (min-width:1100px){                                         /* desktop: full sidebar */
  :root{--sbw:232px}
  body.has-shell{padding-left:var(--sbw);padding-bottom:0}
  .bb,.mtop,.sb .tog{display:none}
  .sb{display:flex;flex-direction:column;gap:4px;position:fixed;left:0;top:0;bottom:0;width:var(--sbw);padding:16px 12px;z-index:30;background:var(--card);border-right:1px solid var(--bd);overflow:auto}
  .sb .lbl{display:revert}
  .sb .brand,.sb .guest div{display:flex}
  .sb .item,.sb .guest{justify-content:flex-start;padding:0 12px}
  .sb .guest{padding:6px 10px}}