#TopBar{
  position: sticky;
  top: 0;
  z-index: 120;
  overflow: visible;
}

#TopBar .topbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 52px;
  overflow: visible;
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 10px;
}

#TopBar .topbar-left{
  display: flex;
  align-items: center;
  min-width: 0;
  justify-self: start;
}

#TopBar .topbar-center{
  display: flex;
  justify-content: center;
  min-width: 0;
  position: relative;
  justify-self: center;
}

#TopBar .topbar-right{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  position: relative;
  overflow: visible;
  justify-self: end;
}

#TopBar .topbar-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

#TopBar .dd,
#TopBar .search-dd{
  position: relative;
}

#TopBar .dd > summary,
#TopBar .search-dd > summary{
  list-style: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

#TopBar .dd > summary::-webkit-details-marker,
#TopBar .search-dd > summary::-webkit-details-marker{
  display: none;
}

#TopBar .brand{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  min-width: 0;
}

#TopBar .brand-line{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1;
}

#TopBar .brand-mark{
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#TopBar .brand-env{
  flex: 0 0 auto;
  font-size: clamp(10px, .95vw, 12px);
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .74;
  white-space: nowrap;
}

#TopBar .search{
  width: 100%;
  max-width: 220px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--soft-action-border);
  background: var(--soft-action-bg);
  border-radius: 999px;
  padding: 7px 12px;
  margin: 0;
  box-shadow: var(--soft-action-shadow);
}

#TopBar .search-desktop{
  width: 100%;
  max-width: 220px;
}

#TopBar .search-dd{
  display: none;
}

#TopBar .search-mobile{
  width: 100%;
  max-width: none;
}

#TopBar .search-dd:not([open]) .search-mobile{
  display: none;
}

#TopBar .search-dd[open] .search-mobile{
  display: grid;
}

#TopBar .search-ico{
  opacity: .74;
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
}

#TopBar .search-in{
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
}

#TopBar .search-in::placeholder{
  color: rgba(234,241,255,.58);
}

#TopBar .search-go{
  height: 32px;
  min-width: 42px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--soft-action-border);
  background: var(--soft-action-bg);
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  justify-self: end;
  align-self: stretch;
  box-shadow: var(--soft-action-shadow);
}

#TopBar .super-chip{
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: #3b3112;
  color: rgba(234,241,255,.92);
  font-size: 12px;
  font-weight: 700;
}

#TopBar .super-chip[hidden]{
  display: none !important;
}

#TopBar .super-time{
  font-variant-numeric: tabular-nums;
  opacity: .90;
}

#TopBar .btn-menu{
  padding-right: 10px;
}

#TopBar .btn-icon{
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
}

#TopBar .btn-ucp{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  min-width: 38px;
  min-height: 38px;
  max-width: none;
  white-space: nowrap;
  border-radius: 999px;
}

#TopBar .btn-icon,
#TopBar .btn-ucp{
  background: var(--soft-action-bg);
  border-color: var(--soft-action-border);
  box-shadow: var(--soft-action-shadow);
}

#TopBar .ucp-label{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: auto;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  flex: 0 0 auto;
}

#TopBar .ucp-label:not(:has(.ucp-welcome:not(:empty), .ucp-name:not(:empty))){
  display: none;
}

#TopBar .ucp-welcome{
  opacity: .72;
  font-size: clamp(10px, .85vw, 11px);
}

#TopBar .ucp-welcome:empty{
  display: none;
}

#TopBar .ucp-name:empty,
#TopBar .ucp-user-info:empty{
  display: none;
}

#TopBar .btn-ucp .ucp-label .ucp-name{
  font-weight: 700;
  font-size: clamp(11px, .95vw, 12px);
  letter-spacing: .01em;
}

#TopBar .ucp-avatar{
  width: 24px;
  height: 24px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--control-bg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  flex: 0 0 auto;
}

