/* Lightweight, local CSS motion. No React or external assets needed by the demo. */
.work-hero{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:34px 36px;margin-bottom:23px;border-radius:19px;background:linear-gradient(115deg,#153d3c,#245957 66%,#376f65);color:#f8fffc;position:relative;isolation:isolate;overflow:hidden;min-height:220px}.work-hero:after{content:'';position:absolute;right:12%;top:-160px;width:440px;height:440px;border-radius:50%;border:1px solid #ffffff12;box-shadow:0 0 0 55px #ffffff04,0 0 0 115px #ffffff03;pointer-events:none;z-index:-1}.hero-copy{max-width:700px}.work-kicker{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600}.hero-copy>.work-kicker{color:#bddbd3}.work-hero h2{font-size:29px;letter-spacing:-.6px;margin:15px 0 10px;font-weight:600}.work-hero p{font-size:14px;color:#d1e4df;line-height:1.7}.hero-badges{display:flex;gap:18px;margin-top:22px;flex-wrap:wrap;font-size:11px;color:#bbd6cf}.hero-badges i{width:6px;height:6px;display:inline-block;border-radius:50%;background:#a9e7cb;margin-right:6px}.clock-action{flex:0 0 auto;text-align:center}.checkin-button{display:flex;align-items:center;gap:16px;min-width:235px;border:1px solid #b4dbce;color:#163d36;background:#ebfaf1;border-radius:15px;padding:19px 23px;box-shadow:0 5px 0 #102f2b,0 10px 25px #092f2920;text-align:left;font-weight:650;font-size:17px;transition:transform .18s,box-shadow .18s,background .18s}.checkin-button:not(:disabled):hover{transform:translateY(-2px);background:white}.checkin-button:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 #102f2b}.checkin-button:focus-visible{outline:3px solid #fff;outline-offset:5px}.checkin-button.done{opacity:1;background:#d5ede2;cursor:default;box-shadow:none;color:#234f43}.checkin-mark{height:43px;width:43px;border:1px solid #b7d8c9;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:400}.checkin-button small{display:block;font-size:11px;font-weight:400;opacity:.7;margin-top:7px}.clock-hint{display:block;margin-top:15px;font-size:11px;color:#c0d9d0}.attendance-overview{display:flex;align-items:center;flex-direction:column;min-width:180px;padding:4px 16px}.attendance-overview>strong{font-size:48px;letter-spacing:-2px;font-weight:500;line-height:1.2;font-variant-numeric:tabular-nums}.attendance-overview strong small{font-size:22px;letter-spacing:0;color:#bdd7cf}.attendance-overview>span{color:#d4e7e0;font-size:12px;margin:6px 0 16px}.hero-secondary.btn{background:#ffffff0a;color:white;border-color:#ffffff42;font-size:12px}.hero-secondary.btn:hover{background:#ffffff1f}.work-filter{padding:20px 23px}.work-filter .query-form{margin:0}.work-section{margin:29px 0 16px}.work-section h2{font-size:20px}.work-section p{margin-top:5px}.work-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}.work-metric{padding:20px 18px 17px;border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;min-width:0;box-shadow:0 2px 6px #15293c02}.work-metric>span{font-size:12px;color:var(--muted)}.work-metric>strong{display:block;font-size:27px;font-weight:600;letter-spacing:-.8px;margin:13px 0 10px;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.work-metric>strong em{font-style:normal;font-size:12px;font-weight:400;margin:0 4px;letter-spacing:0;color:var(--muted)}.work-metric small{font-size:10px;color:var(--muted);line-height:1.6;margin-top:auto}.work-metric.accent{border-color:color-mix(in srgb,var(--accent) 27%,var(--line));background:color-mix(in srgb,var(--accent-soft) 44%,var(--surface))}.work-metric.accent>strong{color:var(--accent)}.payout-panel{display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--surface);padding:24px 27px}.payout-panel strong{display:block;font-size:32px;font-weight:550;letter-spacing:-.8px;margin:8px 0;font-variant-numeric:tabular-nums}.payout-panel .sub{font-size:11px}.work-staff-table{min-width:1220px}.work-staff-table td{font-size:12px;font-variant-numeric:tabular-nums}.work-staff-table th{font-size:11px}.work-staff-table .sub{font-size:10px;margin-top:4px}.work-staff-table .btn{font-size:11px;padding:6px 10px;min-height:31px}.commission-path strong{font-size:30px;color:var(--accent);font-weight:600}.commission-track{height:7px;border-radius:20px;background:var(--surface-alt);overflow:hidden;margin-top:25px}.commission-track>span{height:100%;border-radius:20px;background:var(--accent);display:block;animation:grow-progress .5s both;transform-origin:left}.commission-stops{display:flex;justify-content:space-between;margin-top:13px;font-size:13px}.commission-stops small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.commission-stops>span:last-child{text-align:right}.work-bottom{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}.work-bottom .panel{padding:26px}.work-bottom .work-kicker{color:var(--accent)}.work-bottom h2{margin:13px 0 10px;font-size:19px}.work-bottom p{margin-bottom:22px;font-size:12px;line-height:1.8}.work-policy-foot{font-size:11px;color:var(--muted);line-height:1.8}.text-button.btn{padding:4px 8px;font-size:11px;min-height:24px;border:0;color:var(--accent);background:transparent}.policy-section{margin:0 0 25px;padding-bottom:22px;border-bottom:1px solid var(--line)}.policy-section h3{font-size:16px;margin:0 0 12px}.policy-section p{font-size:13px;line-height:1.9;margin:7px 0;color:var(--muted)}.detail-tabs{width:max-content;max-width:100%;margin-bottom:16px}.detail-tabs+.sub{margin:0 0 15px}.checkin-receipt{text-align:center;max-width:430px;margin:14px auto 24px}.receipt-check{height:90px;width:90px;margin:0 auto 26px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:50%;display:grid;place-items:center;animation:receipt-pop .4s cubic-bezier(.16,1,.3,1) both}.receipt-check svg{width:47px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.receipt-check path{stroke-dasharray:40;stroke-dashoffset:0;animation:receipt-draw .4s .1s backwards}.checkin-receipt>.work-kicker{color:var(--accent)}.checkin-receipt h2{margin:14px 0 18px;font-size:24px}.checkin-receipt>strong{font-size:48px;letter-spacing:1px;font-variant-numeric:tabular-nums;font-weight:500}.checkin-receipt>p{margin:10px 0;color:var(--muted)}.checkin-receipt>.sub{font-size:13px;line-height:1.9;margin:22px 0}.checkin-receipt>.btn{min-width:180px}.reserve-banner{display:flex;align-items:center;gap:23px;padding:25px 30px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(100deg,var(--accent-soft),var(--surface));margin-bottom:22px}.reserve-banner h2{font-size:18px;margin-bottom:7px}.reserve-banner p{font-size:12px;line-height:1.9;color:var(--muted)}.reserve-symbol{width:60px;height:60px;border-radius:16px;flex-shrink:0;display:grid;place-items:center;font-size:42px;color:var(--accent);background:var(--surface);border:1px solid var(--line);font-weight:300}.reserve-banner>.badge{margin-left:auto;flex-shrink:0}.reserve-banner+section .query-form{margin-bottom:0}.reserve-pick{accent-color:var(--accent)}
@keyframes receipt-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes receipt-draw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}@keyframes grow-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:1700px){.work-metric>strong{font-size:32px}.work-metric{padding:24px}}
@media(max-width:1200px){.work-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.work-hero{padding:28px;gap:20px}.work-hero h2{font-size:25px}.checkin-button{min-width:210px;padding:17px;font-size:15px}.work-metric:last-child{grid-column:span 2}}
@media(max-width:800px){.work-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.work-metric{padding:17px 14px}.work-metric:last-child{grid-column:auto}.work-metric>strong{font-size:25px}.work-hero{align-items:stretch;flex-direction:column;padding:25px 22px;gap:24px;border-radius:15px}.work-hero h2{font-size:24px}.work-hero p{font-size:12px}.hero-badges{margin-top:17px;gap:10px}.clock-action{text-align:left}.checkin-button{width:100%;justify-content:center}.clock-hint{text-align:center}.attendance-overview{flex-direction:row;gap:13px;padding:0;flex-wrap:wrap}.attendance-overview>strong{font-size:36px}.attendance-overview>span{margin:0}.attendance-overview>.btn{margin-left:auto}.payout-panel{align-items:flex-start;flex-direction:column;gap:15px}.payout-panel>.tools{width:100%}.payout-panel .btn{flex:1}.work-bottom{grid-template-columns:1fr;gap:0}.work-filter{padding:17px}.work-filter .query-form label{flex-basis:100%;max-width:none}.reserve-banner{padding:20px;gap:16px;align-items:flex-start}.reserve-symbol{height:43px;width:43px;font-size:32px;border-radius:12px}.reserve-banner>.badge{display:none}.reserve-banner h2{font-size:16px}.reserve-banner p{font-size:11px}.detail-tabs{width:100%}.detail-tabs .btn{font-size:11px;padding:8px}.checkin-receipt>strong{font-size:42px}.checkin-receipt h2{font-size:21px}.work-section{align-items:flex-start}.work-section .badge{font-size:10px}}
@media(prefers-reduced-motion:reduce){.receipt-check,.receipt-check path,.commission-track>span{animation:none}.checkin-button{transition:none}}
:root[data-motion=reduced] .receipt-check,:root[data-motion=reduced] .receipt-check path,:root[data-motion=reduced] .commission-track>span{animation:none}
:root[data-theme=dark] .work-metric.accent>strong,:root[data-theme=dark] .commission-path strong,:root[data-theme=dark] .work-bottom .work-kicker,:root[data-theme=dark] .checkin-receipt>.work-kicker,:root[data-theme=dark] .reserve-symbol,:root[data-theme=dark] .receipt-check svg,:root[data-theme=dark] .work-policy-foot .text-button{color:color-mix(in srgb,var(--accent) 50%,white)}