header.topbar{
  display:flex; align-items:center; gap:var(--spacing-1);
  padding:0 var(--spacing-5);
  background:var(--color-bg-default);
  border-bottom:1px solid var(--color-border-default); flex:0 0 auto;
}
.header-actions{display:flex;align-items:center;gap:var(--spacing-2);min-width:0}
.header-actions-end{margin-left:auto;flex:0 0 auto}

.logo-symbol{flex:0 0 auto;display:block;width:39px;height:34px;overflow:hidden;
  text-decoration:none;margin-right:var(--spacing-2)}
.logo-symbol img{display:block;height:34px;width:auto;max-width:none;
  object-fit:contain;object-position:left center}

.topbar-nav{display:flex;align-items:stretch;gap:2px;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none}
.topbar-nav::-webkit-scrollbar{display:none}
.topbar-nav[data-more-end]{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--spacing-8)),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - var(--spacing-8)),transparent)}
.topbar-nav[data-more-start]{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--spacing-8));
          mask-image:linear-gradient(to right,transparent,#000 var(--spacing-8))}
.topbar-nav[data-more-start][data-more-end]{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--spacing-8),#000 calc(100% - var(--spacing-8)),transparent);
          mask-image:linear-gradient(to right,transparent,#000 var(--spacing-8),#000 calc(100% - var(--spacing-8)),transparent)}
.topbar-nav-item{ display:flex;align-items:center;padding:var(--spacing-4) var(--spacing-2);
  text-decoration:none;white-space:nowrap;
  color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-single);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s}
@media(hover:hover){.topbar-nav-item:hover{color:var(--color-text-default)}}
.topbar-nav-item[aria-current="page"]{color:var(--color-text-default);font-weight:var(--font-weight-semibold);
  border-bottom-color:var(--color-text-default)}

@media (max-width:430px){
  .logo-symbol{width:35px;height:30px;margin-right:var(--spacing-1)}    
  .logo-symbol img{height:30px}
  .topbar-nav-item{padding:var(--spacing-4) var(--spacing-1)}
}
@media (max-width:768px){
  header.topbar{padding:0 var(--spacing-3)}
}

.menu-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:var(--radius-sm);border:none;background:transparent;color:var(--color-text-default);
  cursor:pointer;padding:0;transition:background .15s;position:relative}
@media(hover:hover){.menu-btn:hover{background:var(--color-bg-hover)}}
.menu-btn-reddot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:var(--radius-full);
  background:var(--color-bg-critical);border:1.5px solid var(--color-bg-default)}
.menu-item-reddot{display:inline-block;width:6px;height:6px;border-radius:var(--radius-full);
  background:var(--color-bg-critical);margin-left:auto;flex-shrink:0}
.menu-item-tag{ flex-shrink:0;margin-left:-8px;
  padding:2px var(--spacing-2);border-radius:var(--radius-xs);
  background:var(--color-bg-tertiary);
  color:var(--color-text-secondary);
  font-size:11px;font-weight:500;letter-spacing:.02em;line-height:1.4}
.hidden{display:none!important}


.side-menu-overlay{position:fixed;inset:0;background:var(--color-bg-overlay);z-index:var(--z-drawer-scrim);
  opacity:0;pointer-events:none;transition:opacity .25s}
.side-menu-overlay.open{opacity:1;pointer-events:auto}
.side-menu{position:fixed;top:0;right:0;bottom:0;width:80%;max-width:400px;background:var(--color-bg-default);
  z-index:var(--z-drawer);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);
  display:flex;flex-direction:column}
.side-menu.open{transform:translateX(0)}
.side-menu-list{list-style:none;padding:var(--spacing-5) 0;margin:0;flex:1 1 auto}
.side-menu-item{ display:flex;align-items:center;gap:var(--spacing-4);width:100%;box-sizing:border-box;
  padding:var(--spacing-4) var(--spacing-6);background:transparent;border:none;color:var(--color-text-default);
  font-family:inherit;font-size:17px;font-weight:500;cursor:pointer;text-align:left;
  line-height:1.3;text-decoration:none}
