body.install-page {
  margin: 0;
  min-height: 100vh;
  color: #07182f;
  background: #f8fbff;
}

.install-page .nav-active {
  color: #0758e8;
  font-weight: 750;
}

.install-surface {
  position: relative;
  min-height: calc(100vh - 78px);
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(248,251,255,.98),
      rgba(248,251,255,.91) 48%,
      rgba(248,251,255,.95)
    ),
    radial-gradient(
      circle at 78% 34%,
      rgba(0,127,255,.13),
      transparent 30%
    ),
    #f8fbff;
}

.install-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;

  background:
    linear-gradient(
      90deg,
      transparent 0 11%,
      rgba(16,108,238,.10) 11% 11.08%,
      transparent 11.08%
    ),
    linear-gradient(
      transparent 0 24%,
      rgba(16,108,238,.08) 24% 24.08%,
      transparent 24.08%
    );

  background-size: 330px 260px;
}

.install-layout {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0,1.1fr)
    minmax(370px,.62fr);

  gap: 58px;

  padding-top: 32px;
  padding-bottom: 48px;
}

.install-main {
  max-width: 840px;
}

.install-main h1 {
  margin: 0;

  font-size: clamp(46px,4.2vw,68px);
  line-height: .98;

  letter-spacing: -.045em;
}

.install-intro {
  max-width: 690px;

  margin: 14px 0 0;

  color: #5a6c84;

  font-size: 16px;
  line-height: 1.55;
}


.install-form {
  margin-top: 25px;

  padding: 24px;

  border: 1px solid #cfdaea;
  border-radius: 16px;

  background: rgba(255,255,255,.84);

  box-shadow:
    0 22px 60px rgba(28,72,135,.08);

  backdrop-filter: blur(12px);
}


.install-section + .install-section {
  margin-top: 21px;
  padding-top: 21px;

  border-top: 1px solid #dce4ee;
}

.install-section h2 {
  margin: 0 0 14px;

  font-size: 19px;
}


.entry-mode-switch,
.network-type-switch,
.identity-switch {
  display: grid;
  gap: 8px;
}

.entry-mode-switch,
.network-type-switch {
  grid-template-columns: repeat(2,1fr);
}

.identity-switch {
  grid-template-columns: repeat(2,1fr);
}


.entry-mode,
.network-type,
.identity-choice {
  height: 43px;

  border: 1px solid #c3d0e2;
  border-radius: 8px;

  background: rgba(249,252,255,.93);

  color: #40536e;

  font-weight: 750;

  cursor: pointer;
}

.entry-mode.active,
.network-type.active,
.identity-choice.active {
  border-color: #0758e8;

  background:
    linear-gradient(
      135deg,
      #064ab8,
      #096cf0
    );

  color: white;
}


.location-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}


.install-field {
  display: grid;
  gap: 6px;
}

.install-field > span,
.panel-head strong {
  font-size: 13px;
  font-weight: 750;
}


.install-page input,
.install-page select {
  width: 100%;
  height: 44px;

  box-sizing: border-box;

  padding: 0 13px;

  border: 1px solid #becce0;
  border-radius: 8px;

  outline: none;

  color: #102541;
  background: #fbfdff;

  font: inherit;
}


.install-page input:focus,
.install-page select:focus {
  border-color: #176fe8;

  box-shadow:
    0 0 0 3px rgba(23,111,232,.09);
}


.install-page input:disabled {
  color: #8997aa;

  background: #f1f4f8;
}


#city-help {
  min-height: 14px;

  color: #74849a;
  font-size: 11px;
}


.identity-panel {
  margin-top: 17px;

  padding-left: 15px;

  border-left: 2px solid #176fe8;
}


.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 11px;
}


.language-switch {
  display: flex;
  gap: 16px;

  color: #697b92;

  font-size: 12px;
}


.language-switch label {
  display: flex;
  align-items: center;
  gap: 5px;
}


.language-switch input {
  width: auto;
  height: auto;
}


.nickname-wrap {
  position: relative;
}


.nickname-wrap input {
  padding-right: 115px;
}


.nickname-state {
  position: absolute;

  top: 50%;
  right: 13px;

  transform: translateY(-50%);

  font-size: 12px;
  font-weight: 800;
}


.nickname-state.checking {
  color: #aa7c00;
}

.nickname-state.available {
  color: #548900;
}

.nickname-state.taken {
  color: #b42d27;
}


.nickname-message,
.fio-help {
  margin-top: 7px;

  color: #708198;

  font-size: 12px;
  line-height: 1.45;
}


.fio-grid {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 8px;
}


.inline-error,
.form-error,
.form-result {
  margin-top: 10px;

  padding: 10px 12px;

  border-radius: 7px;

  font-size: 13px;
  line-height: 1.45;
}


.inline-error,
.form-error {
  color: #9e2d27;

  border:
    1px solid rgba(194,58,49,.25);

  background:
    rgba(194,58,49,.055);
}


.form-result {
  color: #466a00;

  border:
    1px solid rgba(105,158,0,.28);

  background:
    rgba(105,158,0,.07);
}


.download-button {
  width: 100%;
  height: 55px;

  margin-top: 19px;

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

  padding: 0 18px;

  border: 0;
  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #043b9b,
      #0869ee
    );

  color: white;

  font-size: 15px;
  font-weight: 800;

  cursor: pointer;
}


.download-button:disabled {
  opacity: .42;

  cursor: not-allowed;
}


#download-state {
  font:
    700 10px
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  letter-spacing: .08em;
}


