.sidebar {
  width: 258px;
  padding: 27px 17px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 25%), #0a0a0b;
  border-right: 1px solid rgba(255, 255, 255, 0.075);
  box-shadow: 20px 0 50px rgba(0, 0, 0, 0.18);
}

.brand {
  gap: 14px;
  padding: 5px 13px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 18px;
}

.brand img {
  width: 178px;
  filter: invert(1) brightness(1.15);
}

.brand small {
  color: var(--gold);
  font-size: 8px;
  letter-spacing: 0.24em;
}

.sidebar nav {
  gap: 5px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px;
}

.nav-button {
  min-height: 46px;
  padding: 12px 14px;
  color: #999997;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 13px;
  transition: 0.2s ease;
}

.nav-button > span:first-child {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 20px;
}

.nav-icon {
  width: 17px;
  height: 17px;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.05);
  color: #fff;
  transform: translateX(2px);
}

.nav-button.active {
  background: linear-gradient(90deg, rgba(243, 189, 25, 0.16), rgba(243, 189, 25, 0.035));
  border-color: rgba(243, 189, 25, 0.2);
  color: #fff;
  box-shadow:
    inset 3px 0 var(--gold),
    0 10px 30px rgba(0, 0, 0, 0.12);
}

.sidebar-footer {
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.avatar {
  background: linear-gradient(145deg, #ffd64e, #d99b00);
  box-shadow: 0 7px 20px rgba(243, 189, 25, 0.18);
}

.sidebar-footer small {
  color: #8b8b88;
}

.main {
  margin-left: 258px;
}

.topbar {
  min-height: 88px;
  padding: 17px 34px;
  background: rgba(13, 13, 14, 0.91);
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.topbar:after {
  background: linear-gradient(90deg, var(--gold), transparent 34%) !important;
  opacity: 0.75;
  height: 1px !important;
}

.topbar h1 {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.eyebrow {
  color: var(--gold);
  letter-spacing: 0.19em;
  font-size: 9px;
}

.top-actions {
  gap: 10px;
}

.global-search {
  background: #151516 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.global-search input,
.global-search span {
  color: #d6d5d0 !important;
}

.global-search input {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.global-search input::placeholder {
  color: #777773;
}

.global-results,
.notification-panel {
  background: #1a1a1b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5) !important;
}

.signed-user {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.signed-user > span {
  background: #202022 !important;
  color: var(--gold) !important;
  border: 1px solid rgba(243, 189, 25, 0.16);
}

.icon-button,
.logout-button,
.install-button,
.sync-status {
  background: #161617 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #d9d8d4 !important;
}

.logout-button:hover,
.icon-button:hover,
.install-button:hover {
  border-color: rgba(243, 189, 25, 0.45) !important;
  color: var(--gold) !important;
}

.sync-status.saved i {
  background: #77c99b !important;
  box-shadow: 0 0 10px rgba(119, 201, 155, 0.45);
}

.content {
  max-width: 1560px;
  padding: 30px 34px 60px;
}

.toolbar {
  margin-bottom: 24px;
}

.toolbar h2,
.management-hero h2,
.executive-hero h2 {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 630;
  letter-spacing: -0.035em;
}

.toolbar p,
.management-hero p,
.executive-hero p {
  color: var(--muted);
  line-height: 1.55;
}

.button {
  min-height: 40px;
  border-radius: 9px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button.primary {
  color: #131313;
  background: linear-gradient(135deg, #ffd750, #e3a500);
  box-shadow: 0 9px 26px rgba(226, 165, 0, 0.16);
}

.button.primary:hover {
  color: #080808;
  background: linear-gradient(135deg, #ffe276, #f0b817);
}

.button.secondary {
  background: #1b1b1c;
  border-color: rgba(255, 255, 255, 0.11);
  color: #e4e3de;
}

.button.secondary:hover {
  border-color: rgba(243, 189, 25, 0.35);
}