:root {
  --topbar-height: 58px;

  --topbar-bg: rgba(255, 255, 255, 0.92);
  --topbar-bg-solid: #ffffff;

  --topbar-surface: #ffffff;
  --topbar-surface-soft: #f7f8fa;
  --topbar-surface-hover: #f1f3f5;

  --topbar-text: #111318;
  --topbar-text-soft: #4b5563;
  --topbar-text-muted: #7a8494;

  --topbar-border: rgba(17, 24, 39, 0.08);
  --topbar-border-strong: rgba(17, 24, 39, 0.14);

  --topbar-icon: #20242c;
  --topbar-icon-soft: #5f6775;

  --topbar-accent: #111827;
  --topbar-accent-contrast: #ffffff;

  --topbar-danger: #c62828;
  --topbar-danger-soft: rgba(198, 40, 40, 0.08);

  --topbar-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 8px 28px rgba(15, 23, 42, 0.05);

  --topbar-menu-shadow:
    0 14px 45px rgba(15, 23, 42, 0.14),
    0 2px 8px rgba(15, 23, 42, 0.06);

  --topbar-radius-sm: 9px;
  --topbar-radius-md: 12px;
  --topbar-radius-lg: 16px;

  --topbar-transition:
    180ms cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}



html[data-theme="dark"],
body[data-theme="dark"] {
  --topbar-bg: rgba(10, 10, 11, 0.94);
  --topbar-bg-solid: #0a0a0b;

  --topbar-surface: #111214;
  --topbar-surface-soft: #16181b;
  --topbar-surface-hover: #1c1e22;

  --topbar-text: #f4f5f7;
  --topbar-text-soft: #c1c5cc;
  --topbar-text-muted: #888e99;

  --topbar-border: rgba(255, 255, 255, 0.07);
  --topbar-border-strong: rgba(255, 255, 255, 0.13);

  --topbar-icon: #f3f4f6;
  --topbar-icon-soft: #a4aab4;

  --topbar-accent: #f4f5f7;
  --topbar-accent-contrast: #111214;

  --topbar-danger: #ff6b6b;
  --topbar-danger-soft: rgba(255, 107, 107, 0.1);

  --topbar-shadow:
    0 1px 0 rgba(255, 255, 255, 0.02),
    0 10px 35px rgba(0, 0, 0, 0.18);

  --topbar-menu-shadow:
    0 18px 60px rgba(0, 0, 0, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.2);
}



.app-topbar {
  position: sticky;
  top: 0;
  z-index: 900;

  width: 100%;
  min-height: var(--topbar-height);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding:
    8px
    12px;

  background:
    var(--topbar-bg);

  border-bottom:
    1px solid
    var(--topbar-border);

  box-shadow:
    var(--topbar-shadow);

  backdrop-filter:
    blur(18px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(140%);

  transition:
    background-color
      var(--topbar-transition),
    border-color
      var(--topbar-transition),
    box-shadow
      var(--topbar-transition);

  animation:
    topbarEnter
    360ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}



@keyframes topbarEnter {
  from {
    opacity: 0;
    transform:
      translateY(-7px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }
}



.topbar-left {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}



.topbar-icon-button {
  position: relative;

  width: 36px;
  height: 36px;

  flex:
    0 0
    36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color:
    var(--topbar-icon);

  background:
    transparent;

  border:
    1px solid
    transparent;

  border-radius:
    var(--topbar-radius-md);

  outline: none;

  cursor: pointer;

  overflow: hidden;

  transition:
    color
      var(--topbar-transition),
    background-color
      var(--topbar-transition),
    border-color
      var(--topbar-transition),
    transform
      var(--topbar-transition),
    box-shadow
      var(--topbar-transition);
}



.topbar-icon-button::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    currentColor;

  opacity: 0;

  transform:
    scale(0.55);

  transition:
    opacity
      180ms ease,
    transform
      220ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      );

  pointer-events: none;
}



.topbar-icon-button:hover {
  background:
    var(--topbar-surface-hover);

  border-color:
    var(--topbar-border);

  transform:
    translateY(-1px);
}