.install-side {
  padding-top: 30px;

  display: grid;
  align-content: start;

  gap: 14px;
}


.guard-card,
.install-side-note {
  border: 1px solid #cfdaea;

  border-radius: 15px;

  background:
    rgba(255,255,255,.82);

  box-shadow:
    0 18px 50px rgba(28,72,135,.08);

  backdrop-filter: blur(12px);
}


.guard-card {
  padding: 26px;
}


.guard-symbol {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  color: #0b65df;

  background:
    radial-gradient(
      circle,
      rgba(18,116,244,.15),
      rgba(18,116,244,.035)
    );

  border:
    1px solid rgba(18,116,244,.28);

  font-size: 25px;
  font-weight: 900;
}


.guard-title {
  margin-top: 18px;

  color: #092046;

  font-size: 28px;
  font-weight: 900;
}


.guard-lead {
  margin: 9px 0 0;

  color: #5f7189;

  font-size: 14px;
  line-height: 1.55;
}


.guard-list {
  margin-top: 22px;

  padding-top: 5px;

  border-top: 1px solid #dee6ef;
}


.guard-row {
  display: grid;

  grid-template-columns: 30px 1fr;

  gap: 9px;

  padding: 14px 0;

  border-bottom: 1px solid #e2e8f0;
}


.guard-row:last-child {
  border-bottom: 0;
}


.guard-row > span {
  color: #176fe8;

  font:
    750 10px
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}


.guard-row p {
  margin: 0;

  color: #5e7088;

  font-size: 13px;
  line-height: 1.52;
}


.install-side-note {
  padding: 18px 20px;
}


.install-side-note strong {
  font-size: 14px;
}


.install-side-note p {
  margin: 7px 0 0;

  color: #697a90;

  font-size: 12px;
  line-height: 1.5;
}


@media(max-width:1050px) {

  .install-layout {
    grid-template-columns: 1fr;
  }

  .install-side {
    padding-top: 0;
  }

}


@media(max-width:700px) {

  .install-layout {
    padding-top: 24px;
  }

  .location-grid,
  .entry-mode-switch,
  .network-type-switch,
  .identity-switch,
  .fio-grid {
    grid-template-columns: 1fr;
  }

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

}


/* ===== ARCONA INSTALL ALIGN + GUARD PRIVACY V1 ===== */

/*
  Страна и город имеют одинаковые три строки:
  подпись / поле / подсказка.
  Поэтому select и input теперь стоят строго на одной линии.
*/
.install-page .location-grid {
  align-items: start;
}

.install-page .location-grid .install-field {
  grid-template-rows:
    18px
    44px
    14px;
}

.install-page .location-grid .install-field > span {
  display: flex;
  align-items: center;
}

.install-page .location-grid select,
.install-page .location-grid input {
  height: 44px;
  margin: 0;
}

/* Пояснение о назначении Guard */
.install-page .guard-privacy {
  margin-top: 18px;
  padding: 14px 15px;

  border-left: 2px solid #176fe8;

  background:
    rgba(23,111,232,.045);
}

.install-page .guard-privacy strong {
  display: block;

  color: #17345c;

  font-size: 13px;
}

.install-page .guard-privacy p {
  margin: 7px 0 0;

  color: #63758d;

  font-size: 12px;
  line-height: 1.52;
}

/* После нового блока чуть уменьшаем лишний воздух */
.install-page .guard-list {
  margin-top: 17px;
}

/* ===== END ARCONA INSTALL ALIGN + GUARD PRIVACY V1 ===== */


/* ===== ARCONA INSTALL OS CHOICE V1 ===== */

.install-page .os-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.install-page .os-choice {
  height: 43px;

  border: 1px solid #c3d0e2;
  border-radius: 8px;

  background: rgba(249,252,255,.93);
  color: #40536e;

  font-weight: 750;
  cursor: pointer;
}

.install-page .os-choice.active {
  border-color: #0758e8;

  background:
    linear-gradient(
      135deg,
      #064ab8,
      #096cf0
    );

  color: #fff;
}

.install-page .os-help {
  margin: 8px 0 0;

  color: #718198;

  font-size: 11px;
  line-height: 1.45;
}

@media(max-width:700px) {
  .install-page .os-switch {
    grid-template-columns: 1fr;
  }
}

/* ===== END ARCONA INSTALL OS CHOICE V1 ===== */


/* ===== ARCONA ENTRY RECOVERY UI V1 ===== */

.registration-fields {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.recovery-section .install-field {
  max-width: 560px;
}

.recovery-help {
  margin: 8px 0 0;

  color: #708198;

  font-size: 12px;
  line-height: 1.5;
}

/* ===== END ARCONA ENTRY RECOVERY UI V1 ===== */


/* ===== ARCONA_ISSUANCE_NOTICE_STYLE_V1 ===== */

.issuance-notice {
  margin-top: 10px;
  padding: 11px 12px;

  border-radius: 7px;

  color: #44536a;

  font-size: 12px;
  line-height: 1.55;
}

.issuance-notice strong {
  display: block;

  margin-bottom: 4px;

  color: #26384f;

  font-size: 13px;
}

.issuance-notice p {
  margin: 0;
}

.issuance-notice-windows {
  border:
    1px solid rgba(196,132,20,.28);

  background:
    rgba(235,171,48,.09);
}

.issuance-notice-recovery {
  border:
    1px solid rgba(4,105,238,.22);

  background:
    rgba(4,105,238,.055);
}

/* ===== END ARCONA_ISSUANCE_NOTICE_STYLE_V1 ===== */