.sc-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(15,15,20,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}

[data-theme="light"] .sc-topbar{
  background:rgba(255,255,255,.82);
}

.sc-topbar-inner{
  max-width:1160px;
  margin:0 auto;
  height:62px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.sc-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text);
  flex-shrink:0;
  transition:.18s;
}

.sc-brand:hover{
  opacity:.85;
}

.sc-brand img{
  width:34px;
  height:34px;
  display:block;
}

.sc-brand-name{
  font-size:21px;
  font-weight:900;
  letter-spacing:-.4px;
  line-height:1;
}

.sc-brand-name span{
  color:var(--red);
}

.sc-nav-links{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
}

.sc-nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text2);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  padding:10px 12px;
  border-radius:9px;
  transition:.18s;
}

.sc-nav-link:hover{
  color:var(--text);
}

.sc-nav-link.active{
  color:var(--text);
}

.sc-nav-link.active::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:-16px;
  height:3px;
  border-radius:999px;
  background:var(--red);
}

.sc-nav-link.admin{
  color:var(--blue);
}

.sc-nav-badge{
  font-size:10px;
  font-weight:900;
  color:var(--red);
  background:rgba(232,25,44,.1);
  border:1px solid rgba(232,25,44,.18);
  border-radius:999px;
  padding:2px 6px;
  line-height:1;
}

.sc-nav-badge.done{
  color:var(--green);
  background:var(--good-bg);
  border-color:rgba(34,197,94,.2);
}

.sc-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.sc-user-menu{
  position:relative;
}

.sc-user-btn{
  min-width:130px;
  max-width:170px;
  height:42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2px;
  border:1px solid var(--border);
  background:var(--card2);
  color:var(--text);
  border-radius:11px;
  padding:0 14px;
  cursor:pointer;
  transition:.18s;
}

.sc-user-btn:hover{
  border-color:rgba(232,25,44,.25);
}

.sc-user-btn span{
  font-size:13px;
  font-weight:900;
  line-height:1;
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sc-user-btn small{
  font-size:10px;
  color:var(--text3);
  font-weight:700;
  line-height:1;
}

.sc-user-dropdown{
  position:absolute;
  right:0;
  top:50px;
  width:190px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:6px;
  display:none;
  z-index:1300;
}

.sc-user-dropdown.open{
  display:block;
}

.sc-user-dropdown a,
.sc-user-dropdown button{
  width:100%;
  display:block;
  text-align:left;
  padding:10px 11px;
  border-radius:9px;
  border:none;
  background:transparent;
  color:var(--text2);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
}

.sc-user-dropdown a:hover,
.sc-user-dropdown button:hover{
  background:var(--card2);
  color:var(--text);
}

.sc-user-dropdown hr{
  border:none;
  border-top:1px solid var(--border);
  margin:6px 0;
}

.sc-menu-btn,
.sc-drawer-close{
  display:none;
  border:1px solid var(--border);
  background:var(--card2);
  color:var(--text2);
  border-radius:10px;
  height:36px;
  padding:0 12px;
  cursor:pointer;
  font-size:18px;
  font-weight:900;
}

.sc-mobile-drawer{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:290px;
  max-width:86vw;
  z-index:1200;
  background:var(--card);
  border-right:1px solid var(--border);
  box-shadow:var(--shadow);
  transform:translateX(-105%);
  transition:.22s;
  padding:18px;
}

.sc-mobile-drawer.open{
  transform:translateX(0);
}

.sc-drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

.sc-drawer-brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.sc-drawer-brand img{
  width:32px;
  height:32px;
}

.sc-drawer-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sc-drawer-links a,
.sc-drawer-links button{
  width:100%;
  text-align:left;
  text-decoration:none;
  color:var(--text2);
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px 12px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

.sc-drawer-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1100;
}

.sc-drawer-backdrop.open{
  display:block;
}

@media(max-width:820px){
  .sc-nav-links{
    display:none;
  }

  .sc-menu-btn{
    display:block;
  }

  .sc-drawer-close{
    display:block;
  }

  .sc-user-btn{
    display:none;
  }

  .sc-page{
    padding-top:76px;
  }
}