/* screens: owned by one work stream; merged into v2.css later. */

/* Home of the cabinet, 1:1 with app.aipiebeauty.ru (CRM DashboardPage),
   values taken from the CRM code and scaled to the 0.72 mock window. */
.hero-app .app-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: 180px minmax(0, 1fr) 44px;
  background: #e8ebf7;
  color: #0b1030;
}
.hero-app .app-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 416px 96px at 74% 20%,
      #fffffff2 0%,
      #ffffff66 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 960px 288px at 70% 24%,
      #5a7cff 0%,
      #4a66f0 30%,
      #5a78ff73 55%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 512px 416px at 16% 82%,
      #96aaff80 0%,
      #96aaff3d 45%,
      transparent 72%
    ),
    radial-gradient(ellipse 560px 720px at 100% 60%, #aab9eb99 0%, transparent 70%),
    linear-gradient(180deg, transparent 55%, #cdd4f0e6 100%),
    #e8ebf7;
  transform: rotate(-10deg) scale(1.15);
  transform-origin: 70% 24%;
}
.phone-screen {
  color: #0b1030;
  background:
    radial-gradient(
      ellipse 300px 70px at 74% 12%,
      #fffffff2 0%,
      #ffffff66 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 560px 230px at 70% 14%,
      #5a7cff 0%,
      #4a66f0 30%,
      #5a78ff73 55%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 300px 320px at 16% 82%,
      #96aaff80 0%,
      #96aaff3d 45%,
      transparent 72%
    ),
    linear-gradient(180deg, transparent 55%, #cdd4f0e6 100%),
    #e8ebf7;
}
.home-main {
  color: #0b1030;
}
.hero-app .app-greeting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px 18px;
}
.greeting-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.greeting-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid #0b10301f;
  border-radius: 50%;
}
.greeting-icon .app-icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.4;
}
.hero-app .app-greeting h3,
.phone-home .app-greeting h3 {
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #0b1030;
}
.hero-app .app-greeting h3 {
  font-size: 34px;
}
.hero-app .date-pill {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.hero-app .date-pill,
.phone-home .date-pill {
  min-height: 0;
  padding: 6px 11px;
  font-size: 9.5px;
  color: #0b1030;
}
.home-main .app-pill:not(.glass-pill),
.home-main .channel-chip,
.phone-home .date-pill,
.phone-home .channel-chip {
  border: 1px solid #141e5a1a;
  background: #ffffff94;
  box-shadow:
    inset 0 1px 0 #fffffff2,
    inset 0 -1px 0 #141e5a0f,
    0 8px 24px -14px #141e5a40;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.hero-app .app-greeting .greeting-salon,
.phone-home .app-greeting .greeting-salon {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 10.5px;
  color: #0b10308c;
}
.greeting-salon > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.not-you {
  flex: none;
  font-size: 9.5px;
  font-weight: 500;
  color: #8a91a3;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.app-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 26px;
}
.rail-ai {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff8c;
  box-shadow:
    inset 0 0 0 1px #ffffffcc,
    inset 0 1px 0 #ffffff59,
    0 6px 16px -10px #141e5a73;
}
.rail-ai b {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: linear-gradient(150deg, #5a7cff, #2f52ff);
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rail-bill {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #e6ebff;
  color: #3b5bdb;
}
.rail-bill .app-icon {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
}
.hero-app .app-channels > span:first-child {
  font-size: 10.5px;
  color: #0b10308c;
}
.hero-app .channel-chip,
.phone-home .channel-chip {
  gap: 6px;
  padding: 4px 9px 4px 4px;
  font-size: 9.5px;
  font-weight: 400;
  line-height: 1.2;
  color: #0b1030;
}
.channel-chip b {
  font-weight: 600;
}
.hero-app .channel-chip small,
.phone-home .channel-chip small {
  color: #0b10308c;
  font-size: 9.5px;
}
.chip-ico {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff94;
  box-shadow: inset 0 1px 0 #ffffff99;
  filter: grayscale(1);
}
.channel-chip .chip-ico img {
  width: 12px;
  height: 12px;
  padding: 0;
  background: none;
}
.chip-check {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
}
.hero-app .home-grid {
  grid-template-columns: 5fr 7fr;
  gap: 13px;
}
.hero-app .contact-card,
.phone-home .contact-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(160deg, #3e60ff 0%, #2340d8 45%, #141f78 100%);
  box-shadow:
    inset 0 0 0 1px #ffffff2e,
    inset 0 1px 0 #ffffff47,
    0 20px 44px -12px #3e60ff73;
}
.hero-app .contact-card::before,
.phone-home .contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 45% at 18% 0%,
    #ffffff38 0%,
    transparent 70%
  );
}
.hero-app .contact-card,
.hero-app .chats-card {
  padding: 18px;
}
.home-main .app-card-heading h4,
.phone-home .app-card-heading h4 {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.home-main .app-card-heading > .app-icon,
.phone-home .app-card-heading > .app-icon {
  box-sizing: content-box;
  width: 13px;
  height: 13px;
  padding: 6px;
  border-radius: 50%;
  stroke-width: 1.5;
}
.home-main .contact-card .app-card-heading > .app-icon:first-child,
.phone-home .contact-card .app-card-heading > .app-icon:first-child {
  border: 1px solid #ffffff47;
}
.home-main .contact-card .app-card-heading > .app-icon:last-child,
.phone-home .contact-card .app-card-heading > .app-icon:last-child,
.kpi-go {
  border: 1px solid #ffffff33;
  background: #ffffff1a;
  box-shadow:
    inset 0 1px 0 #ffffff73,
    inset 0 -1px 0 #ffffff24,
    0 8px 24px -12px #02062899;
}
.home-main .chats-card .app-card-heading > .app-icon:first-child,
.phone-home .chats-card .app-card-heading > .app-icon:first-child {
  border: 1px solid #0b10301f;
}
.home-main .chats-card .app-card-heading > .app-icon:last-child,
.phone-home .chats-card .app-card-heading > .app-icon:last-child {
  border: 1px solid #141e5a1a;
  background: #ffffff94;
  box-shadow:
    inset 0 1px 0 #fffffff2,
    0 8px 24px -14px #141e5a40;
}
.hero-app .contact-count,
.phone-home .contact-count {
  gap: 4px 8px;
  margin: 14px 0 10px;
}
.hero-app .contact-count > span,
.phone-home .contact-count > span {
  font-size: 46px;
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.hero-app .contact-count small,
.phone-home .contact-count small {
  font-size: 10px;
  color: #ffffffb3;
}
.hero-app .contact-row,
.phone-home .contact-row {
  gap: 6px;
  min-height: 29px;
  padding: 3px 2px;
  border-top-color: #ffffff29;
  border-radius: 6px;
  font-size: 10.5px;
  color: #fff;
}
.hero-app .contact-row b,
.phone-home .contact-row b {
  flex: none;
  max-width: 55%;
  font-weight: 600;
}
.hero-app .contact-row > span,
.phone-home .contact-row > span {
  font-size: 9px;
  color: #ffffffb3;
}
.hero-app .contact-row i,
.phone-home .contact-row i {
  color: #fff;
  opacity: 0.55;
  font-size: 13px;
  line-height: 1;
}
.hero-app .contact-row.is-done i,
.phone-home .contact-row.is-done i {
  opacity: 1;
  color: #a8f1d7;
  font-size: 8.5px;
  font-weight: 600;
  white-space: nowrap;
}
.hero-app .contact-card .glass-pill,
.phone-home .contact-card .glass-pill {
  align-self: flex-start;
  min-height: 29px;
  margin-top: 3px;
  padding: 7px 12px;
  border: 1px solid #ffffff33;
  background: #ffffff1a;
  box-shadow:
    inset 0 1px 0 #ffffff73,
    0 8px 24px -12px #02062899;
  font-size: 9.5px;
  font-weight: 600;
}
.hero-app .contact-list {
  margin-bottom: 10px;
}
.hero-app .chats-card,
.phone-home .chats-card {
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px #0b10300f,
    inset 0 1px 0 #ffffffe6,
    0 18px 36px -14px #141e5a24;
}
.hero-app .chats-card .chat-list {
  column-gap: 18px;
  row-gap: 0;
  margin-top: 12px;
}
.home-main .app-chat-row,
.phone-home .app-chat-row {
  gap: 9px;
  padding: 7px 3px;
  border-top: 1px solid #0b103012;
  border-radius: 10px;
}
.home-main .app-avatar,
.phone-home .app-avatar {
  width: 29px;
  height: 29px;
  border: 1px solid #0b10301f;
  background: #0b10300d;
  box-shadow: none;
  color: #0b1030;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.home-main .app-avatar em,
.phone-home .app-avatar em {
  right: -3px;
  bottom: -3px;
  width: 13px;
  height: 13px;
  border: 0;
  background-size: 60%;
}
.home-main .chat-row-copy,
.phone-home .chat-row-copy {
  flex: 1;
  padding-right: 24px;
}
.home-main .chat-row-copy b,
.phone-home .chat-row-copy b {
  font-size: 10px;
  font-weight: 600;
}
.home-main .chat-row-copy small,
.phone-home .chat-row-copy small {
  max-width: none;
  margin-top: 3px;
  font-size: 9px;
  color: #0b10308c;
}
.home-main .chat-row-time,
.phone-home .chat-row-time {
  top: 8px;
  color: #0b10308c;
}
.home-main .unread,
.phone-home .unread {
  position: absolute;
  right: 4px;
  bottom: 8px;
}
.home-main .unread,
.phone-home .unread {
  width: auto;
  min-width: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #2f52ff;
  box-shadow: none;
  font-weight: 600;
}
.hero-app .period-card {
  margin-top: 13px;
  padding: 18px;
  border: 0;
  border-radius: 20px;
  background: #0b1030;
  box-shadow:
    inset 0 0 0 1px #96aaff1f,
    inset 0 1px 0 #ffffff0d,
    0 18px 36px -14px #00000a99;
}
.hero-app .period-card h4 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero-app .period-card h4 .app-icon {
  width: 13px;
  height: 13px;
  stroke-width: 1.4;
}
.hero-app .period-pills {
  gap: 5px;
}
.hero-app .period-pills .app-pill {
  min-height: 0;
  padding: 6px 11px;
  border: 1px solid #ffffff33;
  background: #ffffff1a;
  box-shadow:
    inset 0 1px 0 #ffffff73,
    inset 0 -1px 0 #ffffff24;
  color: #fff;
  font-size: 9.5px;
}
.hero-app .period-pills .app-pill[aria-pressed="true"] {
  background: #ffffff38;
  box-shadow:
    inset 0 1px 0 #ffffff73,
    0 0 0 1px #7c96ff73,
    0 8px 20px -8px #3e60ffe6;
  font-weight: 600;
}
.hero-app .home-kpis {
  gap: 12px;
  margin-top: 14px;
}
.hero-app .home-kpis .app-kpi {
  display: flex;
  flex-direction: column;
  min-height: 137px;
  padding: 14px;
  border: 0;
  border-radius: 20px;
  background: #ffffff08;
  box-shadow:
    inset 0 0 0 1px #96aaff14,
    inset 0 1px 0 #ffffff0f;
  container-type: inline-size;
}
.hero-app .kpi-label {
  justify-content: flex-start;
  gap: 7px;
  font-size: 10px;
  color: #fff;
}
.kpi-ico,
.kpi-go {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.kpi-ico {
  border: 1px solid #ffffff47;
}
.kpi-go {
  margin-left: auto;
}
.hero-app .kpi-label .app-icon {
  width: 13px;
  height: 13px;
  color: #fff;
  stroke-width: 1.5;
}
.hero-app .home-kpis .kpi-value {
  margin-top: auto;
  padding-top: 16px;
  font-size: clamp(22px, 17cqi, 46px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.hero-app .kpi-value small {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 400;
  color: #ffffffb3;
  letter-spacing: 0;
}
.hero-app .home-kpis .kpi-foot {
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.hero-app .kpi-foot > .kpi-delta {
  padding: 2px 6px;
  border-radius: 999px;
  background: #3e60ff33;
  color: #9db0ff;
  font-size: 9px;
  font-weight: 700;
}
.kpi-line,
.kpi-bars {
  flex: none;
  width: clamp(52px, 36cqi, 130px);
  height: 26px;
}
.kpi-line {
  overflow: visible;
}
.kpi-line .spark-stroke {
  stroke: #7c96ff;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px #3e60ff99);
}
.kpi-line .spark-area {
  fill: #7c96ff2e;
}
.kpi-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  background: linear-gradient(0deg, #ffffff0d 1px, transparent 1px) 0 0 / 100%
    33.333%;
}
.kpi-bars i {
  flex: 1;
  min-width: 2px;
  height: var(--h);
  border-radius: 2px;
  background: linear-gradient(180deg, #7c96ff, #2f52ff);
  transform-origin: 50% 100%;
}
.kpi-bars i:last-child {
  box-shadow: 0 0 8px #3e60ff99;
}
.is-drawing .kpi-bars i {
  animation: kpi-bar-grow 1s var(--ease) both;
}
.is-drawing .kpi-bars i:nth-child(n + 7) {
  animation-delay: 0.12s;
}
@keyframes kpi-bar-grow {
  from {
    transform: scaleY(0.08);
  }
}
.kpi-caption {
  margin-top: 6px;
  font-size: 9px;
  color: #ffffffb3;
}

/* Client card: a click on «Связаться сегодня» opens the client's chat. */
.client-panel {
  position: absolute;
  z-index: 5;
  top: 12px;
  bottom: 12px;
  left: 204px;
  right: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ffffffbf;
  border-radius: 22px;
  background: #ffffffa6;
  box-shadow:
    inset 0 1px 0 #fff,
    0 30px 60px -20px #141e5a66;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
.client-panel[hidden] {
  display: none;
}
.client-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #0b10300f;
}
.client-chat .live-bubbles {
  flex: 1;
}
.client-close,
.phone-chat .app-close {
  display: grid;
  place-items: center;
  flex: none;
}
.client-close {
  margin-left: auto;
}
.client-close .app-icon,
.phone-chat .app-close .app-icon {
  width: 14px;
  height: 14px;
}
.client-panel .client-chips > span,
.phone-chat .client-chips > span {
  padding: 2px 7px;
  border: 1px solid #e3e8f4;
  border-radius: 999px;
  background: #f7f8fc;
  color: #4d5875;
}
.client-panel .client-chips .client-alert,
.phone-chat .client-chips .client-alert {
  border-color: #f4d9a6;
  background: #fff6e4;
  color: #9a5d07;
  font-weight: 550;
}
.client-panel .live-composer,
.phone-chat .live-composer {
  gap: 7px;
}
.client-panel .composer-input,
.phone-chat .composer-input {
  min-height: 34px;
  line-height: 1.45;
  color: #27324f;
}
.client-panel .composer-tools,
.phone-chat .composer-tools {
  justify-content: flex-end;
  gap: 7px;
}
.client-panel .composer-ai,
.phone-chat .composer-ai {
  margin-left: 0;
}
.client-send {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: #0b1030;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  transition: background 0.18s;
}
.client-send:hover {
  background: #26305c;
}
.client-send.demo-hover,
.client-panel .composer-ai.demo-hover,
.phone-chat .composer-ai.demo-hover {
  box-shadow: 0 0 0 3px #3e60ff2e;
}
.client-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #0b10300f;
  font-size: 10px;
}
.client-facts > b {
  font-weight: 600;
}
.client-facts dl {
  margin: 0;
}
.client-facts dl > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #eef1f7;
}
.client-facts dt {
  color: #0b10308c;
}
.client-facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.client-source {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 9px;
  color: #0b10308c;
}
.client-source .yclients-glyph {
  width: 16px;
  height: 16px;
  background: #eef1fb;
}
.phone-chat:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.phone-chat .live-chat-head {
  align-items: center;
  border-bottom: 0;
  padding-bottom: 8px;
}
.phone-chat .client-chips {
  margin: 0;
  padding: 0 14px 10px;
  border-bottom: 1px solid #e7ebf4;
  font-size: 9px;
}
.phone-chat .live-bubbles {
  flex: 1;
}
.phone-chat .live-composer {
  padding-bottom: 22px;
  background: #fff;
}
.phone-chat .composer-input {
  font-size: 10px;
}
.phone-chat .composer-ai,
.phone-chat .client-send {
  font-size: 10px;
}

@media (min-width: 768px) and (max-width: 1100px) {
  .client-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .client-facts {
    display: none;
  }
}
@media (max-width: 767px) {
  .app-rail {
    display: none;
  }
  .hero-app .app-greeting {
    display: block;
  }
  .greeting-title {
    gap: 8px;
  }
  .hero-app .app-greeting h3 {
    font-size: 25px;
  }
  .hero-app .app-greeting .greeting-salon {
    margin-top: 8px;
  }
  .hero-app .date-pill {
    display: inline-flex;
    margin-top: 10px;
  }
  .hero-app .home-grid {
    grid-template-columns: 1fr;
  }
  .hero-app .chats-card .chat-list {
    grid-template-columns: 1fr;
  }
  .hero-app .period-card {
    padding: 16px;
  }
  .client-panel {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 8px;
  }
  .client-facts {
    display: none;
  }
  .client-panel .live-bubbles {
    min-height: 170px;
  }
}
.phone-home .greeting-salon {
  margin-top: 8px;
}
.phone-home .date-pill {
  display: inline-flex;
  margin-top: 10px;
}
.phone-home .contact-count > span {
  font-size: 40px;
}
.phone-home .contact-card {
  padding: 15px;
}
.phone-home .chats-card {
  padding: 16px;
}
.client-visits-title {
  margin-top: 6px;
  font-weight: 600;
}
.client-visits {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.client-visits li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 6px;
  padding: 7px 8px;
  border-radius: 10px;
  background: #f5f7fc;
  font-size: 9px;
}
.client-visits li > span:first-child {
  color: #0b10308c;
}
.client-visits li > span:nth-child(2) {
  grid-row: 2;
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-visits li > span:last-child {
  grid-row: 1;
  grid-column: 2;
  font-weight: 600;
}
/* The whole home stays inside the 16:10 mock window on desktop. */
@media (min-width: 768px) {
  .hero-app .app-channels {
    margin-block: 14px 13px;
  }
  .hero-app .contact-card,
  .hero-app .chats-card {
    padding: 16px;
  }
  .hero-app .contact-count {
    margin: 10px 0 7px;
  }
  .hero-app .contact-count > span {
    font-size: 42px;
  }
  .hero-app .contact-row {
    min-height: 26px;
  }
  .hero-app .contact-list {
    margin-bottom: 8px;
  }
  .hero-app .period-card {
    margin-top: 12px;
    padding: 16px;
  }
  .hero-app .home-kpis {
    margin-top: 12px;
  }
  .hero-app .home-kpis .app-kpi {
    min-height: 118px;
    padding: 12px;
  }
  .hero-app .home-kpis .kpi-value {
    padding-top: 12px;
  }
}

/* The hero window answers the cursor: hero-scene.js sets --mx/--my and a
   slight tilt, a soft light follows the pointer, cards lift, rows and
   controls light up. Movement stays off for touch and reduced motion. */
.hero-app .app-shell::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    #8fa6ff24,
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s;
}
.hero-app.is-pointer .app-shell::after {
  opacity: 1;
}
.hero-app :is(.app-menu-item, .app-chat-row, .channel-chip, .date-pill),
.hero-app :is(.contact-card, .chats-card, .home-kpis .app-kpi),
.hero-app :is(.kpi-go, .app-card-heading > .app-icon, .rail-ai, .greeting-icon),
.hero-app :is(.app-avatar, .contact-row i) {
  transition:
    transform 0.35s var(--ease),
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.35s,
    color 0.25s;
}
.hero-app .app-sidebar .app-menu-item:not(.selected):hover {
  background: #ffffff10;
  color: #fff;
}
.hero-app .home-main .app-chat-row:hover {
  background: #ffffff0a;
}
.hero-app .home-main .app-chat-row:hover .app-avatar {
  border-color: #7c96ff80;
  color: #fff;
}
.hero-app .contact-row:hover i {
  color: #fff;
}
.hero-app .home-main .channel-chip:hover,
.hero-app .date-pill:hover {
  border-color: #7c96ff80;
  box-shadow:
    inset 0 1px 0 #ffffff33,
    0 6px 18px -8px #3e60ffaa;
}
.hero-app .chats-card:hover {
  box-shadow:
    inset 0 0 0 1px #96aaff40,
    inset 0 1px 0 #ffffff14,
    0 28px 56px -18px #3e60ff59;
}
.hero-app .contact-card:hover {
  box-shadow:
    inset 0 0 0 1px #ffffff40,
    inset 0 1px 0 #ffffff5c,
    0 26px 56px -14px #3e60ffa6;
}
.hero-app .home-kpis .app-kpi:hover {
  border-color: #96aaff40;
  background: #ffffff08;
  box-shadow: 0 18px 36px -18px #3e60ff80;
}
.hero-app :is(.app-card, .app-kpi):hover :is(.kpi-go, .app-card-heading > .app-icon:last-child) {
  border-color: #9fb2ff;
  background: #3e60ff;
}
.hero-app .app-kpi:hover .spark-stroke {
  stroke: #b3c2ff;
  filter: drop-shadow(0 0 6px #6f8bffcc);
}
.hero-app .app-kpi:hover .kpi-bars i {
  animation: kpi-bar-grow 0.7s var(--ease) both;
}
.hero-app .app-kpi:hover .kpi-bars i:nth-child(n + 7) {
  animation-delay: 0.08s;
}
.hero-app .rail-ai:hover {
  box-shadow:
    inset 0 0 0 1px #ffffffcc,
    0 0 0 4px #3e60ff33,
    0 0 18px #6f8bff99;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-app {
    transform: perspective(1800px) rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg));
    transition: transform 0.7s var(--ease);
  }
  .hero-app .app-sidebar .app-menu-item:not(.selected):hover {
    transform: translateX(3px);
  }
  .hero-app .home-main .channel-chip:hover,
  .hero-app .date-pill:hover {
    transform: translateY(-2px);
  }
  .hero-app :is(.contact-card, .chats-card, .home-kpis .app-kpi):hover {
    transform: translateY(-3px);
  }
  .hero-app .home-main .app-chat-row:hover .app-avatar {
    transform: scale(1.08);
  }
  .hero-app .contact-row:hover i {
    transform: translateX(3px);
  }
  .hero-app :is(.app-card, .app-kpi):hover :is(.kpi-go, .app-card-heading > .app-icon:last-child) {
    transform: translate(1px, -1px);
  }
  .hero-app .rail-ai:hover {
    transform: scale(1.08);
  }
  .hero-app .app-greeting:hover .greeting-icon {
    transform: rotate(-18deg);
  }
}

/* #product windows in the dark theme of the cabinet, same tokens as the
   «Сообщения» window in #dashboard. */
.chat-stage :is(.messenger, .return-preview) {
  box-shadow:
    inset 0 1px 0 #ffffff0f,
    0 24px 48px -16px #00000a99,
    0 60px 100px -48px #3e60ff40;
}
.chat-stage .messenger {
  max-width: 470px;
}
.chat-stage :is(.messenger, .return-preview) .window-bar {
  color: #8d97b8;
  border-bottom-color: #ffffff10;
  background: linear-gradient(#141a35, #0e1328);
}
.chat-stage .messenger .window-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #a9bcff;
  background: #3e60ff2e;
}
.chat-stage .messenger-head {
  align-items: flex-start;
  padding: 14px 16px 12px;
  border-bottom-color: #ffffff14;
}
.chat-stage .avatar {
  position: relative;
  color: #c9d2f5;
  background: linear-gradient(#1b2142, #12162e);
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px #ffffff1f,
    inset 0 1px 0 #ffffff14;
}
.chat-stage .messenger-head .avatar em {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 15px;
  height: 15px;
  border: 2px solid #11162e;
  border-radius: 50%;
  background-position: center;
  background-size: 62%;
  background-repeat: no-repeat;
}
.chat-stage .messenger-head b {
  font-size: 13px;
  font-weight: 600;
}
.chat-stage .messenger-head small {
  color: #9db0ff;
}
.messenger-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.messenger-chips > span {
  padding: 3px 8px;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  color: #b9c3e3;
  background: #ffffff0a;
  font-size: 9.5px;
  line-height: 1.4;
}
.messenger-chips > .is-alert {
  border-color: #ffb2474d;
  color: #ffc46b;
  background: #ffb2471a;
}
.messenger-chips > .is-new {
  border-color: #3e60ff4d;
  color: #a9bcff;
  background: #3e60ff2e;
}
.chat-stage .conversation {
  height: 372px;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 16px 12px;
  overflow: hidden;
  background: #080b1c;
}
.chat-stage .conversation > * {
  flex: none;
}
.chat-stage .conversation-date {
  align-self: center;
  padding: 2px 9px;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  color: #98a4c2;
  background: #ffffff0f;
  font-size: 9.5px;
}
.chat-stage .bubble {
  max-width: 82%;
  font-size: 11.5px;
  box-shadow: none;
}
.chat-stage .incoming {
  color: #e8ecff;
  border: 1px solid #ffffff14;
  background: #161c38;
}
.chat-stage .incoming small {
  color: #8d97b8;
}
.chat-stage .outgoing {
  background: #3654ee;
}
.chat-stage .outgoing .bubble-author {
  color: #cdd7ff;
}
.chat-stage .outgoing small {
  color: #c7d2ff;
}
.chat-stage .product-typing {
  align-self: flex-end;
  padding: 8px 12px;
  border-radius: 14px 14px 6px;
  color: #9db0ff;
  background: #3e60ff2e;
}
.chat-stage .product-typing > i {
  background: #7c96ff;
}
.chat-stage .product-typing > span {
  background-image: linear-gradient(
    90deg,
    #8d97b8 10%,
    #7c96ff 40%,
    #e3e9ff 50%,
    #8d97b8 80%
  );
}
.chat-stage .chat-composer {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 10px 12px 12px;
  border: 0;
  border-top: 1px solid #ffffff14;
  border-radius: 0;
  background: none;
  color: #8d97b8;
}
.chat-stage .chat-composer > span:first-child::after {
  content: none;
}
.composer-route-mini,
.composer-ai-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  font-size: 9.5px;
}
.composer-route-mini b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #e8ecff;
  font-weight: 600;
}
.composer-route-mini em {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-position: center;
  background-size: 64%;
  background-repeat: no-repeat;
}
.composer-ai-mini {
  margin-left: auto;
  border-color: transparent;
  color: #fff;
  background: #3e60ff;
  box-shadow: 0 4px 12px -4px #3e60ff99;
  font-weight: 600;
}
.composer-ai-mini .app-icon {
  width: 11px;
  height: 11px;
}
.composer-field {
  flex: 1 1 60%;
  padding: 8px 12px;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  color: #8d97b8;
  background: #ffffff08;
}
.chat-stage .composer-arrow {
  width: 30px;
  height: 30px;
  color: #9db0ff;
  background: #3e60ff2e;
}
.chat-stage .appointment-note {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-stage .appointment-note.is-waiting {
  opacity: 0;
  transform: translateY(6px);
}
@media (max-width: 767px) {
  .chat-stage .messenger {
    transform: none;
  }
  .chat-stage .conversation {
    height: 340px;
    padding: 12px;
  }
  .chat-stage .bubble {
    font-size: 11px;
    max-width: 88%;
  }
  .messenger-chips > span,
  .composer-route-mini,
  .composer-ai-mini {
    font-size: 9px;
  }
  .composer-field {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-stage .appointment-note {
    transition: none;
  }
}
#panel-assistant .conversation {
  justify-content: flex-start;
}
@media (max-width: 767px) {
  #panel-assistant .conversation {
    height: 380px;
  }
}

/* Сайдбар демо-окон как в кабинете: группы РАБОТА / АНАЛИТИКА / НАСТРОЙКИ. */
.app-sidebar {
  padding: 14px 10px 10px;
  border-color: #fff;
  background: #f8f9fd;
  color: #1d2550;
}
.app-sidebar .salon-name {
  gap: 7px;
  padding: 0 2px 4px;
}
.salon-logo {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(150deg, #4d6bff, #1d3fe0);
  box-shadow: 0 3px 8px #2a48e540;
}
.salon-logo::after {
  content: "";
  position: absolute;
  inset: 6px 5px 6px 9px;
  border-radius: 999px;
  background: #fff;
}
.app-sidebar .salon-name b {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.app-sidebar .salon-name > .app-icon {
  width: 12px;
  height: 12px;
  color: #8a93ad;
}
.sidebar-collapse {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: 1px solid #e3e6f0;
  border-radius: 7px;
  color: #8a93ad;
  background: #fff;
}
.sidebar-collapse .app-icon {
  width: 13px;
  height: 13px;
}
.app-sidebar .sidebar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 8px 5px;
  color: #8f98b3;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sidebar-label .app-icon {
  width: 11px;
  height: 11px;
}
.app-sidebar .app-menu {
  gap: 1px;
}
.app-sidebar .app-menu-item {
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 500;
}
.app-sidebar .app-menu-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-icon.is-filled {
  fill: currentColor;
  stroke: none;
}
.app-sidebar .app-menu-item > .app-icon {
  width: 15px;
  height: 15px;
  color: #26306a;
}
.app-sidebar .app-menu-item.selected {
  border-color: #3e60ff;
  color: #2f52ff;
  font-weight: 600;
  background: #fff;
  box-shadow: 0 2px 6px #2f52ff1f;
}
.app-sidebar .app-menu-item.selected > .app-icon {
  color: #2f52ff;
}
.app-sidebar .app-menu-item em {
  padding: 2px 6px;
  background: #f0455a;
  font-size: 8px;
  font-weight: 600;
}
.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #e3e6f0;
}
.sidebar-foot .is-exit,
.app-sidebar .sidebar-foot .is-exit > .app-icon {
  color: #e5484d;
}

/* Dark theme of the cabinet (the CRM default): DashboardPage.module.scss glass tokens. */
.live-app.is-dark {
  color: #eef1ff;
  background: #070a1a;
  border-color: #ffffff14;
  box-shadow:
    inset 0 1px 0 #ffffff14,
    0 0 0 1px #00000a80,
    0 24px 64px -12px #00000acc,
    0 60px 100px -48px #3e60ff40;
}
.is-dark .app-chrome {
  background: linear-gradient(#141a35, #0e1328);
  border-bottom-color: #ffffff10;
  color: #8d97b8;
}
.is-dark .chrome-divider {
  color: #4a5272;
}
.is-dark .app-shell {
  background: #060818;
  color: #eef1ff;
}
.is-dark .app-shell::before {
  background:
    radial-gradient(ellipse 360px 90px at 74% 20%, #9fb2ff99 0%, #7c96ff40 40%, transparent 70%),
    radial-gradient(ellipse 960px 288px at 70% 24%, #3e60ff 0%, #2f4ae0b3 30%, #2340d84d 55%, transparent 76%),
    radial-gradient(ellipse 512px 416px at 16% 82%, #3e60ff33 0%, transparent 72%),
    linear-gradient(180deg, transparent 45%, #05071480 100%),
    #060818;
}
.is-dark .app-sidebar {
  border: 1px solid #96aaff1f;
  background: linear-gradient(180deg, #111630f2, #0b0f22f2);
  box-shadow: inset 0 1px 0 #ffffff0f, 0 24px 48px -16px #00000a99;
  color: #e8ecff;
}
.is-dark .app-sidebar .salon-name > .app-icon,
.is-dark .sidebar-collapse {
  color: #8d97b8;
}
.is-dark .sidebar-collapse {
  border-color: #ffffff1f;
  background: #ffffff0f;
}
.is-dark .app-sidebar .sidebar-label {
  color: #6f7aa0;
}
.is-dark .app-sidebar .app-menu-item > .app-icon {
  color: #c9d2f5;
}
.is-dark .app-sidebar .app-menu-item.selected {
  border-color: #ffffff2e;
  background: linear-gradient(#ffffff2e, #ffffff14);
  box-shadow: inset 0 1px 0 #ffffff40, 0 2px 8px #00000a66;
  color: #fff;
}
.is-dark .app-sidebar .app-menu-item.selected > .app-icon {
  color: #fff;
}
.is-dark .sidebar-foot {
  border-top-color: #ffffff14;
}
.is-dark .sidebar-foot .is-exit,
.is-dark .app-sidebar .sidebar-foot .is-exit > .app-icon {
  color: #ff6b70;
}
.is-dark .home-main,
.is-dark .app-greeting h3,
.is-dark .date-pill,
.is-dark .channel-chip {
  color: #eef1ff;
}
.is-dark .greeting-icon,
.is-dark .chats-card .app-card-heading > .app-icon:first-child {
  border-color: #ffffff2e;
}
.is-dark .app-greeting .greeting-salon,
.is-dark .app-channels > span:first-child,
.is-dark .channel-chip small,
.is-dark .chat-row-copy small {
  color: #8d97b8;
}
.is-dark .not-you,
.is-dark .chat-row-time {
  color: #6f7aa0;
}
.is-dark .home-main .app-pill:not(.glass-pill),
.is-dark .home-main .channel-chip,
.is-dark .chats-card .app-card-heading > .app-icon:last-child {
  border-color: #ffffff26;
  background: linear-gradient(#ffffff1a, #ffffff08);
  box-shadow: inset 0 1px 0 #ffffff26, 0 8px 24px -14px #00000acc;
}
.is-dark .chip-ico {
  background: #ffffff1f;
  box-shadow: inset 0 1px 0 #ffffff26;
  /* Brand marks are dark in the files; on the dark app they read as white. */
  filter: brightness(0) invert(1);
}
.is-dark .chats-card {
  background: linear-gradient(180deg, #111630, #0b0f22);
  box-shadow: inset 0 0 0 1px #96aaff1f, inset 0 1px 0 #ffffff0f, 0 24px 48px -16px #00000a99;
}
.is-dark .home-main .app-chat-row {
  border-top-color: #ffffff12;
}
.is-dark .home-main .app-avatar {
  border-color: #ffffff1f;
  background: linear-gradient(#1b2142, #12162e);
  color: #c9d2f5;
}
.is-dark .home-main .app-avatar em {
  box-shadow: 0 0 0 2px #0d1126;
}
.is-dark .period-card {
  background: #080b1a;
}

/* Dark theme of the five #dashboard windows. Same markup as the light cabinet,
   only the CRM glass tokens are substituted; scoped to .dashboard-stage so the
   hero window above keeps its own dark rules. */
.dashboard-stage .is-dark .app-shell {
  background:
    radial-gradient(ellipse 90% 65% at 65% 8%, #2c46dd8c, transparent 72%),
    linear-gradient(135deg, #101536, #070a1a 70%);
}
.dashboard-stage .is-dark .app-card {
  border-color: #96aaff1f;
  background: linear-gradient(180deg, #111630f2, #0b0f22f2);
  box-shadow:
    inset 0 1px 0 #ffffff0f,
    0 24px 48px -18px #00000a99;
}
.dashboard-stage .is-dark .app-pill,
.dashboard-stage .is-dark .date-filter button,
.dashboard-stage .is-dark .analytics-pills button {
  border-color: #ffffff1f;
  background: linear-gradient(#ffffff14, #ffffff05);
  box-shadow: inset 0 1px 0 #ffffff1f;
  color: #b9c3e3;
}
.dashboard-stage .is-dark .app-pill:hover,
.dashboard-stage .is-dark .date-filter button:hover,
.dashboard-stage .is-dark .analytics-pills button:hover {
  background: #ffffff1f;
  box-shadow: inset 0 1px 0 #ffffff2e;
  color: #fff;
}
.dashboard-stage .is-dark .analytics-pills {
  background: #ffffff0a;
  box-shadow: inset 0 0 0 1px #ffffff12;
}
.dashboard-stage .is-dark .analytics-pills button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.dashboard-stage .is-dark .analytics-pills button[aria-pressed="true"] {
  background: #ffffff1f;
  box-shadow: inset 0 1px 0 #ffffff2e;
  color: #fff;
}
.dashboard-stage .is-dark .date-filter {
  background: #ffffff0a;
  box-shadow: inset 0 0 0 1px #ffffff12;
}
.dashboard-stage .is-dark .app-page-title > span,
.dashboard-stage .is-dark .app-help {
  color: #8d97b8;
}

/* Messages */
.dashboard-stage .is-dark .inbox-search,
.dashboard-stage .is-dark .inbox-new {
  border-color: #ffffff1f;
  background: #ffffff0a;
  color: #8d97b8;
}
.dashboard-stage .is-dark .inbox-new {
  color: #c9d2f5;
}
.dashboard-stage .is-dark .inbox-tabs {
  background: #ffffff0a;
  box-shadow: inset 0 0 0 1px #ffffff12;
}
.dashboard-stage .is-dark .inbox-tabs .is-active {
  background: #ffffff1a;
  box-shadow: inset 0 1px 0 #ffffff2e;
}
.dashboard-stage .is-dark .inbox-tabs b {
  color: #c9d2f5;
}
.dashboard-stage .is-dark .inbox-tabs .is-active b {
  color: #9db0ff;
}
.dashboard-stage .is-dark .inbox-tabs small {
  color: #8d97b8;
}
.dashboard-stage .is-dark .inbox-channels > span {
  border-color: #ffffff1f;
  background-color: #ffffff0f;
  color: #9db0ff;
}
.dashboard-stage .is-dark .inbox-channels > .is-active {
  border-color: #6f8bff;
  box-shadow: 0 0 0 2px #3e60ff4d;
}
.dashboard-stage .is-dark .inbox-people .app-chat-row.is-active {
  background: #ffffff14;
}
.dashboard-stage .is-dark .app-avatar {
  border-color: #ffffff1f;
  background: linear-gradient(#1b2142, #12162e);
  box-shadow: inset 0 1px 0 #ffffff14;
  color: #c9d2f5;
}
.dashboard-stage .is-dark .app-avatar em {
  border-color: #11162e;
}
.dashboard-stage .is-dark .chat-row-copy small {
  color: #8d97b8;
}
.dashboard-stage .is-dark .chat-row-time {
  color: #6f7aa0;
}
.dashboard-stage .is-dark .chat-row-phone,
.dashboard-stage .is-dark .live-chat-head small {
  color: #9db0ff;
}
.dashboard-stage .is-dark .live-conversation {
  background: linear-gradient(180deg, #111630f2, #0b0f22f2);
}
.dashboard-stage .is-dark .live-chat-head {
  border-bottom-color: #ffffff14;
}
.dashboard-stage .is-dark .client-chips {
  color: #8d97b8;
}
.dashboard-stage .is-dark .client-chips .client-booked,
.dashboard-stage .is-dark .booking-confirmation {
  border-color: #2fcf9a40;
  background: #2fcf9a1f;
  color: #6fe0b4;
}
.dashboard-stage .is-dark .ai-chip {
  background: #3e60ff2e;
  color: #a9bcff;
}
.dashboard-stage .is-dark .live-bubbles {
  background: #080b1c;
}
.dashboard-stage .is-dark .live-bubbles .incoming {
  border-color: #ffffff14;
  background: #161c38;
  color: #e8ecff;
}
.dashboard-stage .is-dark .live-bubbles .incoming small {
  color: #8d97b8;
}
.dashboard-stage .is-dark .live-bubbles .conversation-date {
  border-color: #ffffff1f;
  background: #ffffff0f;
  color: #98a4c2;
}
.dashboard-stage .is-dark .live-bubbles .ai-typing {
  background: #3e60ff2e;
}
.dashboard-stage .is-dark .ai-typing {
  color: #9db0ff;
}
.dashboard-stage .is-dark .ai-typing > i {
  background: #7c96ff;
}
.dashboard-stage .is-dark .ai-typing > span {
  background-image: linear-gradient(
    90deg,
    #8d97b8 10%,
    #7c96ff 40%,
    #e3e9ff 50%,
    #8d97b8 80%
  );
}
.dashboard-stage .is-dark .live-composer {
  border-top-color: #ffffff14;
  color: #8d97b8;
}
.dashboard-stage .is-dark .route-pill,
.dashboard-stage .is-dark .composer-instr {
  border-color: #ffffff1f;
  color: #e8ecff;
}
.dashboard-stage .is-dark .route-pill > span {
  color: #8d97b8;
}
.dashboard-stage .is-dark .composer-tools {
  color: #c9d2f5;
}
.dashboard-stage .is-dark .composer-input {
  border-color: #ffffff1f;
  background: #ffffff08;
}
.dashboard-stage .is-dark .composer-send {
  background: #3e60ff2e;
  color: #9db0ff;
}
.dashboard-stage .is-dark .composer-send:hover {
  background: #3e60ff47;
}
.dashboard-stage .is-dark .input-caret {
  background: #8d97b8;
}

/* Campaigns */
.dashboard-stage .is-dark .campaign-label {
  color: #8d97b8;
}
.dashboard-stage .is-dark .campaign-label > span:last-child {
  color: #7f8aa8;
}
.dashboard-stage .is-dark .campaign-card {
  border-color: #96aaff26;
  background: linear-gradient(140deg, #151b3b, #0e1226);
}
.dashboard-stage .is-dark .campaign-card:hover,
.dashboard-stage .is-dark .campaign-card.demo-hover {
  box-shadow:
    inset 0 1px 0 #ffffff1f,
    0 0 0 1px #7c96ff40,
    0 16px 28px -14px #00000acc;
}
.dashboard-stage .is-dark .campaign-top {
  color: #7f8aa8;
}
.dashboard-stage .is-dark .manual-chip {
  border-color: #a694ff4d;
  background: #a694ff1f;
  color: #b9a4ff;
}
.dashboard-stage .is-dark .campaign-card > p {
  color: #8d97b8;
}
.dashboard-stage .is-dark .campaign-metrics {
  background: #ffffff08;
  box-shadow: inset 0 0 0 1px #ffffff0f;
}
.dashboard-stage .is-dark .campaign-metrics > span,
.dashboard-stage .is-dark .metric-chip,
.dashboard-stage .is-dark .campaign-footer > span {
  background: #ffffff12;
  color: #dfe5ff;
}
.dashboard-stage .is-dark .campaign-metrics small,
.dashboard-stage .is-dark .campaign-footer small {
  color: #98a4c2;
}
.dashboard-stage .is-dark .green,
.dashboard-stage .is-dark .campaign-metrics .green,
.dashboard-stage .is-dark .campaign-footer .green {
  background: #2fcf9a1f;
  color: #5fdcae;
}
.dashboard-stage .is-dark .red,
.dashboard-stage .is-dark .campaign-metrics .red {
  background: #ff6b7a24;
  color: #ff949e;
}
.dashboard-stage .is-dark .metric-chip:hover {
  box-shadow: 0 0 0 2px #2fcf9a3d;
}
.dashboard-stage .is-dark .campaign-footer {
  border-top-color: #ffffff14;
}
.dashboard-stage .is-dark .app-toggle {
  background: #2b3356;
  box-shadow: inset 0 1px 2px #00000a66;
}
.dashboard-stage .is-dark .app-toggle[aria-checked="true"] {
  background: linear-gradient(135deg, #8aa0ff, #4a67ff);
  box-shadow:
    inset 0 1px 0 #ffffff6b,
    0 3px 10px -2px #3e60ff80;
}
.dashboard-stage .is-dark .app-tooltip {
  background: #1b2444;
  box-shadow:
    inset 0 0 0 1px #ffffff1f,
    0 10px 28px #00000acc;
}

/* Marketing totals */
.dashboard-stage .is-dark .marketing-kpi {
  color: #eef1ff;
}
.dashboard-stage .is-dark .marketing-kpi:hover,
.dashboard-stage .is-dark .marketing-kpi.demo-hover {
  box-shadow:
    inset 0 1px 0 #ffffff1f,
    0 0 0 1px #7c96ff40,
    0 15px 35px -15px #00000acc;
}
.dashboard-stage .is-dark .marketing-kpi > span:first-child {
  color: #8d97b8;
}
.dashboard-stage .is-dark .marketing-kpi .app-icon {
  color: #7c96ff;
}
.dashboard-stage .is-dark .gradient-kpi .kpi-value {
  background-image: linear-gradient(100deg, #7c96ff, #a98bff 70%, #e08cf0);
}
.dashboard-stage .is-dark .gradient-kpi .kpi-value small {
  color: #d49bf0;
}
.dashboard-stage .is-dark .marketing-chips .app-pill {
  background: #ffffff0f;
  color: #b9c3e3;
}
.dashboard-stage .is-dark .kpi-value small {
  color: #8d97b8;
}
.dashboard-stage .is-dark .kpi-foot > span {
  color: #5fdcae;
}
.dashboard-stage .is-dark .chart-labels,
.dashboard-stage .is-dark .chart-days {
  color: #8d97b8;
}
.dashboard-stage .is-dark .chart-grid {
  stroke: #ffffff14;
}
.dashboard-stage .is-dark .revenue-line {
  stroke: #7c96ff;
}
.dashboard-stage .is-dark .revenue-area {
  fill: #7c96ff26;
}

/* Delivery panel */
.dashboard-stage .is-dark .delivery-scrim {
  background: #02040d8c;
}
.dashboard-stage .is-dark .delivery-panel {
  border-color: #96aaff26;
  background: linear-gradient(180deg, #111630, #0b0f22);
  box-shadow:
    inset 0 1px 0 #ffffff0f,
    -12px 4px 48px #00000ae6;
}
.dashboard-stage .is-dark .delivery-heading p,
.dashboard-stage .is-dark .delivery-row dt {
  color: #8d97b8;
}
.dashboard-stage .is-dark .app-close {
  border-color: #ffffff26;
  background: #ffffff0f;
  color: #c9d2f5;
}
.dashboard-stage .is-dark .app-close:hover {
  background: #ffffff1f;
}
.dashboard-stage .is-dark .delivery-intro {
  border-color: #3e60ff3d;
  background: #3e60ff14;
  color: #a8b3d6;
}
.dashboard-stage .is-dark .delivery-row {
  border-color: #ffffff14;
  background: #ffffff08;
}
.dashboard-stage .is-dark .delivery-name > span {
  color: #a79bff;
}
.dashboard-stage .is-dark .delivery-name .delivery-result {
  color: #5fdcae;
}
.dashboard-stage .is-dark .delivery-check {
  color: #7c96ff;
}