*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui, sans-serif;}
body{background:#f3f4f6;padding:12px 10px;min-height:100vh;}
.title{text-align:center;font-size:22px;color:#222;margin-bottom:8px;font-weight:500;}
.date-week{text-align:center;font-size:16px;color:#555;margin-bottom:12px;letter-spacing:1px;}
.oper-box{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;}
.btn-group{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
#selDate{padding:8px 10px;font-size:16px;border:1px solid #ccc;border-radius:6px;outline:none;}
.qr-btn{padding:8px 14px;background:#007aff;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;}
.day-btn{padding:9px 14px;border:none;border-radius:6px;font-size:15px;color:#fff;cursor:pointer;transition:opacity .2s;}
.day-btn:active{opacity:0.85;}
#prevDay{background:#3498db;}
#todayBtn{background:#27ae60;}
#nextDay{background:#e67e22;}
.shift-box{display:flex;flex-direction:column;gap:14px;}
.card{background:#fff;border-radius:10px;padding:16px;box-shadow:0 1px 6px #e0e0e0;}
.tit{font-size:17px;padding-bottom:10px;border-bottom:1px solid #eee;margin-bottom:12px;font-weight:bold;}
.morning{color:#28a745;}
.middle{color:#f27c22;}
.night{color:#553c9a;}
.fixnight{color:#c53030;}
.user-row{display:flex;gap:16px;flex-wrap:wrap;font-size:16px;}
.qr-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.75);z-index:999;padding:20px;}
.qr-wrap{background:#fff;max-width:320px;margin:15vh auto;padding:20px;border-radius:12px;text-align:center;}
.qr-img{width:85%;margin-bottom:15px;}
.close-qr{padding:7px 22px;background:#666;color:#fff;border:none;border-radius:5px;font-size:15px;cursor:pointer;}