/* Live "Statistics" app screen (blocks/mockup-statistics); mockup-kit.css + app-shell.css. */

.sg-mkst {
  --mkst-line: #e4e4e7;
  --mkst-card: #ececef;
  --mkst-muted: #75757d;
  --mkst-violet: #773bfa;
}

/* ---- head ---- */

.sg-mkst__head {
  position: absolute;
  left: calc(96 * var(--u));
  top: calc(112 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
}

.sg-mkst__head .sg-mkapp__title { position: static; }

.sg-mkst__board {
  gap: calc(10 * var(--u));
  height: calc(48 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(15 * var(--u));
  border: calc(1 * var(--u)) solid var(--mkst-line);
  border-radius: calc(8 * var(--u));
  font-size: calc(20.3 * var(--u));
  color: #232326;
  line-height: inherit;
}

.sg-mkst__board svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2.2; }

.sg-mkst__live {
  position: absolute;
  right: calc(96 * var(--u));
  top: calc(114 * var(--u));
}

.sg-mkst__live i {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  margin-right: calc(2 * var(--u));
  border-radius: 50%;
  background: #f43547;
}

.sg-mkst__filters {
  position: absolute;
  left: calc(96 * var(--u));
  top: calc(172 * var(--u));
  display: flex;
  gap: calc(8 * var(--u));
}

.sg-mkst__f {
  display: flex;
  height: calc(36 * var(--u));
  border: calc(1 * var(--u)) solid var(--mkst-line);
  border-radius: calc(6 * var(--u));
}

.sg-mkst__f > span {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: 0 calc(10 * var(--u));
  color: #18181b;
}

.sg-mkst__f > span + span { border-left: calc(1 * var(--u)) solid var(--mkst-line); }
.sg-mkst__f > .is-label { color: var(--mkst-muted); }
.sg-mkst__f svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.sg-mkapp .sg-mkst__f .is-label svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 1.6; }

.sg-mkst__export {
  position: absolute;
  right: calc(96 * var(--u));
  top: calc(172 * var(--u));
  height: calc(36 * var(--u));
  font-size: inherit;
}

.sg-mkst__export svg,
.sg-mkst__live svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* ---- cards ---- */

.sg-mkst__card {
  position: absolute;
  border: calc(1 * var(--u)) solid var(--mkst-card);
  border-radius: calc(10 * var(--u));
  background: var(--mk-white);
}

.sg-mkst__card.is-main { left: calc(80 * var(--u)); top: calc(248 * var(--u)); width: calc(856 * var(--u)); height: calc(396 * var(--u)); }
.sg-mkst__card.is-top { left: calc(960 * var(--u)); top: calc(248 * var(--u)); width: calc(400 * var(--u)); height: calc(410 * var(--u)); padding: 0 calc(11 * var(--u)); }
.sg-mkst__card.is-links { left: calc(80 * var(--u)); top: calc(668 * var(--u)); width: calc(856 * var(--u)); height: calc(200 * var(--u)); padding: 0 calc(11 * var(--u)); }
.sg-mkst__card.is-peak { left: calc(960 * var(--u)); top: calc(682 * var(--u)); width: calc(400 * var(--u)); height: calc(200 * var(--u)); padding: 0 calc(13 * var(--u)); }

.sg-mkst__ic {
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  background: #efe9ff;
  color: var(--mkst-violet);
}

.sg-mkapp .sg-mkst__ic svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 2.2; }

.sg-mkst__h {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(52 * var(--u));
  font-size: calc(16.3 * var(--u));
  font-weight: 500;
  color: #232326;
}

/* ---- KPIs and chart ---- */

.sg-mkst__kpi {
  position: absolute;
  top: calc(23 * var(--u));
}

.sg-mkst__kpi.is-1 { left: calc(23 * var(--u)); }
.sg-mkst__kpi.is-2 { left: calc(433 * var(--u)); }

