/* ===== base ===== */
:root{
  --bg0:#070B18;
  --bg1:#0B1330;
  --card: rgba(18, 28, 58, .72);
  --card2: rgba(15, 23, 48, .55);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);

  --text:#EAF0FF;
  --muted: rgba(234,240,255,.70);

  --accent:#2F81FF;
  --accent2:#59B0FF;

  --shadow: 0 18px 60px rgba(0,0,0,.40);
  --shadow2: 0 10px 28px rgba(0,0,0,.35);

  --r1: 22px;
  --r2: 16px;

  --gap: 22px;
  --sideW: 330px;
  --max: 1180px;

  --focus: 0 0 0 4px rgba(47,129,255,.22);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 700px at 60% 10%, rgba(70,110,255,.18), transparent 60%),
              radial-gradient(1000px 800px at 15% 40%, rgba(47,129,255,.14), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{ color: inherit; text-decoration: none; }
b{ font-weight:700; }
.muted{ color: var(--muted); }
.req{ color: #FF6B6B; }

.bg{
  position:fixed;
  inset:0;
  background-image: url("/src/img/bg.svg");
  background-size: cover;
  background-position: center;
  opacity: .85;
  pointer-events:none;
  filter: saturate(1.05) contrast(1.02);
}

/* ===== layout ===== */
.shell{
  position:relative;
  display:flex;
  justify-content:center;
  padding: 28px 18px;
}

/* close button inside sidebar */
.closeBtn{
  display:none; /* покажем только на мобиле */
  position: sticky;
  top: 10px;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 18px;
  cursor:pointer;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.closeBtn:hover{ background: rgba(255,255,255,.10); }

/* when menu open */
.sidebar.is-open ~ .content { } /* не обязательно, просто оставлю как подсказку */
.shell::before{
  content:"";
  position:fixed;
  inset:-2px;
  background: radial-gradient(900px 500px at 20% 15%, rgba(47,129,255,.15), transparent 55%),
              radial-gradient(800px 500px at 70% 35%, rgba(89,176,255,.12), transparent 55%),
              radial-gradient(900px 500px at 50% 80%, rgba(47,129,255,.10), transparent 55%);
  pointer-events:none;
}

.shell::after{
  content:"";
  position:fixed;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30));
  pointer-events:none;
}

.shell > *{ position:relative; z-index:1; }

.shell{
  width:100%;
}

.shell > .sidebar,
.shell > .content{
  max-width: var(--max);
}

.shell{
  gap: var(--gap);
  align-items:flex-start;
}

.sidebar{
  width: var(--sideW);
  flex: 0 0 var(--sideW);
  background: linear-gradient(180deg, rgba(20,30,66,.68), rgba(10,14,34,.50));
  border: 1px solid var(--stroke);
  border-radius: var(--r1);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  padding: 18px;
}

.content{
  flex:1 1 auto;
  min-width: 0;
  max-width: calc(var(--max) - var(--sideW) - var(--gap));
}

/* ===== sidebar top ===== */
.sidebar__top{ display:flex; flex-direction:column; gap: 16px; }

.progress{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px 12px 12px;
}
.progress__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.progress__bar{
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow:hidden;
}
.progress__fill{
  height:100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 18px rgba(47,129,255,.35);
}

.brand{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
}
.brand__logo{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(47,129,255,.25), rgba(47,129,255,.08));
  border: 1px solid rgba(47,129,255,.25);
  font-weight: 800;
  letter-spacing: .5px;
}
.brand__title{ font-weight: 700; }
.brand__sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ===== steps ===== */
.steps{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 6px;
}

