:root{color-scheme:dark;font-family:'Microsoft YaHei UI','PingFang SC',sans-serif;color:#f0f0ed;background:#252624;font-size:14px}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;padding:32px;margin:auto}form{display:flex;gap:24px;align-items:end;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid #494b45}label{display:block;font-size:12px;color:#c3c6bf}input,select,button{font:inherit}input:not([type=checkbox]),select{display:block;width:100%;margin-top:9px;border:1px solid #565a51;border-radius:4px;background:#30322e;padding:11px 12px;color:#fff;min-height:42px}#amount{width:130px}input:focus,select:focus,button:focus-visible{outline:2px solid #41c6f5;outline-offset:3px}.check{display:flex;align-items:center;gap:8px;min-height:42px;color:#eee}.check input{width:18px;height:18px;accent-color:#3bc5f5}.hint{font-size:12px;color:#a7aca1;align-self:center;margin-top:24px}#error{color:#ffb3a0;margin:0}#error:not(:empty){margin-top:20px}#summary{display:flex;justify-content:space-between;gap:20px;align-items:end;padding:28px 0}.summary-label{font-size:12px;color:#acb2a6}.enddate{font-size:26px;margin-top:10px;letter-spacing:1px}.enddate strong{color:#46cdf9;font-weight:500;margin-left:12px}.stats{display:flex;gap:20px;font-size:12px;color:#adb4a6;padding-bottom:3px}.calendar{background:#30312e;border:1px solid #484b43;border-radius:6px;padding:24px}.month-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}h1{font-size:18px;font-weight:500;margin:0}.navigation{display:flex;align-items:center;gap:8px}button{background:transparent;border:0;color:#c6cbc0;padding:6px 10px;cursor:pointer;border-radius:4px}button:hover{background:#494d43}button:disabled{opacity:.3;cursor:default}#previous,#next{font-size:25px;line-height:1}#range-start{font-size:12px}.weekdays,#calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.weekdays{font-size:13px;margin-bottom:14px;text-align:center}.weekdays span{padding:8px}#calendar-grid{gap:4px}.day{min-height:112px;padding:10px 8px 8px;position:relative;border-radius:4px;border:1px solid transparent}.day.active{background:#35474a;border-color:#405c60}.day-top{display:flex;align-items:center;justify-content:center;position:relative;height:30px}.number{font-size:17px;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.today .number{background:#3bc6f5;color:#122c32;border-radius:50%}.tag{position:absolute;right:0;top:0;font-size:10px;color:#e8bd81}.makeup .tag{color:#9fcba0}.lunar{text-align:center;color:#b8bcb3;font-size:11px;height:20px;padding-top:3px}.holiday .lunar{color:#e1ba83}.outside{opacity:.35}.track{height:6px;margin-top:11px;position:relative;background:#44483f;border-radius:3px;overflow:hidden}.segment{position:absolute;height:100%;background:#41c6f5}.segment.overtime{background:#ba9bea}.caption{text-align:center;color:#9bdff1;font-size:10px;margin-top:7px;white-space:nowrap}.legend{display:flex;gap:20px;justify-content:center;margin-top:24px;color:#b4bbac;font-size:11px}.dot:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#41c6f5;margin-right:6px}.dot.overtime:before{background:#ba9bea}.dot.holiday:before{background:#e1ba83}.dot.makeup:before{background:#9fcba0}details{margin-top:22px;font-size:12px;color:#b9c0b1}summary{cursor:pointer}#details{max-height:280px;overflow:auto;padding-top:10px}.detail-row{padding:12px 0;border-bottom:1px solid #42463d;line-height:1.8}@media(max-width:700px){main{padding:20px 12px}form{gap:16px}form>label:not(.check){flex:1;min-width:100px}#amount{width:100%}.hint{margin:0}.calendar{padding:16px 8px}.day{min-height:100px;padding:8px 2px}.tag{font-size:9px;right:-1px}.caption{font-size:8px;letter-spacing:-.4px}.number{font-size:15px}.enddate{font-size:21px}.enddate strong{margin-left:4px}#summary{display:block}.stats{margin-top:18px;gap:18px}.legend{gap:16px}.lunar{font-size:10px}}
:root main{max-width:1440px}#months{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:24px}.calendar{min-width:0}.calendar:only-child{max-width:100%}.month-head{font-size:18px;font-weight:500;margin-top:0}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}#months .caption{white-space:normal;line-height:1.4}#months .day{min-height:116px}@media(max-width:700px){#months{gap:18px}#months .day{min-height:104px}}