/* Public account dialogs: isolated from cabinet forms. */
.join-box {
  --join-surface: #fff;
  --join-text: #102447;
  --join-muted: #607596;
  --join-border: #d6e7f4;
  --join-field: #f4f9fd;
  --join-link: #087dd3;
  --join-notice: #fff6df;
  --join-notice-border: #eed28b;
  --join-notice-text: #664d13;
  --join-accent: #0a8deb;
  box-sizing: border-box;
  width: min(520px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 30px;
  border: 1px solid var(--join-border);
  border-radius: 20px;
  background: var(--join-surface);
  box-shadow: 0 22px 65px rgba(11, 45, 100, .2);
  color: var(--join-text);
  line-height: 1.45;
}
.join-box *, .join-box *::before, .join-box *::after { box-sizing: border-box; }
.join-box .tabs { align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 22px; white-space: normal; }
.join-box .tabs h1 { color: var(--join-text); font-size: 23px; line-height: 1.2; }
.join-box a, .join-box .tabs a { color: var(--join-link); }
.join-box a:hover, .join-box a:focus-visible { color: var(--join-accent); }
.join-box .rules-info { padding: 15px 17px; border-radius: 13px; line-height: 1.5; }
.join-box .rules-info--attention { background: var(--join-notice); border: 1px solid var(--join-notice-border); color: var(--join-notice-text); font-size: 14px; }
.join-box .radiobox { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 20px; padding: 0; border: 0; background: transparent; line-height: 1.3; }
.join-box .radiobox > span { position: static; grid-column: 1/-1; padding: 0; margin-bottom: 1px; background: transparent; color: var(--join-muted); font-size: 13px; }
.join-box .radiobox > label, .join-box .radiobox > span + label { display: flex; align-items: center; min-height: 60px; padding: 11px 12px; border: 1px solid var(--join-border); border-radius: 12px; background: var(--join-field); }
.join-box .radiobox > label:not(:last-child) { border-bottom: 1px solid var(--join-border); }
.join-box .radiobox > label:has(input:checked) { border-color: var(--join-accent); background: color-mix(in srgb,var(--join-accent) 9%,var(--join-field)); }
.join-box .radiobox > label > span { padding-left: 25px; }
.join-box .radiobox > label > span::before { width: 16px; height: 16px; border-color: var(--join-muted); }
.join-box .radiobox > label > input:checked + span { color: var(--join-text); font-weight: 700; }
.join-box .radiobox > label > input:checked + span::before { background: #08bd74; border-color: #08bd74; box-shadow: inset 0 0 0 3px var(--join-field); }
.join-box .inputbox > span { background: var(--join-surface); color: var(--join-muted); }
.join-box .inputbox > input, .join-box .inputbox > textarea { min-width: 0; max-width: 100%; width: 100%; min-height: 44px; border: 1px solid var(--join-border); border-radius: 11px; background: var(--join-field); color: var(--join-text); }
.join-box .inputbox > input:focus, .join-box .inputbox > textarea:focus { border-color: var(--join-accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--join-accent) 14%,transparent); }
.join-box .inputbox > input:focus + span { color: var(--join-accent); }
.join-box .inputbox2 { display: flex; flex-flow: row nowrap; }
.join-box .inputbox2 input[name="math_value"] { flex: 1 1 60%; width: 60%; border-radius: 0 11px 11px 0; }
.join-box .inputbox2 input[disabled] { order: -1; flex: 0 0 40%; width: 40%; border-right: 0; border-radius: 11px 0 0 11px; background: var(--join-field); color: var(--join-text); -webkit-text-fill-color: var(--join-text); opacity: 1; font-size: 16px; text-align: right; }
.join-box .rules-agree, .join-box .rules_agree_not .rules-agree { padding: 13px; border: 1px solid var(--join-border); border-radius: 12px; background: var(--join-field); font-size: 13px; line-height: 1.5; }
.join-box .rules-agree a { white-space: normal; }
.join-box .next-step { width: 100%; min-height: 46px; border-radius: 11px; background: linear-gradient(105deg,#0bb7e9,#087de6); box-shadow: 0 9px 24px rgba(7,126,211,.21); color: #fff; font-weight: 700; }
.join-box .join-form input[type="submit"]:disabled { background: #b8c6d2; box-shadow: none; color: #42546a; }
.join-box .error { border-radius: 10px; line-height: 1.4; }
.join-box .success { border-radius: 10px; line-height: 1.4; }

@media (prefers-color-scheme: dark) {
  body:not(.cabinet-redesign--day) .join-box {
    --join-surface: #19162f;
    --join-text: #f7f6ff;
    --join-muted: #b8b7d5;
    --join-border: #51447a;
    --join-field: #26213f;
    --join-link: #92d4ff;
    --join-notice: #30283a;
    --join-notice-border: #8d6945;
    --join-notice-text: #f5d9a0;
    --join-accent: #ad73f4;
    box-shadow: 0 22px 65px rgba(2,3,17,.45);
  }
  body:not(.cabinet-redesign--day) .join-box .next-step { background: linear-gradient(105deg,#a729dc,#6355e8); box-shadow: 0 9px 24px rgba(82,55,178,.27); }
  body:not(.cabinet-redesign--day) .join-box .join-form input[type="submit"]:disabled { background: #4c4660; color: #c3bfd0; }
}
body.cabinet-redesign--night .join-box { --join-surface:#19162f; --join-text:#f7f6ff; --join-muted:#b8b7d5; --join-border:#51447a; --join-field:#26213f; --join-link:#92d4ff; --join-notice:#30283a; --join-notice-border:#8d6945; --join-notice-text:#f5d9a0; --join-accent:#ad73f4; }
body.cabinet-redesign--night .join-box .next-step { background: linear-gradient(105deg,#a729dc,#6355e8); }

@media (max-width: 560px) {
  .join-box { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 20px; border-radius: 18px; }
  .join-box .tabs h1 { font-size: 20px; }
  .join-box .radiobox { grid-template-columns: 1fr; }
  .join-box .radiobox > label, .join-box .radiobox > span + label { min-height: 48px; }
}
@media (max-width: 360px) { .join-box { padding: 16px; } .join-box .tabs { font-size: 15px; } }

/* Login and recovery share the same visual language without changing their forms. */
:is(.login-box,.recovery-box) {
  --join-surface:#fff; --join-text:#102447; --join-muted:#607596;
  --join-border:#d6e7f4; --join-field:#f4f9fd; --join-link:#087dd3; --join-accent:#0a8deb;
  box-sizing:border-box; width:min(460px,calc(100vw - 24px)); max-width:none;
  max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
  overflow-y:auto; padding:30px; border:1px solid var(--join-border); border-radius:20px;
  background:var(--join-surface); box-shadow:0 22px 65px rgba(11,45,100,.2);
  color:var(--join-text); line-height:1.45;
}
:is(.login-box,.recovery-box) *, :is(.login-box,.recovery-box) *::before, :is(.login-box,.recovery-box) *::after { box-sizing:border-box; }
:is(.login-box,.recovery-box) .tabs { align-items:baseline; flex-wrap:wrap; gap:8px 16px; margin-bottom:22px; white-space:normal; }
:is(.login-box,.recovery-box) .tabs h1 { color:var(--join-text); font-size:23px; line-height:1.2; }
:is(.login-box,.recovery-box) a { color:var(--join-link); }
:is(.login-box,.recovery-box) a:hover, :is(.login-box,.recovery-box) a:focus-visible { color:var(--join-accent); }
:is(.login-box,.recovery-box) .inputbox > span { background:var(--join-surface); color:var(--join-muted); }
:is(.login-box,.recovery-box) .inputbox > input, :is(.login-box,.recovery-box) .inputbox > textarea {
  min-width:0; max-width:100%; width:100%; min-height:44px; border:1px solid var(--join-border);
  border-radius:11px; background:var(--join-field); color:var(--join-text);
}
:is(.login-box,.recovery-box) .inputbox > input:focus { border-color:var(--join-accent); box-shadow:0 0 0 3px rgba(10,141,235,.14); }
:is(.login-box,.recovery-box) .inputbox > input:focus + span { color:var(--join-accent); }
:is(.login-box,.recovery-box) .next-step { width:100%; min-height:46px; border-radius:11px; background:linear-gradient(105deg,#0bb7e9,#087de6); box-shadow:0 9px 24px rgba(7,126,211,.21); color:#fff; font-weight:700; }
:is(.login-box,.recovery-box) .error, :is(.login-box,.recovery-box) .success { border-radius:10px; line-height:1.4; }
@media (prefers-color-scheme:dark) {
  body:not(.cabinet-redesign--day) :is(.login-box,.recovery-box) {
    --join-surface:#19162f; --join-text:#f7f6ff; --join-muted:#b8b7d5;
    --join-border:#51447a; --join-field:#26213f; --join-link:#92d4ff; --join-accent:#ad73f4;
    box-shadow:0 22px 65px rgba(2,3,17,.45);
  }
  body:not(.cabinet-redesign--day) :is(.login-box,.recovery-box) .next-step { background:linear-gradient(105deg,#a729dc,#6355e8); box-shadow:0 9px 24px rgba(82,55,178,.27); }
}
body.cabinet-redesign--night :is(.login-box,.recovery-box) {
  --join-surface:#19162f; --join-text:#f7f6ff; --join-muted:#b8b7d5;
  --join-border:#51447a; --join-field:#26213f; --join-link:#92d4ff; --join-accent:#ad73f4;
}
body.cabinet-redesign--night :is(.login-box,.recovery-box) .next-step { background:linear-gradient(105deg,#a729dc,#6355e8); }
@media (max-width:560px) {
  :is(.login-box,.recovery-box) { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:20px; border-radius:18px; }
  :is(.login-box,.recovery-box) .tabs h1 { font-size:20px; }
}
@media (max-width:360px) { :is(.login-box,.recovery-box) { padding:16px; } :is(.login-box,.recovery-box) .tabs { font-size:15px; } }

/* iOS zooms the entire viewport when a focused editable field is below 16px. */
@media (max-width: 560px) {
  :is(.join-box,.login-box,.recovery-box) .inputbox > input:not([type="hidden"]):not([disabled]),
  :is(.join-box,.login-box,.recovery-box) .inputbox > textarea {
    font-size: 16px;
  }
}