.step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.step:hover{
  background: rgba(255,255,255,.04);
  border-color: var(--stroke);
  transform: translateY(-1px);
}
.step__dot{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 800;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  color: rgba(234,240,255,.85);
  flex: 0 0 34px;
}
.step__body{ display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.step__title{ font-weight: 700; }
.step__desc{ font-size: 12px; color: var(--muted); line-height: 1.3; }
.step__status{
  margin-left:auto;
  color: rgba(120, 255, 170, .9);
  font-weight: 800;
}

.step.is-active{
  background: linear-gradient(180deg, rgba(47,129,255,.18), rgba(47,129,255,.06));
  border-color: rgba(47,129,255,.30);
  box-shadow: 0 0 0 1px rgba(47,129,255,.12) inset;
}
.step.is-active .step__dot{
  background: linear-gradient(180deg, rgba(47,129,255,.55), rgba(47,129,255,.18));
  border-color: rgba(47,129,255,.45);
  box-shadow: 0 0 18px rgba(47,129,255,.30);
}

/* ===== sidebar bottom ===== */
.sidebar__bottom{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
  display:flex;
  gap: 10px;
  flex-direction:column;
}
.sideLink{
  color: rgba(234,240,255,.85);
  font-size: 13px;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.sideLink:hover{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

/* ===== content / card ===== */
.mheader{
  display:none;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(12, 18, 40, .55);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
  margin-bottom: 14px;
}
.iconBtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 18px;
  cursor:pointer;
}
.iconBtn:hover{ background: rgba(255,255,255,.09); }

.mheader__title{ display:flex; flex-direction:column; line-height:1.1; }
.mheader__kicker{ font-size: 12px; color: var(--muted); }
.mheader__name{ font-size: 14px; font-weight: 800; }
.mheader__progress{ margin-left:auto; width: 120px; }
.mheader__bar{
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow:hidden;
}
.mheader__fill{
  height:100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 16px rgba(47,129,255,.35);
}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r1);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 24px;
}

