:root{
  --bg:#050505;
  --bg-soft:#0b0d12;
  --panel:#101010;
  --panel-2:#141414;
  --panel-3:#181818;

  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --text:#ffffff;
  --muted:#a8a8a8;
  --muted-2:#cfcfcf;

  --blue:#2f7cff;
  --blue-2:#5ca3ff;

  --wolt:#12b5ff;
  --glovo:#ffd33d;
  --uber:#1ed760;
  --bolt:#2fd36b;
  --stuart:#4c80ff;

  --green:#2fe870;
  --red:#ff7c7c;

  --radius-xl:32px;
  --radius-lg:26px;
  --radius-md:20px;
  --radius-sm:16px;

  --shadow:0 20px 60px rgba(0,0,0,.35);
  --shadow-soft:0 12px 28px rgba(0,0,0,.22);

  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(24,63,128,.22), transparent 45%),
    radial-gradient(1000px 480px at 100% 0%, rgba(20,54,112,.16), transparent 48%),
    linear-gradient(180deg,#050505 0%, #06090f 100%);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

.hidden{
  display:none !important;
}

.esPage{
  width:100%;
}

.esWrap{
  width:100%;
  max-width:none;
  padding:26px 34px 140px;
}

/* fixed buttons */

.esMenuBtn,
.esProfileBtn{
  position:fixed;
  top:14px;
  z-index:9998;
  height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(20,20,20,.88);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 25px rgba(0,0,0,.24);
}

.esMenuBtn{
  right:14px;
  width:48px;
  display:grid;
  place-items:center;
  color:#fff;
  cursor:pointer;
}

.esMenuIco{
  font-size:18px;
  line-height:1;
  font-weight:900;
}

.esProfileBtn{
  right:72px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  color:#fff;
}

.esProfileTxt{
  font-weight:800;
  font-size:13px;
}

/* menu */

.esMenuOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(5px);
  z-index:9997;
}

