extends /layouts/empty.pug

block pageScripts 
  script(src="js/login.js")

block pageContent
  .login-container
    .login-card
      span.back-home-text
        a(href="/", title="返回首页") 返回首页
      h2 登录
      form#login-form(action="/login" method="post")
        .form-group
          label(for="username") 用户名
          input#username(type="text" name="username" placeholder="请输入用户名" required)
        .form-group
          label(for="password") 密码
          input#password(type="password" name="password" placeholder="请输入密码" required)
        button.login-btn(type="submit") 登录
      if error
        .login-error= error
  // 页面内联样式优化
  style.
    .login-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 80vh;
    }
    .login-card {
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
      padding: 2.5rem 2.5rem 2rem 2.5rem;
      min-width: 380px;
      max-width: 96vw;
      width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .back-home-text {
      position: absolute;
      left: 24px;
      top: 18px;
      font-size: 0.98rem;
      color: #bbb;
      font-weight: 500;
      letter-spacing: 1px;
    }
    .back-home-text a {
      color: #bbb;
      text-decoration: none;
      transition: color 0.2s;
    }
    .back-home-text a:hover {
      color: #7ec6f7;
      text-decoration: underline;
    }
    .login-card h2 {
      margin-bottom: 1.5rem;
      font-weight: 600;
      color: #333;
      letter-spacing: 2px;
    }
    .form-group {
      width: 100%;
      margin-bottom: 1.4rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .form-group label {
      margin-bottom: 0.5rem;
      color: #444;
      font-size: 1.13rem;
      font-weight: 600;
      letter-spacing: 1px;
    }
    .form-group input {
      width: 100%;
      padding: 0.7rem 1.1rem;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 1.08rem;
      outline: none;
      transition: border 0.2s;
    }
    .form-group input:focus {
      border-color: #7ec6f7;
    }
    .login-btn {
      width: 100%;
      padding: 0.8rem 0;
      border: none;
      border-radius: 20px;
      background: linear-gradient(135deg, #7ec6f7 0%, #ff8ca8 100%);
      color: #fff;
      font-size: 1.13rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(126,198,247,0.12);
      transition: background 0.2s, box-shadow 0.2s;
      margin-top: 0.7rem;
    }
    .login-btn:hover {
      background: linear-gradient(135deg, #5bb0e6 0%, #ff6f91 100%);
      box-shadow: 0 4px 16px rgba(255,140,168,0.12);
    }
    .login-error {
      color: #ff4d4f;
      margin-top: 1rem;
      font-size: 0.98rem;
      text-align: center;
    }