.topbar-icon-button:hover::after {
  opacity: 0.035;

  transform:
    scale(1);
}



.topbar-icon-button:active,
.topbar-icon-button.is-pressed {
  transform:
    translateY(0)
    scale(0.94);
}



.topbar-icon-button:focus-visible {
  border-color:
    var(--topbar-border-strong);

  box-shadow:
    0 0 0 3px
    rgba(127, 127, 127, 0.11);
}



.topbar-icon-button svg {
  width: 17px;
  height: 17px;

  stroke-width: 1.9;

  pointer-events: none;

  transition:
    transform
      var(--topbar-transition),
    opacity
      var(--topbar-transition);
}



.topbar-icon-button:hover svg {
  transform:
    scale(1.08);
}



.topbar-sidebar-toggle {
  background:
    var(--topbar-surface-soft);

  border-color:
    var(--topbar-border);
}



.topbar-brand {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}



.topbar-brand-mark {
  width: 8px;
  height: 30px;

  flex:
    0 0
    8px;

  display: flex;
  align-items: center;
  justify-content: center;
}



.topbar-brand-mark span {
  width: 3px;
  height: 20px;

  display: block;

  border-radius: 999px;

  background:
    var(--topbar-accent);

  opacity: 0.9;

  animation:
    topbarBrandPulse
    3.2s
    ease-in-out
    infinite;

  transition:
    height
      var(--topbar-transition),
    opacity
      var(--topbar-transition);
}



.topbar-brand:hover
.topbar-brand-mark span {
  height: 25px;
  opacity: 1;
}



@keyframes topbarBrandPulse {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}



.topbar-brand-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 1px;
}



.topbar-title-row {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 6px;

  overflow: hidden;
}



.topbar-title {
  flex: 0 0 auto;

  color:
    var(--topbar-text);

  font-size: 13px;
  font-weight: 780;
  line-height: 1.1;

  letter-spacing:
    -0.025em;

  white-space: nowrap;
}



.topbar-title-separator {
  color:
    var(--topbar-text-muted);

  font-size: 11px;
  font-weight: 500;

  opacity: 0.55;
}



.topbar-section {
  min-width: 0;

  overflow: hidden;

  color:
    var(--topbar-text-soft);

  font-size: 11px;
  font-weight: 680;
  line-height: 1.1;

  text-overflow:
    ellipsis;

  white-space: nowrap;

  animation:
    topbarSectionEnter
    260ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}



@keyframes topbarSectionEnter {
  from {
    opacity: 0;
    transform:
      translateX(-5px);
  }

  to {
    opacity: 1;
    transform:
      translateX(0);
  }
}



.topbar-subtitle {
  overflow: hidden;

  color:
    var(--topbar-text-muted);

  font-size: 8px;
  font-weight: 570;
  line-height: 1.15;

  letter-spacing:
    0.015em;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}



.topbar-actions {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 6px;
}



.topbar-status {
  height: 30px;

  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding:
    0
    9px;

  color:
    var(--topbar-text-muted);

  background:
    var(--topbar-surface-soft);

  border:
    1px solid
    var(--topbar-border);

  border-radius:
    999px;

  font-size: 8px;
  font-weight: 720;
  line-height: 1;

  letter-spacing:
    0.04em;

  text-transform: uppercase;

  transition:
    background-color
      var(--topbar-transition),
    border-color
      var(--topbar-transition),
    transform
      var(--topbar-transition);
}



.topbar-status:hover {
  background:
    var(--topbar-surface-hover);

  border-color:
    var(--topbar-border-strong);

  transform:
    translateY(-1px);
}



.topbar-status-dot {
  position: relative;

  width: 6px;
  height: 6px;

  flex:
    0 0
    6px;

  border-radius: 50%;

  background:
    var(--topbar-accent);
}



.topbar-status-dot::after {
  content: "";

  position: absolute;
  inset: -3px;

  border:
    1px solid
    var(--topbar-accent);

  border-radius: 50%;

  opacity: 0;

  animation:
    topbarStatusPulse
    2.1s
    ease-out
    infinite;
}