.esMenu{
  position:fixed;
  top:14px;
  right:14px;
  width:min(360px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:#101010;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  z-index:9999;
}

.esMenuHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.esMenuBrand{
  display:flex;
  align-items:center;
  gap:10px;
}

.esMenuMark{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  font-weight:1000;
  color:#fff;
}

.esMenuTitle{
  font-size:15px;
  font-weight:900;
}

.esMenuClose{
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:#181818;
  color:#fff;
  cursor:pointer;
}

.esMenuNav{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
}

.esMenuLink{
  border:1px solid rgba(255,255,255,.08);
  background:#171717;
  min-height:46px;
  padding:0 14px;
  border-radius:14px;
  display:flex;
  align-items:center;
  color:#fff;
  font-weight:800;
  font-size:14px;
}

html.esMenuOpen{
  overflow:hidden;
}

/* topbar */

.esTopBar{
  width:100%;
  margin-bottom:22px;
}

.esTopBarInner{
  width:100%;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(19,46,93,.30) 0%, rgba(8,8,8,.0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding:32px;
  box-shadow:var(--shadow-soft);
  display:flex;
  justify-content:space-between;
  gap:26px;
  align-items:flex-start;
}

.esTopLeft{
  min-width:0;
}

.esEyebrow{
  color:#8ab8ff;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.esTitle{
  margin-top:10px;
  font-size:54px;
  line-height:.95;
  font-weight:1000;
  letter-spacing:-.05em;
  max-width:820px;
}

.esLead{
  margin-top:16px;
  max-width:800px;
  font-size:19px;
  line-height:1.6;
  color:var(--muted);
}

.esTopActions{
  display:flex;
  gap:12px;
  flex-shrink:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.esTopBtn{
  min-height:50px;
  padding:0 18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
}

.esTopBtnGhost{
  background:#121212;
  color:#fff;
}

.esTopBtnPrimary{
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff;
  box-shadow:0 12px 28px rgba(47,124,255,.22);
  border:0;
}

/* layout */

.esLayout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:22px;
  align-items:start;
}

.esMainCol,
.esSideCol{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* cards */

.esCard,
.esPreviewCard,
.esSideCard{
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:#101010;
  padding:24px;
  box-shadow:var(--shadow-soft);
}

.esCardHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.esCardTitle{
  font-size:28px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.04em;
}

.esCardSub{
  margin-top:7px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

/* controls */

.esRangeTabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}

.esRangeTab{
  min-height:48px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:#121212;
  color:#fff;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
}

.esRangeTab.isActive{
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  border-color:transparent;
}

.esGrid{
  display:grid;
  gap:16px;
}

.esRangeGrid{
  grid-template-columns:1fr 1fr;
}

.esField{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.esFieldLabel{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.esInput{
  width:100%;
  min-height:52px;
  padding:0 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:#151515;
  color:#fff;
  outline:none;
}

.esInput:focus{
  border-color:rgba(92,163,255,.55);
  box-shadow:0 0 0 3px rgba(92,163,255,.16);
}

.esOptionsGrid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}

.esCheckCard{
  min-height:62px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:#141414;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

.esCheckCard input{
  width:18px;
  height:18px;
  accent-color:var(--blue);
  flex-shrink:0;
}

.esAppPills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.esAppPill{
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:#151515;
  color:#fff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.esAppPill.isOn{
  border-color:transparent;
  color:#081018;
}

.esAppPillDot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:currentColor;
  flex-shrink:0;
}

.esStyleGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.esStyleCard{
  min-height:110px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:#141414;
  color:#fff;
  padding:18px;
  text-align:left;
  cursor:pointer;
}

.esStyleCard.isActive{
  background:linear-gradient(135deg, rgba(47,124,255,.22), rgba(92,163,255,.12));
  border-color:rgba(92,163,255,.35);
}

.esStyleName{
  font-size:20px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.03em;
}

.esStyleDesc{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

/* actions */

.esActionsRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.esActionBtn{
  min-height:50px;
  padding:0 18px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#151515;
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

.esActionBtnPrimary{
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  border:0;
}

/* preview */

.esPreviewCard{
  position:sticky;
  top:24px;
  background:
    linear-gradient(180deg, rgba(47,124,255,.14), rgba(16,16,16,1) 38%),
    #101010;
}

.esPreviewOverline{
  color:#8ab8ff;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.esPreviewTitle{
  margin-top:10px;
  font-size:30px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.04em;
}

.esPreviewWrap{
  margin-top:20px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:#0d0f16;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#esPreviewCanvas{
  width:min(100%, 320px);
  height:auto;
  aspect-ratio:1080 / 1920;
  display:block;
  border-radius:18px;
  box-shadow:0 16px 32px rgba(0,0,0,.28);
  background:#070a12;
}

.esPreviewMeta{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

/* side cards */

.esSideHead{
  margin-bottom:16px;
}

.esSideTitle{
  font-size:24px;
  line-height:1.02;
  font-weight:1000;
  letter-spacing:-.03em;
}

.esHintList{
  display:grid;
  gap:10px;
  padding-left:18px;
  color:#fff;
  font-size:14px;
  line-height:1.55;
}

.esPromoCard{
  background:
    linear-gradient(180deg, rgba(47,124,255,.14), rgba(16,16,16,1) 38%),
    #101010;
}

.esPromoOverline{
  color:#8ab8ff;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.esPromoTitle{
  margin-top:10px;
  font-size:28px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.04em;
}

.esPromoText{
  margin-top:14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.esPromoBtn{
  margin-top:18px;
  min-height:52px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff;
  font-weight:900;
  font-size:14px;
  box-shadow:0 12px 28px rgba(47,124,255,.22);
}

/* mobile bar */

.esMobileBar{
  display:none;
}

/* responsive */

@media (max-width: 1380px){
  .esTitle{
    font-size:48px;
  }

  .esOptionsGrid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 1180px){
  .esWrap{
    padding-left:22px;
    padding-right:22px;
  }

  .esLayout{
    grid-template-columns:1fr;
  }

  .esPreviewCard{
    position:static;
  }
}

@media (max-width: 860px){
  .esWrap{
    padding:14px 14px calc(130px + var(--safe-bottom));
  }

  .esMenuBtn,
  .esProfileBtn{
    top:calc(env(safe-area-inset-top, 0px) + 10px);
    background:rgba(20,20,20,.86) !important;
    border:1px solid rgba(255,255,255,.08) !important;
  }

  .esMenuBtn{
    right:12px;
  }

  .esProfileBtn{
    right:66px;
    padding:0 14px;
  }

  .esProfileTxt{
    display:none;
  }

  .esTopBarInner{
    padding:22px 18px;
    border-radius:28px;
    gap:18px;
    flex-direction:column;
  }

  .esTitle{
    font-size:34px;
    line-height:.98;
  }

  .esLead{
    font-size:15px;
    line-height:1.55;
  }

  .esTopActions{
    width:100%;
    justify-content:flex-start;
  }

  .esCard,
  .esPreviewCard,
  .esSideCard{
    padding:18px;
    border-radius:24px;
  }

  .esCardTitle{
    font-size:24px;
  }

  .esSideTitle{
    font-size:22px;
  }

  .esCardHead{
    flex-direction:column;
    align-items:flex-start;
  }

  .esRangeTabs{
    grid-template-columns:1fr 1fr;
  }

  .esRangeGrid{
    grid-template-columns:1fr;
  }

  .esOptionsGrid{
    grid-template-columns:1fr;
  }

  .esStyleGrid{
    grid-template-columns:1fr;
  }

  .esActionsRow{
    flex-direction:column;
  }

  .esActionBtn{
    width:100%;
  }

  #esPreviewCanvas{
    width:min(100%, 270px);
  }

  .esMobileBar{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(12px + var(--safe-bottom));
    z-index:9990;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    border-radius:22px;
    background:rgba(12,15,22,.88);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 28px rgba(0,0,0,.24);
  }

  .esMobileBarText{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .esMobileBarText span{
    color:var(--muted);
    font-size:12px;
    font-weight:800;
  }

  .esMobileBarText b{
    color:#fff;
    font-size:16px;
    line-height:1.1;
    font-weight:1000;
  }

  .esMobileDownloadBtn{
    min-height:44px;
    padding:0 16px;
    border-radius:14px;
    border:0;
    background:linear-gradient(135deg,var(--blue),var(--blue-2));
    color:#fff;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    flex-shrink:0;
  }
}

/* tap highlight off */

*{
  -webkit-tap-highlight-color: transparent;
}

a,
button,
div,
span,
img{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout:none;
}
#esPreviewCanvas{
  width:min(100%, 280px);
  height:auto;
  aspect-ratio:1080 / 1920;
  display:block;
  border-radius:18px;
  box-shadow:0 16px 32px rgba(0,0,0,.28);
  background:#070a12;
}

@media (max-width: 860px){
  #esPreviewCanvas{
    width:min(100%, 240px);
  }
}
.ehLockedWrap{
  position:relative;
  overflow:hidden;
}

.ehLockOverlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.04) 0,
      rgba(255,255,255,.04) 12px,
      rgba(255,255,255,.01) 12px,
      rgba(255,255,255,.01) 24px
    );
  backdrop-filter:blur(2px);
}

.ehLockBox{
  width:min(420px, 100%);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(9,11,17,.94);
  backdrop-filter:blur(10px);
  padding:22px;
  text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.ehLockBadge{
  display:inline-flex;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.ehLockTitle{
  margin-top:14px;
  font-size:24px;
  line-height:1.05;
  font-weight:1000;
}

.ehLockText{
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.ehLockBtn{
  margin-top:16px;
  min-height:48px;
  padding:0 16px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.ehProRows{
  display:grid;
  gap:12px;
}