:root {
  --fg:#222; --bg:#fff; --pri:#1e88e5; --err:#d32f2f; --bd:#e5e7eb;
  --toggleW:64px; /* �� �\���{�^���Œ蕝 */
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  color:var(--fg); background:var(--bg);
}

.container {
  max-width:420px;
  margin:40px auto;
  padding:24px;
  border:1px solid var(--bd);
  border-radius:12px;
  box-sizing:border-box;
  background:#fff;
}

h1 { font-size:20px; margin:0 0 16px; }
.field { margin-bottom:14px; }
label { display:block; font-size:13px; margin-bottom:6px; }

/* ���͗��i���[���E�p�X���[�h���ʊO�ρj */
input[type="email"] {
  width:100%; height:40px;
  padding:0 12px;
  border:1px solid var(--bd);
  border-radius:8px;
  font-size:16px;
  background:#fff;
  box-sizing:border-box;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
input[type="email"]:focus {
  border-color:#a5d0ff;
  box-shadow:0 0 0 3px rgba(30,136,229,.15);
  outline:none;
}

/* �� �p�X���[�h���i���Œ�{�g�O�������z�u�j */
.input-wrap {
  position:relative;
  width:100%; height:40px;
  overflow:hidden; /* �͂ݏo���h�~ */
}

.input-wrap > input {
  position:absolute; inset:0;
  width:100%; height:100%;
  padding:0 calc(var(--toggleW) + 14px) 0 12px;
  border:1px solid var(--bd);
  border-radius:8px;
  background:#fff;
  font-size:16px;
  line-height:1.2;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  outline:none;
  box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s;
}
.input-wrap > input:focus {
  border-color:#a5d0ff;
  box-shadow:0 0 0 3px rgba(30,136,229,.15);
}

/* �\���{�^���F�Œ蕝�œ��͓��ɏd�˂�i�O�`�ɉe���Ȃ��j */
.togglepw {
  position:absolute;
  right:8px; top:0; bottom:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--toggleW);
  min-width:var(--toggleW);
  border:0; background:transparent;
  color:#555; cursor:pointer; white-space:nowrap;
  font:500 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent;
  user-select:none; z-index:1;
}
.togglepw:focus { outline:none; }
.togglepw:hover, .togglepw:active { background:transparent; }

/* �G���[�E�⏕ */
.error { font-size:12px; color:var(--err); margin-top:6px; display:none; }
.helper { font-size:12px; color:#666; margin-top:6px; }

/* ���̑� */
.row-actions { display:flex; justify-content:space-between; align-items:center; margin:8px 0 16px; font-size:13px; flex-wrap:wrap; gap:8px; }
.remember { display:flex; align-items:center; gap:8px; }
.btn { width:100%; padding:12px; background:var(--pri); color:#fff; border:0; border-radius:8px; font-weight:600; cursor:pointer; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.footer { margin-top:14px; font-size:13px; display:flex; justify-content:space-between; }
.link { color:var(--pri); text-decoration:none; }
.notice { font-size:12px; color:#555; margin-top:10px; }
.alert { background:#fff3f3; border:1px solid #ffd1d1; color:#b00020; padding:10px; border-radius:8px; font-size:13px; margin-bottom:14px; display:none; }

/* 新規会員登録 CTA */
.signup-cta {
  margin-top:16px;
  justify-content:center;
}

.signup-btn {
  display:block;
  width:100%;
  text-align:center;
  padding:14px 12px;
  border-radius:12px;
  background:#eef6ff;
  border:2px solid var(--pri);
  color:#0f172a;
  font-weight:700;
  text-decoration:none;
  line-height:1.4;
  box-shadow:0 6px 18px rgba(30,136,229,.15);
}

.signup-btn strong {
  color:var(--pri);
  font-size:15px;
}

.signup-btn:hover {
  transform:translateY(-1px);
}