:root {
  --cw-shell-bg: #03111f;
  --cw-shell-line: rgba(56, 189, 248, .17);
  --cw-shell-text: #f5fbff;
  --cw-shell-muted: #91a9bd;
  --cw-shell-cyan: #32d9f5;
}

.cw-shell-enabled { padding-top: 88px !important; }
.cw-menu-open { overflow: hidden !important; }

.cw-unified-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10000;
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px clamp(18px, 3vw, 48px);
  color: var(--cw-shell-text);
  background: rgba(6, 24, 43, .96);
  border-bottom: 1px solid var(--cw-shell-line);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .22);
  backdrop-filter: blur(20px);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.cw-unified-brand {
  flex: 0 0 auto;
  min-width: 188px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cw-shell-text);
  text-decoration: none;
}

.cw-unified-mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: -.06em;
  background: linear-gradient(145deg, #64d9ff 0%, #2a9cf4 54%, #3868ee 100%);
  border: 1px solid rgba(150, 228, 255, .35);
  box-shadow: 0 8px 24px rgba(44, 153, 255, .3), inset 0 1px rgba(255, 255, 255, .2);
}

.cw-unified-brand strong { display: block; font-size: 20px; font-weight: 950; line-height: 1.05; letter-spacing: -.035em; }
.cw-unified-brand small { display: block; margin-top: 5px; color: #63dfff; font-size: 10px; font-weight: 750; }

.cw-unified-main-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cw-unified-main-nav a,
.cw-unified-services summary,
.cw-unified-services nav a,
.cw-unified-account > a,
.cw-unified-mobile-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(100, 148, 187, .13);
  border-radius: 16px;
  color: #dce8f2;
  background: rgba(13, 38, 63, .72);
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.cw-unified-main-nav a:hover,
.cw-unified-services summary:hover,
.cw-unified-services nav a:hover,
.cw-unified-services nav a.is-active,
.cw-unified-mobile-panel a:hover,
.cw-unified-mobile-panel a.is-active {
  color: #fff;
  border-color: rgba(50, 217, 245, .55);
  background: linear-gradient(135deg, rgba(18, 91, 146, .8), rgba(9, 45, 78, .92));
  transform: translateY(-1px);
}

.cw-unified-services { position: relative; flex: 0 0 auto; }
.cw-unified-services summary { cursor: pointer; list-style: none; }
.cw-unified-services summary::-webkit-details-marker { display: none; }
.cw-unified-services summary::after { content: "⌄"; margin-left: 8px; color: #7ddfff; }
.cw-unified-services[open] summary { border-color: rgba(50, 217, 245, .5); background: rgba(17, 79, 123, .8); }
.cw-unified-services nav {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 220px;
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--cw-shell-line);
  border-radius: 20px;
  background: rgba(4, 20, 37, .99);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.cw-unified-services nav a { width: 100%; justify-content: flex-start; }

.cw-unified-account { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.cw-unified-account > a { min-height: 46px; color: #061522; background: #fff; border-color: rgba(255, 255, 255, .7); }
.cw-unified-account .cw-unified-admin { color: #ffd9e0; background: rgba(107, 44, 66, .35); border-color: rgba(255, 123, 151, .28); }
.cw-unified-account .cw-unified-user { color: #72e7ff; background: rgba(10, 43, 70, .9); border-color: rgba(50, 217, 245, .25); }
.cw-unified-avatar { width: 28px; height: 28px; margin-right: 8px; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 11, 25, .55); }

.cw-unified-menu {
  display: none;
  width: 46px;
  height: 46px;
  padding: 11px;
  border: 1px solid rgba(50, 217, 245, .24);
  border-radius: 15px;
  background: rgba(10, 43, 70, .92);
}
.cw-unified-menu span { display: block; height: 2px; margin: 4px 0; border-radius: 99px; background: #eaf8ff; transition: transform .18s ease, opacity .18s ease; }
.cw-unified-mobile-panel { display: none; }

.cw-shell-enabled .stream-sidebar { top: 88px; height: calc(100vh - 88px); }
.cw-shell-enabled .login-layout { min-height: calc(100vh - 88px); }
.cw-shell-enabled .shell > .topbar { justify-content: flex-end; }
.cw-shell-enabled .shell > .topbar .brand { display: none; }
.cw-generic .topbar { display: none; }
.cw-generic .shell { padding-top: 0; }

@media (max-width: 1450px) and (min-width: 1321px) {
  .cw-unified-brand { min-width: 158px; }
  .cw-unified-main-nav { gap: 5px; }
  .cw-unified-main-nav a { padding: 0 10px; font-size: 12px; }
  .cw-unified-account .cw-unified-admin { display: none; }
}

@media (max-width: 1320px) {
  .cw-shell-enabled { padding-top: 72px !important; }
  .cw-unified-header { min-height: 72px; padding: 10px 14px; }
  .cw-unified-brand { min-width: 0; margin-right: auto; }
  .cw-unified-brand strong { font-size: 17px; }
  .cw-unified-brand small { display: none; }
  .cw-unified-mark { width: 44px; height: 44px; border-radius: 14px; }
  .cw-unified-main-nav, .cw-unified-services, .cw-unified-account { display: none; }
  .cw-unified-menu { display: block; }
  .cw-unified-header.is-open { height: 100dvh; display: grid; grid-template-columns: 1fr auto; align-content: start; overflow-y: auto; background: rgba(3, 17, 31, .995); }
  .cw-unified-header.is-open .cw-unified-menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .cw-unified-header.is-open .cw-unified-menu span:nth-child(2) { opacity: 0; }
  .cw-unified-header.is-open .cw-unified-menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .cw-unified-header.is-open .cw-unified-mobile-panel { grid-column: 1 / -1; display: block; padding: 12px 0 28px; }
  .cw-unified-mobile-panel nav { display: grid; gap: 8px; }
  .cw-unified-mobile-panel a { width: 100%; min-height: 48px; justify-content: flex-start; }
  .cw-unified-mobile-title { margin: 20px 0 10px; color: #8ba4b8; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
  .cw-shell-enabled .stream-sidebar { top: 72px; height: calc(100vh - 72px); }
  .cw-shell-enabled .login-layout { min-height: calc(100vh - 72px); }
}
