:root{
  --ink:#34348C; --ink-deep:#22225E; --paper:#F6F2E9; --paper-2:#EFE8D8;
  --amber:#F5A623; --amber-dark:#C97A0E; --teal:#1B7A72; --line:#D8CFB8;
  --red:#B3261E; --white:#FFFDF9;
  --mono:'IBM Plex Mono','Courier New',monospace; --sans:'Inter',-apple-system,sans-serif; --display:'Oswald','Arial Narrow',sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;}
header.app{background:linear-gradient(135deg,var(--ink),var(--ink-deep));color:#fff;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:4px solid var(--amber);flex-wrap:wrap;gap:10px;}
header.app .brand{display:flex;align-items:center;gap:12px;}
header.app .logo-chip{background:#fff;border-radius:8px;padding:6px 10px;}
header.app .logo-chip img{height:28px;display:block;}
header.app h1{font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:1px;margin:0;}
header.app .sub{font-size:11px;color:#C7C6E8;letter-spacing:1px;text-transform:uppercase;}
header.app .who{font-size:12px;color:#E7E6FA;}
header.app a.logout{background:transparent;border:1px solid #5C5CB0;color:#E7E6FA;font-size:11px;padding:6px 10px;border-radius:4px;text-decoration:none;}
header.app a.logout:hover{background:#40408F;}

nav.tabs{display:flex;gap:2px;background:var(--paper-2);padding:0 24px;border-bottom:2px solid var(--line);overflow-x:auto;}
nav.tabs a{padding:12px 16px;font-family:var(--display);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#6b6250;border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none;}
nav.tabs a.active{color:var(--ink);border-bottom-color:var(--amber);}

main{padding:20px 24px 60px;max-width:1200px;margin:0 auto;}
.panel{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:16px;}
.panel h2{margin:0 0 12px;font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:1px;}
.muted{color:#8a8168;font-size:12px;}
.req-star{color:var(--red);}
.notice{background:#FDE9D2;border:1px solid var(--amber);color:#7a4a0c;padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px;}
.notice.error{background:#F6DEDC;border-color:var(--red);color:var(--red);}
.notice.success{background:#DCEFE9;border-color:var(--teal);color:var(--teal);}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8a8168;margin-bottom:4px;}
input,select,textarea{width:100%;padding:9px;border:1px solid var(--line);border-radius:4px;font-family:var(--sans);font-size:14px;background:var(--white);color:var(--ink);}
input:focus,select:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber);}
.btn{border:none;border-radius:4px;padding:10px 16px;cursor:pointer;font-weight:600;font-size:13px;display:inline-block;text-decoration:none;}
.btn-amber{background:var(--amber);color:#fff;} .btn-amber:hover{background:var(--amber-dark);}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);} .btn-ghost:hover{background:var(--paper-2);}
.btn-red{background:var(--red);color:#fff;}
.btn-sm{padding:6px 10px;font-size:12px;}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}
fieldset{border:1px solid var(--line);border-radius:6px;margin:0 0 14px;padding:12px;}
legend{font-family:var(--display);font-size:12px;text-transform:uppercase;letter-spacing:1px;padding:0 6px;color:var(--amber-dark);}

table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;padding:8px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:500;letter-spacing:.5px;text-transform:uppercase;font-size:11px;}
td{padding:8px;border-bottom:1px solid var(--line);}
tr:hover td{background:#FBF8F1;}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.badge.requested{background:#EDE3D0;color:#8a6b1f;} .badge.confirmed{background:#E4E1F5;color:#5346A8;}
.badge.pickedup{background:#DCE8F5;color:#2a5c8a;} .badge.intransit{background:#DCE8F5;color:#2a5c8a;}
.badge.outfordelivery{background:#FDE9D2;color:#B5590F;} .badge.delivered{background:#DCEFE9;color:var(--teal);}
.badge.delayed{background:#F6DEDC;color:var(--red);} .badge.returned{background:#F6DEDC;color:var(--red);}
.badge.cancelled{background:#E6E2DB;color:#6b6250;}
.badge.paid{background:#DCEFE9;color:var(--teal);} .badge.unpaid{background:#F6DEDC;color:var(--red);}
.empty{text-align:center;padding:40px;color:#a39a80;}

#loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,#40408F 0%,var(--ink-deep) 60%);padding:20px;}
.login-card{background:#fff;border-radius:12px;padding:32px 30px;width:100%;max-width:360px;box-shadow:0 20px 50px rgba(0,0,0,.35);text-align:center;border-top:5px solid var(--amber);margin:0 auto;}
.login-card img{height:48px;margin-bottom:14px;}
.login-card h2{font-family:var(--display);text-transform:uppercase;letter-spacing:1px;margin:0 0 4px;font-size:16px;}
.login-card p.sub{font-size:12px;color:#8a8168;margin:0 0 18px;}
.login-card .field{text-align:left;margin-bottom:12px;}
.login-card button{width:100%;margin-top:6px;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
.stat{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:4px;padding:12px 14px;}
.stat .num{font-family:var(--mono);font-size:20px;font-weight:600;}
.stat .lab{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#8a8168;}

@media (max-width:760px){
  header.app{flex-direction:column;align-items:flex-start;padding:12px 16px;}
  main{padding:12px;}
  .grid2,.grid3,.grid4{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  input,select,textarea{font-size:16px;}
  table thead{display:none;}
  table,tbody,tr,td{display:block;width:100%;}
  tbody tr{margin-bottom:12px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;}
  tbody td{border:none;padding:5px 0;display:flex;justify-content:space-between;font-size:13px;text-align:right;}
  tbody td[data-label]:not([data-label=""])::before{content:attr(data-label);font-weight:600;color:#8a8168;text-transform:uppercase;font-size:10px;letter-spacing:.5px;text-align:left;}
}

@media print{
  header.app, nav.tabs, .no-print{ display:none !important; }
  body{ background:#fff; }
}