body {
  --card-s: 410px;
}

[class*=box_] {
  --sz: 160px;
  --top: calc(var(--sz) * -0.25);
  --shift: -40px;
  --br: 12px;
  width: var(--sz);
  height: var(--sz);
}

.box_1 {
  top: var(--top);
  left: calc((100% - var(--sz) - var(--card-s)) * 0.5);
  z-index: 1;
}

.box_2 {
  background: transparent;
  top: calc(var(--top) + var(--shift));
  left: calc((100% - var(--sz) - var(--card-s)) * 0.5 - var(--shift));
  z-index: 2;
}

.box_1, .box_4 {
  background: var(--pc2);
}

.box_2 {
  border: 1.5px solid var(--pc2);
}

.box_3 {
  border: 3px dashed var(--pc2);
  bottom: -50px;
  left: calc((100% - var(--sz) + var(--card-s)) * 0.5);
  z-index: 3;
}

.box_4 {
  --sz: 110px;
}

.auth-inner {
  --bw: 1px;
  --ps: 10px;
  --bc: var(--pc6);
  --label-w: 100%;
  --input-w: 100%;
  width: calc(100% - var(--sz) * 2);
  max-width: var(--card-s);
  background: var(--pc1);
  z-index: 4;
}
.auth-inner .fm .wrap .label {
  --pr: 0px;
}
.auth-inner a[data-mod] {
  --tx: var(--pc);
  white-space: wrap;
}
.auth-inner a[data-mod]:hover {
  opacity: 0.7;
}

#logTabs {
  --px: 20px;
  --br: 0px;
}
#logTabs div#rFm {
  --tx: var(--inv7);
  --fw: 500;
}
#logTabs div#rFm + form {
  flex-wrap: wrap;
}

@media screen and (max-width: 500px) {
  .order .auth-inner {
    width: auto;
  }
}
@media screen and (max-width: 330px) {
  #lFm .label a[data-mod] {
    max-width: 90px;
  }
}
