.shell {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.brand { font-size: 13px; color: var(--ink-2); margin-bottom: 22px; }

.lead { margin-top: 8px; color: var(--ink-2); max-width: 36ch; }

.who { margin-bottom: 18px; }
.who h1 { word-break: break-word; }
.who .muted { margin-top: 4px; }

/* QR */
.qr-box {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.qr-box canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.qr-box .qr-wait {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #51606f; background: #fff;
}

.timer { margin-top: 12px; }
.timer-bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.timer-bar > i { display: block; height: 100%; width: 100%; background: var(--in); transform-origin: left center; }
.timer-text { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--ink-2); }

.notice {
  margin-top: 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--late);
  background: var(--late-bg);
  color: var(--ink);
  font-size: 14px;
}
.notice.bad { border-color: var(--bad); background: var(--bad-bg); }
.notice.ok { border-color: var(--in); background: var(--in-bg); }

.hint { margin-top: 18px; color: var(--ink-2); font-size: 14px; }

.footer { margin-top: auto; padding-top: 28px; }
.link-btn {
  background: none; border: 0; padding: 4px 0; color: var(--ink-2);
  text-decoration: underline; cursor: pointer; font-size: 13px;
}

/* активация */
.code-input {
  font-size: 26px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  min-height: 56px;
  font-variant-numeric: tabular-nums;
}
.activate .btn { width: 100%; min-height: 48px; font-size: 16px; }
.form-error { min-height: 1.4em; font-size: 14px; }