@media(hover:hover){.side-menu-item:hover{background:var(--color-bg-hover)}}
.side-menu-item:active{background:var(--color-bg-pressed)}
.side-menu-icon{flex-shrink:0;opacity:.75}
.side-menu-sep{height:1px;margin:var(--spacing-3) var(--spacing-6);background:var(--color-border-default)}
.side-menu-item-sub{ font-size:15px;font-weight:500;color:var(--color-text-secondary);
  padding-top:var(--spacing-3);padding-bottom:var(--spacing-3)}

.side-head{flex:0 0 auto;display:flex;align-items:center;gap:var(--spacing-3);
  padding:var(--spacing-6) var(--spacing-6) var(--spacing-5);border-bottom:1px solid var(--color-border-default)}
.side-head:empty{display:none}
.side-login{ width:100%;padding:var(--spacing-3) var(--spacing-4);border:1px solid var(--color-border-default);
  border-radius:var(--radius-md);background:var(--color-bg-default);color:var(--color-text-default);font-family:inherit;
  font-size:15px;font-weight:500;cursor:pointer;text-align:center}
@media(hover:hover){.side-login:hover{background:var(--color-bg-secondary)}}
.side-avatar{flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-full);object-fit:cover;
  background:var(--color-bg-tertiary)}
.side-greet{ min-width:0;font-size:15px;font-weight:500;line-height:1.4;
  word-break:keep-all;color:var(--color-text-default)}
.side-greet b{display:block;margin-bottom:2px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.side-pencil{flex:0 0 auto;margin-left:auto;display:grid;place-items:center;text-decoration:none;
  width:36px;height:36px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;
  color:var(--color-icon-default);cursor:pointer}
@media(hover:hover){.side-pencil:hover{background:var(--color-bg-hover)}}

.nick-dim{position:fixed;inset:0;z-index:var(--z-modal-scrim);background:var(--color-bg-overlay);
  display:flex;align-items:center;justify-content:center;padding:var(--spacing-5)}
.nick-dim[hidden]{display:none}
.nick-modal{position:relative;width:360px;max-width:100%;max-height:90vh;
  background:var(--color-bg-default);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-overlay);display:flex;flex-direction:column;overflow:hidden}
.nick-modal-head{flex:0 0 auto;display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-5) var(--spacing-3) var(--spacing-4) var(--spacing-5)}
.nick-modal-title{ flex:1 1 auto;min-width:0;font-size:20px;line-height:1.3;font-weight:600;
  color:var(--color-text-default);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nick-close{flex:0 0 40px;width:40px;height:40px;padding:0;border:none;border-radius:var(--radius-sm);
  background:transparent;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;
  cursor:pointer}
@media(hover:hover){.nick-close:hover{background:var(--color-bg-tertiary);color:var(--color-text-default)}}
.nick-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--spacing-2) var(--spacing-8) var(--spacing-8);gap:var(--spacing-4)}
.nick-field{width:100%;max-width:400px}
.nick-field input{ width:100%;box-sizing:border-box;border:none;
  border-bottom:1.5px solid var(--color-border-default);border-radius:0;padding:var(--spacing-3) 0;
  font-size:17px;font-family:inherit;color:var(--color-text-default);
  background:transparent;text-align:center}
.nick-field input:focus{outline:none;border-bottom-color:var(--color-text-default)}
.nick-field input::placeholder{text-align:center;color:var(--color-text-secondary)}
.nick-hint{ margin:0;font-size:13px;line-height:1.5;text-align:center;
  color:var(--color-text-secondary)}
.nick-hint-error{color:var(--color-text-critical)}
.nick-confirm{ width:auto;margin-top:var(--spacing-2);padding:var(--spacing-3) var(--spacing-8);border-radius:var(--radius-md);
  border:1px solid var(--color-border-default);background:var(--color-bg-default);
  font-family:inherit;font-size:15px;font-weight:500;color:var(--color-text-default);
  cursor:pointer;transition:.12s;white-space:nowrap}
.nick-confirm:disabled{opacity:.4;cursor:not-allowed}
@media(hover:hover){.nick-confirm:not(:disabled):hover{background:var(--color-bg-secondary)}}
@media (max-width:700px){
  .nick-dim{padding:0}
  .nick-modal{width:100%;max-width:none;height:100svh;max-height:none;
    border-radius:0;box-shadow:none}
  .nick-modal-head{padding:var(--spacing-4) var(--spacing-2) var(--spacing-3) var(--spacing-4)}
}

.side-signout[hidden]{display:none}