.dash-host {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  flex: 1;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.home {
  position: absolute;
  left: 0;
  top: 0;
  width: 1464px;
  height: 832px;
  transform-origin: top left;
  color: #fff;
  font-family: Montserrat, Inter, sans-serif;
}


.banner {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  height: clamp(150px, 40vw, 190px);
  border-radius: 24px;
  border: 0;
  background: transparent;
}

.chrome-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
  display: block;
}

.chrome-stroke__path {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.chrome-stroke--banner .chrome-stroke__path {
  rx: 23px;
  ry: 23px;
}

.chrome-stroke--card .chrome-stroke__path {
  rx: 19px;
  ry: 19px;
}

.banner--stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 764px;
  height: 385px;
  min-height: 0;
  border-radius: 59px;
}

@media (min-width: 640px) and (max-width: 1535px) {
  .banner:not(.banner--stage) {
    height: clamp(210px, 30vw, 280px);
  }

  .banner:not(.banner--stage) .banner__title {
    font-size: clamp(28px, 4.8vw, 40px);
  }

  .banner:not(.banner--stage) .banner__content {
    max-width: 42%;
    gap: 14px;
  }

  .banner:not(.banner--stage) .banner__btn {
    width: 180px;
    height: 42px;
    font-size: 16px;
    border-radius: 21px;
  }

  .banner:not(.banner--stage) .banner__vk {
    translate: 0 -8%;
  }
}

.banner__base {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  border: 0;
  box-shadow: none;
  background: linear-gradient(145deg, rgba(5, 15, 61, 0.45), rgba(0, 8, 34, 0.55));
  backdrop-filter: blur(40px);
}

.banner__half {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(90deg, #244fff 0%, #042fda 100%);
  clip-path: polygon(0 0, 22.8% 0, 58.6% 100%, 0 100%);
  pointer-events: none;
}

.banner__half::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 70% at 20% 30%, rgba(0, 149, 255, 0.35) 0%, transparent 65%);
}

.banner__chrome {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

.banner__dots {
  position: absolute;
  left: 4.6%;
  top: 9%;
  width: 7.7%;
  height: auto;
  aspect-ratio: 59 / 13;
  z-index: 5;
  pointer-events: none;
}

.banner--stage .banner__dots {
  left: 43px;
  top: 57px;
  width: 59px;
  height: 13px;
  aspect-ratio: auto;
}

.banner__vk {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform-origin: center center;
}

.banner__vk-glyph {
  position: absolute;
  left: 9.38%;
  top: 26.37%;
  width: 81.24%;
  height: 47.26%;
  display: block;
  object-fit: fill;
}

.banner__content {
  position: absolute;
  left: 4.6%;
  bottom: 7%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 34%;
}

.banner--stage .banner__content {
  left: 35px;
  bottom: 27px;
  gap: 18px;
  max-width: 347px;
}

.banner__title {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-size: clamp(17px, 4.8vw, 22px);
  font-weight: 800;
  line-height: 0.96;
  color: #fff;
  white-space: pre-line;
  -webkit-text-stroke: 1px rgba(0, 106, 255, 0.85);
  paint-order: stroke fill;
}

.banner--stage .banner__title {
  font-size: 45px;
}

.banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(140px, 100%);
  height: 34px;
  border: 1px solid #fff;
  border-radius: 17px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 300;
  text-decoration: none;
  cursor: pointer;
}

.banner--stage .banner__btn {
  width: 222px;
  height: 47px;
  border-radius: 23.5px;
  font-size: 20px;
}

.card-chrome {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}

.income {
  position: absolute;
  left: 822.77px;
  top: 10.41px;
  width: 641px;
  height: 384.386px;
  overflow: hidden;
  border-radius: 24px;
  background: transparent;
  backdrop-filter: blur(40px);
  box-sizing: border-box;
}

