:root{--ink:#17130f;--amb:#e8a838;--bg:#f2f0ec;--line:#e4e0d8;--g:#1f8a5b;--r:#c4452d;--mut:#7a7266;font-family:Manrope,system-ui,sans-serif}
*{box-sizing:border-box;margin:0}body{background:var(--bg);color:var(--ink);font-size:14px}
button,input,select{font:inherit;color:inherit}button{cursor:pointer}
em{font-family:'Instrument Serif',serif;color:var(--amb);font-weight:400}
#login{min-height:100vh;display:grid;place-items:center;background:var(--ink)}
#lf{background:#231d16;padding:36px;border-radius:18px;display:grid;gap:12px;width:min(340px,90vw);color:#fff;text-align:center}
#lf h1{font:400 34px 'Instrument Serif',serif}#lf p{color:#b9ad9b}#lf small{color:#ff9b86;min-height:16px}
#lf input{padding:12px;border-radius:10px;border:1px solid #4a4034;background:#17130f;color:#fff}
.b{background:var(--amb);color:var(--ink);border:0;padding:11px 18px;border-radius:10px;font-weight:700}
.b.s{background:#fff;border:1px solid var(--line);font-weight:600;padding:7px 12px}.b.d{background:#fbe9e5;color:var(--r)}
#app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
aside{background:var(--ink);color:#d9cfbf;padding:22px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.lg{font:400 26px 'Instrument Serif',serif;color:#fff;padding:0 8px}.lg small{display:block;font:600 11px Manrope;color:var(--amb);letter-spacing:.08em}
aside button{background:none;border:0;text-align:left;padding:10px 12px;border-radius:9px;color:inherit;width:100%}
nav{display:grid;gap:2px}nav button.on{background:#2c241b;color:#fff;box-shadow:inset 3px 0 var(--amb)}
.side-b{margin-top:auto;display:grid;gap:1px}.side-b button{font-size:12.5px;color:#9d917f}.side-b button:hover,nav button:hover{color:#fff}
main{padding:26px clamp(14px,3vw,38px);min-width:0}
.hd{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:20px}
h2{font:400 34px 'Instrument Serif',serif}h3{font-size:15px;margin-bottom:10px}
select,input:not([type=checkbox]){padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;max-width:100%}
.kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.k{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px}.k span{color:var(--mut);font-size:12.5px}
.k b{display:block;font-size:24px;margin:4px 0 2px;letter-spacing:-.02em}.k small{color:var(--mut);font-size:12px}
.k.hi{background:var(--ink);color:#fff;border:0}.k.hi span,.k.hi small{color:#b9ad9b}
.pos{color:var(--g)}.neg{color:var(--r)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-bottom:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--mut);font-weight:600;font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid #f0ece5;white-space:nowrap}tr:last-child td{border:0}td.mt{color:var(--mut);text-align:center;padding:26px}
td.r,th.r{text-align:right}tr.tot td{font-weight:800;background:#faf8f4}
.bar{display:block;background:#efe9de;height:7px;border-radius:9px;min-width:70px}.bar b{display:block;height:100%;background:var(--amb);border-radius:9px}
.ch{width:100%;height:auto}.ch rect{fill:#f0d9a4}.ch rect:hover{fill:var(--amb)}.ch polyline{fill:none;stroke:var(--g);stroke-width:2.4}
.lgd{font-size:12px;color:var(--mut);margin-top:6px}.lgd i{display:inline-block;width:10px;height:10px;border-radius:3px;background:#f0d9a4;margin-right:5px}.lgd i+i,.lgd i.l{background:var(--g)}
.pill{padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600;background:#efe9de}
.pill.Delivered{background:#dcf1e6;color:var(--g)}.pill.Cancelled,.pill.Returned{background:#fbe9e5;color:var(--r)}.pill.Shipped{background:#e3ecfb;color:#2d5fb5}
.th{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#efe9de;vertical-align:middle;margin-right:9px}
dialog{border:0;border-radius:16px;padding:22px;width:min(480px,94vw)}dialog::backdrop{background:#17130f99}
dialog form{display:grid;gap:10px}dialog label{display:grid;gap:4px;font-size:12.5px;color:var(--mut)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ck{display:flex!important;align-items:center;gap:8px;color:var(--ink)!important}
.ex{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
@media(max-width:820px){#app{grid-template-columns:1fr}aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}nav{display:flex}.side-b{display:flex;flex-wrap:wrap;margin:0}}

@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes grow{from{transform:scaleY(0)}}@keyframes gx{from{transform:scaleX(0)}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes sh{to{background-position:200% 0}}@keyframes in{from{opacity:0;transform:translateX(-10px)}}
body{background:radial-gradient(900px 520px at 90% -10%,#f6e2b6 0,transparent 60%),radial-gradient(700px 500px at -10% 105%,#e6eedf,transparent 60%),var(--bg) fixed}
.k,.card{animation:up .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*45ms);transition:transform .25s,box-shadow .25s}
.k:hover,.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px #17130f55}
.k.hi{background:linear-gradient(110deg,#17130f 30%,#3a2c18 50%,#17130f 70%) 0 0/200% 100%;animation:up .6s both,sh 7s linear infinite}
.ch rect{transform-box:fill-box;transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.7,.2,1) both}.ch polyline{stroke-dasharray:2200;stroke-dashoffset:2200;animation:draw 1.8s .3s ease forwards}
.bar b{transform-origin:left;animation:gx 1s cubic-bezier(.2,.7,.2,1) both}
tbody tr{transition:background .15s}tbody tr:hover{background:#fbf6ea}h2{animation:in .5s both}
nav button{transition:background .2s,color .2s,padding .2s}nav button:hover{padding-left:16px}.b{transition:transform .15s,filter .15s}.b:hover{filter:brightness(1.07);transform:translateY(-1px)}.b:active{transform:scale(.97)}
.pill.VIP{background:#fdf0cf;color:#8a5a00}.pill.Repeat{background:#e3ecfb;color:#2d5fb5}
.toast{position:fixed;bottom:22px;left:50%;translate:-50% 0;background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;animation:up .35s both;z-index:99}
dialog[open]{animation:up .3s both}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.ch polyline{stroke-dashoffset:0}}

textarea{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;width:100%;resize:vertical}.lnk{background:none;border:0;color:#2d5fb5;font-weight:700;text-decoration:underline;padding:0}.th[src^=data]{width:44px;height:44px}
#gate{min-height:100vh;display:grid;place-items:center;background:var(--ink);padding:16px}
.gate{background:#231d16;padding:32px;border-radius:18px;display:grid;gap:12px;width:min(360px,92vw);color:#fff}
.gate .lg{padding:0 0 4px}.gate h3{font:600 17px Manrope}.gate input{padding:12px;border-radius:10px;border:1px solid #4a4034;background:#17130f;color:#fff}
.gate .er{color:#ff9b86;min-height:16px;font-size:12.5px}.gate .ok{color:#7fd6a8;min-height:16px;font-size:12.5px}.gate .lnk{color:#e8a838;text-align:left}

.addr{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#faf6ec;border:1px solid #eadfca;border-radius:12px;padding:12px;font-size:13px;line-height:1.55;margin-top:8px}
@media(max-width:560px){.addr{grid-template-columns:1fr}}
.pill.NoOrder{background:#f3efe6;color:#7a6f60}