#TopBar .ucp-avatar-default{
  position: relative;
  overflow: hidden;
  font-size: 0;
}

#TopBar .ucp-avatar-default::before,
#TopBar .ucp-avatar-default::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: currentColor;
  opacity: .68;
}

#TopBar .ucp-avatar-default::before{
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

#TopBar .ucp-avatar-default::after{
  bottom: 4px;
  width: 14px;
  height: 8px;
  border-radius: 8px 8px 4px 4px;
}

#TopBar .menu{
  z-index: 80;
}

#TopBar .dd:not([open]) .menu{
  display: none;
}

#TopBar .dd[open] > summary{
  background: var(--soft-action-bg-hover);
  border-color: rgba(120,160,255,.25);
}

#TopBar .dd[data-dd="switcher"]{
  --dd-width: clamp(220px, 34vw, 280px);
}

#TopBar .dd[data-dd="ucp"]{
  --dd-width: clamp(260px, 40vw, 340px);
}

#TopBar .dd[data-dd="helphub"]{
  --dd-width: clamp(280px, 44vw, 380px);
}

#TopBar .dd > .menu{
  width: min(var(--dd-width, 280px), calc(100vw - 24px));
  min-width: 0;
  max-width: calc(100vw - 24px);
}

#TopBar .ico-help{
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border0);
  background: var(--control-bg-2);
  font-weight: 900;
}

#TopBar .ucp-panel{
  padding: 14px;
}

#TopBar .ucp-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

#TopBar .ucp-user{
  display: flex;
  gap: 10px;
  min-width: 0;
}

#TopBar .ucp-avatar-lg{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--control-bg-2);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
  flex: 0 0 auto;
}

#TopBar .ucp-avatar-lg.ucp-avatar-default::before{
  top: 8px;
  width: 13px;
  height: 13px;
}

#TopBar .ucp-avatar-lg.ucp-avatar-default::after{
  bottom: 6px;
  width: 20px;
  height: 10px;
  border-radius: 10px 10px 5px 5px;
}

#TopBar .ucp-user-info{
  min-width: 0;
}

#TopBar .ucp-panel .ucp-name{
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.1;
  font-size: 13px;
}

#TopBar .ucp-manage{
  font-size: 12px;
  opacity: .75;
  text-decoration: none;
  color: inherit;
}

#TopBar .ucp-manage:hover{
  text-decoration: underline;
}

#TopBar .ucp-head-actions{
  display: flex;
  gap: 8px;
  align-items: center;
}

#TopBar .ucp-auth-form{
  margin: 0;
}

#TopBar .ucp-auth{
  min-width: 76px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--soft-action-border);
  background: var(--soft-action-bg);
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--soft-action-shadow);
}

#TopBar .ucp-close-hint{
  font-size: 11px;
  opacity: .65;
  padding: 0 6px;
  border: 1px solid var(--border0);
  border-radius: 8px;
  height: 32px;
  display: inline-flex;
  align-items: center;
}

#TopBar .ucp-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}

#TopBar .ucp-row-l{
  font-size: 12px;
  opacity: .78;
}

#TopBar .ucp-select{
  min-width: 0;
  width: 170px;
  max-width: 100%;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--soft-action-border);
  background: var(--soft-action-bg);
  color: inherit;
  padding: 0 10px;
  box-shadow: var(--soft-action-shadow);
}

#TopBar .ucp-super{
  display: flex;
  gap: 8px;
  align-items: center;
}

#TopBar .ucp-stepup{
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--soft-action-border);
  background: var(--soft-action-bg);
  color: inherit;
  font-size: 12px;
  cursor: pointer;
  box-shadow: var(--soft-action-shadow);
}

#TopBar .ucp-toggle{
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--soft-action-border);
  background: var(--soft-action-bg);
  font-size: 12px;
  opacity: .90;
  box-shadow: var(--soft-action-shadow);
}

