*, *::before, *::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; width:100%; }
body{ font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; color:#222; background:#f7f7f7 }

.account-container{ max-width:360px; margin:0 auto; padding:0 18px; min-height: calc(100vh - 72px); display:flex; flex-direction:column; justify-content:center; }
.page-header{ text-align:center; margin-bottom:18px }
.page-title{ font-size:35px; font-weight:700; margin:0 0 8px }

.app-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
  font-weight: 500;
}

.account-form{ display:block; padding:0 6px }
.field-label{ display:block; text-align:center; color:#666; margin-bottom:8px; font-size:13px }
.text-input{ display:block; width:100%; height:44px; padding:12px 12px; border:1px solid #e6e6e6; background:#fff; border-radius:4px; margin-bottom:16px }
.password-wrap{ position:relative }
.pwd-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:#eee; border:0; width:36px; height:36px; border-radius:18px; display:flex; align-items:center; justify-content:center; padding:0 }
.pwd-toggle img{ width:18px; height:18px; display:block }
.password-wrap .text-input{ padding-right:56px }

.btn.register{ display:block; width:100%; background:#f6c84b; color:#111; padding:12px 16px; border-radius:6px; border:0; font-weight:700; font-size:18px; margin-top:8px; height:48px }

.social-signup{ text-align:center; margin-bottom:18px }
.social-label{ color:#666; margin-bottom:14px; font-size:13px }
.social-buttons{ display:flex; justify-content:center; gap:48px; margin-bottom:18px }
.social{ background:none; border:0; padding:0; cursor:pointer }
.social img{ width:52px; height:52px; border-radius:50%; display:block; box-shadow:0 6px 0 rgba(0,0,0,0.06); background:#fff }

.sep{ height:1px; background:#e0dede; margin:12px 0 18px; width:100% }

.password-hint {
  background: #f9f9f9;
  border-left: 3px solid #4e8acb;
  padding: 12px 12px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

.password-hint ul {
  margin: 0;
  padding-left: 20px;
}

.password-hint li {
  margin-bottom: 4px;
}

@media (min-width:768px){
  .account-container{ margin-top:48px }
  .page-title{ font-size:22px }
  .social img{ width:64px; height:64px }
}