:root{font-family:"Microsoft YaHei",system-ui,sans-serif;color:#132d43;background:#edf6f7}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(140deg,#e5f5f2 0%,#f4f8f9 48%,#e8f0f6 100%)}.payslip-app{width:min(720px,100%);margin:0 auto;padding:26px 18px 100px}.payslip-loading,.payslip-error{background:#fff;border:1px solid #d2e3e8;border-radius:20px;padding:40px;text-align:center;box-shadow:0 16px 40px #15394b16}.slip-cover{overflow:hidden;background:#fff;border:1px solid #d4e5ea;border-radius:22px;box-shadow:0 18px 42px #193a4c18}.slip-brand{padding:24px 26px 10px;color:#168e8a;font-size:14px;font-weight:700}.slip-cover-art{height:220px;margin:0 22px;border-radius:18px;background:linear-gradient(135deg,#ff846c,#ee3e30 65%,#bd2525);position:relative;overflow:hidden}.slip-cover-art:before{content:"￥";position:absolute;right:40px;bottom:-35px;color:#ffcf48;font-size:170px;font-weight:900;opacity:.9;transform:rotate(-12deg)}.slip-cover-art:after{content:"工资条";position:absolute;left:34px;top:36px;padding:18px 25px;border:5px solid #fff3df;color:#fff3df;font-weight:900;font-size:32px;letter-spacing:5px;transform:rotate(-5deg);border-radius:8px}.slip-cover-copy{padding:26px 28px 30px}.slip-cover-copy h1{font-size:29px;margin:0 0 14px;color:#172d3c}.slip-cover-copy p{font-size:17px;color:#8a97a2;margin:0 0 24px}.slip-action{border:0;border-radius:28px;width:100%;padding:15px 22px;background:#f2f4f6;color:#1675c6;font-weight:800;font-size:20px;cursor:pointer}.slip-action.primary{background:#168f8a;color:#fff}.slip-meta{display:flex;justify-content:space-between;gap:12px;color:#6c8090;font-size:13px;padding:0 28px 25px}.slip-detail{background:#fff;border:1px solid #d4e5ea;border-radius:22px;box-shadow:0 18px 42px #193a4c18;overflow:hidden}.slip-detail-head{padding:20px 24px;border-bottom:1px solid #edf1f3;display:flex;justify-content:space-between;align-items:center}.slip-detail-head h1{font-size:23px;margin:0}.slip-detail-head button{border:0;background:transparent;color:#637b8c;font-size:27px;cursor:pointer}.slip-total{padding:25px;text-align:center;background:linear-gradient(135deg,#3199f5,#1482dc);color:#fff}.slip-total .amount{font-size:48px;font-weight:900;letter-spacing:1px}.slip-total .label{font-size:17px;opacity:.9;margin-top:5px}.slip-warning{margin:18px;padding:17px 19px;background:#fffbe9;border:1px solid #ffe9aa;border-radius:11px;color:#82650d}.slip-warning strong{display:block;font-size:16px;margin-bottom:6px}.slip-profile,.slip-fields{padding:0 18px}.slip-profile-row,.slip-field{display:flex;justify-content:space-between;gap:20px;padding:17px 14px;border-bottom:8px solid #f4f5f6;font-size:17px;background:#fff}.slip-profile-row span,.slip-field span{color:#394d5c}.slip-profile-row strong,.slip-field strong{color:#132331;text-align:right;word-break:break-word}.slip-fields h2{font-size:18px;margin:22px 14px 10px}.slip-field.deduction{background:#fffdfa}.slip-field.total{font-weight:800}.slip-confirm{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(720px,100%);padding:16px 18px;background:#ffffffee;backdrop-filter:blur(12px);border-top:1px solid #d7e6eb}.slip-confirm button{width:100%;border:0;border-radius:30px;padding:15px;background:#168fe8;color:#fff;font-size:21px;font-weight:800;cursor:pointer}.slip-confirm button:disabled{background:#aab9c4;cursor:not-allowed}.slip-status{text-align:center;color:#168e8a;font-weight:700;margin-top:13px}@media(max-width:560px){.payslip-app{padding:10px 10px 100px}.slip-cover-art{height:180px}.slip-cover-copy h1{font-size:24px}.slip-total .amount{font-size:38px}.slip-field,.slip-profile-row{font-size:15px}}