*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,sans-serif;
  background:#f0f0f0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.top-bar{
  width:100%;
  background:#fff;
  border-bottom:3px solid #f26522;
  padding:10px 2rem;
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  z-index:10;
  flex-shrink:0;
}
.top-bar img{
  height:60px;width:60px;
  object-fit:contain;
}
.top-bar-text .uni-name{
  font-size:18px;font-weight:700;
  color:#f26522;line-height:1.2;
}
.top-bar-text .uni-sub{
  font-size:12px;color:#555;margin-top:2px;
}
.top-bar-text .uni-tagline{
  font-size:11px;color:#888;margin-top:1px;
  font-style:italic;
}
.main-layout{
  flex:1;
  display:flex;
  min-height:0;
}
.campus-side{
  flex:1;
  position:relative;
  overflow:hidden;
  min-height:500px;
}
.campus-side img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.campus-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0.55) 100%
  );
}
.campus-caption{
  position:absolute;bottom:24px;left:24px;right:24px;
  color:#fff;z-index:2;
}
.campus-caption h2{
  font-size:22px;font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
  line-height:1.3;
}
.campus-caption p{
  font-size:13px;margin-top:4px;
  color:rgba(255,255,255,0.85);
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
.form-side{
  width:600px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2.5rem 2.5rem;
  box-shadow:-4px 0 20px rgba(0,0,0,0.08);
  flex-shrink:0;
}
.form-logo{text-align:center;margin-bottom:0.5rem}
.form-logo img{
  object-fit:contain;
  padding:4px;
  background:#fff;
  /*box-shadow:0 2px 12px rgba(242,101,34,0.2);*/
}
.form-title{
  font-size:22px;font-weight:700;
  color:#222;text-align:center;
  margin:-10px 0 6px;
}
.form-subtitle{
  font-size:12.5px;color:#888;
  text-align:center;margin-bottom:1.5rem;
}
.alert{
  width:100%;padding:10px 14px;
  border-radius:6px;font-size:12px;
  margin-bottom:1rem;
  display:flex;gap:8px;
  align-items:flex-start;border:1px solid;
}
.alert-error{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.alert-success{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.form-full{width:100%}
.field-wrap{
  position:relative;
  margin-bottom:1.1rem;
  width:100%;
}
.field-wrap label{
  position:absolute;
  top:50%;left:14px;
  transform:translateY(-50%);
  font-size:13px;color:#999;
  pointer-events:none;
  transition:all 0.18s ease;
  background:#fff;
  padding:0 3px;
}
.field-wrap input{
  width:100%;
  padding:14px 42px 14px 14px;
  border:1.5px solid #d1d5db;
  border-radius:6px;
  font-size:14px;color:#111;
  background:#f8fafc;
  outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
  font-family:'Segoe UI',system-ui,sans-serif;
}
.field-wrap input:focus,
.field-wrap input:not(:placeholder-shown){
  background:#fff;
}
.field-wrap input:focus{
  border-color:#f26522;
  box-shadow:0 0 0 3px rgba(242,101,34,0.12);
}
.field-wrap input:focus ~ label,
.field-wrap input:not(:placeholder-shown) ~ label{
  top:0;font-size:11px;
  color:#f26522;font-weight:600;
}
.field-wrap input.err{border-color:#ef4444}
.err-msg{
  font-size:11px;color:#ef4444;
  margin-top:-8px;margin-bottom:6px;
  display:flex;gap:4px;align-items:center;
}
.eye-btn{
  position:absolute;right:12px;top:50%;
  transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  padding:2px;color:#9ca3af;font-size:17px;
  display:flex;align-items:center;
}
.eye-btn:hover{color:#f26522}
.captcha-row{
  display:flex;align-items:center;
  gap:10px;margin-bottom:1.1rem;width:100%;
}
.captcha-box{
  background:#f1f1f1;
  border:1.5px solid #d1d5db;
  border-radius:6px;
  padding:10px 16px;
  font-size:18px;font-weight:700;
  letter-spacing:5px;
  color:#333;
  font-family:monospace;
  flex-shrink:0;
  user-select:none;
  min-width:110px;
  text-align:center;
  text-decoration:line-through;
  text-decoration-color:rgba(0,0,0,0.2);
}
.captcha-refresh{
  background:none;border:none;
  cursor:pointer;color:#f26522;
  font-size:20px;
  display:flex;align-items:center;
  flex-shrink:0;transition:transform 0.3s;
}
.captcha-refresh:hover{transform:rotate(180deg)}
.captcha-inp{flex:1}
.captcha-inp input{
  width:100%;
  padding:12px 14px;
  border:1.5px solid #d1d5db;
  border-radius:6px;
  font-size:14px;color:#111;
  background:#f8fafc;outline:none;
  transition:border-color .15s,box-shadow .15s;
  font-family:'Segoe UI',system-ui,sans-serif;
}
.captcha-inp input:focus{
  border-color:#f26522;
  box-shadow:0 0 0 3px rgba(242,101,34,0.12);
  background:#fff;
}
.captcha-inp input::placeholder{color:#aaa;font-size:13px}
.signin-btn{
  width:100%;padding:13px;
  background:#f26522;color:#fff;
  border:none;border-radius:6px;
  font-size:15px;font-weight:700;
  letter-spacing:0.08em;
  cursor:pointer;
  transition:background .15s;
  font-family:'Segoe UI',system-ui,sans-serif;
  margin-bottom:1rem;
}
.signin-btn:hover{background:#c44e12}
.links-row{
  display:flex;align-items:center;
  justify-content:space-between;
  width:100%;margin-bottom:0.75rem;
}
.links-row a{
  font-size:13px;color:#f26522;
  text-decoration:none;
}
.links-row a:hover{text-decoration:underline}
.announce-btn{
  width:100%;padding:10px;
  background:#fff;color:#f26522;
  border:1.5px solid #f26522;
  border-radius:6px;
  font-size:13px;font-weight:700;
  letter-spacing:0.1em;
  cursor:pointer;
  transition:background .15s,color .15s;
  font-family:'Segoe UI',system-ui,sans-serif;
  text-transform:uppercase;
}
.announce-btn:hover{background:#fff4ee}
.form-footer{
  margin-top:1.5rem;
  font-size:11.5px;color:#aaa;
  text-align:center;line-height:1.6;
}
.bottom-bar{
  background:#fff;
  border-top:2px solid #f26522;
  text-align:center;
  padding:10px 1rem;
  font-size:12px;color:#888;
  flex-shrink:0;
}
.bottom-bar span{color:#f26522;font-weight:600}
.form-logo img { width: 180px;}
@media(max-width:768px){
  .main-layout{flex-direction:column}
  .campus-side{min-height:200px;max-height:240px}
  .form-side{width:100%;box-shadow:none;padding:1rem 1.5rem}
  .top-bar-text .uni-name{font-size:15px}
  .form-logo img { width: 110px;}
}
@keyframes spin-once{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.spin{animation:spin-once 0.4s ease}
.alert i{font-size:15px;flex-shrink:0;margin-top:1px}
.err-msg i{font-size:12px}
.form-footer code{background:#fff4ee;padding:1px 5px;border-radius:3px;color:#f26522;font-size:11px}
.campus-side.no-img{background:linear-gradient(135deg,#f26522,#c44e12)}