body{background:#f3f6fb} .staff-header{background:#15243b;color:white;padding:18px max(16px,calc((100vw - 820px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px}.staff-brand{display:flex;gap:12px;align-items:center}.staff-brand strong{display:block;font-size:18px;letter-spacing:.035em}.staff-brand small{color:#bacce7;font-size:12px;display:block;margin-top:5px}.logo-box{background:#3369f7;border-radius:12px;display:grid;place-items:center;font-size:23px;font-weight:900;width:45px;height:45px}.staff-out{border:1px solid #476080;border-radius:9px;background:transparent;color:#d9e6fa;font-weight:800;padding:10px}.staff-content{padding:16px 14px 70px;max-width:820px;margin:auto}.staff-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}.staff-tabs button{flex:1;background:white;border:1px solid #dce6f2;color:#6f7e95;padding:14px 9px;border-radius:11px;font-weight:900}.staff-tabs button.active{background:#2d60e9;color:white;border-color:#2d60e9}.staff-card{background:white;border:1px solid #e3e9f1;padding:22px;border-radius:20px;box-shadow:0 10px 30px #2034500c}.staff-heading h1,.staff-card h1{margin:6px 0;font-size:25px}.staff-card h2{margin:25px 0 13px;font-size:17px}.staff-heading p,.staff-card>p{color:#75869f;font-size:13px;line-height:1.6}.camera-zone{border:1.5px dashed #9bb9f9;background:#f5f8ff;padding:16px;border-radius:15px;margin:20px 0}.camera-head{display:flex;justify-content:space-between;font-size:14px}.camera-head span{color:#8e9aaf;font-size:12px}.camera-zone p{color:#7285a3;font-size:12px;line-height:1.7}.camera-button{display:flex;justify-content:center;align-items:center;gap:7px;background:#ecf2ff;color:#2857d9;padding:14px;border-radius:11px;font-weight:900;cursor:pointer;margin:10px 0}.camera-zone img{display:block;max-width:100%;max-height:270px;object-fit:contain;border-radius:11px;margin:10px auto}.camera-zone .btn{margin:11px 0}.staff-card .fields{margin:15px 0 0}.field{margin:10px 0}.field input,.field select,.field textarea{font-size:16px!important;min-height:50px}.field textarea{min-height:85px}.staff-save{min-height:60px;font-size:16px;margin-top:17px}.privacy-hint{font-size:11px;color:#8995a8;margin-top:15px}.choice{padding:14px}.choice strong{font-size:13px}.reset-link{font-size:12px;display:inline-block;margin-top:12px}.staff-order-list{margin-top:15px;display:grid;gap:11px}.staff-job{border:1px solid #e3e9f1;border-radius:13px;padding:15px}.staff-job h3{display:flex;gap:9px;align-items:center;margin:0 0 10px;flex-wrap:wrap}.staff-job p{font-size:12px;color:#7889a2;margin:5px 0}.staff-job>div:last-child{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.card-amount{font-size:14px;font-weight:900;color:#2c60e3}.camera-zone .muted{display:block;margin:8px 0 0}.found-card{background:#eaf6ef;color:#176343;padding:12px;border-radius:10px;font-size:12px;font-weight:700}.error:empty{display:none}@media(max-width:470px){.staff-card{padding:16px}.staff-header{padding:15px}.staff-brand strong{font-size:15px}.staff-card .fields{grid-template-columns:1fr 1fr}.staff-card .field.wide{grid-column:1/-1}}
/* Four required vehicle angles and a three-tab employee toolbar. */
.staff-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.staff-tabs button{font-size:12px;padding:12px 4px;min-width:0}.angle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.angle-card{display:flex;flex-direction:column;gap:8px;border:1px solid #b9c9e8;border-radius:12px;background:#fff;padding:11px;font-size:13px;cursor:pointer;font-weight:700}.angle-card input[type=file]{display:block;width:100%;font-size:11px;color:#425b83}.angle-card img{width:100%;max-height:145px;object-fit:cover;border-radius:8px}.angle-card img[hidden]{display:none!important}.angle-card small{font-size:11px;color:#4a6181;font-weight:400}#service-list .choice[hidden]{display:none!important}#total-strip[hidden]{display:none!important}[data-tariff][hidden]{display:none!important}@media(max-width:360px){.angle-grid{grid-template-columns:1fr}}

.photo-repair{margin-top:12px;border-top:1px solid #e0e7f2;padding-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.photo-repair>p{grid-column:1/-1}.photo-repair .angle-card{font-size:12px}@media(max-width:390px){.photo-repair{grid-template-columns:1fr}}

/* Staff photo/checkout and daily cash handover */
.staff-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.staff-tabs button{font-size:11px;line-height:1.35;padding:11px 3px}
#screen-finish .camera-zone{margin:16px 0}
#screen-finish .angle-grid input[type=file]{min-height:28px}
.finish-actions{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:16px}
.finish-actions .btn{min-width:0}
.cash-totals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.cash-totals>div{border:1px solid #d9e3f3;border-radius:12px;padding:14px;background:#f8faff;display:flex;flex-direction:column;gap:6px}
.cash-totals span{color:#586a83;font-size:12px}
.cash-totals strong{font-size:22px;word-break:break-word}
#cash-history .staff-job{margin:9px 0}
#cash-overdue{border-left:4px solid #d07f24;padding:11px 14px;background:#fff8ee}
#cash-overdue[hidden],#screen-finish[hidden],#screen-cash[hidden]{display:none!important}
@media(max-width:380px){.staff-tabs button{font-size:10px}.cash-totals strong{font-size:17px}.finish-actions{grid-template-columns:1fr}}

/* POS proof, individual monthly bonus and add-on services */
#pos-proof-zone[hidden],#screen-upsell[hidden],#upsell-quantity-wrap[hidden]{display:none!important}
#pos-proof-zone{margin:16px 0;border:2px dashed #78a4d0}
#pos-proof-zone .angle-card img{max-height:220px;object-fit:contain}
.bonus-widget{padding:14px;border:1px solid #b2d4bd;border-radius:14px;background:#f2fbf5;margin:15px 0}
.bonus-widget h2{margin:0 0 6px}
.bonus-widget .cash-totals{margin:12px 0}
.progress-bar{width:100%;height:12px;background:#dceade;border-radius:10px;overflow:hidden;margin:11px 0}
.progress-bar>div{height:100%;border-radius:10px;background:#1d8248;transition:width .2s ease}
#upsell-form{display:grid;gap:13px;margin:14px 0}
#upsell-form .field{min-width:0}
#upsell-quantity-wrap[hidden]{display:none!important}

/* Five mobile staff tabs; payment remains visible in a separate queue. */
.staff-tabs button{min-width:125px;flex:1 1 150px}
@media(max-width:530px){.staff-tabs{gap:7px}.staff-tabs button{flex-basis:calc(50% - 8px);padding:11px 7px;font-size:12px}.staff-job .btn{max-width:100%;white-space:normal}}


/* Visible cross-CRM and logout actions in the upper mobile header. */
.staff-header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.staff-header-actions .staff-out{display:inline-flex;align-items:center;justify-content:center;min-height:42px;
 padding:9px 12px;line-height:1.25;white-space:nowrap;text-decoration:none;font-size:12px;text-align:center}
.staff-header-actions .staff-switch{background:#2459d6;border-color:#4378ef;color:white}
@media(max-width:600px){
 .staff-header{position:static;flex-direction:column;align-items:stretch;
 padding:12px 12px 10px;gap:10px}
 .staff-brand .logo-box{width:36px;height:36px;font-size:18px}
 .staff-brand strong{font-size:14px}
 .staff-brand small{font-size:11px;margin-top:2px}
 .staff-header-actions{display:grid;grid-template-columns:minmax(0,1fr) auto}
 .staff-header-actions .staff-out{min-height:42px;font-size:12px}
}
@media(max-width:360px){.staff-header-actions .staff-out{padding:9px 7px;font-size:11px}}