*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f4f7fb;color:#172033}a{color:#14566a;text-decoration:none}.nav{background:#0d3b49;color:#fff;padding:16px 5%;display:flex;justify-content:space-between;gap:15px}.nav a{color:#fff;margin-left:16px}.container{max-width:1200px;margin:30px auto;padding:0 18px}.card{background:#fff;border-radius:15px;padding:22px;box-shadow:0 8px 28px #00000010;margin:18px 0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stats div{background:#fff;padding:20px;border-radius:14px}.stats strong{display:block;font-size:26px;margin-top:7px}.portal{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0d3b49,#1c788d)}.login-card{width:min(470px,92vw)}.brand{display:flex;align-items:center;gap:13px}.logo{width:55px;height:55px;border-radius:14px;background:#f2c94c;display:grid;place-items:center;font-weight:900;color:#0d3b49}.brand h1{font-size:18px}.muted{color:#667085;font-size:13px}label{display:block;font-weight:700;margin:14px 0 6px}input,select{width:100%;padding:11px;border:1px solid #d0d5dd;border-radius:8px}.btn,button{padding:11px 15px;border:0;border-radius:8px;cursor:pointer;background:#e8edf0}.primary{background:#0f687a;color:#fff}.danger{background:#b42318;color:#fff}.login-card .btn{width:100%;margin-top:18px}.admin-link{display:block;text-align:center;margin-top:16px}.gridform{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gridform .btn{grid-column:1/-1}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:11px;border-bottom:1px solid #eaecf0;text-align:left}.inline,.payrow{display:flex;gap:7px;align-items:center}.ok{padding:12px;background:#ecfdf3;color:#067647;border-radius:8px}.alert{padding:12px;background:#fef3f2;color:#b42318}.actions{display:flex;gap:10px}.paper-bg{background:#e9eef2}.toolbar{max-width:900px;margin:18px auto;display:flex;gap:10px;justify-content:flex-end}.toolbar select{width:220px}.slip{max-width:900px;margin:20px auto;background:#fff;padding:40px;box-shadow:0 10px 30px #0002}.slip header{display:flex;gap:14px;align-items:center;border-bottom:3px solid #0d3b49;padding-bottom:16px}.slip h2{margin:0 0 5px}.period{margin-left:auto;font-weight:800}.identity{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f8fafc;padding:14px;margin:20px 0}.identity div{display:flex;gap:10px}.identity b{min-width:110px}.cols{display:grid;grid-template-columns:1fr 1fr;gap:30px}.cols h3{font-size:14px;border-bottom:2px solid #ddd;padding-bottom:7px}.row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dotted #ccc}.totals{margin-top:20px;border-top:2px solid #222}.totals div{display:flex;justify-content:space-between;padding:10px}.net{font-size:18px;background:#eef8fa}.slip footer{display:flex;justify-content:space-between;margin-top:40px;font-size:12px;color:#667085}.sign{text-align:center}@media(max-width:800px){.stats{grid-template-columns:1fr 1fr}.gridform,.cols,.identity{grid-template-columns:1fr}.nav{display:block}.nav span{display:block;margin-top:10px}.slip{padding:20px;margin:0}.toolbar{padding:10px;flex-wrap:wrap}}@media print{.no-print{display:none!important}.slip{box-shadow:none;margin:0;padding:10mm}.paper-bg{background:#fff}}