@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 {
  /* CP72 LOCKED BRAND CONTRACT — approved by owner on 2026-10-23.
     NEVER alter hue, saturation or the feathered radial blend during UI passes.
     Android must consume equivalent stops during its separate port. */
  --crm-brand-blue: #2f95ff;
  --crm-brand-violet: #7a42f4;
  --crm-brand-cyan: #31c9e8;
  --crm-brand-gradient:
    radial-gradient(ellipse 95% 145% at 52% 45%,
      rgba(122,66,244,.54) 0%,
      rgba(122,66,244,.31) 37%,
      rgba(122,66,244,.10) 61%,
      rgba(122,66,244,0) 83%),
    linear-gradient(110deg, #2f95ff 0%, #499cf9 44%, #31c9e8 100%);
  --crm-brand-gradient-horizontal: var(--crm-brand-gradient);
  --crm-hud-gradient: var(--crm-brand-gradient);
  --crm-hud-gradient-fullscreen: var(--crm-brand-gradient);
  --crm-hud-height: 112px;
  --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: 28px 18px 30px !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 {
  min-height: calc(var(--crm-hud-height) + var(--crm-tg-safe-top, 0px)) !important;
  padding-top: calc(28px + var(--crm-tg-safe-top, 0px)) !important;
  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;
}


@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;
}


/* CP114: coherent blue caret across CRM text editors. */
:where(input:not([type="checkbox"]), textarea, [contenteditable="true"], [role="textbox"]) {
  caret-color: var(--crm-brand-blue, #2f95ff);
}