:root { --pvts-primary: #2563eb; --pvts-dark: #0f172a; }
body { background: #f4f6fb; font-family: "Segoe UI", system-ui, sans-serif; }
.pvts-navbar { background: linear-gradient(90deg, #0f172a, #1e293b); }
.navbar-brand { letter-spacing: 1px; }.page-title { color: #0f172a; font-weight: 700; margin-bottom: 1rem; }
.kpi-card { border: none; border-radius: 16px; padding: 1.5rem 1rem; box-shadow: 0 6px 18px rgba(15,23,42,.05); }
.kpi-icon { font-size: 1.75rem; color: var(--pvts-primary); margin-bottom: .5rem; }.kpi-icon.blue { color:#2563eb; }.kpi-icon.green { color:#16a34a; }.kpi-icon.orange { color:#ea580c; }
.kpi-number { font-size:2.25rem; font-weight:800; color:var(--pvts-dark); line-height:1; }.kpi-title { color:#64748b; font-size:.9rem; margin-top:.35rem; }
.login-wrap { min-height:80vh; display:flex; align-items:center; justify-content:center; }.login-card { max-width:420px; width:100%; background:#fff; padding:2.5rem 2rem; border-radius:20px; box-shadow:0 20px 60px rgba(15,23,42,.12); }.login-logo { width:80px; height:80px; background:var(--pvts-primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:2rem; }
.scan-card { border:none; border-radius:20px; box-shadow:0 8px 30px rgba(15,23,42,.08); }.scan-status { padding:1.5rem 0; }.scan-status i { font-size:3.5rem; color:var(--pvts-primary); }.scan-status h4 { margin-top:.5rem; font-weight:700; color:var(--pvts-dark); }
.scan-result { border-radius:12px; padding:1rem; min-height:60px; display:none; }.scan-result.show { display:block; }.scan-result.start { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }.scan-result.finish { background:#dcfce7; color:#166534; border:1px solid #86efac; }.scan-result.error { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.empty-state { text-align:center; padding:2rem; color:#94a3b8; }.empty-state i { font-size:3rem; }.fw-monospace { font-family:"JetBrains Mono", "Consolas", monospace; letter-spacing:.5px; }.table > :not(caption) > * > * { padding:.6rem .75rem; }
.copy-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#0f172a; color:#fff; padding:.7rem 1.25rem; border-radius:10px; font-size:.9rem; opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:9999; box-shadow:0 8px 24px rgba(0,0,0,.25); }.copy-toast.show { opacity:1; }
.upload-status { display:flex; align-items:center; gap:.65rem; padding:.8rem 1rem; margin-bottom:1rem; border:1px solid transparent; border-radius:12px; }.upload-status-icon { display:inline-flex; align-items:center; justify-content:center; width:1.25rem; font-size:1.15rem; }.upload-status-progress { color:#92400e; background:#fef3c7; border-color:#fcd34d; }.upload-status-success { color:#166534; background:#dcfce7; border-color:#86efac; }.upload-status-failed { color:#991b1b; background:#fee2e2; border-color:#fca5a5; }
.camera-wrap { position:relative; border-radius:14px; overflow:hidden; background:#000; aspect-ratio:4 / 3; max-width:100%; margin:0 auto; border:2px solid #1e293b; }.camera-wrap video { width:100%; height:100%; object-fit:cover; display:block; }.camera-wrap #cameraReader, .camera-wrap #cameraReader video { width:100% !important; height:100% !important; object-fit:cover; display:block; }.camera-wrap #cameraReader img { display:none; }.camera-overlay { position:absolute; inset:0; background:transparent; pointer-events:none; border:2px dashed rgba(255,255,255,.5); border-radius:14px; }.camera-hint { position:absolute; bottom:8px; left:0; right:0; text-align:center; color:#fff; background:rgba(15,23,42,.7); font-size:.85rem; padding:.35rem; }
/* The guide is visible before taking the image, so only the recipient strip reaches OCR. */
.thai-ocr-camera-wrap { position:relative; aspect-ratio:4 / 3; overflow:hidden; border-radius:14px; background:#000; border:2px solid #f59e0b; }.thai-ocr-camera-wrap video { width:100%; height:100%; display:block; object-fit:cover; }.thai-ocr-guide { position:absolute; left:4%; width:92%; top:35%; height:29%; border:3px solid #fbbf24; border-radius:10px; box-shadow:0 0 0 9999px rgba(0,0,0,.26); pointer-events:none; color:#fff; font-weight:700; text-align:center; }.thai-ocr-guide span { display:inline-block; transform:translateY(-1.7rem); background:rgba(146,64,14,.92); padding:.15rem .55rem; border-radius:6px; font-size:.82rem; }
@media (max-width:575.98px) { .upload-status { flex-wrap:wrap; }.upload-status small { width:100%; margin-left:1.9rem !important; } }
@media (max-width:768px) { .container-fluid { padding:0 .5rem; }.page-title { font-size:1.25rem; margin-bottom:.75rem; }.kpi-card { padding:1rem .5rem; border-radius:12px; }.kpi-icon { font-size:1.35rem; }.kpi-number { font-size:1.6rem; }.kpi-title { font-size:.8rem; }.scan-card { border-radius:14px; }.scan-status { padding:.75rem 0; }.scan-status i { font-size:2.75rem; }.scan-status h4 { font-size:1.15rem; }.login-card { padding:1.5rem 1.25rem; }.table { font-size:.85rem; }.table > :not(caption) > * > * { padding:.4rem .4rem; }.copy-dmss { padding:.2rem .4rem; font-size:.75rem; }.btn-sm { padding:.2rem .5rem; font-size:.8rem; } }
@media (max-width:576px) { .hide-mobile { display:none !important; } }