.payslip-page{max-width:1100px;margin:auto}.payslip-detail{max-width:620px;margin:auto}
.slip-filter{display:flex;align-items:center;flex-wrap:wrap;gap:10px;background:var(--surface-subtle,#efefea);padding:12px;border-radius:16px;margin:12px 0}
.slip-filter label{display:grid;gap:4px;min-width:0;font-size:14px}.slip-filter input,.slip-filter select{max-width:100%;box-sizing:border-box}
.slip-filter a,.slip-export{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:7px 10px;border:1px solid var(--line,#dde2d8);border-radius:10px;text-decoration:none;color:inherit;font-weight:600;box-sizing:border-box}
.slip-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.slip-card,.slip-sheet{background:var(--white,#fffefa);border:1px solid var(--line,#dde2d8);border-radius:20px;padding:14px;min-width:0;box-sizing:border-box}
.slip-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.slip-heading h2{font-size:18px;margin:0;overflow-wrap:anywhere;font-weight:750}
.slip-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0}.slip-summary>div{min-width:0}.slip-summary span,.slip-net span{display:block;font-size:14px;font-weight:600}.slip-summary strong{font-size:clamp(23px,6vw,28px);font-weight:750;line-height:1.25;white-space:nowrap}.slip-summary .slip-hours{flex:none;text-align:right}.slip-hours span,.slip-summary .slip-hours strong{font-size:12px;font-weight:600}
.slip-open{display:flex;justify-content:space-between;align-items:center;padding:8px 0;min-height:40px;box-sizing:border-box;border-top:1px solid var(--line,#dde2d8);font-weight:650;text-decoration:none;color:inherit}
.slip-sheet{font-size:16px;font-weight:500;line-height:1.4}.slip-sheet p{margin:7px 0}.slip-sheet h3{font-size:17px;font-weight:750;background:var(--surface-subtle,#efefea);padding:7px 9px;border-radius:8px;margin:12px 0 4px}.slip-sheet .muted{font-size:12px}.slip-net{padding:10px 12px;margin:10px 0;background:var(--green-light,#e5eee6);border-radius:12px}.slip-net>strong{font-size:30px;font-weight:750;display:block}
.slip-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line,#dde2d8)}.slip-line span{min-width:0;overflow-wrap:anywhere}.slip-line strong{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.slip-day{border-bottom:1px solid var(--line,#dde2d8);padding:5px 0}.slip-day h3{background:none;padding:0;margin:6px 0;display:flex;justify-content:space-between;gap:8px}.slip-day small{font-size:12px;font-weight:500}
.slip-shift{display:grid;grid-template-columns:40px 1fr auto;gap:4px 8px;margin:7px 0;font-size:14px}.slip-shift>.shift-tip{grid-column:2/-1;text-align:right}.ytd-period{display:flex;flex-wrap:wrap;gap:5px 10px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line,#dde2d8);font-size:14px}
@media(max-width:359px){.slip-summary strong{font-size:22px}.slip-heading h2{font-size:16px}.slip-card{padding:11px}.slip-net>strong{font-size:27px}}
@media print{body{background:white!important;margin:0;color:#222;font-family:Arial,'Noto Sans CJK SC',sans-serif}.slip-sheet{border:0;border-radius:0;padding:0;max-width:620px;margin:auto}.slip-sheet h3{break-after:avoid}.slip-day,.slip-line,.ytd-period{break-inside:avoid}.slip-filter,.toolbar{display:none}@page{size:A4;margin:14mm}}