.sg-mkst__kpi > div:first-child {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: calc(12.3 * var(--u));
  color: var(--mkst-muted);
}

.sg-mkst__num {
  margin-top: calc(9 * var(--u));
  font-size: calc(30.5 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 700;
  letter-spacing: calc(-.5 * var(--u));
  color: #232326;
}

.sg-mkst__vs {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-top: calc(5 * var(--u));
  font-size: calc(11.3 * var(--u));
  color: var(--mkst-muted);
}

.sg-mkst__up {
  gap: calc(2 * var(--u));
  height: calc(20 * var(--u));
  padding: 0 calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #d0fedc;
  color: #157a3a;
  font-size: calc(11 * var(--u));
  line-height: inherit;
}

.sg-mkapp .sg-mkst__up svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); stroke-width: 2.6; }

.sg-mkst__chart {
  position: absolute;
  left: calc(11 * var(--u));
  top: calc(154 * var(--u));
  width: calc(832 * var(--u));
  height: calc(203 * var(--u));
}

.sg-mkapp .sg-mkst__chart svg { width: 100%; height: 100%; }

.sg-mkst__months {
  position: absolute;
  left: calc(11 * var(--u));
  top: calc(364 * var(--u));
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: calc(832 * var(--u));
  font-size: calc(12.3 * var(--u));
  text-align: center;
  color: #52525b;
}

/* ---- top users ---- */

.sg-mkst__user {
  display: flex;
  align-items: center;
  height: calc(58 * var(--u));
  border-bottom: calc(1 * var(--u)) solid #efeff1;
}

.sg-mkst__rank {
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  font-size: calc(12.3 * var(--u));
  color: #8e8e95;
}

.sg-mkapp .sg-mkst__rank svg { width: calc(20 * var(--u)); height: calc(22 * var(--u)); stroke: none; }

.sg-mkst__user .sg-mk-avatar { --mk-av: calc(34 * var(--u)); margin: 0 calc(10 * var(--u)) 0 calc(9 * var(--u)); }

.sg-mkst__who { flex: 1; min-width: 0; }
.sg-mkst__who b { display: block; font-size: calc(13.3 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 600; color: #232326; }
.sg-mkst__who span { display: block; font-size: calc(11.3 * var(--u)); line-height: calc(16 * var(--u)); color: #8e8e95; }

.sg-mkst__clicks { padding-right: calc(2 * var(--u)); font-size: calc(13.8 * var(--u)); font-weight: 600; color: #232326; }

.sg-mkst__all { margin-top: calc(12 * var(--u)); }

/* ---- top links ---- */

.sg-mkst__link {
  display: flex;
  justify-content: space-between;
  padding: 0 calc(1 * var(--u));
  line-height: calc(20 * var(--u));
  color: #232326;
}

.sg-mkst__bar {
  height: calc(16 * var(--u));
  margin: calc(4 * var(--u)) 0 calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #f1eafe;
  overflow: hidden;
}

.sg-mkst__bar i { display: block; height: 100%; border-radius: inherit; background: var(--mkst-violet); }
.sg-mkst__bar.is-blue { background: #e7f0fe; }
.sg-mkst__bar.is-blue i { background: #1977f2; }

/* ---- peak hours ---- */

.sg-mkst__heat {
  display: grid;
  grid-template-columns: calc(82 * var(--u)) repeat(7, calc(38 * var(--u)));
  gap: calc(4 * var(--u));
  font-size: calc(12.3 * var(--u));
  line-height: calc(24 * var(--u));
  color: #3f3f46;
}

.sg-mkst__heat i { height: calc(24 * var(--u)); border-radius: calc(3 * var(--u)); background: #efeafe; }
.sg-mkst__heat .is-1 { background: #c8b3fa; }
.sg-mkst__heat .is-2 { background: #ab86f7; }
.sg-mkst__heat .is-3 { background: #9466f5; }