:root{font-family:Inter,system-ui,sans-serif;color:#fff;background:#061528}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#061528}.scanwrap{max-width:760px;margin:auto;padding:18px}header{display:flex;justify-content:space-between;align-items:center;padding:10px 2px 20px}header strong{display:block;font-size:18px}header span{display:block;color:#a9bdd4;font-size:14px;margin-top:3px}header a{color:#ffc83d;text-decoration:none}main{background:#0d2746;border:1px solid #214567;border-radius:20px;padding:24px}.ready{text-align:center;font-size:clamp(36px,10vw,64px);font-weight:900;color:#79e09e;margin:10px 0 24px}#barcode{width:100%;padding:22px;border:2px solid #42698d;border-radius:14px;background:#041426;color:#fff;text-align:center;font-size:28px}.result{margin-top:18px;min-height:84px;background:#071a31;border-radius:13px;padding:17px;display:grid;align-content:center;color:#a9bdd4}.result strong{font-size:24px;color:#fff}.result span{margin-top:5px}.result.ok{border:1px solid #2b9553}.result.bad{border:1px solid #b6444d}

.scanhelp{margin-top:18px;line-height:1.7;color:#b8c6d8}.settings select{font-size:18px}

.result.warn{border:1px solid #d9a631}.result.warn strong{color:#ffd972}.settings label{display:block;margin:14px 0}.settings button{padding:12px 16px;border:0;border-radius:10px;background:#ffc83d;font-weight:800}


/* v7 scanner modes */
.scanner-mode-strip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:16px;
    border:1px solid #374453;
}
.scanner-mode-strip>div{
    display:flex;
    flex-direction:column;
    gap:3px
}
.scanner-mode-strip small{opacity:.72}
.scanner-mode-strip strong{font-size:18px}
.scanner-mode-strip button{
    border:0;
    border-radius:9px;
    padding:9px 12px;
    background:#f0b420;
    color:#111;
    font-weight:800;
    cursor:pointer
}
.scanner-mode-strip.idle-mode{background:#202a36}
.scanner-mode-strip.warehouse-mode{
    background:#0d2745;
    border-color:#23486f
}
.scanner-mode-strip.delivery-mode{
    background:#173b25;
    border-color:#2f7147
}


/* v7.3 vehicle task list */
.vehicle-work-panel{
    margin:0 0 18px;
    padding:14px;
    border:1px solid #2d5379;
    border-radius:14px;
    background:#0a2037
}
.vehicle-toggle{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:12px
}
.vehicle-toggle-button{
    border:1px solid #365d82;
    border-radius:10px;
    padding:11px 10px;
    background:#102b47;
    color:#b8cbe0;
    font-weight:800;
    font-size:15px;
    cursor:pointer
}
.vehicle-toggle-button.active{
    background:#f0b420;
    border-color:#f0b420;
    color:#101820
}
.vehicle-progress{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:14px
}
.vehicle-progress>div{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:10px;
    border-radius:10px;
    background:#102b47
}
.vehicle-progress small{
    font-size:10px;
    opacity:.7
}
.vehicle-progress strong{
    font-size:22px
}
.vehicle-progress span{
    font-size:11px;
    color:#a9bdd4
}
.vehicle-task-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:4px 2px 9px
}
.vehicle-task-heading strong{
    font-size:15px
}
.vehicle-task-heading span{
    font-size:12px;
    color:#a9bdd4
}
.vehicle-items{
    max-height:300px;
    overflow:auto;
    display:grid;
    gap:7px
}
.vehicle-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 11px;
    border:1px solid #294e72;
    border-radius:10px;
    background:#0d2742
}
.vehicle-item-main{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px
}
.vehicle-item-main strong{
    font-size:14px
}
.vehicle-item-main span,
.vehicle-item-main small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.vehicle-item-main span{
    color:#d2deeb;
    font-size:12px
}
.vehicle-item-main small{
    color:#91a8bf;
    font-size:11px
}
.vehicle-item-weight{
    flex:0 0 auto;
    font-size:12px;
    font-weight:800;
    color:#fff
}
.vehicle-empty{
    padding:16px 10px;
    border:1px dashed #365d82;
    border-radius:10px;
    text-align:center;
    color:#a9bdd4
}
@media(max-width:520px){
    .vehicle-progress{
        grid-template-columns:1fr 1fr 1fr
    }
    .vehicle-progress>div{
        padding:8px
    }
    .vehicle-progress strong{
        font-size:19px
    }
}


/* v7.3.1 capacity advice */
.scanner-capacity-warning{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin:0 0 12px;
    padding:10px 11px;
    border:1px solid #d6a332;
    border-radius:10px;
    background:#3a3016;
    color:#ffe6a3
}
.scanner-capacity-warning strong{
    color:#ffd567
}
.scanner-capacity-warning span{
    font-size:12px;
    line-height:1.4
}


/* v7.6.6 delivery date */
.scanner-delivery-date{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:-2px 0 12px;
    padding:10px 12px;
    border:1px solid #2d5379;
    border-radius:10px;
    background:#102b47
}
.scanner-delivery-date label{
    font-size:13px;
    font-weight:800;
    color:#b8cbe0
}
.scanner-delivery-date input{
    min-width:145px;
    padding:8px 10px;
    border:1px solid #466b8e;
    border-radius:8px;
    background:#07192b;
    color:#fff;
    font:inherit;
    color-scheme:dark
}


/* v7.7 repackage mode */
.scanner-mode-strip.repackage-mode{
    background:#173f32;
    border-color:#2d825f
}

.scanner-action-bar{
    margin:12px 0
}

.scanner-action-button{
    width:100%;
    min-height:50px;
    border:1px solid #466b8e;
    border-radius:10px;
    background:#102b47;
    color:#dce9f6;
    font:inherit;
    font-weight:800;
    cursor:pointer
}

.scanner-action-button.active{
    background:#f6b91b;
    border-color:#f6b91b;
    color:#07192b
}

.repackage-panel{
    margin:12px 0;
    padding:14px;
    border:1px solid #2d5379;
    border-radius:12px;
    background:#102b47
}

.repackage-prompt,
.repackage-empty{
    padding:16px;
    border:1px dashed #3c668d;
    border-radius:10px;
    text-align:center;
    color:#c2d3e5
}

.repackage-heading{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:14px
}

.repackage-heading strong{
    display:block;
    font-size:18px
}

.repackage-heading span{
    display:block;
    margin-top:3px;
    color:#b8cbe0
}

.repackage-status{
    flex:0 0 auto;
    padding:6px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:800
}

.repackage-status.pending{
    background:#473910;
    color:#ffd867
}

.repackage-status.done{
    background:#16492f;
    color:#76e6a7
}

.repackage-parts-heading{
    margin:4px 0 8px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    color:#9eb7cf
}

.repackage-parts{
    display:grid;
    gap:7px
}

.repackage-part{
    padding:10px 12px;
    border-radius:9px;
    background:#0c2742;
    border:1px solid #244c72
}

.repackage-part span{
    color:#9eb7cf
}

.repackage-confirm{
    width:100%;
    min-height:50px;
    margin-top:14px;
    border:0;
    border-radius:10px;
    background:#59dc92;
    color:#07192b;
    font:inherit;
    font-weight:900;
    cursor:pointer
}

.repackage-confirm:disabled{
    opacity:.55;
    cursor:default
}