:root{--navy:#12324a;--sea:#2a7fa8;--pale:#eaf1f7;--line:#c9d8e4;--ink:#1b2733;--amber:#fde6bd;--amber-d:#b26a00;--ok:#2e7d4f;--bad:#b3261e;--bg:#f6f9fc}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 "Segoe UI",Tahoma,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--sea);text-decoration:none}a:hover{text-decoration:underline}
.top{display:flex;align-items:center;gap:24px;background:var(--navy);color:#fff;padding:0 20px;min-height:52px;flex-wrap:wrap}
.brand{color:#fff;font-weight:700;font-size:17px;display:flex;align-items:center;gap:10px}.brand:hover{text-decoration:none}
.mark{display:inline-grid;place-items:center;width:28px;height:28px;background:#fff;color:var(--navy);border-radius:6px;font-weight:800}
.top nav{display:flex;gap:2px;flex:1}
.top nav a{color:#cfe2ef;padding:14px 14px;border-bottom:3px solid transparent}
.top nav a.on,.top nav a:hover{color:#fff;border-color:#f0a500;text-decoration:none}
.who{font-size:13px;color:#cfe2ef}.who a{color:#fff;margin-left:10px}
main{padding:18px 20px;max-width:1500px;margin:0 auto}
h1{font-size:20px;margin:0 0 14px;color:var(--navy)}h2{font-size:15px;margin:0 0 10px;color:var(--navy)}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.bar .sp{flex:1}
.btn{display:inline-block;background:#fff;border:1px solid var(--line);color:var(--navy);padding:6px 12px;border-radius:4px;cursor:pointer;font:inherit}
.btn:hover{background:var(--pale);text-decoration:none}
.btn.pri{background:var(--sea);border-color:var(--sea);color:#fff}.btn.pri:hover{background:#226a8d}
.btn.bad{color:var(--bad)}.btn.sm{padding:2px 8px;font-size:12px}
.panel{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px;margin-bottom:16px}
.filters{background:var(--pale);border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 12px;margin-bottom:12px}
label{display:block;font-size:12px;color:#4a6072;margin-bottom:2px}
input,select,textarea{width:100%;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sea);outline-offset:-1px}
.filters .hit{background:var(--amber)}
table{width:100%;border-collapse:collapse;background:#fff}
th{background:#cfe0ee;text-align:left;font-weight:600;padding:7px 9px;border:1px solid var(--line);color:var(--navy);white-space:nowrap}
td{padding:6px 9px;border:1px solid var(--line)}
tbody tr:hover{background:#f1f7fc}tr.off td{color:#8a97a3;background:#f2f2f2}
td.n,th.n{text-align:right}
.wrap{overflow-x:auto}
.badge{display:inline-block;padding:1px 9px;border-radius:10px;font-size:12px;background:#dde6ee;color:#2a4257}
.s-booked{background:#e3ecf8}.s-picked_up,.s-in_transit{background:#fde6bd;color:#7a4700}.s-arrived,.s-customs{background:#e8dcf5;color:#4b2a73}
.s-delivered{background:#d6efe0;color:#1d6a3f}.s-cancelled{background:#f7d9d7;color:#8c1d16}
.flash{padding:9px 14px;border-radius:4px;margin-bottom:14px}.flash.ok{background:#d6efe0;color:#1d6a3f}.flash.err{background:#f7d9d7;color:#8c1d16}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 14px}
.grid .full{grid-column:1/-1}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-left:4px solid var(--sea);border-radius:4px;padding:10px 14px}
.kpi b{display:block;font-size:26px;color:var(--navy)}.kpi span{color:#4a6072;font-size:12px}
.two{display:grid;grid-template-columns:2fr 1fr;gap:16px}@media(max-width:900px){.two{grid-template-columns:1fr}}
dl.kv{display:grid;grid-template-columns:150px 1fr;gap:5px 12px;margin:0}dl.kv dt{color:#4a6072}dl.kv dd{margin:0}
.menu{position:relative;display:inline-block}.menu>summary{list-style:none;cursor:pointer}.menu>summary::-webkit-details-marker{display:none}
.menu .drop{position:absolute;right:0;z-index:5;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.15);min-width:230px;padding:4px 0}
.menu .drop a{display:block;padding:5px 14px;color:var(--ink)}.menu .drop a:hover{background:var(--pale);text-decoration:none}
.foot{text-align:center;color:#7b8b99;font-size:12px;padding:20px}
.login{max-width:360px;margin:9vh auto;background:#fff;border:1px solid var(--line);border-top:5px solid var(--navy);border-radius:6px;padding:26px}
.login .brand{color:var(--navy);margin-bottom:16px}.login .mark{background:var(--navy);color:#fff}
.login p{margin:0 0 12px}
.track{max-width:760px;margin:6vh auto;padding:0 16px}
.tl{list-style:none;margin:10px 0 0;padding:0;border-left:3px solid var(--line)}
.tl li{position:relative;padding:0 0 14px 18px}.tl li:before{content:"";position:absolute;left:-9px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--line)}
.tl li.done:before{background:var(--ok);border-color:var(--ok)}.tl small{color:#607686;display:block}
@media(max-width:700px){.top{height:auto;padding:8px 14px}.top nav a{padding:8px 10px}}

.tile{display:inline-grid;place-items:center;background:#fff;border-radius:6px;padding:3px 6px;height:34px}
.tile img{height:26px;width:auto;display:block}
.logo-full{display:block;width:210px;max-width:70%;margin:0 auto 14px}
.logo-track{display:block;width:180px;max-width:60%;margin-bottom:6px}
.login h2{text-align:center;margin:0 0 12px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;border-bottom:2px solid var(--line)}
.tabs a{padding:8px 14px;color:var(--navy);border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs a span{background:var(--pale);border-radius:10px;padding:0 7px;font-size:12px;margin-left:4px}
.tabs a.on{border-color:#f0a500;font-weight:600;text-decoration:none}.tabs a:hover{text-decoration:none;background:var(--pale)}
.w-inbound{background:#fde6bd;color:#7a4700}.w-booked_in{background:#e3ecf8}.w-stored{background:#d6efe0;color:#1d6a3f}.w-pulled{background:#e8dcf5;color:#4b2a73}.w-out{background:#e4e7ea;color:#4a5560}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.mode input{position:absolute;opacity:0}.mode span{display:block;text-align:center;padding:12px 8px;border:2px solid var(--line);border-radius:6px;cursor:pointer;font-weight:600;color:var(--navy);background:#fff;margin:0}
.mode input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}.mode input:focus-visible+span{outline:2px solid var(--sea);outline-offset:2px}
.mode{position:relative;margin:0}
.scanin{font-size:22px;padding:12px;border:2px solid var(--sea)}
.scanrow{padding:6px 10px;border-left:4px solid var(--line);margin-bottom:6px;background:#fafcfe}.scanrow small{color:#607686;margin-right:6px}
.scanrow.okr{border-color:var(--ok)}.scanrow.errr{border-color:var(--bad);background:#fdf0ef}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.g-draft{background:#e4e7ea;color:#4a5560}.g-ready{background:#e3ecf8;color:#12324a}.g-with_driver{background:#fde6bd;color:#7a4700}.g-delivered{background:#d6efe0;color:#1d6a3f}