#TopBar .ucp-toggle input{
  accent-color: rgba(120,160,255,.85);
}

#TopBar .ucp-exp{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--surface0);
  border-radius: 14px;
  overflow: hidden;
}

#TopBar .ucp-sum{
  list-style: none;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  opacity: .90;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#TopBar .ucp-exp[open] .ucp-sum{
  background: var(--surface1);
}

#TopBar .ucp-exp-body{
  padding: 10px 12px 12px;
}

#TopBar .ucp-seg{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

#TopBar .seg-btn{
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--soft-action-border);
  background: var(--soft-action-bg);
  color: inherit;
  font-size: 12px;
  cursor: pointer;
  box-shadow: var(--soft-action-shadow);
}

#TopBar .seg-btn.is-on{
  background: var(--control-bg-2);
  border-color: rgba(120,160,255,.28);
}

#TopBar .helphub-panel{
  padding: 14px;
}

#TopBar .hh-head{
  margin-bottom: 10px;
}

#TopBar .hh-title{
  font-weight: 900;
  letter-spacing: .01em;
}

#TopBar .hh-sub{
  font-size: 12px;
  opacity: .72;
  margin-top: 2px;
}

#TopBar .hh-search{
  border: 1px solid var(--soft-action-border);
  background: var(--soft-action-bg);
  border-radius: 18px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  box-shadow: var(--soft-action-shadow);
}

#TopBar .hh-in{
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: inherit;
  font-size: 13px;
}

#TopBar .hh-go{
  height: 32px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--soft-action-border);
  background: var(--soft-action-bg);
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  box-shadow: var(--soft-action-shadow);
}

#TopBar .hh-go-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

#TopBar .hh-go-txt{
  display: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

#TopBar .hh-results{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

#TopBar .hh-res{
  border: 1px solid rgba(255,255,255,.10);
  background: var(--surface0);
  border-radius: 12px;
  padding: 10px;
}

#TopBar .hh-res-btn{
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

#TopBar .hh-res-t{
  font-weight: 800;
  font-size: 12px;
}

#TopBar .hh-res-s{
  font-size: 12px;
  opacity: .72;
  margin-top: 2px;
}

#TopBar .hh-sec{
  margin-top: 12px;
}

#TopBar .hh-h{
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 8px;
}

#TopBar .hh-a{
  display: block;
  padding: 10px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--surface0);
  margin-top: 6px;
}

#TopBar .hh-a:hover{
  background: var(--surface1);
}

#TopBar .hh-sum{
  list-style: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#TopBar .hh-codebox{
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.18);
  background: var(--surface0);
}

#TopBar .hh-codeval{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 800;
}

#TopBar .hh-codesub{
  font-size: 12px;
  opacity: .70;
  margin-top: 4px;
}

html[data-theme="light"] #TopBar .search-in::placeholder{
  color: rgba(15,23,42,.48);
}

html[data-theme="light"] #TopBar .ucp-row-l,
html[data-theme="light"] #TopBar .hh-h{
  color: rgba(15,23,42,.72);
  opacity: 1;
}

html[data-theme="light"] #TopBar .seg-btn{
  color: rgba(15,23,42,.78);
}

html[data-theme="light"] #TopBar .ucp-exp{
  background: rgba(15,23,42,.02);
  border-color: rgba(15,23,42,.10);
}

html[data-theme="light"] #TopBar .ucp-exp[open] .ucp-sum{
  background: rgba(37,99,235,.06);
}

@media (prefers-color-scheme: light){
  html[data-theme="system"] #TopBar .search-in::placeholder{
    color: rgba(15,23,42,.48);
  }

  html[data-theme="system"] #TopBar .ucp-row-l,
  html[data-theme="system"] #TopBar .hh-h{
    color: rgba(15,23,42,.72);
    opacity: 1;
  }

  html[data-theme="system"] #TopBar .seg-btn{
    color: rgba(15,23,42,.78);
  }

  html[data-theme="system"] #TopBar .ucp-exp{
    background: rgba(15,23,42,.02);
    border-color: rgba(15,23,42,.10);
  }

  html[data-theme="system"] #TopBar .ucp-exp[open] .ucp-sum{
    background: rgba(37,99,235,.06);
  }
}

