*{box-sizing:border-box}
body{margin:0;background:#f3f6fa;font-family:Arial,Helvetica,sans-serif;color:#1f2937}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:#0f4c5c;color:#fff;box-shadow:0 2px 10px rgba(15,23,42,.12)}
.topbar div{display:flex;flex-direction:column;gap:2px}
.topbar span{font-size:12px;opacity:.8}
.logout{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.45);padding:8px 13px;border-radius:8px;font-size:14px}
.logout:hover{background:rgba(255,255,255,.12)}
.container{max-width:840px;margin:34px auto;padding:0 16px}
.card,.login-card{background:#fff;border-radius:16px;padding:28px;box-shadow:0 10px 30px rgba(15,23,42,.08)}
h1{margin:0 0 8px;color:#0f5c62;font-size:28px}
h2{margin-top:26px;font-size:19px}
.lead{margin:0 0 24px;color:#64748b;line-height:1.6}
label{display:block;font-weight:700;margin:18px 0 7px}
input,textarea{width:100%;border:1px solid #cbd5e1;border-radius:9px;padding:11px 12px;font-size:15px}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none;border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.12)}
button{width:100%;margin-top:22px;border:0;border-radius:9px;padding:13px;background:#0f766e;color:#fff;font-weight:700;font-size:16px;cursor:pointer}
button:hover{background:#115e59}
.hint,.notice{font-size:13px;color:#64748b;line-height:1.6}
.notice{margin-top:25px;background:#f8fafc;padding:12px;border-radius:8px}
.or{text-align:center;margin:13px 0;color:#94a3b8;font-weight:700}
.summary{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.summary span{padding:9px 12px;border-radius:8px;font-weight:700}
.success{background:#ecfdf5;color:#065f46}
.danger{background:#fef2f2;color:#991b1b}
.warning{background:#fffbeb;color:#92400e}
li{margin:7px 0;line-height:1.5}
.back{display:inline-block;margin-top:22px;text-decoration:none;font-weight:700;color:#0f766e}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:430px}
.brand-mark{width:52px;height:52px;border-radius:14px;background:#0f766e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;margin-bottom:18px}
.alert{padding:11px 13px;border-radius:8px;margin:16px 0}
.alert.danger{background:#fef2f2;color:#991b1b}
@media(max-width:600px){
  .card,.login-card{padding:20px}
  h1{font-size:23px}
  .topbar{padding:12px 14px}
}