*{box-sizing:border-box}
html,body{margin:0;background:#F3F6F9;color:#111;font-family:'Barlow','Noto Sans Sinhala',sans-serif;font-size:15px}
a{color:#0B7FBF}
input,select,textarea,button{font-family:inherit;font-size:15px}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;margin:0}
h1{font-size:32px;line-height:1.1}h2{font-size:24px}h3{font-size:20px}
.app{display:flex;min-height:100vh}
.side{flex:0 0 240px;background:#081627;color:#E8F1F8;padding:22px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{display:block;padding:0 8px;text-decoration:none}
.logo .w{font-weight:700;font-size:25px;letter-spacing:-.02em}.logo b{color:#35B5FD}.logo span span{color:#fff}
.logo small{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#8FA7BE}
.navgroup{display:flex;flex-direction:column;gap:3px}
.navlabel{font-size:12px;color:#8FA7BE;padding:4px 10px;text-transform:uppercase;letter-spacing:.08em}
.navgroup a{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;border-radius:10px;text-decoration:none;font-weight:600;color:#B9CCDD}
.navgroup a[aria-current="page"]{background:#12365A;color:#fff;box-shadow:inset 3px 0 0 #35B5FD}
.navgroup a:hover{color:#fff}
.side .cnt{margin-left:auto;background:#35B5FD;color:#06223A;font-weight:700;font-size:12px;border-radius:10px;padding:1px 8px}
.linkbtn{background:none;border:0;color:#8FD8FF;cursor:pointer;padding:8px 12px;text-align:left;font-weight:600}
main{flex:1;min-width:0;padding:24px 32px 60px;display:flex;flex-direction:column;gap:18px}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.sub{color:#4F6475;font-size:14px;margin-top:2px}
.who{color:#4F6475;font-size:14px}
.flash{padding:12px 16px;border-radius:10px;font-weight:600}
.flash.ok{background:#DDF5E8;color:#146C3C}.flash.warn{background:#FFF1D6;color:#8A5300}.flash.err{background:#FDE2E0;color:#9B1C12}
.card{background:#fff;border:1px solid #E1E8EE;border-radius:14px}
.pad{padding:20px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.between{justify-content:space-between}
.split{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.grow{flex:999 1 560px;min-width:0}
.aside{flex:1 1 320px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{padding:14px 18px}.kpi small{font-size:13px;color:#4F6475}.kpi div{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:32px}
.btn{min-height:40px;border-radius:8px;font-weight:600;padding:0 16px;cursor:pointer;border:1px solid #D3DEE6;background:#fff;color:#111;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:#9FB3C4}
.btn.dark{background:#111;color:#fff;border-color:#111}
.btn.primary{background:#35B5FD;color:#06223A;border-color:#35B5FD}
.btn.danger{color:#9B1C12;border-color:#F0B8B3}
.btn.sm{min-height:34px;padding:0 10px;font-size:14px}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill-btn{min-height:36px;display:inline-flex;align-items:center;padding:0 12px;border-radius:18px;font-weight:600;font-size:14px;border:1px solid #D3DEE6;background:#fff;color:#2A3A48;text-decoration:none}
.pill-btn.on{background:#111;color:#fff;border-color:#111}
.pill{display:inline-block;font-size:12.5px;font-weight:700;border-radius:12px;padding:3px 10px;white-space:nowrap}
.pill.new{background:#E0F3FF;color:#0B5F8F}.pill.conf{background:#E6E8FF;color:#3B3FA8}.pill.pack{background:#FFF1D6;color:#8A5300}
.pill.disp{background:#EDE4FF;color:#5B2BB5}.pill.deliv{background:#DDF5E8;color:#146C3C}.pill.canc{background:#EEF0F2;color:#5A6470}.pill.err{background:#FDE2E0;color:#9B1C12}
table{width:100%;border-collapse:collapse}
.tablewrap{overflow-x:auto}
th{background:#111;color:#fff;font-size:13px;font-weight:600;text-align:left;padding:10px 14px;white-space:nowrap}
td{padding:11px 14px;border-top:1px solid #E1E8EE;vertical-align:top}
tr.sel td{background:#E6F6FE}
td small,.muted{color:#4F6475;font-size:13px}
td small{display:block}
.st{height:34px;border-radius:17px;border:0;padding:0 10px;font-weight:700;font-size:13.5px;cursor:pointer}
.st.New{background:#E0F3FF;color:#0B5F8F}.st.Confirmed{background:#E6E8FF;color:#3B3FA8}.st.Packed{background:#FFF1D6;color:#8A5300}
.st.Dispatched{background:#EDE4FF;color:#5B2BB5}.st.Delivered{background:#DDF5E8;color:#146C3C}.st.Cancelled{background:#EEF0F2;color:#5A6470}
.f{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#4F6475}
.f input,.f textarea,.f select{border:1px solid #D3DEE6;border-radius:8px;padding:9px 12px;color:#111;font-weight:400;background:#fff;width:100%}
.f input,.f select{height:42px;padding-top:0;padding-bottom:0}
.f textarea{resize:vertical;min-height:80px}
.f .hint{font-weight:400}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.chk{display:flex;gap:8px;align-items:center;min-height:40px;font-weight:500}
.chk input{width:18px;height:18px}
.info{font-size:14px;color:#2A3A48;line-height:1.5;background:#E6F6FE;border-radius:10px;padding:12px 14px}
.warnbox{font-size:14px;line-height:1.5;background:#FFF1D6;color:#5C3A00;border-radius:10px;padding:12px 14px}
.dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 12px;margin:0}
.dl dt{color:#4F6475}.dl dd{margin:0}
.faq{border:1px solid #E1E8EE;border-radius:10px;padding:12px 14px}
.thread{background:#EAF0F4;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;max-height:640px;overflow-y:auto}
.m{display:flex;flex-direction:column;gap:3px;max-width:80%}
.m .b{border-radius:12px;padding:8px 12px;line-height:1.4;white-space:pre-line}
.m .w{font-size:11.5px;font-weight:600;color:#4F6475;padding:0 4px}
.m.in{align-self:flex-start}.m.in .b{background:#fff}
.m.bot{align-self:flex-end;align-items:flex-end}.m.bot .b{background:#D9F0FF}
.m.owner{align-self:flex-end;align-items:flex-end}.m.owner .b{background:#FFE9D6}
.list a.item{display:block;padding:12px 16px;border-bottom:1px solid #E1E8EE;text-decoration:none;color:#111}
.list a.item.on{background:#E6F6FE}
.list a.item small{display:block;color:#4F6475}
code,.mono{font-family:ui-monospace,Menlo,monospace;font-size:13.5px}
.copy{display:flex;gap:8px;align-items:center}
.copy input{flex:1;height:40px;border:1px solid #D3DEE6;border-radius:8px;padding:0 10px;font-family:ui-monospace,Menlo,monospace;font-size:13px;background:#F7F9FB}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#081627;padding:20px}
.login .card{width:100%;max-width:400px;padding:28px}
.empty{padding:30px;text-align:center;color:#4F6475}
@media (max-width:900px){
  .app{flex-direction:column}
  .side{position:static;height:auto;flex:none;padding:12px}
  .side .navgroup{flex-direction:row;flex-wrap:wrap}
  .navlabel{width:100%}
  main{padding:16px}
  h1{font-size:26px}
}
@media print{.side,.bar,.noprint{display:none!important}main{padding:0}}