* { box-sizing: border-box; }
body { margin:0; font-family:Arial,"Microsoft YaHei",sans-serif; background:#0f172a; color:#e2e8f0; }
.wrap { max-width:1400px; margin:0 auto; padding:24px; }
.title { font-size:28px; font-weight:700; margin-bottom:20px; }
.toolbar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.toolbar select,.toolbar input,.modal input,.modal textarea {
  background:#1e293b; border:1px solid #334155; color:#e2e8f0;
  border-radius:10px; padding:10px 12px; outline:none;
}
.toolbar button,.btn {
  border:none; border-radius:10px; padding:8px 12px;
  cursor:pointer; font-size:13px; font-weight:700;
}
.toolbar > button { background:#2563eb; color:#fff; padding:10px 14px; }
.toolbar > button:hover { background:#1d4ed8; }
.card { background:#111827; border:1px solid #1f2937; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:900px; }
thead { background:#0b1220; }
th,td { padding:14px 12px; border-bottom:1px solid #1f2937; text-align:left; vertical-align:top; font-size:14px; }
th { color:#94a3b8; font-weight:700; }
tr:hover td { background:rgba(255,255,255,0.02); }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.badge-pending { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.35); }
.badge-approved { background:rgba(16,185,129,.15); color:#10b981; border:1px solid rgba(16,185,129,.35); }
.badge-rejected { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.35); }
.amount { font-weight:700; color:#f8fafc; }
.type-deposit { color:#22c55e; font-weight:700; }
.type-withdraw { color:#f97316; font-weight:700; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn-approve { background:#059669; color:#fff; }
.btn-approve:hover { background:#047857; }
.btn-reject { background:#dc2626; color:#fff; }
.btn-reject:hover { background:#b91c1c; }
.btn-cancel { background:#334155; color:#fff; }
.btn-cancel:hover { background:#475569; }
.btn-confirm { background:#dc2626; color:#fff; }
.btn-confirm:hover { background:#b91c1c; }
.muted { color:#94a3b8; }
.empty { text-align:center; padding:30px; color:#94a3b8; }
.top-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.summary-box { background:#111827; border:1px solid #1f2937; border-radius:18px; padding:18px; }
.summary-box .label { color:#94a3b8; font-size:13px; margin-bottom:8px; }
.summary-box .value { font-size:26px; font-weight:800; }
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:20px; }
.modal { width:100%; max-width:520px; background:#111827; border:1px solid #1f2937; border-radius:18px; padding:20px; }
.modal h3 { margin-top:0; margin-bottom:16px; }
.modal .row { margin-bottom:12px; }
.modal label { display:block; font-size:13px; color:#94a3b8; margin-bottom:6px; }
.modal textarea { width:100%; min-height:90px; resize:vertical; background:#1e293b; border:1px solid #334155; color:#e2e8f0; border-radius:10px; padding:10px 12px; }
.modal input { width:100%; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.login-page { min-height:100vh; display:none; align-items:center; justify-content:center; padding:24px; }
.login-card { width:100%; max-width:420px; background:#111827; border:1px solid #1f2937; border-radius:18px; padding:28px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.login-title { font-size:28px; font-weight:800; margin-bottom:8px; text-align:center; }
.login-subtitle { color:#94a3b8; font-size:14px; text-align:center; margin-bottom:20px; }
.login-form .row { margin-bottom:14px; }
.login-form label { display:block; font-size:13px; color:#94a3b8; margin-bottom:6px; }
.login-form input { width:100%; background:#1e293b; border:1px solid #334155; color:#e2e8f0; border-radius:10px; padding:10px 12px; outline:none; }
.login-actions { margin-top:18px; }
.login-btn { width:100%; border:none; border-radius:10px; padding:12px; cursor:pointer; font-size:14px; font-weight:700; background:#2563eb; color:#fff; }
.login-btn:hover { background:#1d4ed8; }
.login-error { min-height:22px; margin-top:10px; color:#f87171; font-size:13px; text-align:center; }
.topbar-auth { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-bottom:14px; }
.topbar-auth .admin-name { color:#94a3b8; font-size:13px; }
.topbar-auth .logout-btn { border:none; border-radius:10px; padding:8px 12px; cursor:pointer; font-size:13px; font-weight:700; background:#dc2626; color:#fff; }
.topbar-auth .logout-btn:hover { background:#b91c1c; }
@media(max-width:1200px){ .top-summary{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media(max-width:960px){  .top-summary{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media(max-width:560px){  .top-summary{ grid-template-columns:1fr !important; } }