*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f4f6f8;color:#17202a}header{background:#17324d;color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center}h1{font-size:21px;margin:0}.wrap{max-width:1250px;margin:20px auto;padding:0 15px}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.card,.panel{background:#fff;border-radius:12px;padding:17px;box-shadow:0 2px 8px #0001}.card small{color:#667}.num{font-size:23px;font-weight:700;margin-top:6px}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.tab{border:0;padding:10px 14px;border-radius:8px;background:#dfe7ee;cursor:pointer}.tab.active{background:#17324d;color:#fff}section{display:none}.activeSection{display:block}.panel{margin-bottom:15px}form{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}label{font-size:13px;color:#53616d}input,select{width:100%;padding:10px;margin-top:5px;border:1px solid #ccd4db;border-radius:7px}.primary{background:#1769aa;color:#fff;border:0;padding:10px 15px;border-radius:7px;cursor:pointer}.tableWrap{overflow:auto}table{width:100%;border-collapse:collapse;margin-top:8px}th,td{padding:9px;border-bottom:1px solid #e5e9ed;text-align:left;font-size:13px;white-space:nowrap}th{background:#f6f8fa}.paid{color:#147a43;font-weight:700}.pending{color:#a05a00;font-weight:700}.danger{background:#fee2e2;color:#9b1c1c;border:0;border-radius:6px;padding:6px 9px;cursor:pointer}.mark{background:#dff4e7;color:#126c3b;border:0;border-radius:6px;padding:6px 9px;cursor:pointer}.detailBtn{background:#e8f1fa;color:#14538a;border:0;border-radius:6px;padding:6px 9px;cursor:pointer}.logout{background:#fff2;border:1px solid #fff8;color:#fff;padding:7px 10px;border-radius:7px;cursor:pointer}.progress{height:8px;background:#e8edf1;border-radius:9px;overflow:hidden}.bar{height:100%;background:#2673b8}.note{background:#f5f8fb;border-left:4px solid #1769aa;padding:10px;border-radius:5px;margin-bottom:12px}.login{min-height:100vh;display:grid;place-items:center}.loginCard{background:#fff;padding:28px;border-radius:14px;box-shadow:0 4px 18px #0002;width:min(420px,92%)}.loginCard form{display:block}.loginCard label{display:block;margin:12px 0}.loginCard button{width:100%;margin-top:10px}.hidden{display:none!important}.msg{margin-top:10px;font-size:13px}.error{color:#a11}.ok{color:#176c3a}.modal{display:none;position:fixed;inset:0;background:#0007;z-index:10;padding:20px;overflow:auto}.modal.show{display:block}.modalBox{background:#fff;max-width:950px;margin:30px auto;border-radius:14px;padding:22px;position:relative}.close{position:absolute;right:15px;top:12px;border:0;background:#eee;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:18px}.detailGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:15px 0}.detailCard{background:#f6f8fa;border-radius:10px;padding:12px}.detailCard small{color:#65727e}.detailCard b{display:block;font-size:20px;margin-top:5px}.subpanel{border:1px solid #e2e7eb;border-radius:10px;padding:14px;margin-top:15px}@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}form{grid-template-columns:1fr 1fr}}@media(max-width:700px){.detailGrid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.grid{grid-template-columns:1fr}form{grid-template-columns:1fr}header{padding:15px;gap:10px;flex-wrap:wrap}}