:root{
  --gap: 14px;
  --btn-h: 54px;
  --radius: 14px;
  --ink: #0f172a;
  --bg: #f6f8fc;
  --stroke: #3f3f46; /* тот же графитовый */
}

*{ box-sizing: border-box; }
html,body{ min-height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* контейнер + безопасные отступы (-30%) */
.wrap{
  max-width: 560px;
  margin: 0 auto;
  padding-left: calc(17px + env(safe-area-inset-left));   /* было 24px */
  padding-right: calc(17px + env(safe-area-inset-right));
}

.auth{ padding: 24px 0 28px; }
h1{ margin: 0 0 12px; font-size: 28px; font-weight: 800; }

.form{ display: grid; gap: var(--gap); }
.form-error{ margin: 0 0 12px; color: #b91c1c; font-weight: 600; }

.input{
  width: 100%;
  height: var(--btn-h);
  border: 2px solid var(--stroke);
  border-radius: var(--radius);
  background: #fff;
  padding: 0 14px;
  font-size: 16px;
}

.btn{
  width: 100%;
  height: var(--btn-h);
  border: 2px solid var(--stroke);
  border-radius: var(--radius);
  background: #efebff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active{ transform: translateY(1px); }

@media (max-width:420px){
  :root{ --btn-h: 52px; }
}