:root{
  --navy:#0a1a52;
  --blue:#032ea1;
  --red:#e00025;
  --blue-dark:#02247d;
  --ink:#0b1430;
  --muted:#5a6178;
  --line:#e3e7f1;
  --ok:#1a7f4b;
  --bad:#b4361a;
  --radius:16px;
  --khmer:"Noto Sans Khmer","Noto Serif Khmer","Khmer OS","Khmer OS System","Battambang","Hanuman",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,var(--khmer);
  background:var(--navy);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  padding:env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 24px);
}
.wrap{max-width:520px;margin:0 auto;display:flex;flex-direction:column;min-height:100dvh}
.head{display:flex;align-items:center;gap:12px;padding:26px 4px 20px}
.logo{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center}
.titles{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.titles h1{margin:0;color:#fff;font-size:26px;letter-spacing:.2px}
.badge{
  color:#fff;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.35);
  font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px
}
.card{
  background:#fff;border-radius:var(--radius);padding:20px 18px 22px;
  box-shadow:0 14px 34px rgba(0,8,40,.35);
}
.lbl{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 2px 8px}
.inputrow{display:flex;gap:10px}
#code{
  flex:1;min-width:0;font-size:18px;padding:14px 14px;border:2px solid var(--line);
  border-radius:12px;outline:none;color:var(--ink);background:#fff;transition:border-color .15s;
}
#code:focus{border-color:var(--blue)}
.scan{
  flex:0 0 auto;width:54px;border:2px solid var(--line);border-radius:12px;background:#fff;
  color:var(--blue);display:grid;place-items:center;cursor:pointer;transition:.15s;
}
.scan:hover{border-color:var(--blue);background:#f1f4fc}
.scan:active{transform:scale(.97)}
.go{
  width:100%;margin-top:12px;padding:15px;border:0;border-radius:12px;cursor:pointer;
  background:var(--blue);color:#fff;font-size:17px;font-weight:700;letter-spacing:.3px;
  transition:background .15s,transform .05s;
}
.go:hover{background:var(--blue-dark)}
.go:active{transform:translateY(1px)}
.go[disabled]{opacity:.6;cursor:progress}
.hint{font-size:13px;color:var(--muted);margin:12px 2px 0;line-height:1.5}
.linkbtn{background:none;border:0;padding:0;color:var(--blue);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.status{margin-top:14px;font-size:14px;min-height:0}
.status.err{color:var(--bad);background:#fdeee9;border:1px solid #f6d6cc;padding:12px 14px;border-radius:10px}
.status.info{color:var(--muted)}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid #dfe4f0;border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

.result{margin-top:16px}
.statusbadge{display:inline-block;font-size:15px;font-weight:800;padding:8px 14px;border-radius:999px;margin-bottom:14px;font-family:var(--khmer)}
.statusbadge.st-ok{color:#0f6b3d;background:#e6f6ee;border:1px solid #b8e6cd}
.statusbadge.st-go{color:var(--blue-dark);background:#e9eefb;border:1px solid #d6def5}
.statusbadge.st-wait{color:var(--muted);background:#eef0f5;border:1px solid var(--line)}
.latest{
  background:#f1f4fc;border:1px solid #d6def5;
  border-radius:12px;padding:14px 16px;margin-bottom:16px;
}
.latest .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--blue-dark)}
.latest .msg{font-size:17px;font-weight:700;margin:4px 0 2px;font-family:var(--khmer)}
.latest .when{font-size:13px;color:var(--muted)}
.route{display:flex;align-items:center;gap:8px;margin:2px 0 16px;font-family:var(--khmer)}
.route .pt{flex:1;font-size:14px;font-weight:600;line-height:1.35}
.route .arrow{color:var(--red);font-size:20px;flex:0 0 auto}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-bottom:18px}
.meta .cell .mk{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.meta .cell .mv{font-size:14px;font-weight:600;word-break:break-word}
.meta .cell .mv a{color:var(--blue);text-decoration:none}
.timeline{list-style:none;margin:0;padding:0 0 0 6px}
.th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:2px 0 10px}
.timeline li{position:relative;padding:0 0 18px 22px;border-left:2px solid var(--line)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:#c3cad9;border:2px solid #fff;box-shadow:0 0 0 2px var(--line)}
.timeline li.now::before{background:var(--red);box-shadow:0 0 0 2px #d6def5}
.timeline .tmsg{font-size:15px;font-weight:600;font-family:var(--khmer);line-height:1.4}
.timeline .ttime{font-size:12.5px;color:var(--muted);margin-top:2px}

.disclaimer{color:rgba(255,255,255,.9);font-size:12px;line-height:1.5;text-align:center;margin:22px 8px 6px}

/* scanner overlay */
[hidden]{display:none !important}
.scanner{position:fixed;inset:0;background:#000;z-index:50;display:flex;flex-direction:column;color:#fff}
.scanhead{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 14px) 18px 14px;font-size:15px;font-weight:600}
.scanctl{display:flex;align-items:center;gap:10px}
.scaniconbtn{background:rgba(255,255,255,.15);border:0;color:#fff;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.scaniconbtn:active{transform:scale(.95)}
.scanclose{background:rgba(255,255,255,.15);border:0;color:#fff;width:38px;height:38px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer}
.videowrap{position:relative;flex:1;overflow:hidden}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.reticle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64vw;max-width:280px;aspect-ratio:1;border:3px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.scanmsg{text-align:center;padding:16px 24px calc(env(safe-area-inset-bottom) + 20px);font-size:14px;color:#c9d3f0;min-height:1.4em}

@media (prefers-color-scheme: dark){
  /* keep the navy background; the white card stays readable in both */
}