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