:root{font-family:Inter,Arial,sans-serif;color:#172033;background:#f3f6fb}*{box-sizing:border-box}body{margin:0}main{max-width:760px;margin:56px auto;padding:20px}.brand{font-size:22px;font-weight:800;margin-bottom:20px;color:#1677ff}section{background:#fff;border:1px solid #dce4ef;border-radius:20px;padding:28px;box-shadow:0 18px 50px #17345b14}.resource{display:flex;gap:14px;align-items:center;padding:16px;background:#f7f9fc;border-radius:14px}.resource img{width:52px;height:52px;border-radius:12px}.resource h2{margin:0 0 4px;font-size:18px}.resource p{margin:0;color:#6c788c}.periods{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0}.period{padding:16px;text-align:left;border:1px solid #ccd7e5;background:#fff;border-radius:12px;cursor:pointer}.period.active{border:2px solid #1677ff;background:#eef6ff}.period strong,.period span{display:block}.period span{color:#64748b;margin-top:5px}.total{font-size:32px;font-weight:800;margin:12px 0}.pay,.return{display:block;width:100%;border:0;border-radius:12px;padding:15px;background:#1677ff;color:#fff;font-size:17px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}.pay:disabled{opacity:.55}.success-message{color:#12805c;font-weight:700}.pending-message{color:#875f00;font-weight:700}.success .resource{margin-bottom:24px}.error{color:#b42318}@media(max-width:560px){main{margin:12px auto;padding:12px}.periods{grid-template-columns:1fr}section{padding:18px}}