:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:#172f3c;background:#f3f6f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{background:#102b3a;color:white;padding:17px max(18px,calc((100vw - 1080px)/2));display:flex;justify-content:space-between;align-items:center;gap:10px}.brand{display:flex;align-items:center;gap:12px}.brand strong{font-size:20px}.brand small{display:block;font-size:9px;letter-spacing:1.8px;color:#b4d4dc;margin-top:3px}.logo{font-size:36px;color:#8bd4bb}.offline{font-size:11px;border:1px solid #54717d;border-radius:20px;padding:7px 11px;white-space:nowrap}main{max-width:1080px;margin:auto;padding:28px 18px 50px}.hero{background:#143748;color:#fff;border-radius:18px;padding:31px;display:flex;align-items:center;justify-content:space-between;gap:12px}.hero h1{font-size:clamp(27px,4vw,39px);margin:5px 0 9px}.hero p{max-width:570px;color:#c4d9df;line-height:1.6;margin:0}.hero .eyebrow{font-size:11px;letter-spacing:2px;color:#9edac6;font-weight:700}.hero-icon{font-size:100px;color:#8dd3bc;opacity:.7}.tabs{display:flex;gap:8px;overflow:auto;padding:18px 0}.tabs button{white-space:nowrap;border:0;background:#e5edef;border-radius:10px;padding:12px 17px;font-weight:700;color:#49616a;cursor:pointer}.tabs button.active{background:#146b68;color:white}.panel{display:none}.panel.active{display:block}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}.stats article,.card,.notice{background:white;border:1px solid #dce6e8;border-radius:15px;padding:22px}.stats small{display:block;color:#637984;font-weight:650}.stats strong{font-size:37px;display:block;margin-top:10px;color:#116c68}.card{margin-bottom:16px}.card h2{margin:0 0 16px;font-size:21px}.card>p,.notice p,.qrbox p{color:#5b717b;line-height:1.6}.notice{border-left:4px solid #25867b}.notice p{margin-bottom:0}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{display:block;font-size:13px;font-weight:700;margin:0 0 16px;color:#37505b}input,select,textarea{width:100%;font:inherit;margin-top:7px;border:1px solid #c8d8dc;border-radius:9px;padding:12px;background:#fff;color:#19343f}input:focus,select:focus,textarea:focus{outline:2px solid #5ab4a1;outline-offset:1px}textarea{resize:vertical}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}button{font:inherit;cursor:pointer}button.primary,button.secondary,.dangerbtn{padding:12px 19px;border-radius:9px;font-weight:700}.primary{background:#126f69;border:1px solid #126f69;color:white}.secondary{background:white;border:1px solid #9bb6bc;color:#214b57}.dangerbtn{background:#fff0f0;color:#a12d32;border:1px solid #e5aeb1}.qrbox{background:#f3f8f8;border:1px solid #d5e7e5;padding:16px;border-radius:12px;margin-bottom:20px}.qrhead{display:flex;justify-content:space-between;align-items:center;gap:10px}.tag{background:#fff1d9;color:#875600;font-size:11px;border-radius:20px;padding:6px 9px}.qrbox video{width:100%;max-width:440px;border-radius:9px;margin:12px 0}.qrbox small{color:#56727d}.entries{margin:13px 0}.entry{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-top:1px solid #e6edef;padding:15px 0}.entry:first-child{border-top:0}.entry h3{font-size:15px;margin:0 0 4px}.entry p{font-size:13px;color:#687d85;margin:0;line-height:1.5;overflow-wrap:anywhere}.entry .mini{display:flex;gap:7px;flex-shrink:0}.mini button{border:1px solid #d4e0e2;border-radius:7px;background:white;padding:7px 9px;color:#35525c}.empty{color:#6a8089;padding:20px 0}.warning{font-size:13px;color:#8a5a14!important}.muted{color:#6a8089;font-size:13px}.danger{border-color:#eed0d0}#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#143748;color:white;border-radius:10px;padding:12px 20px;display:none;max-width:90vw;box-shadow:0 10px 30px #0003;z-index:10}footer{text-align:center;color:#7d929a;padding:22px;font-size:12px}@media(max-width:650px){header{padding:13px 17px}.offline{font-size:10px}.hero{padding:22px}.hero-icon{display:none}.stats{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr;gap:0}.card{padding:17px}.tabs button{padding:11px 13px}.entry{flex-direction:column}.entry .mini{align-self:flex-end}}

/* HPK maritime blue theme – v1.2 */
:root{color:#172b48;background:#f1f5fa}
header{background:#101f3d}.brand small{color:#b8d4f4}.offline{border-color:#58759c}
.logo.hpk-logo{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.hero{background:#162d53}.hero p{color:#d0e0f4}.hero .eyebrow{color:#89c5ff}
.hero-icon.hpk-hero-logo{width:125px;height:125px;object-fit:contain;opacity:1}
.tabs button{background:#e1eaf5;color:#2a4a74}.tabs button.active{background:#244b82;color:white}
.stats article,.card,.notice{border-color:#d8e3f1}.stats strong{color:#244b82}
.notice{border-left-color:#65a9e8}.card>p,.notice p,.qrbox p{color:#516781}
label{color:#314967}input,select,textarea{border-color:#bdcee4;color:#172b48}input:focus,select:focus,textarea:focus{outline-color:#65a9e8}
.primary{background:#244b82;border-color:#244b82}.primary:hover,.tabs button.active:hover{background:#3164a7}.secondary{border-color:#8cb2db;color:#244b82;background:#f7fbff}.secondary:hover{background:#e5f2ff}
.qrbox{background:#f0f6fe;border-color:#cbdff6}.qrbox small{color:#4a6b91}.entry{border-color:#e1e9f4}.entry p,.muted,.empty{color:#60768e}.mini button{border-color:#d1e0f1;color:#244b82}
#toast{background:#101f3d}footer{color:#7186a0}
@media(max-width:650px){.logo.hpk-logo{width:41px;height:41px}}

.hero-action{cursor:pointer;transition:transform .15s,filter .15s}.hero-action:hover{filter:brightness(1.13);transform:translateY(-2px)}.hero-action:focus-visible{outline:4px solid #65c9fb;outline-offset:3px}.hero-cta{display:inline-block;background:#65a9e8;color:#101f3d;font-weight:800;padding:13px 21px;border-radius:10px;margin-top:8px}.qrbox{margin:0 0 22px!important}input[hidden]{display:none!important}#mappingList .entry{overflow-wrap:anywhere}