.income__head {
  position: absolute;
  left: 40.19px;
  top: 18.11px;
  right: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.income__head h2 {
  margin: 0;
  color: #d1d1d1;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.1422px;
}

.income__period {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #dbdbdb;
  font-size: 11.083px;
  font-weight: 700;
  letter-spacing: 0.0185px;
  cursor: pointer;
}

.income__period svg {
  width: 17.64px;
  height: 17.64px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transform: rotate(-90deg);
}

.income__rule {
  position: absolute;
  left: 40.19px;
  top: 50.1px;
  width: 563.371px;
  height: 0.739px;
  background: #e4e5e7;
  z-index: 2;
}

.income__chart {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.income__y {
  position: absolute;
  left: 40.19px;
  top: 79.87px;
  width: 24.207px;
  height: 203px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  font-size: 9.001px;
  font-weight: 600;
  text-align: right;
  line-height: 11.649px;
}

.income__plot {
  position: absolute;
  inset: 0;
}

.income__bar {
  position: absolute;
  top: 79.87px;
  width: 11.025px;
  height: 219.395px;
}

.income__track {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #f2f7ff;
}

/* Figma fill looks solid blue on white track — no CSS gradient wash */
.income__fill-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: 9999px;
  background: #1b59f8;
  opacity: 0.8;
  box-shadow: 0 0 9.236px rgba(0, 0, 0, 0.1);
}

.income__x {
  position: absolute;
  left: 0;
  top: 308px;
  right: 0;
  height: 20px;
}

.income__x span {
  position: absolute;
  transform: translateX(-50%);
  color: #838383;
  font-size: 8.313px;
  font-weight: 500;
  white-space: nowrap;
}

.metric {
  position: absolute;
  left: 1px;
  width: 351px;
  height: 109px;
  overflow: hidden;
  border-radius: 20px;
  backdrop-filter: blur(20px);
  background: transparent;
}

.metric__label,
.metric__value,
.metric__badge,
.metric__spark {
  z-index: 1;
}

.metric__label {
  position: absolute;
  left: 15px;
  top: 13px;
  margin: 0;
  color: #d1d1d1;
  font-size: 16.396px;
  font-weight: 500;
  line-height: 1.4;
  white-space: pre;
}

.metric__value {
  position: absolute;
  left: 15px;
  margin: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.metric__badge {
  position: absolute;
  left: 15px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2.05px 10.511px 2.05px 5.733px;
  border-radius: 24.594px;
  font-size: 15.289px;
  line-height: 1.4;
}

.metric__badge svg {
  width: 12.297px;
  height: 12.297px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.metric__badge.is-down {
  background: rgba(245, 37, 37, 0.15);
  color: #f52525;
}

.metric__badge.is-down svg {
  transform: rotate(135deg);
}

.metric__badge.is-up {
  padding-left: 4.099px;
  padding-right: 8.198px;
  background: rgba(38, 102, 99, 0.2);
  color: #6beba4;
}

.metric__badge.is-up svg {
  transform: rotate(45deg);
}

.metric__spark {
  position: absolute;
  width: 103.18px;
  height: 50.39px;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.metric__spark.is-flip {
  transform: rotate(-166.982deg);
  transform-origin: center center;
}

.online {
  position: absolute;
  left: 388px;
  top: 468px;
  width: 629px;
  height: 364px;
  overflow: hidden;
  border-radius: 20px;
  backdrop-filter: blur(20px);
  background: transparent;
}

.online__head {
  position: absolute;
  left: 23px;
  top: 17px;
  width: 583.132px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.online__head h2 {
  margin: 0;
  font-size: 20.495px;
  font-weight: 500;
  line-height: 1.4;
}

.online__tabs {
  display: flex;
  align-items: center;
}

.online__tabs button {
  padding: 8.198px 16.396px;
  border: 0;
  background: transparent;
  color: #898989;
  font-size: 14.347px;
  line-height: 1.4;
  cursor: pointer;
}

.online__tabs button.is-active {
  border-radius: 4.099px;
  background: #29292c;
  border-bottom: 0.956px solid #000;
  color: #fff;
  font-weight: 500;
}

.online__body {
  position: absolute;
  inset: 0;
}

.online__tick {
  position: absolute;
  left: 23px;
  width: 31px;
  color: #898989;
  font-size: 12.297px;
  line-height: 1.4;
  text-align: right;
}

.online__grid {
  position: absolute;
  left: 62.48px;
  width: 555.584px;
  height: 0.512px;
  overflow: visible;
  display: block;
  pointer-events: none;
}

/* Figma chart vectors 1:1177/1178 relative to card: 83.63, 80.27, 517.97Г—145.85 */
.online__line {
  position: absolute;
  left: 83.63px;
  top: 80.27px;
  width: 517.97px;
  height: 145.85px;
  display: block;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.mobile-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 0 0 28px;
  color: #fff;
  font-family: Montserrat, Inter, sans-serif;
}

.m-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  border: 0;
  background: linear-gradient(145deg, rgba(5, 15, 61, 0.55), rgba(0, 8, 34, 0.45));
  backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.m-card__chrome {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

.m-income {
  padding: 16px 14px 14px;
  overflow: hidden;
}

.m-income__head,
.m-income__plot,
.m-metric__text,
.m-metric__spark,
.m-online__head,
.m-online__tabs,
.m-online__plot {
  position: relative;
  z-index: 1;
}

.m-income__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  min-width: 0;
}

.m-income__head h2 {
  margin: 0;
  color: #d1d1d1;
  font-size: 15px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-income__period {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: #dbdbdb;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.m-income__period svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transform: rotate(-90deg);
}

.m-income__plot {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.m-income__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #c8c8c8;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  line-height: 1;
  height: 140px;
  padding: 4px 0;
}

.m-income__main {
  position: relative;
  min-width: 0;
}

.m-income__svg {
  display: block;
  width: 100%;
  height: 140px;
}

.m-income__x {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin-top: 8px;
  color: #aaa;
  font-size: 10px;
  font-weight: 700;
}

.m-income__x span {
  position: static;
  transform: none;
  flex: 1;
  min-width: 0;
  text-align: center;
  color: #9a9a9a;
  font-size: clamp(8px, 2.2vw, 11px);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

@media (min-width: 640px) {
  .m-income__y,
  .m-income__svg {
    height: 150px;
  }
}

.m-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  min-height: 104px;
  overflow: hidden;
}

.m-metric__text {
  min-width: 0;
}

.m-metric__label {
  margin: 0 0 8px;
  color: #d1d1d1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}

.m-metric__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.m-metric__value {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 700;
  line-height: 1.15;
}

.m-metric__badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px 4px 7px;
  border-radius: 24px;
  font-size: 13px;
  line-height: 1.4;
  flex-shrink: 0;
}

.m-metric__badge svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.m-metric__badge.is-down {
  background: rgba(245, 37, 37, 0.15);
  color: #f52525;
}

.m-metric__badge.is-down svg {
  transform: rotate(135deg);
}

.m-metric__badge.is-up {
  background: rgba(38, 102, 99, 0.2);
  color: #6beba4;
}

.m-metric__badge.is-up svg {
  transform: rotate(45deg);
}

.m-metric__spark {
  width: 96px;
  height: 44px;
  display: block;
  overflow: visible;
  pointer-events: none;
  flex-shrink: 0;
}

.m-metric__spark.is-flip {
  transform: none;
}

@media (max-width: 380px) {
  .m-metric {
    grid-template-columns: 1fr;
  }

  .m-metric__spark {
    width: 100%;
    max-width: 160px;
    height: 40px;
  }
}

.m-online {
  padding: 16px 14px 18px;
  overflow: visible;
}

.m-online__head h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.m-online__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.m-online__tabs button {
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #898989;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.m-online__tabs button.is-active {
  background: #29292c;
  color: #fff;
  font-weight: 500;
}

.m-online__plot {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: stretch;
  height: 180px;
}

.m-online__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;
  min-height: 160px;
  color: #a0a0a0;
  font-size: 11px;
  line-height: 1;
  text-align: right;
  padding: 4px 0;
}

.m-online__y span {
  display: block;
  white-space: nowrap;
}

.m-online__svg {
  display: block;
  width: 100%;
  height: 180px;
}

.m-dash { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.m-banner.banner { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; min-height: clamp(150px, 40vw, 190px); }
.m-banner .banner__vk { z-index: 3; }
.m-banner .banner__vk-glyph { filter: drop-shadow(0 0 8px rgba(255,255,255,.35)); }
.m-card { position: relative; overflow: hidden; border-radius: 20px; min-height: 140px; padding: 16px; background: linear-gradient(145deg, rgba(5,15,61,.55), rgba(0,8,34,.7)); }
.m-card > .chrome-stroke { z-index: 1; }
.m-income { min-height: 220px; }
.m-income__head, .m-online__head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.m-income__head h2, .m-online__head h2 { margin: 0; color: #d1d1d1; font-size: 16px; font-weight: 500; }
.m-income__bars { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 24px; padding: 0 8px; }
.m-income__bars i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #00C9FF, #0049E5); display: block; }
.m-online { min-height: 280px; }
.m-online__tabs { position: relative; z-index: 2; display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.m-online__tabs button { border: 1px solid transparent; border-radius: 8px; padding: 6px 12px; background: rgba(255,255,255,.08); color: #ccc; cursor: pointer; }
.m-online__tabs button.is-active { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.m-online__plot { position: relative; z-index: 2; height: 180px; display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: stretch; }

#dashHost:not(.is-ready) { visibility: hidden; }
#dashMobile { display: flex; }
#dashStage { display: none; }

@media (min-width: 1536px) {
  #dashMobile { display: none !important; }
  #dashStage {
    display: block !important;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
    flex: 1;
  }
}