*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#141414,#020202);color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hero{height:125px;background:#fff;color:#111;display:flex;justify-content:space-between;padding:28px 18px 10px;border-bottom:4px solid #d8001b}
.hero h1{margin:0;color:#d8001b;font-size:36px;font-weight:950}
.hero p{margin:2px 0 0;color:#444;font-size:16px;font-weight:800}
.badge{background:#d8001b;color:#fff;padding:8px 14px;border-radius:999px;font-weight:900;height:fit-content}
.tabs{display:flex;background:#111}
.tabs a{flex:1;text-align:center;padding:13px;color:#777;text-decoration:none;font-size:18px;font-weight:900}
.tabs a.active{background:#d8001b;color:#fff}
main{padding:10px;max-width:760px;margin:auto}
.card,.loco-head,.status,.note,.empty{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);border-radius:14px;margin-bottom:8px;padding:10px}
.card h2{margin:0 0 8px;font-size:20px}
.form{display:flex;gap:8px}
.form.stacked{flex-direction:column}
.form input,input{flex:1;background:#232323;border:1px solid rgba(255,255,255,.15);border-radius:9px;color:#fff;padding:10px;font-size:18px;font-weight:700}
button{background:#e3001b;color:#fff;border:0;border-radius:9px;padding:10px 18px;font-weight:900;font-size:18px}
.hint{font-size:13px;opacity:.6;margin-top:6px}
.loco-head{text-align:center;padding:10px}
.loco-number{font-size:42px;font-weight:950;line-height:1}
.loco-special{font-size:18px;opacity:.7;margin-top:2px}
.note{background:rgba(255,190,0,.13);border-color:#997300;text-align:center;color:#ffd451;font-weight:800;font-size:16px}
.note h3{margin:0 0 4px;color:#ffd451}
.note p{margin:0}
.status{display:grid;grid-template-columns:220px 1fr 80px;align-items:center;gap:12px;min-height:54px;padding:8px 12px;position:relative;overflow:hidden}
.status::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px}
.status.done::before{background:#22c55e}
.status.missing::before{background:#ff3b30}
.status h3{margin:0;font-size:17px;font-weight:900}
.status.done:not(.p2):not(.p2b):not(.p3):not(.p41):not(.p42):not(.p5) h3{color:#22c55e}
.status.p2 h3,.status.p2b h3,.status.p3 h3,.status.p41 h3,.status.p42 h3,.status.p5 h3{color:#3b82f6!important}
.status-grid{display:contents}
.status-grid div{background:none;padding:0}
.status-grid span{display:none}
.status-grid div:first-child{justify-self:end}
.status-grid div:last-child{justify-self:end}
.status-grid strong{font-size:18px;font-weight:900}
.missing-text{grid-column:2/4;justify-self:end;font-size:17px;font-weight:900;color:#ff3b30}
.empty{color:rgba(255,255,255,.7);text-align:center;font-weight:800}
.msg{max-width:760px;margin:0 auto 10px;border-radius:12px;padding:11px 13px;font-weight:900}
.msg.ok{background:rgba(20,160,90,.2);border:1px solid rgba(20,160,90,.5)}
.msg.err{background:rgba(220,30,40,.2);border:1px solid rgba(220,30,40,.5)}
.list{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;background:rgba(255,255,255,.07);border-radius:10px;padding:10px}
.row strong{font-size:20px}
.row span{color:rgba(255,255,255,.6);font-size:13px}
.row em{font-style:normal;font-size:12px;border-radius:999px;padding:5px 8px;background:#d8001b}
.row.transferred{opacity:.55}
.row.transferred em{background:#555}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.actions button{flex:1}
button.danger{background:#444}
footer{text-align:center;opacity:.25;font-size:12px;padding:14px}
@media(max-width:520px){
  .hero{height:118px;padding:26px 14px 10px}
  .hero h1{font-size:34px}
  .tabs a{font-size:17px}
  .status{grid-template-columns:1fr auto auto;gap:10px;min-height:52px}
  .status h3{font-size:16px}
  .status-grid strong,.missing-text{font-size:16px}
  .loco-number{font-size:40px}
}

.import-link{
text-decoration:none;
display:inline-block;
}

.select{
width:100%;
background:#232323;
border:1px solid rgba(255,255,255,.15);
border-radius:9px;
color:#fff;
padding:10px;
font-size:18px;
font-weight:800;
}

.tabs a{
font-size:16px;
}

.status.cleared.done h3{
color:#22c55e;
}

.dlox-note{
margin-top:8px;
color:#ffd451;
font-size:17px;
font-weight:900;
text-align:center;
}

.status.p11 h3,
.status.p12 h3{
color:#22c55e !important;
}

.status h3{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.status{
grid-template-columns:minmax(170px,1fr) 110px 70px;
}

@media(max-width:520px){
  .status{
    grid-template-columns:minmax(125px,1fr) 88px 54px;
  }
  .status h3{
    font-size:14px;
  }
}

.capture-list{
display:flex;
flex-direction:column;
gap:8px;
}

.capture-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
padding:10px;
}

.capture-row strong{
display:block;
font-size:22px;
font-weight:950;
}

.capture-row span{
display:block;
color:#3b82f6;
font-size:14px;
font-weight:900;
margin-top:2px;
}

.capture-row small{
display:block;
opacity:.55;
font-size:12px;
margin-top:2px;
}

.mini-danger{
background:#444;
font-size:14px;
padding:8px 10px;
border-radius:8px;
}

.camera-box{
display:block;
background:#232323;
border:1px solid rgba(255,255,255,.15);
border-radius:9px;
color:#fff;
padding:11px;
font-size:17px;
font-weight:900;
text-align:center;
}

.camera-box input{
display:none;
}

.capture-input-row{
display:grid;
grid-template-columns:1fr 72px;
gap:10px;
}

.capture-input-row input{
width:100%;
}

.camera-button{
display:flex;
align-items:center;
justify-content:center;
background:#2b2b2b;
border:1px solid rgba(255,255,255,.18);
border-radius:12px;
font-size:30px;
height:48px;
cursor:pointer;
}

.camera-button input{
display:none;
}

.camera-box{
display:none !important;
}

.capture-input-row,
.camera-button,
.camera-box,
#ocr_hint{
display:none !important;
}