body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: #fff;
  border-bottom: 3px solid var(--brand);
}

.app-header-inner {
  width: min(1040px, calc(100% - 32px));
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.brand-main {
  color: var(--brand-dark);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
}

.brand-sub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
}

.header-user a {
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
}

.auth-main,
.menu-main {
  width: min(900px, calc(100% - 32px));
  margin: 42px auto 64px;
  flex: 1;
}

.auth-main {
  display: grid;
  place-items: start center;
}

.login-card {
  width: min(520px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.login-heading {
  margin-bottom: 24px;
}

.login-service {
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
}

.login-heading h1,
.menu-heading h1 {
  margin: 4px 0 6px;
  color: var(--brand-dark);
  font-size: 28px;
}

.login-heading p,
.menu-heading p {
  margin: 0;
  color: var(--muted);
}

.login-form {
  display: grid;
  gap: 18px;
}

.login-button {
  width: 100%;
  margin-top: 4px;
}

.login-error {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #e3a2a2;
  background: #fff5f5;
  color: #8d2525;
  font-weight: 700;
}

.menu-heading {
  margin-bottom: 22px;
}

.menu-list {
  display: grid;
  gap: 14px;
}

.menu-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--line);
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 5px 16px rgba(36,52,71,.05);
}

.menu-item:hover {
  border-color: #8bbce1;
  background: #f8fbfe;
}

.menu-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #eaf3fb;
  font-size: 24px;
}

.menu-copy strong {
  display: block;
  color: var(--brand-dark);
  font-size: 18px;
}

.menu-copy small {
  color: var(--muted);
}

.menu-arrow {
  color: var(--brand);
  font-weight: 900;
}

.menu-item-secondary .menu-icon {
  background: #eef1f4;
}

.app-footer {
  margin-top: auto;
  padding: 22px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.app-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.app-footer a {
  color: #50667c;
  text-decoration: none;
}

.app-footer p {
  margin: 0;
}

@media (max-width: 640px) {
  .app-header-inner {
    min-height: 62px;
    width: calc(100% - 20px);
  }

  .brand-main {
    font-size: 18px;
  }

  .header-user > span {
    display: none;
  }

  .header-user {
    gap: 10px;
  }

  .auth-main,
  .menu-main {
    width: calc(100% - 20px);
    margin-top: 24px;
  }

  .login-card {
    padding: 22px 18px;
  }

  .menu-item {
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    padding: 16px;
  }

  .menu-icon {
    width: 42px;
    height: 42px;
  }
}

.profile-success{margin-bottom:18px;padding:12px 14px;border:1px solid #9fd1b8;background:#f1fbf6;color:#17653e;font-weight:800}
.step-actions a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

.login-register-link{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:14px}
.login-register-link a{color:var(--brand);font-weight:900;text-decoration:none}
.field-help{color:var(--muted);font-size:12px}
.registration-complete h1{margin-top:0;color:var(--brand-dark)}
.registration-complete .btn{display:inline-flex;text-decoration:none}

.login-register-link{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:14px}
.login-register-link a{color:var(--brand);font-weight:900;text-decoration:none}
.field-help{color:var(--muted);font-size:12px}
.registration-complete h1{margin-top:0;color:var(--brand-dark)}
.registration-complete .btn{display:inline-flex;text-decoration:none}

.display-value-text{font-weight:700;word-break:break-all}
.email-change-form{margin-top:20px}
.email-change-form .btn{width:100%;text-decoration:none;text-align:center}


/* Phase2: 履歴サムネイル */
.history-files { padding-left: 0; list-style: none; }
.history-file-item { display:flex; gap:14px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.history-file-item:last-child { border-bottom:0; }
.history-thumbnail { width:128px; height:96px; object-fit:contain; flex:0 0 128px; border:1px solid var(--line); background:#f5f7f9; }
.history-file-copy { min-width:0; }
@media(max-width:640px){ .history-thumbnail{width:96px;height:72px;flex-basis:96px;} }


/* Password features */
.login-help-link { margin-top:14px; text-align:right; font-size:14px; }
.login-help-link a { color:var(--brand); font-weight:800; text-decoration:none; }
.auth-secondary-link { display:flex; align-items:center; justify-content:center; width:100%; text-decoration:none; }