:root{
  --bg1:#1e88e5; --bg2:#00bcd4;
  --card:#ffffff; --text:#0f172a; --muted:#6b7280; --stroke:#e5e7eb;
  --shadow:0 16px 40px rgba(15,23,42,.12);
  --radius:16px; --radius-sm:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font:14px/1.5 "Segoe UI",system-ui,Roboto,Arial,sans-serif;color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,.20), transparent),
              linear-gradient(135deg,var(--bg1),var(--bg2));
}

/* wrapper */
.login-wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 16px}

/* brand */
.brand{display:flex;align-items:center;gap:14px;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.18)}
.brand img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.4)}
.brand h1{font-size:26px;font-weight:900;letter-spacing:.5px}
.brand h1 span{opacity:.95}

/* card */
.login-card{width:min(520px,96vw);background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.login-card h2{font-size:22px;margin-bottom:2px}
.login-card .sub{color:var(--muted);margin-bottom:14px}

/* alerts */
.alert{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;margin-bottom:10px;font-weight:700}
.alert.error{background:#fdecea;color:#9b1c1c}
.alert.success{background:#e8f5e9;color:#166534}

/* form */
.form{display:grid;gap:14px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:800}
.input{display:flex;align-items:center;gap:10px;border:1px solid var(--stroke);border-radius:var(--radius-sm);background:#fff;padding:10px 12px}
.input i{color:#1e88e5}
.input input{border:none;outline:none;background:transparent;width:100%;font-size:14px;color:var(--text)}
.eye{border:none;background:transparent;cursor:pointer;color:#64748b;padding:4px;border-radius:8px}
.eye:hover{background:#f0f5ff}

/* buttons */
.btn{border:none;border-radius:14px;padding:12px 16px;font-weight:900;cursor:pointer;background:#e5e7eb;color:#111827;display:inline-flex;gap:10px;align-items:center;justify-content:center}
.btn.primary{background:linear-gradient(180deg,#1e88e5,#1565c0);color:#fff;box-shadow:0 10px 28px rgba(30,136,229,.28)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:#eef2f7;color:#0f172a}

/* divider */
.divider{display:flex;align-items:center;gap:10px;margin:10px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:#e8eef9}
.divider span{color:#8aa0bd;font-weight:700}

/* hint */
.hint{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.muted{color:var(--muted)}
.badge{background:#eef2ff;color:#1e3a8a;border-radius:999px;padding:4px 10px;font-weight:800}

/* modal */
.modal{position:fixed;inset:0;background:rgba(2,6,23,.35);display:none;place-items:center;padding:18px;z-index:50}
.modal.show{display:grid}
.modal-card{width:min(760px,96vw);background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:18px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.modal-head h3{font-size:18px}
.close{border:none;background:#f1f5f9;border-radius:10px;width:36px;height:36px;cursor:pointer}
.close:hover{filter:brightness(0.98)}

.modal .form{margin-top:10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}

.modal input[type="file"]{border:1px solid var(--stroke);border-radius:12px;padding:10px 12px;background:#fff}
.modal input[type="file"]::file-selector-button{margin-right:10px;border:0;background:#1e88e5;color:#fff;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer}

.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}