.mn-wrap { position: relative; z-index: 2; width: min(720px, calc(100% - 28px)); margin: 30px auto 80px; }
.mn-hero { text-align: center; margin-bottom: 22px; }
.mn-hero h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -.03em; }
.mn-hero p { margin: 0; color: var(--text-muted); font-size: 1.05rem; }

/* выбор устройства: три крупные кнопки */
.mn-devices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 560px) { .mn-devices { grid-template-columns: repeat(2, 1fr); } }
.mn-devices button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 10px; border-radius: 20px; cursor: pointer;
  border: 2px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--text); font: inherit;
  transition: transform .15s, border-color .15s, background .15s; }
.mn-devices button:hover { transform: translateY(-2px); border-color: var(--accent); }
.mn-devices button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.mn-dev-ico { font-size: 2.2rem; line-height: 1.1; }
.mn-devices b { font-size: 1.05rem; }
.mn-devices small { color: var(--text-muted); font-size: .78rem; }

.mn-pane { margin-top: 22px; padding: 24px; border-radius: 24px; border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: var(--shadow-md); backdrop-filter: blur(14px); }
.mn-pane[hidden], .mn-done[hidden] { display: none; }
.mn-btn { display: flex; justify-content: center; width: 100%; box-sizing: border-box; padding: 18px 20px; font-size: 1.2rem; text-decoration: none; border-radius: 16px; }
.mn-file { margin: 8px 0 0; text-align: center; color: var(--text-muted); font-size: .8rem; }
.mn-file:empty { display: none; }
.mn-note { padding: 14px 16px; border-radius: 16px; line-height: 1.5; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }

/* шаги: крупная иконка, короткий заголовок, одно-два предложения */
.mn-steps { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.mn-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); }
.mn-i { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem;
  background: color-mix(in srgb, var(--accent) 18%, transparent); }
.mn-steps b { display: block; font-size: 1.05rem; margin-bottom: 3px; }
.mn-steps p { margin: 0; color: var(--text-muted); line-height: 1.5; font-size: .94rem; }
.mn-help { margin-top: 16px; padding: 12px 16px; border-radius: 16px; border: 1px dashed var(--border-strong); }
.mn-help summary { cursor: pointer; font-weight: 700; }
.mn-help ul { margin: 10px 0 0; padding-left: 20px; color: var(--text-muted); line-height: 1.6; font-size: .92rem; }
.mn-alt { margin: 16px 0 0; text-align: center; color: var(--text-muted); font-size: .92rem; }
.mn-wrap code { padding: 1px 7px; border-radius: 7px; background: var(--surface); color: var(--accent); word-break: break-all; }
.mn-done { margin-top: 22px; padding: 18px 22px; border-radius: 20px; text-align: center; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mn-done p { margin: 6px 0 0; color: var(--text-muted); line-height: 1.5; }
.mn-qr { display: flex; align-items: center; gap: 20px; margin-top: 22px; padding: 20px; border-radius: 22px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, transparent); }
#qrBox { background: #fff; padding: 10px; border-radius: 12px; line-height: 0; flex: none; }
.mn-qr p { margin: 4px 0; color: var(--accent); word-break: break-all; }
.mn-qr small { color: var(--text-muted); }
@media (max-width: 560px) {
  .mn-qr { display: none; }
  .mn-pane { padding: 18px 14px; }
  .mn-devices { gap: 8px; }
  .mn-devices button { padding: 14px 6px; }
  .mn-dev-ico { font-size: 1.8rem; }
}

/* открыто из окна «Войти в сеть» при подключении к Wi-Fi */
.mn-wifi[hidden], .mn-wifi-bar[hidden] { display: none; }
.mn-wifi { margin-bottom: 22px; padding: 18px 22px; border-radius: 20px; text-align: center;
  border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.mn-wifi b { font-size: 1.1rem; }
.mn-wifi p { margin: 6px 0 14px; color: var(--text-muted); line-height: 1.5; }
.mn-wifi-bar { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
  width: min(420px, calc(100% - 32px)); text-align: center; box-shadow: var(--shadow-md); }
body.mn-has-wifi-bar .mn-wrap { margin-bottom: 120px; }

/* номер телефона перед входом в сеть */
.mn-wifi-form[hidden], .mn-wifi-err[hidden] { display: none; }
.mn-wifi-form { display: grid; gap: 8px; max-width: 360px; margin: 0 auto; text-align: left; }
.mn-wifi-form label { font-weight: 600; font-size: .9rem; }
.mn-wifi-form input { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: 1.1rem; }
.mn-wifi-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.mn-wifi-err { margin: 0; color: var(--danger, #e5484d); font-size: .9rem; }

/* упрощённая инструкция: только две кнопки */
.mn-simple[hidden] { display: none; }
.mn-simple { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; text-align: center; }
.mn-simple-os { margin: 0; color: var(--text-muted); }
.mn-big { display: block; padding: 18px 20px; border-radius: 18px; font-size: 1.15rem; font-weight: 700; text-align: center; text-decoration: none; }
.mn-simple .mn-file { margin: -4px 0 6px; }
body.mn-simple-mode .mn-devices, body.mn-simple-mode .mn-pane, body.mn-simple-mode .mn-done, body.mn-simple-mode .mn-qr { display: none !important; }