.qs-page{--qs-bg:#fdfdff;--qs-card:#fff;--qs-ink:#0b102c;--qs-muted:#4e597f;--qs-line:#e8ecf9;--qs-soft:#f6f7fd;background:var(--qs-bg)}
.qs-section{padding:38px 48px 24px;color:var(--qs-ink);font-family:'Instrument Sans',sans-serif;background:var(--qs-bg)}
.qs-wrap{max-width:1620px;margin:auto}
.qs-stats{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) minmax(0,1.14fr);padding:0;margin-bottom:36px}
.qs-stat{display:flex;align-items:center;gap:24px;padding:0 38px}
.qs-stat:first-child{padding-left:28px}.qs-stat:not(:first-child){border-left:1px solid var(--qs-line)}
.qs-stat-copy>strong{display:block;font-size:44px;line-height:1;font-weight:700;letter-spacing:-1.3px;font-variant-numeric:tabular-nums;margin-bottom:0}
.qs-stat-copy>div>span{display:block;font-size:16px;font-weight:500;line-height:1.35}
.qs-stat small{display:block;font-size:16px;line-height:1.35;color:var(--qs-muted);margin-top:1px}
.qs-stat>.qs-icon{width:88px;height:88px;border-radius:20px}.qs-stat>.qs-icon svg{width:54px;height:54px}
.qs-icon{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:13px;color:var(--qs-accent,#5262ff);background:var(--qs-tint,#eef0ff)}
.qs-icon svg{width:26px;height:26px}
.qs-blue{--qs-accent:#1457ff;--qs-tint:#eaf0ff}.qs-purple{--qs-accent:#8438ff;--qs-tint:#f0e8ff}.qs-green{--qs-accent:#18c49b;--qs-tint:#e7faf3}.qs-orange{--qs-accent:#ff681b;--qs-tint:#fff0e9}.qs-lavender{--qs-accent:#ab9bfa;--qs-tint:#f2efff}.qs-red{--qs-accent:#f01421;--qs-tint:#fff0f1}
.qs-stat>.qs-blue{background:#e6f3ff}.qs-features .qs-blue{--qs-accent:#2338ff;--qs-tint:#eceeff}
.qs-main{display:grid;grid-template-columns:minmax(0,1.035fr) minmax(0,1fr);gap:58px;align-items:start}
.qs-copy{padding:34px 0 0 28px}
.qs-kicker{display:flex;align-items:center;gap:14px;font-size:14px;letter-spacing:2px;font-weight:700;color:#153aff}
.qs-kicker:after{content:'';width:42px;height:2px;background:currentColor}
.qs-copy h2{font-size:clamp(34px,2.8vw,52px);line-height:1.04;letter-spacing:-2px;font-weight:700;margin:18px 0 21px;color:var(--qs-ink)}
.qs-copy h2 span{color:#2934ff}
.qs-description{font-size:22px;line-height:1.4;color:var(--qs-muted);margin:0;max-width:770px}
.qs-features{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:5px}
.qs-features li{display:flex;align-items:center;gap:22px;font-size:20px;line-height:1.4;color:var(--qs-muted)}
.qs-features .qs-icon{width:50px;height:50px;border-radius:14px}.qs-features .qs-icon svg{width:26px;height:26px}
.qs-slip{background:var(--qs-card);border:1px solid #e0e5f5;border-radius:22px;padding:16px;box-shadow:0 18px 50px -18px rgb(80 100 210 / .22),0 2px 8px rgb(65 75 142 / .025);min-width:0;line-height:1.4}
.qs-slip-head{display:flex;align-items:center;gap:20px;padding:0 20px;min-height:44px;background:var(--qs-soft);border-radius:12px 12px 0 0}
.qs-slip-head h3{font-size:12px;font-weight:700;letter-spacing:1.2px;margin:0;color:var(--qs-ink)}
.qs-locked{display:inline-flex;align-items:center;gap:7px;color:#006b62;background:#dcfaf0;border-radius:14px;padding:7px 12px;font-size:12px;font-weight:700;letter-spacing:.6px;margin-left:auto}
.qs-locked svg{width:15px;height:15px}
.qs-slip .qs-month select{border:1px solid var(--qs-line);border-radius:8px;padding:7px 28px 7px 9px;background-color:var(--qs-card);color:var(--qs-muted);font:inherit;font-size:12px;cursor:pointer;max-width:100%;min-height:34px}
.qs-summary{display:flex;align-items:center;gap:20px;padding:14px 22px;border:1px solid var(--qs-line);border-radius:10px;min-height:98px}
.qs-avatar{display:grid;place-items:center;width:68px;height:68px;background:linear-gradient(130deg,#e4edff,#dceaff);color:#183cff;border-radius:50%;font-size:21px;font-weight:700;flex-shrink:0}
.qs-employee strong{display:block;font-size:20px;font-weight:700;letter-spacing:-.3px}
.qs-employee>span{display:block;font-size:14px;color:var(--qs-muted);margin-top:4px}
.qs-ctc{margin-left:auto;text-align:right;padding:2px 9px;border-radius:10px}
.qs-ctc>span{display:block;font-size:13px;color:var(--qs-muted)}
.qs-ctc strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.7px;line-height:1.35;font-variant-numeric:tabular-nums}
.qs-ctc small{display:block;font-size:13px;color:var(--qs-muted)}
.qs-details{border:1px solid var(--qs-line);border-radius:12px}
.qs-breakdown{padding:14px 20px 10px}
.qs-breakdown h4{margin:0 0 8px;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--qs-ink)}
.qs-segments{display:flex;position:relative;border-radius:6px;background:var(--qs-soft);height:26px}
.qs-segment{border:0;border-radius:0;background:transparent;position:relative;display:grid;place-items:center;padding:0;cursor:pointer;color:#fff;min-width:0;font:inherit}
.qs-segment-fill{position:absolute;inset:0;background:var(--qs-accent);transform-origin:left}
.qs-segment:first-child,.qs-segment:first-child .qs-segment-fill{border-radius:8px 0 0 8px}.qs-segment:last-child,.qs-segment:last-child .qs-segment-fill{border-radius:0 8px 8px 0}
.qs-segment-percent{position:relative;font-size:12px;font-weight:600}.qs-segment.qs-lavender .qs-segment-percent{color:#282247}
.qs-segment.qs-green .qs-segment-percent{color:#06382d}
.qs-tooltip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);z-index:3;background:var(--qs-ink);color:var(--qs-card);padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.4;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:auto;transition:opacity 150ms ease}
.qs-tooltip:after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:10px}
.qs-segment:first-child .qs-tooltip{left:0;transform:none}.qs-segment:last-child .qs-tooltip{left:auto;right:0;transform:none}
.qs-segment:hover .qs-tooltip,.qs-segment:focus-visible .qs-tooltip{opacity:1;visibility:visible}
.qs-segment.qs-tooltip-dismissed .qs-tooltip{opacity:0;visibility:hidden}
.qs-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;list-style:none;padding:0;margin:8px 0 0}
.qs-legend li{border:1px solid transparent;padding:4px 8px;border-radius:8px;min-width:0;transition:background-color 180ms ease,border-color 180ms ease}
.qs-legend li>span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--qs-muted)}
.qs-legend i{width:12px;height:12px;border-radius:4px;flex-shrink:0;background:var(--qs-accent)}
.qs-legend strong{display:block;font-size:15px;font-weight:700;margin-top:2px;padding-left:20px;font-variant-numeric:tabular-nums}
.qs-legend small{font-size:10px;color:var(--qs-muted);font-weight:400;margin-left:5px}
.qs-legend li.qs-active{background:color-mix(in srgb,var(--qs-accent) 10%,var(--qs-card));border-color:var(--qs-accent)}
.qs-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 12px}
.qs-panel{padding:10px;background:var(--qs-card);border:1px solid var(--qs-line);border-radius:12px;min-width:0}
.qs-panel h4{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--qs-ink)}
.qs-panel h4 .qs-icon{width:30px;height:30px;border-radius:8px}.qs-panel h4 .qs-icon svg{width:18px;height:18px}
.qs-panel dl{margin:0}.qs-panel dl>div{display:flex;justify-content:space-between;gap:10px;padding:4px 6px;font-size:14px;line-height:1.4;color:var(--qs-muted);border-bottom:1px solid var(--qs-line)}
.qs-panel dt,.qs-panel dd{margin:0}.qs-panel dd{color:var(--qs-ink);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.qs-panel dl>.qs-panel-total{border:0;margin-top:4px;padding:7px 10px;font-weight:600;border-radius:8px;align-items:center;min-height:40px;background:#edf3ff;color:#073cff}
.qs-panel-total dd{font-size:22px;color:inherit}.qs-deductions dl>.qs-panel-total{background:#fff0f1;color:#d40d1a}
.qs-net{display:flex;align-items:center;gap:20px;background:linear-gradient(105deg,#0945ff,#0860ff);border:1px solid #1858ff;border-radius:12px;padding:12px 20px;color:#fff;margin-top:0;min-height:77px}
.qs-net .qs-icon{width:50px;height:50px;background:#ffffff20;color:#fff;border-radius:50%}.qs-net .qs-icon svg{width:28px;height:28px}
.qs-net>div>strong{font-size:18px;font-weight:600;display:block}.qs-net>div>span{font-size:13px;color:#e6ebff;display:block;margin-top:2px}
.qs-net-amount{margin-left:auto;font-size:34px;font-weight:700;letter-spacing:-.6px;white-space:nowrap;font-variant-numeric:tabular-nums;border-left:1px solid #ffffff30;padding-left:50px;line-height:1.1}
.qs-section :is(button,select):focus-visible{outline:3px solid #6962f4;outline-offset:4px}
.qs-segment:focus-visible{z-index:2;outline-offset:2px}
.qs-section button:active{filter:brightness(.96)}
@media(hover:hover) and (pointer:fine){.qs-features .qs-icon{transition:transform 180ms var(--ease-out,ease-out)}.qs-features li:hover .qs-icon{transform:translateY(-2px)}}
@keyframes qs-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes qs-stat{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes qs-slip{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes qs-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes qs-label{from{opacity:0}to{opacity:1}}
@keyframes qs-lock{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes qs-ctc{0%,100%{background:transparent}40%{background:#eeefff}}
@keyframes qs-net-border{from{border-color:#9eaaff}to{border-color:#1858ff}}
.qs-visible [data-qs-motion]{animation:qs-rise 500ms var(--ease-out,ease-out) var(--qs-delay,0ms) backwards}
.qs-visible .qs-stat{animation-name:qs-stat}
.qs-visible .qs-slip{animation-name:qs-slip;animation-duration:550ms}
.qs-visible .qs-segment-fill{animation:qs-fill 420ms var(--ease-out,ease-out) var(--qs-delay) backwards}
.qs-visible .qs-segment-percent{animation:qs-label 300ms ease calc(var(--qs-delay) + 180ms) backwards}
.qs-visible .qs-ctc{animation:qs-ctc 600ms ease 600ms}
.qs-visible .qs-locked{animation:qs-lock 400ms var(--ease-out,ease-out) 880ms backwards}
.qs-visible .qs-net{animation:qs-rise 500ms var(--ease-out,ease-out) 1390ms backwards,qs-net-border 500ms ease 1390ms}
:root[data-theme='dark'] .qs-page{--qs-bg:#0b0f1b;--qs-card:#151b2b;--qs-ink:#f0f3fc;--qs-muted:#a7b2ca;--qs-line:#2b3449;--qs-soft:#1c2334}
:root[data-theme='dark'] .qs-slip{border-color:#303a54}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .qs-page{--qs-bg:#0b0f1b;--qs-card:#151b2b;--qs-ink:#f0f3fc;--qs-muted:#a7b2ca;--qs-line:#2b3449;--qs-soft:#1c2334}}
@media(max-width:1440px){.qs-section{padding-top:28px}.qs-main{gap:36px}.qs-copy{padding:18px 0 0}.qs-copy h2{font-size:38px}.qs-description{font-size:17px}.qs-features{gap:10px;margin-top:24px}.qs-features li{font-size:15px;gap:16px}.qs-features .qs-icon{width:42px;height:42px}.qs-stat{gap:16px;padding-inline:22px}.qs-stat:first-child{padding-left:0}.qs-stat-copy>strong{font-size:34px}.qs-stat-copy>div>span{font-size:14px}.qs-stat small{font-size:13px}.qs-stat>.qs-icon{width:60px;height:60px;border-radius:16px}.qs-stat>.qs-icon svg{width:38px;height:38px}.qs-slip{padding:12px}.qs-slip-head{padding-inline:12px;gap:12px}.qs-summary{padding:12px 16px;gap:12px}.qs-avatar{width:52px;height:52px;font-size:18px}.qs-ctc strong{font-size:20px}.qs-ctc>span,.qs-ctc small{font-size:11px}.qs-employee strong{font-size:17px}.qs-employee>span{font-size:12px}.qs-breakdown{padding:14px 16px 10px}.qs-panel dl>div{font-size:12px;padding:5px 4px}.qs-panel-total dd{font-size:20px}.qs-net{gap:12px;padding-inline:16px}.qs-net>div>span{font-size:11px}.qs-net-amount{font-size:29px;padding-left:22px}}
@media(max-width:1100px){.qs-section{padding:28px 32px 48px}.qs-wrap{max-width:780px}.qs-main{grid-template-columns:1fr;gap:34px}.qs-copy{padding:0}.qs-stats{margin-bottom:36px}.qs-stat{padding-inline:14px;gap:12px}.qs-stat-copy>strong{font-size:30px}.qs-stat>.qs-icon{width:46px;height:46px}.qs-stat>.qs-icon svg{width:30px;height:30px}.qs-description{font-size:18px}.qs-features li{font-size:16px}.qs-copy h2{font-size:42px}.qs-slip{padding:16px}}
@media(max-width:600px){.qs-section{padding:22px 20px 40px}.qs-stats{grid-template-columns:1fr;gap:0;margin-bottom:30px}.qs-stat,.qs-stat:first-child{padding:14px 0;gap:18px}.qs-stat:not(:first-child){border-left:0;border-top:1px solid var(--qs-line)}.qs-stat-copy>strong{font-size:28px;margin-bottom:2px}.qs-stat small{font-size:12px}.qs-stat-copy>div>span{font-size:14px}.qs-copy h2{font-size:34px;letter-spacing:-1.2px;margin-top:18px}.qs-description{font-size:16px}.qs-features{gap:12px;margin-top:24px}.qs-features li{font-size:14px;gap:12px}.qs-main{gap:28px}.qs-slip{padding:12px;border-radius:16px}.qs-slip-head{flex-wrap:wrap;gap:10px;padding:10px}.qs-slip-head h3{font-size:10px;letter-spacing:.7px}.qs-month{margin-left:auto}.qs-summary{flex-wrap:wrap;padding:14px;gap:12px}.qs-avatar{width:48px;height:48px}.qs-ctc{flex-basis:100%;margin:4px 0 0;text-align:left;background:var(--qs-soft);padding:10px 12px}.qs-ctc strong{font-size:23px}.qs-ctc small{font-size:12px}.qs-breakdown{padding:14px 12px 10px}.qs-panels{grid-template-columns:1fr;gap:12px;padding:0 10px 10px}.qs-panel dl>div{font-size:13px}.qs-legend{grid-template-columns:1fr;margin:10px 0 0;gap:0}.qs-legend li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 4px}.qs-legend li>span{font-size:12px}.qs-legend strong{margin:0;padding:0;font-size:12px}.qs-tooltip{max-width:230px;white-space:normal;width:max-content;font-size:11px}.qs-segment:nth-child(2) .qs-tooltip{left:auto;right:0;transform:none}.qs-net{padding:12px;gap:10px;flex-wrap:wrap}.qs-net>div>strong{font-size:15px}.qs-net>div>span{font-size:10px}.qs-net-amount{font-size:26px;border:0;padding-left:0}.qs-net .qs-icon{width:34px;height:34px}.qs-net .qs-icon svg{width:22px;height:22px}}
@media(max-width:380px){.qs-net-amount{margin-left:42px}.qs-kicker{font-size:12px}.qs-copy h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.qs-visible [data-qs-motion],.qs-visible .qs-segment-fill,.qs-visible .qs-segment-percent,.qs-visible .qs-ctc,.qs-visible .qs-locked,.qs-visible .qs-net{animation:none}.qs-features .qs-icon,.qs-legend li,.qs-tooltip{transition:none}.qs-features li:hover .qs-icon{transform:none}}