@keyframes topbarStatusPulse {
  0% {
    opacity: 0.34;
    transform:
      scale(0.55);
  }

  75%,
  100% {
    opacity: 0;
    transform:
      scale(1.6);
  }
}



.topbar-divider {
  width: 1px;
  height: 24px;

  margin:
    0
    2px;

  background:
    var(--topbar-border);
}



.topbar-clock {
  min-width: 94px;

  display: flex;
  align-items: center;

  padding:
    4px
    8px;

  border:
    1px solid
    transparent;

  border-radius:
    var(--topbar-radius-md);

  transition:
    background-color
      var(--topbar-transition),
    border-color
      var(--topbar-transition),
    transform
      var(--topbar-transition);
}



.topbar-clock:hover {
  background:
    var(--topbar-surface-soft);

  border-color:
    var(--topbar-border);

  transform:
    translateY(-1px);
}



.topbar-clock-content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}



.topbar-clock-main {
  display: flex;
  align-items: baseline;

  gap: 3px;
}



.topbar-clock-time {
  display: block;

  color:
    var(--topbar-text);

  font-size: 12px;
  font-weight: 780;
  line-height: 1;

  letter-spacing:
    0.01em;

  font-variant-numeric:
    tabular-nums;
}



.topbar-clock-seconds {
  color:
    var(--topbar-text-muted);

  font-size: 7px;
  font-weight: 720;
  line-height: 1;

  font-variant-numeric:
    tabular-nums;

  opacity: 0.82;
}



.topbar-clock-meta {
  display: flex;
  align-items: center;

  gap: 3px;

  color:
    var(--topbar-text-muted);

  font-size: 7px;
  font-weight: 650;
  line-height: 1.1;

  letter-spacing:
    0.035em;
}



.topbar-clock-separator {
  opacity: 0.46;
}



.topbar-theme-button {
  overflow: hidden;
}



.topbar-theme-button svg {
  animation:
    themeIconEnter
    220ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}



@keyframes themeIconEnter {
  from {
    opacity: 0;
    transform:
      rotate(-30deg)
      scale(0.7);
  }

  to {
    opacity: 1;
    transform:
      rotate(0)
      scale(1);
  }
}



.topbar-user-wrapper {
  position: relative;

  min-width: 0;
}



.topbar-user {
  min-width: 0;

  height: 38px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding:
    3px
    5px
    3px
    4px;

  color:
    var(--topbar-text);

  background:
    transparent;

  border:
    1px solid
    transparent;

  border-radius:
    var(--topbar-radius-md);

  outline: none;

  cursor: pointer;

  overflow: hidden;

  transition:
    background-color
      var(--topbar-transition),
    border-color
      var(--topbar-transition),
    transform
      var(--topbar-transition);
}



.topbar-user:hover {
  background:
    var(--topbar-surface-soft);

  border-color:
    var(--topbar-border);

  transform:
    translateY(-1px);
}



.topbar-user:active,
.topbar-user.is-pressed {
  transform:
    translateY(0)
    scale(0.97);
}



.topbar-user:focus-visible {
  border-color:
    var(--topbar-border-strong);

  box-shadow:
    0 0 0 3px
    rgba(127, 127, 127, 0.1);
}



.topbar-avatar {
  width: 30px;
  height: 30px;

  flex:
    0 0
    30px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--topbar-accent-contrast);

  background:
    var(--topbar-accent);

  border-radius:
    9px;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;

  letter-spacing:
    0.02em;

  user-select: none;

  transition:
    border-radius
      var(--topbar-transition),
    transform
      var(--topbar-transition);
}



.topbar-user:hover
.topbar-avatar {
  border-radius: 50%;

  transform:
    rotate(-2deg)
    scale(1.04);
}



.topbar-user-copy {
  min-width: 0;

  max-width: 118px;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 1px;

  text-align: left;
}



.topbar-user-name {
  width: 100%;

  overflow: hidden;

  color:
    var(--topbar-text);

  font-size: 10px;
  font-weight: 740;
  line-height: 1.1;

  letter-spacing:
    -0.01em;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}



