@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&display=swap");

/* My Smart CRM: one branded HUD contract for every CRM screen.
   The native Groups screen is the visual source of truth. */
:root {
  --crm-hud-gradient: linear-gradient(135deg, #2f95ff 0%, #7a42f4 58%, #31c9e8 100%);
  --crm-hud-gradient-fullscreen: linear-gradient(90deg, #2f95ff 0%, #7a42f4 58%, #31c9e8 100%);
  --crm-hud-height: 92px;
  --crm-hud-radius: 28px;
  --crm-hud-shadow: 0 16px 34px rgba(82, 78, 240, 0.24);
}

.crmHud {
  box-sizing: border-box !important;
  min-height: var(--crm-hud-height) !important;
  padding: 20px 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: var(--crm-hud-gradient) !important;
  border: 0 !important;
  border-radius: 0 0 var(--crm-hud-radius) var(--crm-hud-radius) !important;
  box-shadow: var(--crm-hud-shadow) !important;
  text-align: center !important;
}

.crmHud .heroBrand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
}

.crmHud .heroBrand::before,
.crmHud .heroBrand::after,
.crmHud .heroBrand span,
.crmHud .heroDot {
  display: none !important;
  content: none !important;
}

.crmHud .heroBrand strong,
.crmHud > h1 {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: "Orbitron", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #fff !important;
}

html.crm-tg-native-fullscreen .crmHud {
  background: var(--crm-hud-gradient-fullscreen) !important;
}

/* Main React screens: Contacts, Sales, Finance, More and Assistant. */
.screen > .crmHud {
  margin: 0 -16px 22px !important;
}

/* Standalone privacy/legal screens use the same exact viewport geometry. */
.legalShell > .crmHud {
  margin: 0 -16px 22px !important;
}

html.crm-tg-native-fullscreen body.crmLegalBody,
html.crm-tg-native-fullscreen body:has(.legalShell) {
  background:
    var(--crm-hud-gradient-fullscreen) top left / 100% var(--crm-tg-safe-top, 0px) no-repeat,
    #f5f7fb !important;
}

@media (max-width: 380px) {
  .crmHud .heroBrand strong,
  .crmHud > h1 {
    font-size: 22px !important;
  }
}


/* Assistant keeps its page identity in content, never inside the global HUD. */
.crmHud .assistantHeroInner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
}

.crmHud .assistantHeroLabel {
  display: none !important;
}