:root{
  --paper:#f6f5f1;--ink:#1d2430;--muted:#5b6472;--line:#d9d6cc;--card:#ffffff;
  --accent:#1f4e8c;--accent-ink:#ffffff;--warn-bg:#fff4d6;--warn-ink:#5a4100;
  --err-bg:#fdecec;--err-ink:#8a1c1c;--ok-ink:#1e5b35;--focus:#f2b705;
  color-scheme:light;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Arial,"Noto Sans Hebrew",sans-serif;line-height:1.5}
.demo-strip{background:#eef2f7;color:#4a5568;border-bottom:1px solid #dde3ec;font-weight:600;font-size:.78rem;letter-spacing:.02em;text-align:center;padding:.4rem 1rem}
.login-wrap{min-height:calc(100vh - 2.2rem);display:flex;align-items:center;justify-content:center;padding:1.5rem 1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.75rem;width:100%;max-width:26rem;
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 12px 32px -18px rgba(29,36,48,.35)}
.eyebrow{margin:0 0 .25rem;color:var(--muted);font-size:.85rem;font-weight:600;letter-spacing:.02em}
h1{margin:0 0 .5rem;font-size:1.45rem;line-height:1.25}
.muted{color:var(--muted);margin:.25rem 0 1.25rem}
label{display:block;font-weight:600;margin:.75rem 0 .35rem}
input{width:100%;font:inherit;font-size:1.05rem;padding:.7rem .8rem;border:1.5px solid #b9b5aa;border-radius:10px;background:#fff;color:var(--ink)}
input#code{letter-spacing:.4em;font-variant-numeric:tabular-nums;text-align:center;font-size:1.3rem}
input[aria-invalid="true"]{border-color:var(--err-ink)}
.hint{color:var(--muted);font-size:.875rem;margin:.35rem 0 0}
.btn{font:inherit;font-weight:600;border-radius:10px;padding:.7rem 1rem;cursor:pointer;border:1.5px solid transparent;min-height:44px}
.btn.primary{background:var(--accent);color:var(--accent-ink);width:100%;margin-top:1rem}
.btn.primary[disabled]{opacity:.6;cursor:progress}
.btn.ghost{background:transparent;border-color:#b9b5aa;color:var(--ink)}
.btn.ghost[disabled]{opacity:.55;cursor:not-allowed}
.btn.link{background:none;border:none;color:var(--accent);text-decoration:underline;padding:.7rem .25rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.75rem}
.status{min-height:1.5rem;color:var(--ok-ink);font-weight:600;margin:.25rem 0}
.error{background:var(--err-bg);color:var(--err-ink);border:1px solid #f1b8b8;border-radius:10px;padding:.65rem .8rem;margin:.5rem 0;font-weight:600}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding:1.25rem 1rem;max-width:64rem;margin:0 auto;border-bottom:1px solid var(--line)}
.board-wrap{max-width:64rem;margin:0 auto;padding:1rem}
table.shipments{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
caption{caption-side:top;text-align:start;padding:.5rem 0;color:var(--warn-ink);font-weight:600}
th,td{padding:.75rem .9rem;text-align:start;border-bottom:1px solid var(--line)}
th{background:#eeece5;font-size:.9rem}
td.file{font-family:ui-monospace,Menlo,Consolas,monospace;direction:ltr;text-align:right}
.badge{display:inline-block;background:var(--warn-bg);color:var(--warn-ink);border:1px solid #e9d18a;border-radius:999px;padding:.05rem .55rem;font-size:.8rem;font-weight:700;margin-inline-start:.4rem}
.footnote{color:var(--muted);font-size:.85rem;margin-top:1rem}
@media (max-width:640px){
  .topbar{align-items:center}
  table.shipments,table.shipments thead,table.shipments tbody,table.shipments tr,table.shipments td{display:block}
  table.shipments{border:none;background:transparent}
  table.shipments thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.shipments tr{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:.75rem;padding:.25rem 0}
  table.shipments td{border:none;padding:.4rem .9rem;display:flex;justify-content:space-between;gap:1rem}
  table.shipments td::before{content:attr(data-label);font-weight:600;color:var(--muted);flex:0 0 7.5rem;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
  table.shipments caption{display:block;width:100%}
  table.shipments td.file{direction:rtl;text-align:start}
  table.shipments td .badge{flex:none;align-self:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}