:root{--navy:#1f3a5f;--lab:#fff176;--mst:#e5b3e3;--inp:#c6e8b4;--auto:#8fd0f0;--na:#b5b5b5;--line:#9aa5b1;--bg:#f2f5f9;--ok:#2e7d32;--bad:#c62828;--warn:#ef6c00}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);font:15px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1b2430;-webkit-text-size-adjust:100%}
button,select,input,textarea{font:inherit}
#app{min-height:100vh;padding-bottom:70px}
header.top{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
header.top h1{font-size:17px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top button{background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:8px;padding:6px 10px}
.net{font-size:12px;padding:3px 8px;border-radius:12px;background:#2e7d32;color:#fff;white-space:nowrap}
.net.off{background:#ef6c00}.net.q{background:#6a1b9a}
nav.bottom{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid #cfd6de;display:flex;padding-bottom:env(safe-area-inset-bottom)}
nav.bottom a{flex:1;text-align:center;padding:9px 2px 7px;font-size:12px;color:#51606f;text-decoration:none;position:relative}
nav.bottom a.on{color:var(--navy);font-weight:700;box-shadow:inset 0 3px 0 var(--navy)}
nav.bottom a i{display:block;font-style:normal;font-size:18px}
nav.bottom .badge{position:absolute;top:3px;margin-left:8px;background:var(--bad);color:#fff;border-radius:10px;font-size:10px;padding:1px 6px}
main{padding:12px;max-width:1500px;margin:0 auto}
.card{background:#fff;border:1px solid #d6dde5;border-radius:12px;padding:12px;margin-bottom:10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.grow{flex:1}
.muted{color:#66758a;font-size:13px}
input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff;max-width:100%}
input[type=search],input.wide{width:100%}
.btn{border:0;border-radius:9px;padding:9px 14px;background:var(--navy);color:#fff;font-weight:600}
.btn.sec{background:#e3e9f0;color:#1b2430}.btn.ok{background:var(--ok)}.btn.bad{background:var(--bad)}.btn.sm{padding:5px 9px;font-size:13px}
.btn:disabled{opacity:.45}
.chip{display:inline-block;border-radius:12px;padding:2px 9px;font-size:12px;font-weight:600;color:#fff;background:#607d8b;white-space:nowrap}
.pill{display:inline-block;border-radius:10px;padding:1px 8px;font-size:12px;background:#e3e9f0;margin-right:4px}
.pill.draft{background:#e0e0e0}.pill.submitted{background:#ffe0b2}.pill.verified{background:#c8e6c9}.pill.reverted{background:#ffcdd2}
.bar{height:8px;background:#e3e9f0;border-radius:6px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--ok)}
.asset-card{display:block;color:inherit;text-decoration:none}
.asset-card h3{margin:0 0 2px;font-size:16px}
.login{max-width:380px;margin:12vh auto;padding:0 16px}.login .card{display:grid;gap:10px}
h2{font-size:18px;margin:6px 0 10px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:18px;padding:7px 13px;white-space:nowrap}
.tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* form colours = Excel template */
.lab{background:var(--lab);font-weight:700;color:#1f3a8a}.mst{background:var(--mst)}.inp{background:var(--inp)}.auto{background:var(--auto)}.na{background:var(--na)}
.mhead{display:grid;grid-template-columns:130px 1fr;border:1px solid var(--line);margin-bottom:10px}
.mhead>*{padding:7px 9px;border-bottom:1px solid var(--line)}
.mhead>.lab{border-right:1px solid var(--line)}
.sysrow{display:grid;grid-template-columns:1fr 112px;gap:6px 10px;align-items:center;padding:8px 10px;border-bottom:1px solid #e1e6ec;background:#fff}
.sysrow .nm{font-weight:700}
.sysrow .ov{text-align:right}
.sysrow select{width:100%;background:var(--inp)}
.sysrow .rem{grid-column:1/-1}.sysrow .rem input{width:100%}
.sysrow.err select,.err{outline:2px solid var(--bad)}
select.locked,input.locked{background:#eceff3;color:#333}
.banner{padding:9px 11px;border-radius:9px;margin:8px 0;font-size:14px}
.banner.draft{background:#eceff1}.banner.submitted{background:#fff3e0}.banner.verified{background:#e8f5e9}.banner.reverted{background:#ffebee;border:1px solid #ef9a9a}
.gridwrap{overflow:auto;border:1px solid var(--line);background:#fff;max-height:78vh}
table.fg{border-collapse:collapse;min-width:100%;font-size:13px}
table.fg th,table.fg td{border:1px solid var(--line);padding:4px 6px;vertical-align:middle;text-align:center}
table.fg td.l,table.fg th.l{text-align:left;font-weight:700;position:sticky;left:0;z-index:2}
table.fg select{width:100%;min-width:112px;border:0;background:transparent;padding:4px}
table.fg td.inp select{background:var(--inp)}
table.fg input.rm{width:100%;min-width:130px;border:0;padding:4px}
table.fg td.sm{font-size:11px;color:#223}
table.fg tr.hd th{position:sticky;top:0;z-index:3}
table.fg th.l{z-index:4}
.trk td,.trk th{white-space:nowrap}
.trk th{position:sticky;top:0;z-index:3;background:#d6e4f0;font-size:12px}
.trk td.st{color:#fff;font-weight:600;font-size:12px}
.trk td.sticky,.trk th.sticky{position:sticky;left:0;z-index:2;background:#fff}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:10px}
.kpi{background:#fff;border:1px solid #d6dde5;border-radius:12px;padding:10px}.kpi b{display:block;font-size:24px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;background:#1b2430;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw}
#toast.show{opacity:1}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
#modal[hidden]{display:none}
#modal .sheet{background:#fff;width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:16px 16px 0 0;padding:16px;display:grid;gap:10px}
@media(min-width:700px){#modal{align-items:center}#modal .sheet{border-radius:16px}}
.fld{display:grid;gap:3px}.fld label{font-size:12px;color:#51606f;font-weight:600}
.list-item{display:flex;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #e6ebf0}
@media(min-width:900px){nav.bottom{position:static;border:0;background:transparent;padding:6px 12px}nav.bottom a{flex:none;padding:8px 14px;border-radius:8px;background:#e3e9f0;margin-right:6px;box-shadow:none!important}nav.bottom a.on{background:var(--navy);color:#fff}nav.bottom a i{display:none}}
/* v1.1 */
.ph{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:5px}
.th{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#eee;cursor:pointer}
.thp{position:relative;display:inline-block}.thp i{position:absolute;right:2px;bottom:2px;font-style:normal;font-size:12px;background:#fff;border-radius:6px}
.pill.submit{background:#ffe0b2}.pill.verify{background:#c8e6c9}.pill.update{background:#e1bee7}.pill.revert{background:#ffcdd2}.pill.reopen{background:#cfd8dc}
.hist details{margin-top:3px;font-size:13px}.hist .list-item{align-items:flex-start}
.pill.accepted,.pill.accept{background:#b2dfdb}.pill.cust_revert{background:#ffccbc}.banner.accepted{background:#e0f2f1;border:1px solid #80cbc4}

.logos{display:inline-flex;align-items:center;gap:10px}.logos img{height:28px;width:auto;display:block}
header.top .logos img{height:30px}
.logos.big{justify-content:center;margin-bottom:6px}.logos.big img{height:64px}
.psw{flex:1;min-width:0;background:rgba(255,255,255,.15);color:#fff;border:0;font-weight:700;font-size:15px}.psw option{color:#111}
.errs{margin:6px 0 0;padding-left:18px;max-height:34vh;overflow:auto;color:var(--bad);font-size:13px}
.zgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.zbox{border:1px solid var(--line);border-radius:9px;padding:7px 10px;background:#fff;display:inline-flex;gap:6px;align-items:center}.zbox.on{background:#e8f5e9;border-color:#66bb6a}
.alist{max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
.arow{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border-bottom:1px solid var(--line)}.arow.on{background:#f1f8f1}
.arow input,.zbox input,.list-item input[type=checkbox]{width:20px;height:20px}
header.top .logos img[alt="Red Sea Global"]{background:#fff;border-radius:7px;padding:2px 4px;height:36px}
@media(min-width:900px){.arow{}.stickybar{bottom:8px!important}}
@media(max-width:600px){header.top .logos{gap:6px}header.top .logos img{height:24px!important}header.top .logos img[alt="Red Sea Global"]{height:28px!important}}