:root{--sage:#749981;--sage-deep:#5c8068;--sage-dark:#3f5447;--ink:#2e3a32;--bg:#f6f8f5;--card:#fff;--line:#e2e9e3;--muted:#7b867e;--soft:#eef2ee;--purple:#7e6bb6;--amber:#e3a92c;--green:#4fa06b;--red:#d2685e;--grey:#9aa7a0;--radius:14px;--shadow-sm:0 1px 2px #2e3a320d;--shadow-md:0 8px 24px #2e3a321a;--ease-out:cubic-bezier(.2,.8,.2,1)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:Poppins,-apple-system,Segoe UI,sans-serif}button{cursor:pointer;font-family:inherit}:focus-visible{outline:2px solid var(--sage-deep);outline-offset:2px}.screen{max-width:720px;min-height:100dvh;margin:0 auto}.screen.center{justify-content:center;align-items:center;display:flex}header{z-index:10;background:var(--sage);color:#fff;padding:14px 16px 12px;position:sticky;top:0;box-shadow:0 2px 14px #2e3a3224}.head-top{align-items:center;gap:12px;display:flex}header .logo{flex:none;width:auto;height:38px}.head-title{flex:1;min-width:0}.head-title h1{letter-spacing:.02em;font-size:1.15rem;font-weight:600;line-height:1.1}.head-sub{opacity:.95;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px;font-size:.74rem;font-weight:300;display:flex}.live-dot{background:#ffffff73;border-radius:50%;flex:none;width:8px;height:8px}.live-dot.on{background:#b9f6ca;animation:2.4s ease-out infinite pulse;box-shadow:0 0 #b9f6cab3}@keyframes pulse{0%{box-shadow:0 0 #b9f6ca99}70%{box-shadow:0 0 0 7px #b9f6ca00}to{box-shadow:0 0 #b9f6ca00}}.icon-btn{color:#fff;width:40px;height:40px;transition:background .2s var(--ease-out), transform .2s var(--ease-out);background:#ffffff21;border:1px solid #ffffff40;border-radius:11px;flex:none;justify-content:center;align-items:center;display:flex}.icon-btn svg{width:19px;height:19px}.icon-btn:hover{background:#ffffff3d}.icon-btn:active{transform:scale(.94)}.icon-btn.spin svg{animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.filters{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px;margin-top:12px;padding-bottom:2px;display:flex;overflow-x:auto}.filters::-webkit-scrollbar{display:none}.chip-filter{color:#fff;transition:background .2s var(--ease-out);background:#ffffff24;border:1px solid #ffffff47;border-radius:999px;flex:none;align-items:center;gap:6px;padding:6px 12px;font-size:.78rem;font-weight:500;display:inline-flex}.chip-filter b{opacity:.95;font-weight:700}.chip-filter.on{color:var(--sage-dark);background:#fff;border-color:#fff}.controls{gap:8px;margin-top:10px;display:flex}.search{flex:auto;min-width:0;position:relative}.search>svg{width:16px;height:16px;color:var(--muted);pointer-events:none;position:absolute;top:50%;left:11px;transform:translateY(-50%)}.search input{width:100%;font:inherit;color:var(--ink);appearance:none;background:#fff;border:none;border-radius:11px;padding:10px 34px;font-size:16px}.search input::-webkit-search-cancel-button{display:none}.search input:focus{outline:none;box-shadow:0 0 0 3px #ffffff80}.search .clear{background:var(--soft);width:22px;height:22px;color:var(--muted);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:15px;line-height:1;display:flex;position:absolute;top:50%;right:7px;transform:translateY(-50%)}.sort-select{max-width:46%;font:inherit;color:var(--ink);appearance:none;background:#fff;border:none;border-radius:11px;flex:none;padding:10px 12px;font-size:16px;font-weight:500}.sort-select:focus{outline:none;box-shadow:0 0 0 3px #ffffff80}main{flex-direction:column;gap:12px;padding:14px 16px 28px;display:flex}.empty{text-align:center;color:var(--muted);padding:40px 0;font-weight:300}.ctn{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);animation:rise .4s var(--ease-out) both;transition:box-shadow .25s var(--ease-out), transform .25s var(--ease-out);padding:14px 16px}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ctn:active{transform:scale(.995)}@media (hover:hover){.ctn:hover{box-shadow:var(--shadow-md)}}.ctn.past{opacity:.6}.ctn-top{justify-content:space-between;align-items:center;gap:10px;display:flex}.ctn-num{color:var(--sage-dark);letter-spacing:.02em;font-variant-numeric:tabular-nums;word-break:break-all;font-size:1.12rem;font-weight:700}.badge{text-transform:uppercase;letter-spacing:.06em;color:#fff;white-space:nowrap;border-radius:999px;flex:none;padding:4px 10px;font-size:.66rem;font-weight:700}.badge.confirmed{background:var(--purple)}.badge.shipped{background:var(--amber)}.badge.arrived{background:var(--green)}.badge.alert{background:var(--red)}.badge.unknown{background:var(--grey)}.ctn-supplier{color:var(--ink);align-items:center;gap:8px;margin-top:8px;font-size:.92rem;font-weight:500;display:flex}.ctn-supplier svg{width:18px;height:18px;color:var(--sage);flex:none}.ctn-dates{border-top:1px solid var(--line);grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;padding-top:12px;display:grid}.date-cell{flex-direction:column;gap:3px;min-width:0;display:flex}.date-label{text-transform:uppercase;letter-spacing:.07em;color:var(--sage-deep);font-size:.62rem;font-weight:600}.date-val{color:var(--ink);font-size:.92rem;font-weight:600}.ctn-foot{color:var(--muted);font-variant-numeric:tabular-nums;margin-top:10px;font-size:.76rem;font-weight:400}.loading{flex-direction:column;align-items:center;gap:18px;display:flex}.loading img{height:54px}.loading p{color:var(--muted);font-weight:300}.loading-bar{background:var(--soft);border-radius:5px;width:150px;height:5px;overflow:hidden}.loading-bar i{background:var(--sage);width:35%;height:100%;animation:slide 1.2s var(--ease-out) infinite;border-radius:5px;display:block}@keyframes slide{0%{transform:translate(-120%)}to{transform:translate(330%)}}.login-screen{background:radial-gradient(120vh 120vh at 85% -20%, #74998129, transparent 60%), radial-gradient(90vh 90vh at -10% 110%, #74998121, transparent 60%), var(--bg);justify-content:center;align-items:center;min-height:100dvh;padding:24px;display:flex}.login-card{background:var(--card);border:1px solid var(--line);text-align:center;width:100%;max-width:400px;animation:rise .5s var(--ease-out) both;border-radius:16px;padding:40px 32px 26px;box-shadow:0 18px 50px #2e3a321a}.login-logo{width:auto;height:58px;margin-bottom:16px}.login-card h1{letter-spacing:.02em;font-size:1.3rem;font-weight:600}.login-sub{color:var(--muted);margin:.35rem 0 1.5rem;font-size:.88rem;font-weight:300}.login-field{text-align:left;margin-bottom:1rem;display:block}.login-field span{text-transform:uppercase;letter-spacing:.1em;color:var(--sage-deep);margin-bottom:.35rem;font-size:.72rem;font-weight:600;display:block}.login-field input{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);border-radius:10px;padding:.72rem .85rem;font-size:1rem}.login-field input:focus{border-color:var(--sage);background:#fff;outline:none;box-shadow:0 0 0 3px #74998138}.login-error{color:#a4453f;background:#fbefef;border:1px solid #f0d9d7;border-radius:10px;margin-bottom:1rem;padding:.6rem .8rem;font-size:.85rem;font-weight:500}.login-btn{background:var(--sage);color:#fff;width:100%;transition:background .2s var(--ease-out), transform .2s var(--ease-out);border:none;border-radius:10px;justify-content:center;align-items:center;gap:.55rem;padding:.82rem 1rem;font-size:1rem;font-weight:600;display:flex}.login-btn:hover:not(:disabled){background:var(--sage-deep)}.login-btn:active:not(:disabled){transform:scale(.98)}.login-btn:disabled{opacity:.75}.login-spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:1rem;height:1rem;animation:.7s linear infinite spin}.login-foot{color:var(--muted);margin-top:1.5rem;font-size:.75rem;font-weight:300}.login-card.shake{animation:shake .45s var(--ease-out)}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}