.topbar-user-role {
  width: 100%;

  overflow: hidden;

  color:
    var(--topbar-text-muted);

  font-size: 7.5px;
  font-weight: 580;
  line-height: 1.1;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}



.topbar-user-chevron {
  width: 12px;
  height: 12px;

  flex:
    0 0
    12px;

  color:
    var(--topbar-text-muted);

  stroke-width: 2;

  transition:
    transform
      var(--topbar-transition),
    color
      var(--topbar-transition);
}



.topbar-user:hover
.topbar-user-chevron {
  color:
    var(--topbar-text);
}



.topbar-user[
  aria-expanded="true"
]
.topbar-user-chevron {
  transform:
    rotate(180deg);
}



.topbar-user-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;

  z-index: 1000;

  width: 205px;

  padding: 5px;

  background:
    var(--topbar-surface);

  border:
    1px solid
    var(--topbar-border);

  border-radius:
    var(--topbar-radius-lg);

  box-shadow:
    var(--topbar-menu-shadow);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(-8px)
    scale(0.965);

  transform-origin:
    top right;

  transition:
    opacity
      var(--topbar-transition),
    visibility
      var(--topbar-transition),
    transform
      var(--topbar-transition);
}



.topbar-user-menu.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}



.topbar-user-menu-header {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    6px;
}



.topbar-user-menu-avatar {
  width: 32px;
  height: 32px;

  flex:
    0 0
    32px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--topbar-accent-contrast);

  background:
    var(--topbar-accent);

  border-radius:
    10px;

  font-size: 10px;
  font-weight: 800;

  user-select: none;
}



.topbar-user-menu-header > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}



.topbar-user-menu-header strong {
  overflow: hidden;

  color:
    var(--topbar-text);

  font-size: 10px;
  font-weight: 750;
  line-height: 1.15;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}



.topbar-user-menu-header span {
  overflow: hidden;

  color:
    var(--topbar-text-muted);

  font-size: 8px;
  font-weight: 560;
  line-height: 1.15;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}



.topbar-user-menu-divider {
  height: 1px;

  margin:
    4px
    3px;

  background:
    var(--topbar-border);
}



.topbar-user-menu-item {
  width: 100%;

  min-height: 34px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    0
    8px;

  color:
    var(--topbar-text-soft);

  background:
    transparent;

  border: 0;

  border-radius:
    9px;

  outline: none;

  cursor: pointer;

  font: inherit;

  font-size: 9.5px;
  font-weight: 630;

  text-align: left;

  transition:
    color
      var(--topbar-transition),
    background-color
      var(--topbar-transition),
    transform
      var(--topbar-transition);
}



.topbar-user-menu-item:hover {
  color:
    var(--topbar-text);

  background:
    var(--topbar-surface-hover);

  transform:
    translateX(2px);
}



.topbar-user-menu-item:active,
.topbar-user-menu-item.is-pressed {
  transform:
    translateX(1px)
    scale(0.98);
}



.topbar-user-menu-item:focus-visible {
  background:
    var(--topbar-surface-hover);

  box-shadow:
    inset
    0
    0
    0
    1px
    var(--topbar-border-strong);
}



.topbar-user-menu-item svg {
  width: 14px;
  height: 14px;

  flex:
    0 0
    14px;

  stroke-width: 1.9;
}



.topbar-user-menu-item-danger {
  color:
    var(--topbar-danger);
}



.topbar-user-menu-item-danger:hover {
  color:
    var(--topbar-danger);

  background:
    var(--topbar-danger-soft);
}



html[data-theme="dark"]
.app-topbar {
  background:
    var(--topbar-bg);
}



html[data-theme="dark"]
.topbar-avatar,
html[data-theme="dark"]
.topbar-user-menu-avatar {
  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(255, 255, 255, 0.08);
}



html[data-theme="light"]
.topbar-avatar,
html[data-theme="light"]
.topbar-user-menu-avatar {
  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(255, 255, 255, 0.18);
}



