:root{
  --green:#2a7f4f;
  --green-dark:#1f5d38;
  --green-light:#3da168;
  --bg:#f4f8f4;
  --bg-alt:#e8f5e9;
  --border:#cfe3d6;
  --border-dark:#a8d4b8;
  --text:#1f2d23;
  --text-light:#4a5d52;
  --error:#d32f2f;
  --error-bg:#ffebee;
  --success:#2e7d32;
  --success-bg:#e8f5e9;
  --shadow:0 2px 8px rgba(0,0,0,0.1);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.15);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{color:var(--green);text-decoration:none;transition:color 0.2s}
a:hover{color:var(--green-dark)}

.wrap{max-width:900px;margin:0 auto;padding:14px}

.card{
  background:#fff;
  border:1px solid var(--border);
  padding:16px;
  margin:10px 0;
  border-radius:8px;
  box-shadow:var(--shadow);
}

.hd{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.hd .title{
  font-size:18px;
  font-weight:700;
  color:var(--green);
  margin:0;
}

.btn{
  display:inline-block;
  padding:10px 20px;
  border:1px solid var(--green);
  color:#fff;
  background:var(--green);
  cursor:pointer;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  transition:all 0.2s;
  text-align:center;
}

.btn:hover{
  background:var(--green-dark);
  border-color:var(--green-dark);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

.btn:active{
  transform:translateY(0);
}

.btn2{
  display:inline-block;
  padding:10px 20px;
  border:1px solid var(--green);
  color:var(--green);
  background:#fff;
  cursor:pointer;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  transition:all 0.2s;
  text-align:center;
}

.btn2:hover{
  background:var(--bg-alt);
  border-color:var(--green-dark);
  color:var(--green-dark);
}

.btn-block{
  display:block;
  width:100%;
}

input,select{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:6px;
  width:100%;
  font-size:14px;
  font-family:inherit;
  transition:border-color 0.2s,box-shadow 0.2s;
}

input:focus,select:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(42,127,79,0.1);
}

table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0;
}

th,td{
  border:1px solid var(--border);
  padding:10px;
  text-align:left;
  vertical-align:top;
}

th{
  background:var(--bg-alt);
  font-weight:600;
}

small{color:var(--text-light);font-size:13px}

.badge{
  display:inline-block;
  padding:3px 8px;
  border:1px solid var(--border);
  background:var(--bg);
  margin-left:6px;
  border-radius:4px;
  font-size:12px;
  font-weight:500;
}

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.col{
  flex:1;
  min-width:240px;
}

.err{color:var(--error);font-weight:500}

.ok{color:var(--success);font-weight:500}

hr{
  border:none;
  border-top:1px solid var(--border);
  margin:15px 0;
}

/* 登录页面样式 */
.login-container{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:calc(100vh - 100px);
  padding:20px;
}

.login-card{
  background:#fff;
  border-radius:12px;
  box-shadow:var(--shadow-lg);
  padding:40px;
  width:100%;
  max-width:420px;
  border:1px solid var(--border);
}

.login-header{
  text-align:center;
  margin-bottom:30px;
}

.login-header h1{
  font-size:32px;
  font-weight:700;
  color:var(--green);
  margin:0 0 8px 0;
}

.login-subtitle{
  color:var(--text-light);
  font-size:14px;
  margin:0;
}

.login-form{
  margin-top:20px;
}

.form-group{
  margin-bottom:20px;
}

.form-group label{
  display:block;
  margin-bottom:6px;
  font-weight:500;
  color:var(--text);
  font-size:14px;
}

.alert{
  padding:12px 16px;
  border-radius:6px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}

.alert-error{
  background:var(--error-bg);
  color:var(--error);
  border:1px solid #ffcdd2;
}

.alert-success{
  background:var(--success-bg);
  color:var(--success);
  border:1px solid #c8e6c9;
}

.alert span{
  font-size:16px;
}

.login-footer{
  text-align:center;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--border);
  color:var(--text-light);
  font-size:14px;
}

.login-footer .link{
  color:var(--green);
  font-weight:500;
  margin-left:4px;
}

.login-footer .link:hover{
  text-decoration:underline;
}

.btn-primary{
  background:var(--green);
  border-color:var(--green);
  font-size:16px;
  padding:12px;
  font-weight:600;
}

.btn-primary:hover{
  background:var(--green-dark);
  border-color:var(--green-dark);
}

/* 响应式 */
@media (max-width:768px){
  .login-card{
    padding:30px 20px;
  }
  
  .login-header h1{
    font-size:28px;
  }
  
  .hd{
    flex-direction:column;
    align-items:flex-start;
  }
  
  .hd > div{
    width:100%;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
}