:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1f232c; --line:#2a2f3a;
  --text:#eef1f6; --muted:#8c94a3;
  --accent:#ffd23f; --accent-ink:#1a1500;
  --ok:#2fd27a; --ok-bg:#0f2a1c; --warn:#ffb020; --warn-bg:#2b2210; --err:#ff5a5f; --err-bg:#2c1214;
  --boll:#7aa7ff; --dhl:#ffcc00;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit}
.num{font-variant-numeric:tabular-nums}

/* ---------- Login ---------- */
body.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-box{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:16px}
.login-box label{display:grid;gap:6px;color:var(--muted);font-size:14px}
.login-box input{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--text);font-size:18px}
.login-box input:focus{outline:2px solid var(--accent);border-color:transparent}
.brand{font-weight:800;letter-spacing:.08em;font-size:20px}
.brand span{color:var(--accent);font-weight:600;letter-spacing:0}

/* ---------- Buttons ---------- */
.btn{border:0;border-radius:12px;padding:12px 18px;background:var(--panel2);font-weight:600}
.btn:hover{filter:brightness(1.15)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-xl{padding:18px;font-size:20px;font-weight:800;border-radius:14px}
.btn:disabled{opacity:.35;cursor:not-allowed;filter:none}
.btn-ghost{background:transparent;border:1px solid var(--line)}
a.btn{color:var(--text);text-decoration:none;display:inline-flex;align-items:center}

/* ---------- Kopf ---------- */
.top{position:sticky;top:0;z-index:5;background:rgba(15,17,21,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{max-width:1400px;margin:0 auto;padding:14px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.top .brand{margin-right:auto}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 14px;display:flex;gap:8px;align-items:baseline}
.stat b{font-size:22px}
.stat small{color:var(--muted)}
.stat.late b{color:var(--err)}
.sync{color:var(--muted);font-size:13px}
.dry{background:var(--warn-bg);color:var(--warn);border:1px solid #5a4313;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}

.filters{max-width:1400px;margin:0 auto;padding:16px 20px 0;display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:10px 18px;font-weight:600}
.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ---------- Karten ---------- */
.grid{max-width:1400px;margin:0 auto;padding:16px 20px 40px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;text-align:left;min-height:220px;transition:transform .08s,border-color .15s}
.card:hover{border-color:#3b4250;transform:translateY(-2px)}
.card:active{transform:scale(.99)}
.card.late{border-color:#5a2226}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-no{font-weight:800;font-size:20px}
.tag{font-size:12px;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:999px}
.tag.BOLL{background:#16223d;color:var(--boll)}
.tag.DHL{background:#2e2700;color:var(--dhl)}
.card-cust{font-size:17px;font-weight:600}
.card-cust small{color:var(--muted);font-weight:500}
.card-items{color:var(--muted);font-size:14px;margin:0;padding:0;list-style:none;flex:1}
.card-items li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.age{font-size:14px;color:var(--muted)}
.age.late{color:var(--err);font-weight:700}
.veh{font-weight:700}
.mini{height:6px;background:var(--panel2);border-radius:99px;overflow:hidden}
.mini i{display:block;height:100%;background:var(--ok)}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:80px 0;font-size:20px}
.empty b{display:block;font-size:56px;margin-bottom:8px}

/* ---------- Detail ---------- */
.detail{max-width:860px;margin:0 auto;padding:20px 20px 140px}
.d-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.d-head h1{margin:0;font-size:28px}
.d-sub{color:var(--muted);margin-bottom:18px}
.progress{height:14px;background:var(--panel2);border-radius:99px;overflow:hidden;margin-bottom:6px}
.progress i{display:block;height:100%;background:var(--ok);transition:width .25s}
.progress-txt{color:var(--muted);font-size:14px;margin-bottom:20px}
.lines{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.line{background:var(--panel);border:2px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;gap:16px;align-items:center}
.line.done{border-color:#1d5a3b;background:var(--ok-bg)}
.line.bad{border-color:#6b2427;background:var(--err-bg)}
.line.warn{border-color:#5a4313}
.line-main{flex:1;min-width:0}
.line-name{font-weight:700;font-size:18px}
.line-meta{color:var(--muted);font-size:14px}
.qty{font-size:22px;font-weight:800;min-width:56px;text-align:right}
.check{width:64px;height:64px;border-radius:14px;border:2px solid var(--line);background:var(--bg);font-size:34px;line-height:1;flex:none}
.line.done .check{background:var(--ok);border-color:var(--ok);color:#06210f}
.serial{display:flex;gap:8px;margin-top:10px}
.serial input{flex:1;min-width:0;background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:14px;font-size:20px;color:var(--text);letter-spacing:.04em;text-transform:uppercase}
.serial input:focus{outline:none;border-color:var(--accent)}
.serial input::placeholder{text-transform:none;letter-spacing:0;font-size:16px}
.serial-ok{margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.serial-ok code{font-size:20px;font-weight:800;color:var(--ok)}
.feedback{margin-top:8px;font-size:15px;font-weight:600}
.feedback.error{color:var(--err)} .feedback.warn{color:var(--warn)} .feedback.ok{color:var(--ok)}
.v-icon{font-size:30px;flex:none}

.shipbar{position:fixed;left:0;right:0;bottom:0;background:rgba(15,17,21,.95);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:16px 20px}
.shipbar-in{max-width:860px;margin:0 auto;display:flex;gap:12px}
.shipbar .btn-xl{flex:1}
.btn-ship{background:var(--ok);color:#06210f}

/* ---------- Meldungen ---------- */
.msg{border-radius:12px;padding:12px 14px;font-weight:600}
.msg-error{background:var(--err-bg);color:var(--err)}
.msg-warn{background:var(--warn-bg);color:var(--warn)}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:20;max-width:92vw;padding:16px 22px;border-radius:14px;font-weight:700;font-size:17px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.ok{background:var(--ok);color:#06210f}
.toast.error{background:var(--err);color:#fff}
.toast.warn{background:var(--warn);color:#241800}
.boot{padding:60px;text-align:center;color:var(--muted)}
pre.payload{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;overflow:auto;font-size:12px;max-height:240px}

/* ---------- Bilder ---------- */
.card-img,.line-img{position:relative;background:#fff;border-radius:12px;overflow:hidden;display:grid;place-items:center;flex:none}
.card-img{height:140px;margin:-6px -6px 4px;width:calc(100% + 12px)}
.line-img{width:72px;height:72px}
.line-img[data-zoom]{cursor:zoom-in}
.card-img .ph,.line-img .ph{font-size:30px;opacity:.25;filter:grayscale(1)}
.card-img:not(.has-img),.line-img:not(.has-img){background:var(--panel2)}
.card-img img,.line-img img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain}
.card-img img.fade,.line-img img.fade{animation:fadein .25s}
.line-img.has-img::after{content:"⤢";position:absolute;right:4px;bottom:2px;font-size:12px;color:#555}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:24px;cursor:zoom-out;animation:fadein .15s}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:12px}
.lb-close{position:fixed;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:22px}

/* ---------- FIN-Vorschläge ---------- */
.sugg{margin-top:8px}
.sugg-hint{color:var(--muted);font-size:14px;margin-bottom:6px}
.sugg-hint.warn{color:var(--warn)}
.sugg-list{display:flex;flex-wrap:wrap;gap:8px;max-height:260px;overflow:auto}
.sugg-item{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:12px 14px;font:600 17px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em;color:var(--text)}
.sugg-item b{color:var(--accent)}
.sugg-item:hover,.sugg-item:focus{border-color:var(--accent);outline:none}
.sugg-more{align-self:center;color:var(--muted);font-size:14px}

@media (max-width:600px){
  .top-in{padding:12px 16px}.grid,.filters,.detail{padding-left:16px;padding-right:16px}
  .stats .stat small{display:none}
  .line{padding:12px;gap:12px;align-items:flex-start}
  .line-img{width:56px;height:56px}
  .check{width:56px;height:56px}
  .line-name{font-size:16px}
  .serial input{font-size:18px;padding:12px}
  .serial-ok{flex-wrap:wrap}
}