@media (
  max-width: 1100px
) {
  .app-topbar {
    padding:
      7px
      10px;
  }

  .topbar-user-copy {
    max-width: 100px;
  }

  .topbar-status {
    display: none;
  }
}



@media (
  max-width: 900px
) {
  .topbar-brand-mark {
    display: none;
  }

  .topbar-subtitle {
    display: none;
  }

  .topbar-title {
    font-size: 12px;
  }

  .topbar-section {
    font-size: 10px;
  }

  .topbar-user-copy {
    max-width: 90px;
  }

  .topbar-clock {
    min-width: auto;

    padding:
      4px
      6px;
  }
}



@media (
  max-width: 720px
) {
  :root {
    --topbar-height: 52px;
  }

  .app-topbar {
    gap: 8px;

    padding:
      6px
      8px;
  }

  .topbar-left {
    gap: 6px;
  }

  .topbar-actions {
    gap: 4px;
  }

  .topbar-icon-button {
    width: 32px;
    height: 32px;

    flex-basis: 32px;

    border-radius:
      10px;
  }

  .topbar-icon-button svg {
    width: 15px;
    height: 15px;
  }

  .topbar-title-separator,
  .topbar-section {
    display: none;
  }

  .topbar-divider {
    display: none;
  }

  .topbar-clock {
    padding:
      3px
      5px;
  }

  .topbar-clock-time {
    font-size: 11px;
  }

  .topbar-clock-seconds {
    font-size: 6px;
  }

  .topbar-clock-meta {
    display: none;
  }

  .topbar-user {
    width: 34px;
    height: 34px;

    padding: 2px;

    justify-content: center;
  }

  .topbar-avatar {
    width: 28px;
    height: 28px;

    flex-basis: 28px;

    border-radius:
      8px;
  }

  .topbar-user-copy,
  .topbar-user-chevron {
    display: none;
  }

  .topbar-user-menu {
    position: fixed;

    top:
      calc(
        var(--topbar-height)
        + 7px
      );

    right: 8px;

    width:
      min(
        205px,
        calc(
          100vw - 16px
        )
      );
  }
}



@media (
  max-width: 520px
) {
  .app-topbar {
    padding:
      6px;
  }

  .topbar-title {
    max-width: 82px;
  }

  .topbar-theme-button {
    display: none;
  }

  .topbar-clock {
    margin-left: auto;
  }
}



@media (
  max-width: 420px
) {
  .topbar-brand {
    display: none;
  }

  .topbar-left {
    flex:
      0 0
      auto;
  }

  .topbar-actions {
    margin-left: auto;
  }

  .topbar-clock-time {
    font-size: 10px;
  }
}



@media (
  hover: none
) {
  .topbar-icon-button:hover,
  .topbar-user:hover,
  .topbar-clock:hover,
  .topbar-status:hover,
  .topbar-user-menu-item:hover {
    transform: none;
  }
}



@media (
  prefers-reduced-motion: reduce
) {
  .app-topbar,
  .topbar-icon-button,
  .topbar-icon-button::after,
  .topbar-icon-button svg,
  .topbar-brand-mark span,
  .topbar-section,
  .topbar-status,
  .topbar-status-dot::after,
  .topbar-clock,
  .topbar-user,
  .topbar-avatar,
  .topbar-user-chevron,
  .topbar-user-menu,
  .topbar-user-menu-item {
    animation: none !important;

    transition: none !important;
  }
}.topbar-title,
.topbar-section,
.topbar-subtitle,
.topbar-clock-time,
.topbar-clock-seconds,
.topbar-clock-meta,
.topbar-status,
.topbar-user-name,
.topbar-user-role,
.topbar-user-menu-header strong,
.topbar-user-menu-header span,
.topbar-user-menu-item {
  font-weight: 700;
}



.topbar-title {
  color: #1b1f24;
  font-size: 13.2px;
  font-weight: 800;
}



.topbar-section {
  color: #515861;
  font-size: 11.2px;
  font-weight: 740;
}



.topbar-subtitle {
  color: #69717c;
  font-size: 8.5px;
  font-weight: 680;
}



