.nxbar{--nxbar-accent:#e83e8c;--nxbar-h:52px;position:relative;z-index:1000;width:100%;background:#fff;color:#222;border-bottom:1px solid #eee;box-shadow:0 1px 6px rgba(0,0,0,.06);font:14px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-sizing:border-box}
.nxbar *{box-sizing:border-box}
.nxbar--fixed{position:fixed;top:0;left:0;right:0}
.nxbar-in{display:flex;align-items:center;gap:6px;max-width:1200px;height:var(--nxbar-h);margin:0 auto;padding:0 12px}
.nxbar-grow{flex:1}
.nxbar-brand{font-weight:700;font-size:17px;color:var(--nxbar-accent);text-decoration:none;white-space:nowrap;margin-right:8px;max-width:40vw;overflow:hidden;text-overflow:ellipsis}
.nxbar-nav{display:flex;gap:2px}
.nxbar-link{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;color:#333;text-decoration:none;position:relative}
.nxbar-link:hover,.nxbar-item:hover{background:#f6f6f8;color:#111}
.nxbar-ico{font-size:16px}
.nxbar-btn{padding:8px 14px;border-radius:20px;background:var(--nxbar-accent);color:#fff;text-decoration:none;font-weight:600}
.nxbar-dd{position:relative}
.nxbar-icon,.nxbar-me{display:flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;padding:6px 8px;border-radius:10px;color:inherit;font:inherit;position:relative}
.nxbar-icon{font-size:20px}
.nxbar-icon:hover,.nxbar-me:hover,.nxbar-dd.is-open>button{background:#f6f6f8}
.nxbar-ava{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;background:var(--nxbar-accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.nxbar-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.nxbar-vf{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#1d9bf0;color:#fff;font-size:10px;vertical-align:middle}
.nxbar-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--nxbar-accent);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.nxbar-icon .nxbar-badge{position:absolute;top:0;right:0}
.nxbar-badge[hidden]{display:none}
.nxbar-badge--inline{display:inline-block}
.nxbar-panel{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.14);padding:6px;z-index:1001}
.nxbar-panel[hidden]{display:none}
.nxbar-panel--wide{width:340px;max-width:calc(100vw - 16px);padding:0}
.nxbar-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;color:#222;text-decoration:none}
.nxbar-sep{height:1px;background:#eee;margin:6px 0}
.nxbar-ph{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eee}
.nxbar-txt{border:0;background:none;color:var(--nxbar-accent);cursor:pointer;font:inherit;font-size:13px;padding:0}
.nxbar-list{max-height:min(70vh,440px);overflow:auto}
.nxbar-n{display:flex;gap:10px;align-items:center;padding:10px 14px;color:#222;text-decoration:none;border-bottom:1px solid #f3f3f3}
.nxbar-n:hover{background:#fafafa}
.nxbar-n.is-unread{background:#fff5f9}
.nxbar-n .nxbar-ava{width:38px;height:38px;font-size:16px}
.nxbar-n-ico{width:38px;height:38px;border-radius:50%;background:#f1f1f4;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.nxbar-n-body{flex:1;min-width:0}
.nxbar-n-txt{display:block;font-size:13.5px;overflow-wrap:anywhere}
.nxbar-n.is-unread .nxbar-n-txt{font-weight:600}
.nxbar-n-time{font-size:12px;color:#888}
.nxbar-dot{width:9px;height:9px;border-radius:50%;background:var(--nxbar-accent);flex:none}
.nxbar-empty{padding:26px 14px;text-align:center;color:#888}
@media (max-width:820px){
  .nxbar-name,.nxbar-lbl{display:none}
  .nxbar-nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #eee;justify-content:space-around;padding:4px 4px calc(4px + env(safe-area-inset-bottom));gap:0;z-index:1000}
  .nxbar-link{flex-direction:column;gap:1px;padding:6px 10px;font-size:11px}
  .nxbar-ico{font-size:21px}
  .nxbar-link .nxbar-badge{position:absolute;top:0;left:55%}
  .nxbar-lbl{display:block;font-size:10.5px}
  body.nxbar-has-nav{padding-bottom:64px}
  .nxbar-dd{position:static}
  .nxbar-panel,.nxbar-panel--wide{position:absolute;left:8px;right:8px;top:calc(100% + 4px);width:auto;min-width:0;max-width:none}
}
@media (prefers-color-scheme:dark){
  .nxbar,.nxbar-panel,.nxbar-nav{background:#1c1c20;color:#eee;border-color:#2c2c32}
  .nxbar-link,.nxbar-item,.nxbar-n{color:#eee}
  .nxbar-link:hover,.nxbar-item:hover,.nxbar-icon:hover,.nxbar-me:hover,.nxbar-dd.is-open>button,.nxbar-n:hover{background:#2a2a30}
  .nxbar-n.is-unread{background:#2c2230}.nxbar-n{border-color:#2c2c32}.nxbar-ph,.nxbar-sep{border-color:#2c2c32;background-color:transparent}
  .nxbar-n-ico{background:#2a2a30}
}