@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap");
:root {
  --hp-font-body: "DM Sans", system-ui, sans-serif;
  --hp-font-heading: Manrope, system-ui, sans-serif;
  --hp-text: #27312d; --hp-background: #f6f7f4; --hp-surface: #fcfdf9;
  --hp-accent: #2e5d45; --hp-line: #e6e9e2; --hp-muted: #879088;
  --hp-border: var(--hp-line); --hp-accent-hover: #234c36; --hp-hover: #edf2ec;
  --hp-sidebar: #17201c; --hp-sidebar-width: 242px; --hp-header-height: 69px;
}
.workspace-chrome { font: 14px var(--hp-font-body); color: var(--hp-text); }
.workspace-chrome *, .workspace-chrome *::before, .workspace-chrome *::after { box-sizing: border-box; }
.workspace-chrome a { text-decoration: none; }
.workspace-chrome .sidebar { overflow-y: auto; z-index: 20; }
.workspace-chrome .nav-item { display: inline-flex; align-items: center; cursor: pointer; border-radius: 7px; }
.workspace-chrome button, .workspace-chrome select { font: inherit; cursor: pointer; }
.workspace-chrome a:focus-visible, .workspace-chrome button:focus-visible, .workspace-chrome select:focus-visible { outline: 2px solid #a4c4aa; outline-offset: 3px; }
.workspace-chrome .profile select { min-width: 0; width: 100%; }
.workspace-chrome .sidebar {
  width: var(--hp-sidebar-width);
  position: fixed;
  inset: 0 auto 0 0;
  background: #17201c;
  padding: 31px 20px 16px;
  color: #c0cabf;
  display: flex;
  flex-direction: column;
}
.workspace-chrome .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: Manrope, sans-serif;
  color: #f3f5ee;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.8px;
}
.workspace-chrome .brand-mark {
  display: flex;
  color: #a4c4aa;
}
.workspace-chrome .brand-dot {
  color: #86b091;
  margin-left: -8px;
}
.workspace-chrome .workspace-label {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 1.4px;
  color: #6f8176;
  margin: 40px 8px 13px;
}
.workspace-chrome .profile {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #354139;
  border-radius: 8px;
  padding: 11px 9px;
  margin-bottom: 23px;
}
.workspace-chrome .profile select {
  appearance: none;
  padding: 0;
  background: none;
  border: 0;
  color: #e0e6dd;
  font-size: 12px;
  font-weight: 550;
  flex: 1;
}
.workspace-chrome .profile select option {
  background: #17201c;
}
.workspace-chrome .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 7px;
  background: #3d5341;
  color: #dfe9d9;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.workspace-chrome .avatar.small {
  width: 25px;
  height: 25px;
}
.workspace-chrome .nav-item {
  background: none;
  border: 0;
  justify-content: flex-start;
  width: 100%;
  padding: 12px 13px;
  color: #9cafa2;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
  gap: 12px;
}
.workspace-chrome .nav-item:hover {
  background: #243028;
}
.workspace-chrome .nav-item.active {
  background: #2d4032;
  color: #e3eddd;
}
.workspace-chrome .nav-dot {
  width: 5px;
  height: 5px;
  background: #a9c5aa;
  border-radius: 50%;
  margin-left: auto;
}
.workspace-chrome .sidebar-bottom {
  margin-top: auto;
}
.workspace-chrome .sidebar-bottom .nav-item {
  font-size: 11px;
  padding: 11px 12px;
}
.workspace-chrome .account {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #2d382f;
  padding-top: 19px;
  margin-top: 14px;
}
.workspace-chrome .account-email {
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.workspace-chrome .account button {
  background: none;
  border: none;
  color: #7c9585;
  padding: 4px;
}

.workspace-chrome .topbar {
  height: 69px;
  border-bottom: 1px solid var(--hp-line);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fcfdf9;
  font-size: 11px;
  color: #727e74;
}
.workspace-chrome .slash {
  padding: 0 12px;
  color: #c2c9bc;
}
.workspace-chrome .connection {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}
.workspace-chrome .connection i {
  height: 6px;
  width: 6px;
  background: #beab6c;
  border-radius: 50%;
}
.workspace-chrome .connection i.online {
  background: #6b9873;
}

@media (min-width: 761px) and (max-width: 1100px) {
  :root { --hp-sidebar-width: 208px; }
  .workspace-chrome .sidebar { padding: 26px 14px; }
}
@media (max-width: 760px) {
  :root { --hp-sidebar-width: 0px; --hp-header-height: 50px; }
  .workspace-chrome .sidebar { position: static; width: 100%; padding: 17px; }
  .workspace-chrome .sidebar .brand { font-size: 20px; }
  .workspace-chrome .workspace-label, .workspace-chrome .profile .avatar, .workspace-chrome .nav-dot { display: none; }
  .workspace-chrome .profile { margin: 15px 0 10px; padding: 9px; }
  .workspace-chrome .sidebar nav { display: flex; gap: 6px; flex-wrap: wrap; }
  .workspace-chrome .sidebar nav .nav-item { width: auto; flex: 1 1 100px; }
  .workspace-chrome .nav-item { margin: 0; padding: 10px; font-size: 11px; justify-content: center; gap: 6px; }
  .workspace-chrome .topbar { height: 50px; padding: 0 20px; }
  .workspace-chrome .sidebar-bottom { margin-top: 10px; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
  .workspace-chrome .sidebar-bottom > .nav-item { width: auto; font-size: 9px; padding: 8px; }
  .workspace-chrome .account { margin: 0 0 0 auto; border: 0; padding: 0; max-width: 180px; }
  .workspace-chrome .account-email { max-width: 105px; }
}