.topbar-clock-time {
  color: #20242a;
  font-size: 12.2px;
  font-weight: 800;
}



.topbar-clock-seconds {
  color: #6f7781;
  font-size: 7.5px;
  font-weight: 760;
}



.topbar-clock-meta {
  color: #69717b;
  font-size: 7.5px;
  font-weight: 720;
}



.topbar-status {
  color: #5d646d;
  font-size: 8.2px;
  font-weight: 780;
}



.topbar-user-name {
  color: #1e2227;
  font-size: 10.4px;
  font-weight: 780;
}



.topbar-user-role {
  color: #646b74;
  font-size: 8px;
  font-weight: 700;
}



.topbar-user-menu-header strong {
  color: #20242a;
  font-size: 10.4px;
  font-weight: 780;
}



.topbar-user-menu-header span {
  color: #69717a;
  font-size: 8.3px;
  font-weight: 690;
}



.topbar-user-menu-item {
  color: #4d545d;
  font-size: 9.8px;
  font-weight: 700;
}



.topbar-icon-button {
  color: #343a42;
}



.topbar-clock {
  color: #30363d;
}



html[data-theme="dark"]
.topbar-title {
  color: #f4f5f7;
}



html[data-theme="dark"]
.topbar-section {
  color: #c8ccd2;
}



html[data-theme="dark"]
.topbar-subtitle {
  color: #a6abb2;
}



html[data-theme="dark"]
.topbar-clock-time {
  color: #f1f2f4;
}



html[data-theme="dark"]
.topbar-clock-seconds {
  color: #aeb3ba;
}



html[data-theme="dark"]
.topbar-clock-meta {
  color: #adb2b9;
}



html[data-theme="dark"]
.topbar-status {
  color: #b8bdc3;
}



html[data-theme="dark"]
.topbar-user-name {
  color: #f1f2f4;
}



html[data-theme="dark"]
.topbar-user-role {
  color: #adb2b9;
}



html[data-theme="dark"]
.topbar-user-menu-header strong {
  color: #f2f3f5;
}



html[data-theme="dark"]
.topbar-user-menu-header span {
  color: #aeb3ba;
}



html[data-theme="dark"]
.topbar-user-menu-item {
  color: #c9cdd2;
}



html[data-theme="dark"]
.topbar-user-menu-item:hover {
  color: #ffffff;
}



html[data-theme="dark"]
.topbar-icon-button {
  color: #d4d7dc;
}



html[data-theme="dark"]
.topbar-user-chevron {
  color: #b4b9c0;
}



html[data-theme="dark"]
.topbar-clock-separator {
  opacity: 0.72;
}.topbar-avatar-slot,
.topbar-user-menu-avatar-slot {
  flex: 0 0 auto;
}

.topbar-avatar,
.topbar-user-menu-avatar {
  position: relative;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-avatar {
  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  border-radius: 10px;
}

.topbar-user-menu-avatar {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 12px;
}

.topbar-avatar-image,
.topbar-user-menu-avatar-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}

.topbar-avatar-fallback,
.topbar-user-menu-avatar-fallback {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--topbar-primary, #111827);

  color: #ffffff;

  font-weight: 900;
}

.topbar-avatar-fallback {
  font-size: 11px;
}

.topbar-user-menu-avatar-fallback {
  font-size: 12px;
}

html[data-theme="dark"]
.topbar-avatar-fallback,
html[data-theme="dark"]
.topbar-user-menu-avatar-fallback {
  background: #f3f4f6;
  color: #111214;
}

.topbar-avatar.has-photo,
.topbar-user-menu-avatar.has-photo {
  background: transparent;
}

.topbar-avatar.has-photo {
  border:
    1px solid
    rgba(15, 23, 42, 0.10);
}

.topbar-user-menu-avatar.has-photo {
  border:
    1px solid
    rgba(15, 23, 42, 0.10);
}

html[data-theme="dark"]
.topbar-avatar.has-photo,
html[data-theme="dark"]
.topbar-user-menu-avatar.has-photo {
  border-color:
    rgba(255, 255, 255, 0.12);
}