:root{
  --navy:#0f1e35; --blue:#1d6fda; --ink:#1a1f36; --muted:#5a6478;
  --line:#e3e7ef; --bg:#f6f8fc; --ok:#1f9d57; --warn:#ee712d; --err:#d83a3a;
  --card:#fff; --radius:12px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:'Segoe UI',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.hidden{display:none !important}
.muted{color:var(--muted)}.small{font-size:13px}
.err{color:var(--err);font-size:14px;margin:6px 0 0}

#topbar{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));position:sticky;top:0;z-index:5}
#topbar .brand{font-weight:700;font-size:15px;letter-spacing:.3px}
#topbar .status{display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(31,157,87,.2)}
.dot.off{background:var(--warn);box-shadow:0 0 0 3px rgba(238,113,45,.2)}
.pin{font-size:15px;line-height:1;filter:grayscale(1);opacity:.45;transition:opacity .2s,filter .2s}
.pin:not(.off){filter:none;opacity:1}
.badge{background:var(--warn);color:#fff;border-radius:11px;font-size:12px;font-weight:700;
  min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.link{background:none;border:none;color:#cdd8ee;font-size:13px;text-decoration:underline}
#langBtn{text-decoration:none;border:1px solid #2c3a55;border-radius:6px;padding:2px 8px;font-weight:600}
[dir="rtl"] body{font-family:'Segoe UI',Tahoma,'Noto Naskh Arabic',Arial,sans-serif}

#app{flex:1;width:100%;max-width:560px;margin:0 auto;padding:20px 16px 40px}
.screen h1{font-size:22px;margin:8px 0 4px}
.screen h2{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:22px 0 8px}

input,select{width:100%;font-size:18px;padding:14px;border:1px solid var(--line);border-radius:10px;
  background:#fff;margin-top:6px;color:var(--ink)}
.fld{display:block;font-size:13px;color:var(--muted);margin-top:16px}
button{font-size:17px;font-weight:600;border-radius:10px;padding:14px;border:none;cursor:pointer}
button.primary{background:var(--blue);color:#fff;width:100%;margin-top:18px}
button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
button:active{filter:brightness(.95)}

/* camera */
#camWrap{position:relative;width:100%;aspect-ratio:3/4;background:#000;border-radius:var(--radius);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
#reader{width:100%;height:100%}
#reader video{width:100% !important;height:100% !important;object-fit:cover;display:block}
#reader img{display:none}            /* hide html5-qrcode's default scan-region marker image */
.cam-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;
  font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.scan-controls{display:flex;gap:10px;margin-top:14px}
.scan-controls .primary,.scan-controls .ghost{margin-top:0;flex:1}

.recent{list-style:none;padding:0;margin:0}
.recent li{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);
  border-radius:10px;background:#fff;margin-bottom:8px}
.recent .ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex:none}
.recent .ico.ok{background:rgba(31,157,87,.12);color:var(--ok)}
.recent .ico.q{background:rgba(238,113,45,.12);color:var(--warn)}
.recent .ico.bad{background:rgba(216,58,58,.12);color:var(--err)}
.recent .ico.warn{background:rgba(240,180,0,.18);color:#b8860b}
.recent .r-main{flex:1;min-width:0}
.recent .r-t{font-weight:600;font-size:15px}
.recent .r-sub{font-size:12px;color:var(--muted)}

/* sheets */
.sheet{position:fixed;inset:0;background:rgba(10,18,35,.55);display:flex;align-items:flex-end;
  z-index:20;animation:fade .15s ease}
.sheet-card{background:#fff;width:100%;max-width:560px;margin:0 auto;border-radius:18px 18px 0 0;
  padding:22px 20px;padding-bottom:max(22px,env(safe-area-inset-bottom))}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-badge{display:inline-block;background:var(--blue);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:1px;padding:5px 12px;border-radius:20px}
.sheet-badge.dup{background:var(--muted)}.sheet-badge.warn{background:var(--warn)}
.sheet-ticket{font-size:24px;font-weight:700;margin-top:12px}
.sheet-bag{font-size:16px;color:var(--muted);margin-top:2px}
.sheet-route{font-size:18px;margin-top:14px}
.sheet-weight{font-size:14px;color:var(--muted);margin-top:4px}
.sheet-loc{font-size:13px;color:var(--muted);margin-top:8px}
.sheet-loc.ok{color:var(--ok)}
.sheet-warn{background:rgba(238,113,45,.1);color:#a8480f;border-radius:10px;padding:10px 12px;
  font-size:14px;margin-top:14px}
.sheet-actions{display:flex;gap:10px;margin-top:20px}
.sheet-actions .ghost,.sheet-actions .primary{flex:1;margin-top:0}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:24px;font-size:14px;z-index:40;max-width:90%;text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25)}
.toast.ok{background:var(--ok)}.toast.bad{background:var(--err)}.toast.warn{background:#c79100}

.ver{position:fixed;left:0;right:0;bottom:0;z-index:6;text-align:center;font-family:monospace;
  font-size:10px;color:var(--muted);background:var(--bg);border-top:1px solid var(--line);
  padding:4px 0;padding-bottom:calc(4px + env(safe-area-inset-bottom));pointer-events:none}