@media (max-width: 980px){
  #TopBar .topbar,
  #TopBar .topbar-right,
  #TopBar .topbar-actions,
  #TopBar .dd,
  #TopBar .search-dd{
    position: static;
  }

  #TopBar .topbar-actions .search-dd[open] .search-mobile,
  #TopBar .topbar-actions .dd[open] .menu{
    position: absolute;
    top: calc(100% + var(--gap));
    left: auto;
    right: max(var(--gap), env(safe-area-inset-right, 0px));
    width: min(
      var(--dd-width, 320px),
      calc(100vw - max(var(--gap), env(safe-area-inset-left, 0px)) - max(var(--gap), env(safe-area-inset-right, 0px)))
    );
    min-width: 0;
    max-width: calc(100vw - max(var(--gap), env(safe-area-inset-left, 0px)) - max(var(--gap), env(safe-area-inset-right, 0px)));
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px);
    overflow: auto;
    z-index: 220;
    box-sizing: border-box;
  }

  #TopBar .topbar-actions .search-dd[open] .search-mobile{
    width: calc(100vw - (2 * max(var(--gap), env(safe-area-inset-left, 0px))));
  }
}

@media (max-width: 700px){
  #TopBar .btn-ucp{
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0 6px;
    gap: 0;
  }

  #TopBar .ucp-label{
    display: none;
  }

  #TopBar .brand-env{
    font-size: 10px;
  }
}

@media (max-width: 560px){
  #TopBar .topbar{
    grid-template-columns: 1fr auto;
    grid-template-areas: "left right";
  }

  #TopBar .topbar-left{
    grid-area: left;
  }

  #TopBar .topbar-right{
    grid-area: right;
  }

  #TopBar .topbar-center{
    display: none;
  }

  #TopBar .search{
    max-width: none;
  }

  #TopBar .search-desktop{
    display: none;
  }

  #TopBar .search-dd{
    display: block;
    position: static;
  }

  #TopBar .topbar-actions,
  #TopBar .dd{
    position: static;
  }
}

@media (max-width: 520px){
  #TopBar .ucp-label{
    display: none;
  }

  #TopBar .btn-ucp{
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    gap: 0;
  }

  #TopBar .ucp-avatar{
    width: 22px;
    height: 22px;
    border-radius: 8px;
    font-size: 10px;
  }

  #TopBar .ucp-head{
    align-items: center;
  }

  #TopBar .ucp-row{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  #TopBar .ucp-select{
    width: 100%;
  }

  #TopBar .search-mobile,
  #TopBar .hh-search{
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
  }

  #TopBar .hh-search{
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #TopBar .search-go,
  #TopBar .hh-go{
    min-width: 46px;
    padding: 0 12px;
  }
}

@media (max-width: 430px){
  #TopBar .topbar-actions .search-dd[open] .search-mobile,
  #TopBar .topbar-actions .dd[open] .menu,
  .frame:has(#sidebar-toggle:not(:checked)) #TopBar .topbar-actions .search-dd[open] .search-mobile,
  .frame:has(#sidebar-toggle:not(:checked)) #TopBar .topbar-actions .dd[open] .menu{
    left: max(var(--gap), env(safe-area-inset-left, 0px));
    right: max(var(--gap), env(safe-area-inset-right, 0px));
    width: auto;
    max-width: none;
  }
}

@media (max-width: 360px){
  #TopBar .hh-go{
    width: auto;
    min-width: 40px;
  }

  #TopBar .hh-go-ico{
    display: none;
  }

  #TopBar .hh-go-txt{
    display: inline;
  }
}