.shift-clock{--sc-text:#e5edf7;--sc-size:46px;display:flex;align-items:center;justify-content:center;gap:20px;color:var(--sc-text);flex-shrink:0;padding:8px 18px;font-weight:400}
.shift-clock[data-state=rest]{--sc-text:#ffe39a}.shift-clock[data-state=meal]{--sc-text:#ffb7ac}
.sc-digits{display:flex;align-items:center;gap:9px}.sc-tile{position:relative;width:calc(var(--sc-size)*1.18);height:calc(var(--sc-size)*1.25);line-height:calc(var(--sc-size)*1.25);font-size:var(--sc-size);font-weight:600;text-align:center;font-variant-numeric:tabular-nums;border:1px solid #4a5d74;border-radius:7px;background:linear-gradient(#354c68 49%,#1d3048 49%,#1d3048 51%,#30465f 51%);perspective:600px}
.sc-tile:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#1d3048;pointer-events:none}.sc-colon{font-size:25px;opacity:.8}.sc-seconds{--sc-size:27px;align-self:flex-end}.sc-info{border-left:1px solid #ffffff22;padding-left:18px;white-space:nowrap}.sc-date{font-size:13px}.sc-status{font-size:11px;margin-top:9px}.sc-flap{position:absolute;inset:0;border-radius:6px;background:linear-gradient(#354c68 49%,#1d3048 49%,#1d3048 51%,#30465f 51%);animation:sc-turn .48s ease-in-out;backface-visibility:hidden}
@keyframes sc-turn{0%{transform:rotateX(0)}49%{transform:rotateX(-90deg)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
#app>header{gap:14px;height:auto;min-height:94px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}#app>header>.shift-clock--main{margin-left:auto;margin-right:auto}#app>header>.work-tools{margin-right:0}#app>header>.user-box{flex-shrink:0}
.shift-clock--monitor{--sc-size:60px;flex:1;gap:28px}.shift-clock--monitor .sc-seconds{--sc-size:34px}.shift-clock--monitor .sc-date{font-size:15px}.monitor-top>.monitor-clock{display:none}
@media(max-width:1650px){.shift-clock--main{--sc-size:36px;padding:5px 8px;gap:12px}.shift-clock--main .sc-seconds{--sc-size:23px}.shift-clock--main .sc-info{padding-left:12px}.shift-clock--main .sc-date{font-size:12px}.shift-clock--main .sc-status{font-size:10px}}
@media(max-width:1300px){#app>header>.shift-clock--main{order:4;flex-basis:100%;padding:8px}.shift-clock--monitor{order:20;flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.sc-flap{animation:none}}
/* Fixed slot prevents the clock moving when the notification disappears. */
.sc-mascot-slot{width:94px;height:84px;position:relative;overflow:hidden;flex:none;align-self:center}.sc-mascot{position:absolute;inset:0;transform:translateY(110%);opacity:0;pointer-events:none}.sc-mascot img{width:100%;height:100%;object-fit:contain}.sc-sign{position:absolute;left:7%;right:7%;bottom:7%;height:29%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#24384e;border-radius:6px;background:#ffe39a;white-space:nowrap}.sc-sign b{font-size:12px;line-height:1.15}.sc-sign small{font-size:8px;line-height:1.2}.shift-clock[data-state=meal] .sc-sign{background:#ffb7ac}.sc-enter{animation:sc-arrive 8s both ease-in-out}.shift-clock--monitor .sc-mascot-slot{width:130px;height:116px}.shift-clock--monitor .sc-sign b{font-size:16px}.shift-clock--monitor .sc-sign small{font-size:10px}
@keyframes sc-arrive{0%{transform:translateY(110%);opacity:0}10%{transform:translateY(-2%);opacity:1}14%,80%{transform:translateY(0);opacity:1}86%{transform:translateY(-2%);opacity:1}100%{transform:translateY(110%);opacity:0}}
@media(prefers-reduced-motion:reduce){.sc-enter{animation:sc-fade 8s both}@keyframes sc-fade{0%,100%{opacity:0;transform:none}8%,90%{opacity:1;transform:none}}}