.card__head{ margin-bottom: 18px; }
.h1{
  margin:0;
  font-size: 26px;
  letter-spacing: .2px;
}
.sub{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

/* ===== form ===== */
.form{
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.field{ display:flex; flex-direction:column; gap: 8px; }

.label{
  font-size: 13px;
  font-weight: 700;
  color: rgba(234,240,255,.92);
}

.labelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.pill{
  font-size: 12px;
  color: rgba(234,240,255,.75);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.input{
  width:100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(9, 12, 28, .35);
  color: var(--text);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder{ color: rgba(234,240,255,.40); }
.input:focus{
  border-color: rgba(47,129,255,.55);
  box-shadow: var(--focus);
  background: rgba(9, 12, 28, .48);
}

.hint{
  font-size: 12px;
  color: rgba(234,240,255,.60);
}

/* ===== HOME PAGE ===== */
.home{ display:flex; flex-direction:column; gap: 18px; }

.hero{
  background: rgba(18, 28, 58, .62);
  border: 1px solid var(--stroke);
  border-radius: var(--r1);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 22px;
  overflow:hidden;
  position:relative;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(47,129,255,.22), transparent 60%),
    radial-gradient(700px 260px at 80% 30%, rgba(89,176,255,.14), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

.hero > *{ position:relative; z-index:1; }

.hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.85);
  font-weight: 700;
  font-size: 13px;
}
.badge__dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  box-shadow: 0 0 14px rgba(47,129,255,.45);
}

.hero__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hero__actions .btn{
  white-space: nowrap;
}

.btn--sm{ height: 40px; padding: 0 12px; border-radius: 12px; font-weight: 800; }

.hero__title{
  margin: 0;
  font-size: 28px;
  letter-spacing: .2px;
  line-height: 1.15;
}

.hero__lead{
  margin: 12px 0 0;
  color: rgba(234,240,255,.78);
  line-height: 1.6;
  max-width: 70ch;
}

.hero__meta{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.metaCard{
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.metaCard__k{ font-size: 12px; color: rgba(234,240,255,.65); }
.metaCard__v{ margin-top: 4px; font-weight: 900; }

/* grid */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.panel{
  background: rgba(18, 28, 58, .62);
  border: 1px solid var(--stroke);
  border-radius: var(--r1);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
  padding: 18px;
}

.panel__head{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 10px;
}

.panel__icon{
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.panel__title{
  margin:0;
  font-size: 16px;
  font-weight: 900;
}

.panel__foot{ margin-top: 12px; }

.link{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  color: rgba(234,240,255,.85);
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.link:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

/* lists */
.list, .bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(234,240,255,.78);
  line-height: 1.6;
}
.list li, .bullets li{ margin: 8px 0; }

/* warning variant */
.panel--warn{
  border-color: rgba(255, 186, 90, .22);
}
.panel--warn .panel__icon{
  background: rgba(255, 186, 90, .10);
  border-color: rgba(255, 186, 90, .22);
}

/* contacts span full width */
.panel--contacts{
  grid-column: 1 / -1;
}

.contactList{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}
.contactRow{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.contactRow__k{ color: rgba(234,240,255,.65); font-weight: 800; font-size: 13px; }
.contactRow__v{ color: rgba(234,240,255,.88); font-size: 13px; overflow-wrap:anywhere; }

.qrRow{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.qrCard{
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.qrCard__title{ font-weight: 900; }
.qrCard__qr{
  height: 160px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px dashed rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  color: rgba(234,240,255,.55);
  font-weight: 900;
  letter-spacing: .8px;
}
.qrCard__qr img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius: 12px;
}
.qrCard__link{
  color: rgba(234,240,255,.86);
  font-weight: 800;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

/* CTA bar */
.ctaBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r1);
  background: linear-gradient(180deg, rgba(47,129,255,.22), rgba(47,129,255,.08));
  border: 1px solid rgba(47,129,255,.28);
  box-shadow: 0 12px 36px rgba(47,129,255,.14);
  backdrop-filter: blur(14px);
}
.ctaBar__title{ font-weight: 950; }
.ctaBar__sub{ color: rgba(234,240,255,.72); font-size: 13px; margin-top: 2px; }

/* ===== responsive ===== */
@media (max-width: 1060px){
  .hero__title{ font-size: 24px; }
  .hero__meta{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 920px){
  .grid{ grid-template-columns: 1fr; }
  .panel--contacts{ grid-column: auto; }
}
@media (max-width: 720px){
  .hero__top{ align-items:flex-start; flex-direction:column; }
  .hero__actions{ width:100%; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .hero__meta{ grid-template-columns: 1fr; }
  .contactRow{ grid-template-columns: 1fr; }
  .qrRow{ grid-template-columns: 1fr; }
  .ctaBar{ flex-direction:column; align-items:stretch; }
  .ctaBar .btn{ width:100%; justify-content:center; }
}

/* ===== chips ===== */
.chips{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.chip{
  position:relative;
  display:flex;
  align-items:center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  cursor:pointer;
  user-select:none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.chip:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.chip input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.chip__box{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.chip__text{
  font-size: 13px;
  font-weight: 650;
  color: rgba(234,240,255,.90);
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* checked state */
.chip input:checked ~ .chip__box{
  background: linear-gradient(180deg, rgba(47,129,255,.95), rgba(89,176,255,.60));
  border-color: rgba(47,129,255,.55);
  box-shadow: 0 0 0 3px rgba(47,129,255,.18);
}
.chip input:checked ~ .chip__text{
  color: rgba(255,255,255,.95);
}
.chip:has(input:checked){
  background: linear-gradient(180deg, rgba(47,129,255,.16), rgba(47,129,255,.06));
  border-color: rgba(47,129,255,.30);
}

/* ===== buttons ===== */
.actions{
  margin-top: 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.btn{
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 0 16px;
  font-weight: 800;
  color: var(--text);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn{
  display: inline-flex;
  align-items: center;      /* вертикаль */
  justify-content: center;  /* горизонталь (если нужно) */
  line-height: 1;           /* убирает "просадку" текста */
  padding-top: 0;
  padding-bottom: 0;
}
.btn--sm{
  height: 40px;
  padding: 0 12px;          /* только по бокам */
}
.btn .arrow{
  display: inline-block;
  line-height: 1;
}
.btn:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.14);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

.btn--primary{
  min-width: 160px;
  border-color: rgba(47,129,255,.35);
  background: linear-gradient(180deg, rgba(47,129,255,.95), rgba(47,129,255,.62));
  box-shadow: 0 10px 30px rgba(47,129,255,.18);
}
.btn--primary:hover{
  border-color: rgba(89,176,255,.55);
  box-shadow: 0 14px 38px rgba(47,129,255,.22);
}
.btn---primary{
  min-width: 160px;
  border: 1px solid rgba(120,190,255,.35);
  background: linear-gradient(180deg, rgba(47,129,255,1), rgba(47,129,255,.62));
  box-shadow:
    0 14px 40px rgba(47,129,255,.22),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

.btn---primary:hover{
  border-color: rgba(140,210,255,.55);
  box-shadow:
    0 18px 50px rgba(47,129,255,.28),
    0 0 22px rgba(47,129,255,.22),
    0 0 0 1px rgba(255,255,255,.08) inset;
}
.arrow{ margin-left: 10px; }

.footer{
  margin-top: 16px;
  padding: 10px 2px;
  font-size: 12px;
  color: rgba(234,240,255,.55);
}

/* ===== responsive ===== */
@media (max-width: 1060px){
  :root{ --sideW: 300px; }
  .chips{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px){
  .shell{
    flex-direction:column;
    align-items:stretch;
  }
  .sidebar{
    width:100%;
    flex: 0 0 auto;
  }
  .content{
    max-width: var(--max);
  }
}

/* Mobile: sidebar becomes off-canvas */
@media (max-width: 720px){
  .shell{ padding: 14px 12px; }

  .mheader{ display:flex; }

  .sidebar{
    position: fixed;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
    overflow:auto;
    z-index: 50;
  }
  .sidebar.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events:auto;
  }

  .content{ width:100%; }

  .card{ padding: 18px; }

  .h1{ font-size: 20px; }
  .sub{ font-size: 13px; }

  .chips{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .actions{
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent, rgba(10,14,34,.55));
    padding-top: 10px;
    padding-bottom: 6px;
  }
  .btn--primary{ min-width: 140px; }
  
   .closeBtn{ display:block; }

  /* overlay visible when sidebar open */
  .overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 420px){
  .chips{ grid-template-columns: 1fr; }
  .btn{ width:100%; }
  .actions{ flex-direction:column; align-items:stretch; }
}

/* overlay */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 40; /* меньше чем sidebar (50) */
}
/* ===== Child page helpers ===== */
.child .grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.schoolBlock{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap: 16px;
  padding-top: 6px;
}

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

.helpText{
  font-size: 12px;
  color: rgba(234,240,255,.60);
  margin-top: 6px;
}

@media (max-width: 720px){
  .child .grid3{ grid-template-columns: 1fr; }
  .twoCols{ grid-template-columns: 1fr; }
}
/* ===== MODALS ===== */
.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 60;
}

.modalOverlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

.modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);
  width: min(980px, calc(100vw - 24px));
  max-height: min(86vh, 760px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 70;

  background: rgba(18, 28, 58, .78);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

.modal.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}

.modal__kicker{
  font-size: 12px;
  color: rgba(234,240,255,.65);
  margin-bottom: 2px;
}

.modal__title h2{
  margin:0;
  font-size: 18px;
  font-weight: 950;
}

.modal__tools{
  padding: 12px 16px 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.chipFilters{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fchip{
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.86);
  font-weight: 850;
  cursor:pointer;
}
.fchip:hover{ background: rgba(255,255,255,.10); }
.fchip.is-active{
  border-color: rgba(47,129,255,.35);
  background: linear-gradient(180deg, rgba(47,129,255,.28), rgba(47,129,255,.10));
  box-shadow: 0 0 20px rgba(47,129,255,.18);
}

.modal__body{
  padding: 14px 16px 16px;
  overflow:auto;
}

/* ===== GROUPS LIST ===== */
.groupsList{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.groupItem{
  display:grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items:center;

  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.groupItem:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}

.groupIcon{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(47,129,255,.12);
  border: 1px solid rgba(47,129,255,.22);
}

.groupMain{ min-width: 0; }
.groupTitle{
  font-weight: 950;
  color: rgba(234,240,255,.96);
  line-height: 1.2;
  margin-bottom: 6px;
}
.groupMeta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  color: rgba(234,240,255,.70);
  font-size: 12px;
}

.tag{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-weight: 800;
}

.tag--wk{ background: rgba(255,200,80,.12); border-color: rgba(255,200,80,.22); }
.tag--we{ background: rgba(160,120,255,.12); border-color: rgba(160,120,255,.22); }
.tag--on{ background: rgba(80,220,255,.12); border-color: rgba(80,220,255,.22); }
.tag--off{ background: rgba(90,160,255,.12); border-color: rgba(90,160,255,.22); }

.seats{
  font-weight: 950;
  font-size: 12px;
  color: rgba(234,240,255,.85);
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

.seats.is-ok{ border-color: rgba(120,255,170,.20); background: rgba(120,255,170,.08); }
.seats.is-res{ border-color: rgba(255,200,80,.22); background: rgba(255,200,80,.10); }

/* ===== DETAIL ===== */
.modal--detail{
  width: min(720px, calc(100vw - 24px));
}

.detail{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.detailCard{
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.detailRow{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.detailRow:last-child{ border-bottom: none; }

.detailRow__k{ color: rgba(234,240,255,.62); font-weight: 900; font-size: 13px; }
.detailRow__v{ color: rgba(234,240,255,.90); font-size: 13px; overflow-wrap:anywhere; }

.detail__actions{
  margin-top: 12px;
}

@media (max-width: 720px){
  .modal{
    width: calc(100vw - 16px);
    max-height: 88vh;
  }
  .groupItem{
    grid-template-columns: 40px 1fr;
  }
  .seats{ justify-self: start; margin-left: 52px; }
  .detailRow{ grid-template-columns: 1fr; gap: 6px; }
}


/* ===== Universal Custom Select (Select2-like, no jQuery) ===== */
.cselectWrap{ position: relative; }

.cselectBtn{
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(9, 12, 28, .35);
  color: var(--text);
  cursor: pointer;

  display:flex;
  align-items:center;
  justify-content:space-between;

  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cselectBtn:hover{ background: rgba(9, 12, 28, .48); }
.cselectBtn:focus{
  outline:none;
  border-color: rgba(47,129,255,.55);
  box-shadow: var(--focus);
  background: rgba(9, 12, 28, .48);
}

.cselectValue{
  min-width:0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(234,240,255,.90);
}
.cselectValue.is-placeholder{ color: rgba(234,240,255,.40); }

.cselectChev{ opacity:.85; font-size: 14px; margin-left: 12px; }

.cselectMenu{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);

  background: rgba(18, 28, 58, .92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);

  padding: 8px;
  display:none;
  z-index: 50;
  max-height: 260px;
  overflow:auto;
}

.cselectWrap.is-open .cselectMenu{ display:block; }

.cselectOpt{
  width:100%;
  border:0;
  background: transparent;
  color: rgba(234,240,255,.88);
  text-align:left;
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 700;
  display:flex;
  align-items:center;
  gap: 10px;
}
.cselectOpt:hover{ background: rgba(255,255,255,.08); }

.cselectOpt.is-active{
  background: linear-gradient(180deg, rgba(47,129,255,.22), rgba(47,129,255,.08));
  border: 1px solid rgba(47,129,255,.28);
}

.cselectOpt.is-disabled{
  opacity:.45;
  cursor:not-allowed;
}

.cselectCheck{
  margin-left:auto;
  opacity:.9;
  font-weight: 900;
}

select.js-cselect{
  /* прячем оригинал, но оставляем в форме */
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ===== Step 4 (Groups Pick) ===== */
.groupsPick .h2{ margin:0; font-size:16px; font-weight:950; }
.sectionHead{ margin-top: 10px; }
.sectionHead .hint{ margin-top:6px; }

.gpTools{
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-bottom: 14px;
}

.gpCounters{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.counter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  min-width: 160px;
}
.counter__k{ color: rgba(234,240,255,.65); font-weight: 900; font-size: 13px; }
.counter__v{ font-weight: 950; }

/* SCROLL list container (30+ кружков) */
.pickGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;

  max-height: 420px;
  overflow: auto;
  padding-right: 6px;
}

/* scrollbar */
.pickGrid::-webkit-scrollbar{ width: 10px; }
.pickGrid::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; }
.pickGrid::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius: 999px; }
.pickGrid::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); }

/* card item */
.gItem{
  display:grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items:center;

  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  cursor: pointer;
}
.gItem:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}

.gIcon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(47,129,255,.12);
  border: 1px solid rgba(47,129,255,.22);
}

.gMain{ min-width:0; }
.gMeta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  color: rgba(234,240,255,.70);
  font-size: 12px;
  margin-top: 6px;
}

.gRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 8px;
}

.gPick{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

.gItem.is-picked .gPick{
  background: linear-gradient(180deg, rgba(47,129,255,.95), rgba(89,176,255,.60));
  border-color: rgba(47,129,255,.55);
  box-shadow: 0 0 0 3px rgba(47,129,255,.18);
}

.gBadge{
  font-weight: 900;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(234,240,255,.85);
}
.gBadge.ok{ border-color: rgba(120,255,170,.22); background: rgba(120,255,170,.10); }
.gBadge.res{ border-color: rgba(255,200,80,.22); background: rgba(255,200,80,.10); }

/* title link */
.gTitleLink{
  display:block;
  font-weight: 950;
  color: rgba(234,240,255,.96);
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
}
.gTitleLink:hover{ text-decoration: underline; }

/* tags (если у тебя уже есть — можешь не дублировать) */
.tag{ padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); font-weight:800; }
.tag--wk{ background: rgba(255,200,80,.12); border-color: rgba(255,200,80,.22); }
.tag--we{ background: rgba(160,120,255,.12); border-color: rgba(160,120,255,.22); }
.tag--on{ background: rgba(80,220,255,.12); border-color: rgba(80,220,255,.22); }
.tag--off{ background: rgba(90,160,255,.12); border-color: rgba(90,160,255,.22); }

/* textarea */
.textarea{
  height: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
  min-height: 110px;
}

.helpText{
  font-size: 12px;
  color: rgba(234,240,255,.60);
  margin-top: 6px;
}

@media (max-width: 920px){
  .pickGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .pickGrid{ max-height: 520px; }
  .gItem{ grid-template-columns: 40px 1fr; }
  .gRight{ align-items:flex-start; margin-left: 52px; }
}


/* ===== REVIEW ===== */
.reviewBox{
  margin-top: 14px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.reviewRow{
  display:flex;
  justify-content:space-between;
  padding: 10px 0;
  font-size: 14px;
}

.reviewKey{
  color: rgba(234,240,255,.65);
  font-weight: 600;
}

.reviewVal{
  font-weight: 800;
}

.reviewDivider{
  height:1px;
  background: rgba(255,255,255,.08);
  margin: 12px 0;
}

/* ===== CHECKBOX BLOCK ===== */
.confirmBlock{
  margin-top: 20px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.checkRow{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 13px;
  cursor: pointer;
}

.rulesBtn{
  margin-left: 10px;
  background: rgba(120,255,170,.15);
  border: 1px solid rgba(120,255,170,.30);
  color: #7cffaa;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.text-info {
	color: #7c80ff;
}

#step1 {
		display: none;
	  }
	  #step2 {
		display: none;
	  }
	  #step3 {
		display: none;
	  }
	  #step4 {
		display: none;
	  }
	  #itemstatus0 {
		display: none;
	  }
	  #itemstatus1 {
		display: none;
	  }
	  #itemstatus2 {
		display: none;
	  }
	  #itemstatus3 {
		display: none;
	  }
	  #itemstatus4 {
		display: none;
	  }