:root{--primary:#4f46e5;--primary2:#3730a3;--bg:#f8fafc;--dark:#0f172a;--muted:#64748b;--card:#fff;--danger:#ef4444;--ok:#16a34a}*{box-sizing:border-box}body{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--dark);padding-bottom:110px}.wrap{max-width:480px;margin:auto;padding:18px}.header{position:sticky;top:0;z-index:30;background:linear-gradient(135deg,var(--primary2),var(--primary));color:#fff;border-radius:0 0 42px 42px;box-shadow:0 18px 40px rgba(79,70,229,.25)}.head-inner{max-width:480px;margin:auto;padding:26px 22px 34px;display:flex;justify-content:space-between;align-items:center}.brand{font-size:24px;font-weight:900;letter-spacing:-.04em}.brand span{opacity:.55;font-style:italic;font-weight:500}.icon-btn{border:0;background:rgba(255,255,255,.16);color:#fff;width:48px;height:48px;border-radius:18px;font-size:18px}.card{background:var(--card);border:1px solid #e2e8f0;border-radius:34px;padding:24px;box-shadow:0 14px 35px rgba(15,23,42,.06);margin-bottom:18px}.title{font-size:20px;font-weight:900;margin:0 0 20px}.label{display:block;font-size:10px;font-weight:900;color:#94a3b8;text-transform:uppercase;margin:0 0 8px 10px;letter-spacing:.08em}.input,.select{width:100%;border:2px solid transparent;background:#f8fafc;border-radius:20px;padding:15px 16px;font-size:15px;font-weight:800;font-family:inherit;outline:0}.input:focus,.select:focus{border-color:var(--primary);background:#fff}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{margin-bottom:16px}.btn{width:100%;border:0;border-radius:20px;padding:17px 18px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-family:inherit;color:#fff;background:var(--primary);box-shadow:0 16px 30px rgba(79,70,229,.25)}.btn.dark{background:#0f172a}.btn.green{background:var(--ok)}.btn.small{width:auto;padding:10px 12px;border-radius:14px;font-size:10px;box-shadow:none;letter-spacing:.04em}.btn.red{background:var(--danger)}.list{display:flex;flex-direction:column;gap:10px}.item{background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}.name{font-weight:900;font-size:13px;text-transform:uppercase}.date{font-size:10px;color:var(--primary);font-weight:800;margin-top:4px}.money{font-weight:900;font-size:14px;white-space:nowrap}.actions{display:flex;gap:7px;justify-content:flex-end;margin-top:10px}.pill{display:inline-block;background:#eef2ff;color:var(--primary);border-radius:99px;padding:7px 10px;font-size:10px;font-weight:900}.total{background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;border-radius:34px;padding:26px;box-shadow:0 18px 40px rgba(79,70,229,.25);margin-bottom:16px}.total small{font-size:11px;font-weight:800;opacity:.75;text-transform:uppercase}.total b{display:block;font-size:30px;margin-top:6px}.nav{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border:1px solid #e2e8f0;border-radius:999px;box-shadow:0 18px 45px rgba(15,23,42,.16);display:flex;gap:10px;padding:10px}.nav a{width:76px;text-align:center;text-decoration:none;color:#94a3b8;font-weight:900;font-size:20px;padding:13px;border-radius:999px}.nav a.active{color:#fff;background:var(--primary)}.alert{border-radius:20px;padding:14px 16px;margin-bottom:16px;font-weight:800;font-size:13px}.alert.ok{background:#dcfce7;color:#166534}.alert.err{background:#fee2e2;color:#991b1b}.empty{text-align:center;color:#94a3b8;font-weight:800;padding:18px}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}.link{color:var(--primary);font-weight:900;text-decoration:none;font-size:12px}@media(min-width:720px){.wrap,.head-inner{max-width:820px}.desktop-grid{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}.card{margin-bottom:0}.nav a{width:110px}.brand{font-size:28px}}

.head-actions{display:flex;gap:10px;align-items:center}.role-badge{font-size:10px;font-weight:900;color:#c7d2fe;text-transform:uppercase;letter-spacing:.08em;margin-top:3px}.icon-btn{text-decoration:none}.login-body{min-height:100vh;background:linear-gradient(160deg,#4f46e5,#111827);display:flex;align-items:center;justify-content:center;padding:20px}.login-wrap{width:100%;max-width:430px}.login-card{background:white;border-radius:36px;padding:30px;box-shadow:0 25px 80px rgba(0,0,0,.28)}.login-logo{font-size:28px;font-weight:900;color:#111827;letter-spacing:-.04em}.login-logo span{color:#4f46e5;font-style:italic;font-weight:700}.login-sub{color:#64748b;font-weight:700;font-size:13px;line-height:1.5;margin:8px 0 22px}.login-form{display:grid;gap:12px}.login-help{margin-top:18px;font-size:11px;line-height:1.7;color:#64748b;background:#f8fafc;border-radius:20px;padding:14px;font-weight:700}
.hint{font-size:10px;font-weight:800;color:#94a3b8;margin:8px 0 0 12px;line-height:1.35}

.table-wrap{
    overflow-x:auto;
}

.table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
}

.table th{
    background:#f1f5f9;
    padding:14px;
    text-align:left;
    font-size:11px;
    font-weight:800;
    color:#64748b;
}

.table td{
    padding:14px;
    border-bottom:1px solid #eee;
    font-size:11px;
}

.table tr:last-child td{
    border-bottom:none;
}

.table .date{
    font-weight:600;
    white-space:nowrap;
}

.table .nama{
    font-weight:300;
    white-space:nowrap;
}

.table .money{
    font-weight:600;
    white-space:nowrap;
}

.table .actions{
    white-space:nowrap;
}

.table .actions .btn{
    margin-right:5px;
}

.pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:20px;
}

.page-btn{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:10px 18px;
    border:0;
    border-radius:14px;
    background:var(--primary);
    color:#fff;
    font-size:11px;
    font-weight:900;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.06em;
    cursor:pointer;
    transition:all .2s ease;
    box-shadow:0 4px 12px rgba(79,70,229,.2);
}

.page-btn:hover{
    opacity:.88;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(79,70,229,.35);
}

.page-btn:active{
    transform:translateY(0);
}

.page-btn.is-disabled{
    background:#e2e8f0;
    color:#94a3b8;
    box-shadow:none;
    pointer-events:none;
    opacity:.6;
}

.page-info{
    font-size:12px;
    font-weight:800;
    color:var(--dark);
    background:#f1f5f9;
    padding:8px 16px;
    border-radius:999px;
    white-space:nowrap;
}