*{box-sizing:border-box;margin:0;padding:0;font-family:'Noto Sans Sinhala',Arial,sans-serif;}
body{background:#f4f6f8;min-height:100vh;}
.topbar{background:linear-gradient(180deg,#3b8fd4 0%,#1e5f96 100%);border-bottom:3px solid #d4a437;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-badge{width:34px;height:34px;border-radius:50%;background:#d4a437;display:flex;align-items:center;justify-content:center;color:#1c2b3a;font-weight:bold;font-size:14px;flex-shrink:0;}
.brand-title{color:#fff;font-size:14px;font-weight:bold;}
.brand-sub{color:#fbf1dc;font-size:10px;}
.nav{display:flex;gap:6px;flex-wrap:wrap;}
.navchip{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.35);color:#fbf1dc;font-size:11px;padding:6px 12px;border-radius:14px;text-decoration:none;white-space:nowrap;}
.navchip.active{background:#d4a437;color:#1c2b3a;border-color:#d4a437;font-weight:bold;}
.userchip{color:#fbf1dc;font-size:11px;display:flex;align-items:center;gap:8px;}
.userchip a{color:#fbf1dc;text-decoration:underline;}
.content{padding:18px;max-width:1100px;margin:0 auto;}
.pagehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.pagetitle{font-size:17px;color:#1c2b3a;font-weight:bold;}
.btn{background:#3b8fd4;color:#fff;border:none;border-radius:6px;padding:9px 16px;font-size:12px;font-weight:bold;cursor:pointer;}
.btn.gold{background:#d4a437;color:#1c2b3a;}
.btn.outline{background:#fff;border:1px solid #d7dde3;color:#1c2b3a;}
.btn.danger{background:#e24b4a;color:#fff;}
.btn:disabled{opacity:0.55;cursor:default;}
.card{background:#fff;border:1px solid #e2e6ea;border-radius:10px;padding:16px;margin-bottom:14px;}
.table{width:100%;border-collapse:collapse;}
.table th{text-align:left;font-size:11px;color:#5f6c7b;text-transform:uppercase;padding:8px 8px;border-bottom:2px solid #eaf4fc;}
.table td{font-size:13px;color:#1c2b3a;padding:9px 8px;border-bottom:1px solid #eef1f4;}
.badge{font-size:10px;font-weight:bold;padding:3px 9px;border-radius:10px;display:inline-block;}
.badge.blue{background:#eaf4fc;color:#1e5f96;}
.badge.gold{background:#fbf1dc;color:#9c7620;}
.badge.red{background:#fdecec;color:#a32d2d;}
.badge.green{background:#e9f6ec;color:#1e7a3a;}
.metricrow{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.metric{flex:1;min-width:130px;background:#fff;border:1px solid #e2e6ea;border-radius:10px;padding:12px 14px;}
.metric .lbl{font-size:11px;color:#5f6c7b;}
.metric .val{font-size:20px;font-weight:bold;color:#1c2b3a;margin-top:3px;}
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;}
@media (max-width:720px){.grid2{grid-template-columns:1fr;}}
.formrow{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.field{flex:1;min-width:140px;}
.field label{display:block;font-size:11px;color:#5f6c7b;margin-bottom:4px;}
.field input,.field select,.field textarea{width:100%;border:1px solid #d7dde3;border-radius:6px;padding:8px 10px;font-size:12px;font-family:inherit;}
.searchbar{display:flex;gap:8px;margin-bottom:12px;}
.searchbar input{flex:1;border:1px solid #d7dde3;border-radius:6px;padding:9px 12px;font-size:13px;}
.msg{padding:10px 12px;border-radius:8px;font-size:12px;margin-bottom:10px;display:none;}
.msg.ok{background:#e9f6ec;color:#1e7a3a;display:block;}
.msg.err{background:#fdecec;color:#a32d2d;display:block;}
.empty{font-size:12px;color:#8a8f98;padding:20px;text-align:center;}
.actions{display:flex;gap:6px;}
.actions .btn{padding:6px 10px;font-size:11px;}

/* QR camera scanner overlay (attachQrScanner in app.js) */
.qr-scan-overlay{position:fixed;inset:0;background:rgba(28,43,58,0.92);z-index:999;display:flex;align-items:center;justify-content:center;padding:16px;}
.qr-scan-box{background:#fff;border-radius:14px;padding:14px;max-width:360px;width:100%;text-align:center;}
.qr-scan-video{width:100%;border-radius:10px;background:#000;display:block;}
.qr-scan-hint{font-size:11px;color:#5f6c7b;margin:10px 0;}
.qr-scan-cancel{width:100%;}