/* Live template editor screens (blocks/mockup-template-editor and mockup-template-assign); mockup-kit.css + app-shell.css. */

.sg-mktp {
  --mktp-line: #e4e4e7;
  --mktp-dash: #d6d6d6;
}

/* ---- head: title, name field, size badge, Cancel / Save ---- */

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

.sg-mktp__head .sg-mkapp__title { position: static; margin-right: calc(1 * var(--u)); }

.sg-mktp__name {
  width: calc(400 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(11 * var(--u));
  border: calc(1 * var(--u)) solid var(--mktp-line);
  border-radius: calc(7 * var(--u));
  line-height: calc(42 * var(--u));
  font-size: calc(14.5 * var(--u));
  color: #27272a;
}

.sg-mktp__size {
  gap: calc(6 * var(--u));
  height: calc(32 * var(--u));
  padding: 0 calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #d0fedc;
  color: #157a3a;
  font-size: calc(14 * var(--u));
  line-height: inherit;
}

.sg-mktp__size svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 1.8; }

.sg-mktp__actions {
  position: absolute;
  right: calc(96 * var(--u));
  top: calc(112 * var(--u));
  display: flex;
  gap: calc(6 * var(--u));
}

.sg-mktp__save {
  height: calc(44 * var(--u));
  padding-left: calc(12 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #09090b;
  color: var(--mk-white);
  font-size: calc(16.3 * var(--u));
  font-weight: 500;
  line-height: inherit;
}

.sg-mktp__save svg {
  box-sizing: content-box;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin-left: calc(10 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(4 * var(--u));
  stroke-width: 2.4;
}

/* ---- tabs ---- */

.sg-mktp__tabs {
  position: absolute;
  left: calc(96 * var(--u));
  top: calc(180 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: calc(1248 * var(--u));
  height: calc(44 * var(--u));
  padding: calc(4 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #f3f3f5;
}

.sg-mktp__tabs span {
  border-radius: calc(5 * var(--u));
  line-height: calc(36 * var(--u));
  text-align: center;
  color: #18181b;
}

.sg-mktp__tabs .is-active { background: var(--mk-white); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / .04); }

/* ---- editor: element palette ---- */

.sg-mktp__tools {
  position: absolute;
  left: calc(96 * var(--u));
  top: calc(280 * var(--u));
  display: grid;
  gap: calc(12 * var(--u));
}

.sg-mktp__tool {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border: calc(1 * var(--u)) solid var(--mktp-line);
  border-radius: calc(7 * var(--u));
  background: var(--mk-white);
  color: #51525a;
  font-size: calc(15 * var(--u));
  font-weight: 600;
}

.sg-mkapp .sg-mktp__tool > svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); fill: currentColor; stroke: none; }

.sg-mktp__move {
  position: absolute;
  left: calc(36 * var(--u));
  top: calc(36 * var(--u));
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  background: #eee9ff;
  color: #773bfa;
}

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

/* ---- editor: signature canvas ---- */

.sg-mktp__sig {
  position: absolute;
  left: calc(212 * var(--u));
  top: calc(291 * var(--u));
  width: calc(528 * var(--u));
  height: calc(144 * var(--u));
  padding: calc(11 * var(--u));
  border: calc(1 * var(--u)) dashed var(--mktp-dash);
}

.sg-mktp__sig > div {
  display: flex;
  gap: calc(9 * var(--u));
  height: 100%;
  padding: calc(11 * var(--u));
  border: calc(1 * var(--u)) dashed var(--mktp-dash);
}

.sg-mktp__cell {
  border: calc(1 * var(--u)) dashed var(--mktp-dash);
}

.sg-mktp__photo {
  display: grid;
  place-items: center;
  width: calc(83 * var(--u));
}

.sg-mktp__photo span {
  display: grid;
  place-items: center;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  border-radius: 50%;
  background: #e3effd;
  color: #8fa8cb;
}

.sg-mkapp .sg-mktp__photo svg { width: calc(46 * var(--u)); height: calc(46 * var(--u)); fill: currentColor; stroke: none; }

.sg-mktp__text {
  flex: 1;
  padding: calc(14 * var(--u)) calc(20 * var(--u)) 0;
  font-size: calc(12.4 * var(--u));
  line-height: calc(16 * var(--u));
  color: #b1b1b6;
}

.sg-mktp__text b { display: block; margin-bottom: calc(1 * var(--u)); font-size: calc(14.6 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 700; color: #116b5b; }
.sg-mktp__text i { display: block; font-style: normal; font-weight: 600; color: #7c7c83; }

.sg-mktp__social {
  display: grid;
  align-content: center;
  gap: calc(3 * var(--u));
  width: calc(28 * var(--u));
  justify-items: center;
}

.sg-mktp__social span {
  display: grid;
  place-items: center;
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
  border-radius: 50%;
  background: #2980ba;
  color: var(--mk-white);
}

.sg-mkapp .sg-mktp__social svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); fill: currentColor; stroke: none; }

/* ---- assign: group search and tree ---- */

.sg-mktp__search {
  position: absolute;
  left: calc(96 * var(--u));
  top: calc(248 * var(--u));
  width: calc(1060 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: calc(1 * var(--u)) solid var(--mktp-line);
  border-radius: calc(7 * var(--u));
  line-height: calc(42 * var(--u));
  font-size: calc(14.5 * var(--u));
  color: #a1a1aa;
}

.sg-mktp__all {
  position: absolute;
  right: calc(120 * var(--u));
  top: calc(248 * var(--u));
}

.sg-mktp__tree {
  position: absolute;
  left: calc(96 * var(--u));
  top: calc(304 * var(--u));
  width: calc(1224 * var(--u));
}

.sg-mktp__group {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(40 * var(--u));
  margin-bottom: calc(12 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(11 * var(--u));
  border: calc(1 * var(--u)) solid var(--mktp-line);
  border-radius: calc(5 * var(--u));
  font-weight: 500;
  color: #18181b;
}

.sg-mktp__group.is-on { border-color: #ddd3fb; background: #ede8fd; }
.sg-mktp__group.is-l1 { margin-left: calc(32 * var(--u)); }
.sg-mktp__group.is-l2 { margin-left: calc(69 * var(--u)); }

.sg-mktp__group.is-l1::before,
.sg-mktp__group.is-l2::before {
  content: "";
  position: absolute;
  left: calc(-22 * var(--u));
  bottom: 50%;
  width: calc(21 * var(--u));
  height: calc(33 * var(--u));
  border-left: calc(1 * var(--u)) solid var(--mktp-line);
  border-bottom: calc(1 * var(--u)) solid var(--mktp-line);
  border-bottom-left-radius: calc(5 * var(--u));
}

.sg-mktp__group.is-l2::before { left: calc(-20 * var(--u)); width: calc(19 * var(--u)); }
.sg-mktp__group.is-tail::before { height: calc(189 * var(--u)); }

.sg-mktp__box {
  display: grid;
  place-items: center;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border: calc(1 * var(--u)) solid #d4d4d8;
  border-radius: calc(4 * var(--u));
  background: var(--mk-white);
  color: var(--mk-white);
}

.sg-mktp__group.is-on .sg-mktp__box { border-color: #773bfa; background: #773bfa; }
.sg-mkapp .sg-mktp__box svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); stroke-width: 3; }

.sg-mkapp .sg-mktp__group > svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); margin-left: auto; color: #3f3f46; }
.sg-mkapp .sg-mktp__group > svg.is-right { color: #8e8e95; }