.oc-topbar {
  --sc-surface: #ffffff;
  --sc-sunken: #eceae5;
  --sc-hover: #f7f6f3;
  --sc-border: #e4e2dd;
  --sc-border-strong: #d8d6d0;
  --sc-border-subtle: #efede8;
  --sc-ink: #1d1d1b;
  --sc-ink-2: #3c3b38;
  --sc-muted: #56544f;
  --sc-faint: #97948c;
  --sc-orange: #ee7220;
  --sc-inverse: #1d1d1b;
  --sc-inverse-hover: #000000;
  --sc-on-inverse: #ffffff;
  --sc-backdrop: rgba(29, 29, 27, 0.34);
  --sc-shadow-menu: 0 24px 60px -18px rgba(29, 29, 27, 0.4);
  color-scheme: light;
}

.dark-mode .oc-topbar {
  --sc-surface: #202327;
  --sc-sunken: #131416;
  --sc-hover: #2b2e34;
  --sc-border: #34373d;
  --sc-border-strong: #40434a;
  --sc-border-subtle: #2b2e33;
  --sc-ink: #ecebe6;
  --sc-ink-2: #d4d1cb;
  --sc-muted: #b1aea7;
  --sc-faint: #8f8c85;
  --sc-orange: #f3812f;
  --sc-inverse: #ecebe6;
  --sc-inverse-hover: #ffffff;
  --sc-on-inverse: #17181a;
  --sc-backdrop: rgba(0, 0, 0, 0.5);
  --sc-shadow-menu: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

.oc-topbar,
.oc-topbar *,
.oc-topbar *::before,
.oc-topbar *::after {
  box-sizing: border-box;
}

.oc-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0 22px;
  background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-border);
  color: var(--sc-ink);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

.oc-topbar button,
.oc-topbar a {
  font: inherit;
  color: inherit;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}

.oc-topbar svg {
  display: block;
}

.oc-tb-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.oc-tb-brand img {
  height: 28px;
  width: auto;
  display: block;
}
.oc-tb-divider {
  width: 1px;
  height: 26px;
  background: var(--sc-border);
}
.oc-tb-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-ink);
}

.oc-tb-slot {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.oc-tb-account {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.oc-tb-btn {
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: var(--sc-inverse);
  color: var(--sc-on-inverse) !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.13s ease;
}

.oc-tb-btn--ghost {
  background: transparent;
  color: var(--sc-ink-2) !important;
}

.oc-tb-account-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 10px 0 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.13s ease;
}
.oc-tb-account-btn--guest {
  padding: 0 8px 0 5px;
}
.oc-tb-account-btn--guest .oc-tb-avatar {
  color: var(--sc-muted);
}
.oc-tb-account-btn[aria-expanded='true'] {
  background: var(--sc-hover);
}

.oc-tb-who,
.oc-tb-menu-user-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.oc-tb-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sc-ink);
}
.oc-tb-email {
  font-size: 11px;
  line-height: 1.3;
  color: var(--sc-muted);
}
.oc-tb-chev {
  color: var(--sc-faint);
}
.oc-tb-chev svg {
  width: 14px;
  height: 14px;
}

.oc-tb-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sc-sunken);
  border: 1px solid var(--sc-border-strong);
  color: var(--sc-ink-2);
  font-size: 11.5px;
  font-weight: 600;
}

.oc-tb-scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.oc-tb-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: -6px;
  z-index: 21;
  width: 264px;
  padding: 6px;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: 12px;
  box-shadow: var(--sc-shadow-menu);
}
.oc-tb-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.oc-tb-panel[hidden],
.oc-tb-menu[hidden],
.oc-tb-scrim[hidden],
.oc-tb-check[hidden] {
  display: none;
}

.oc-tb-menu-user,
.oc-tb-menu-user-sep {
  display: none;
}

.oc-tb-sep {
  display: block;
  height: 1px;
  margin: 4px 6px;
  background: var(--sc-border-subtle);
}

.oc-tb-mi {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--sc-ink-2) !important;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.13s ease;
}
.oc-tb-mi > svg:first-child {
  color: var(--sc-muted);
  flex-shrink: 0;
}
.oc-tb-value {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--sc-muted);
}
.oc-tb-more {
  font-size: 15px;
  color: var(--sc-faint);
}
.oc-tb-check {
  margin-left: auto;
  color: var(--sc-orange);
}
.oc-tb-back {
  height: 34px;
  gap: 8px;
  color: var(--sc-muted) !important;
  font-size: 12.5px;
}

@media (hover: hover) {
  .oc-tb-mi:hover {
    background: var(--sc-hover);
  }
  .oc-tb-btn:hover {
    background: var(--sc-inverse-hover);
  }
  .oc-tb-btn--ghost:hover {
    background: var(--sc-hover);
  }
}

@media (max-width: 720px) {
  .oc-topbar {
    padding: 0 4px 0 16px;
  }
  .oc-tb-brand {
    gap: 12px;
  }
  .oc-tb-brand img {
    height: 24px;
  }
  .oc-tb-divider {
    height: 22px;
  }
  .oc-tb-account {
    position: static;
    gap: 2px;
  }
  .oc-tb-btn {
    height: 40px;
    padding: 0 14px;
  }
  .oc-tb-account-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .oc-tb-account-btn[aria-expanded='true'] {
    background: transparent;
  }
  .oc-tb-account-btn[aria-expanded='true'] .oc-tb-avatar {
    border-color: var(--sc-orange);
  }
  .oc-tb-who,
  .oc-tb-chev {
    display: none;
  }
  .oc-tb-scrim {
    background: var(--sc-backdrop);
  }
  .oc-tb-menu {
    position: fixed;
    top: 62px;
    left: 8px;
    right: 8px;
    width: auto;
    padding: 8px;
    border-radius: 14px;
  }
  .oc-tb-menu-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 12px;
  }
  .oc-tb-menu-user .oc-tb-avatar {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
  .oc-tb-menu-user .oc-tb-name {
    font-size: 14px;
  }
  .oc-tb-menu-user .oc-tb-email {
    font-size: 12px;
  }
  .oc-tb-menu-user-sep {
    display: block;
    margin-top: 0;
  }
  .oc-tb-mi {
    height: 44px;
    gap: 12px;
    border-radius: 9px;
    font-size: 14px;
  }
  .oc-tb-value {
    font-size: 13px;
  }
  .oc-tb-back {
    height: 44px;
  }
  .oc-tb-mi:active {
    background: var(--sc-hover);
  }
}