:root{--bg:#f4f5fb;--c:#fff;--t:#12131a;--m:#6b7080;--p:#5b3df5;--p2:#9b6bff;--g:#0ea968;--o:#f59e0b;--r:#ef4444;--bd:#e6e8f0}
*{box-sizing:border-box;margin:0}body{font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--t)}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}
#lay{display:flex;min-height:100vh}
#sb{width:232px;background:#12131a;position:fixed;top:0;bottom:0;left:0;padding:18px 14px;display:flex;flex-direction:column;gap:4px;z-index:30}
.logo{font-weight:800;font-size:22px;background:linear-gradient(90deg,var(--p),var(--p2));-webkit-background-clip:text;color:transparent;padding:0 12px 14px}
.a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;color:#aab;font-weight:600;cursor:pointer;font-size:14.5px}
.a:hover{background:#ffffff14;color:#fff}.a.on{background:linear-gradient(90deg,var(--p),var(--p2));color:#fff}
#sb .sp{flex:1}
#main{margin-left:232px;flex:1;min-width:0}
#topbar{background:#fffffffa;backdrop-filter:blur(10px);border-bottom:1px solid var(--bd);padding:0 22px;height:58px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
#topbar .sp{flex:1}#app{padding:22px;max-width:1240px}
@media(max-width:860px){#sb{width:100%;position:static;flex-direction:row;flex-wrap:wrap;align-items:center}#main{margin-left:0}#sb .sp{display:none}}
.btn{border:0;border-radius:12px;padding:10px 16px;font-weight:600;cursor:pointer;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;box-shadow:0 8px 20px #5b3df544;transition:.2s;display:inline-block;text-align:center;font-size:14.5px}
.btn:hover{transform:translateY(-2px)}.btn.o{background:#fff;color:var(--p);border:1px solid var(--bd);box-shadow:none}.btn.g{background:var(--g);box-shadow:0 8px 20px #0ea96844}.btn.r{background:var(--r);box-shadow:0 8px 20px #ef444444}.btn.sm{padding:5px 10px;font-size:13px}.btn:disabled{opacity:.5;pointer-events:none}
h1{font-size:24px;letter-spacing:-.5px}h2{font-size:20px;margin:26px 0 12px;letter-spacing:-.4px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.stat{background:var(--c);border:1px solid var(--bd);border-radius:16px;padding:16px}.stat b{font-size:26px;display:block;color:var(--p)}.stat small{color:var(--m)}
.box{background:var(--c);border:1px solid var(--bd);border-radius:16px;padding:16px;margin:10px 0}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden}th{background:#f7f7fc;text-align:left}td,th{padding:10px 12px;border-bottom:1px solid var(--bd)}
tr:last-child td{border-bottom:0}tr:hover td{background:#fafaff}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.tag.pending,.tag.pend{color:#b45309;background:#fef3c7}.tag.approved{color:var(--p);background:#ece8ff}.tag.shipped{color:#0369a1;background:#e0f2fe}
.tag.delivered{color:var(--g);background:#e6f7ef}.tag.cancelled,.tag.failed{color:var(--r);background:#fdeaea}.tag.paid{color:var(--g);background:#e6f7ef}.tag.cod{color:var(--p);background:#ece8ff}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.chip{padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--bd);cursor:pointer;font-size:13.5px;font-weight:600}.chip.on{background:var(--p);color:#fff;border-color:var(--p)}
.thumb{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:26px;background-size:cover;background-position:center;border:1px solid var(--bd);flex:none}
select,input,textarea{width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:11px;background:#fff;margin:4px 0 10px}label{font-size:13px;font-weight:600;color:var(--m)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
#md:not(:empty){position:fixed;inset:0;background:#0007;z-index:60;display:grid;place-items:center;padding:16px}.mdl{background:#fff;border-radius:20px;padding:22px;width:min(520px,100%);max-height:92vh;overflow:auto;animation:pp .25s}.mdl.wide{width:min(680px,100%)}
@keyframes pp{from{transform:scale(.92);opacity:0}}
#ts{position:fixed;bottom:16px;left:16px;z-index:80;display:grid;gap:8px}.t{background:#12131a;color:#fff;padding:11px 16px;border-radius:12px;max-width:360px;animation:pp .3s}
small,.mu{color:var(--m);font-size:13px}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}.kv b{text-align:right;color:var(--m);font-size:13px}
.imgprev{max-width:120px;max-height:120px;border-radius:12px;margin-top:8px;border:1px solid var(--bd)}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}.switch input{opacity:0;width:0;height:0;margin:0}
.sl{position:absolute;cursor:pointer;inset:0;background:#d5d8e4;border-radius:99px;transition:.2s}.sl:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+.sl{background:var(--p)}.switch input:checked+.sl:before{transform:translateX(18px)}
.load{text-align:center;padding:50px;color:var(--m)}