:root { --navy:#123852; --blue:#23658f; --page:#f2f6f9; --line:#d9e2ea; --ink:#17222d; --muted:#667085; --red:#b42318; --green:#376d25; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"Microsoft YaHei",sans-serif; color:var(--ink); background:radial-gradient(circle at 12% 12%,rgba(76,151,191,.18),transparent 24rem),radial-gradient(circle at 88% 90%,rgba(35,101,143,.10),transparent 30rem),linear-gradient(145deg,#edf4f8,#fbfcfd 55%,#edf4f8); min-height:100vh; -webkit-font-smoothing:antialiased; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { position:relative; width:min(440px,100%); padding:38px; overflow:hidden; background:rgba(255,255,255,.96); border:1px solid rgba(196,211,221,.9); border-radius:20px; box-shadow:0 28px 80px rgba(23,63,95,.15); }
.auth-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--navy),#5aa3c7); }
.logo { width:54px; height:54px; display:grid; place-items:center; border-radius:15px; background:linear-gradient(145deg,var(--navy),var(--blue)); color:white; font-size:24px; font-weight:800; box-shadow:0 13px 28px rgba(23,63,95,.22); }
.eyebrow { margin:22px 0 5px; color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:0; font-size:28px; }
.subtle { color:var(--muted); line-height:1.6; font-size:14px; }
form { display:grid; gap:16px; margin-top:22px; }
label { display:grid; gap:7px; font-size:13px; font-weight:700; }
input { width:100%; min-height:46px; padding:11px 12px; border:1px solid #bdcad5; border-radius:10px; background:#fbfcfd; font:inherit; outline:none; transition:.15s ease; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(33,91,132,.12); }
button { min-height:46px; border:0; border-radius:10px; padding:11px 16px; background:linear-gradient(145deg,var(--blue),var(--navy)); color:white; font:inherit; font-weight:700; cursor:pointer; box-shadow:0 10px 20px rgba(35,101,143,.18); transition:.15s ease; }
button:hover { transform:translateY(-1px); box-shadow:0 13px 25px rgba(35,101,143,.24); }
.footer-link { margin:22px 0 0; text-align:center; color:var(--muted); font-size:13px; }
a { color:var(--blue); }
.notice { margin:14px 0; padding:10px 12px; border-radius:8px; font-size:13px; }
.notice.error { background:#fff0ef; color:var(--red); }
.notice.warning { background:#fff7d6; color:#7a5d00; }
.notice.success { background:#eaf5e5; color:var(--green); }
.admin-page { background:var(--page); }
.admin-header { display:flex; justify-content:space-between; align-items:center; padding:16px 28px; background:var(--navy); color:white; }
.admin-header strong,.admin-header span { display:block; }
.admin-header span { margin-top:3px; color:#c9d8e5; font-size:12px; }
.admin-header nav { display:flex; gap:18px; }
.admin-header a { color:white; text-decoration:none; font-size:14px; }
.admin-main { max-width:1100px; margin:0 auto; padding:32px 20px; }
.admin-title { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
.account-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; background:white; }
.account-table { width:100%; border-collapse:collapse; font-size:14px; }
.account-table th,.account-table td { padding:13px 14px; border-bottom:1px solid #e7edf2; text-align:left; white-space:nowrap; }
.account-table th { background:#eef6fb; color:var(--navy); }
.pill { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; }
.pill.pending { background:#fff7d6; color:#7a5d00; }.pill.active { background:#eaf5e5; color:var(--green); }.pill.rejected { background:#fff0ef; color:var(--red); }
.actions { display:flex; gap:7px; }.actions form { margin:0; display:block; }.small { padding:6px 10px; font-size:12px; }.small.reject { background:#fff0ef; color:var(--red); }.small.approve { background:#eaf5e5; color:var(--green); }
@media (max-width:600px) {
  .auth-shell { padding:14px; }
  .auth-card { padding:30px 24px; border-radius:17px; }
  .admin-header { align-items:flex-start; padding:15px 18px; }
  .admin-header nav { gap:10px; flex-wrap:wrap; justify-content:flex-end; }
  .admin-main { padding:24px 14px; }
}