:root { --bg:#f5f7fa; --card:#fff; --ink:#1e293b; --muted:#64748b; --line:#dbe2ea; --blue:#005bab; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 system-ui, "Noto Sans Khmer", "Khmer OS", sans-serif; background:var(--bg); color:var(--ink); }
header { background:var(--card); border-bottom:1px solid var(--line); padding:12px 16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
h1 { margin:0; font-size:20px; } h1 small { color:var(--muted); font-weight:400; font-size:14px; }
.row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; } label { display:flex; gap:6px; align-items:center; color:var(--muted); }
select, input[type=password] { padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:#fff; }
main { max-width:960px; margin:0 auto; padding:16px; }
.tabs { display:flex; gap:6px; margin-bottom:12px; } .tab { border:1px solid var(--line); background:#fff; padding:8px 14px; border-radius:999px; cursor:pointer; } .tab.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
.uploads { display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:640px){ .uploads { grid-template-columns:1fr; } }
.drop { border:1px dashed var(--line); border-radius:10px; padding:12px; } .drop h3 { margin:0 0 8px; font-size:15px; } .drop h3 span { color:var(--muted); font-weight:400; font-size:12px; } .req { color:var(--bad) !important; }
.drop img { display:block; max-width:100%; max-height:220px; margin-top:8px; border-radius:6px; }
.drop img:not([src]) { display:none; }
button.primary { margin-top:12px; background:var(--blue); color:#fff; border:0; padding:10px 18px; border-radius:8px; font-weight:600; cursor:pointer; } button.primary:disabled { opacity:.5; cursor:default; }
.status { margin-top:10px; color:var(--muted); min-height:1.4em; }
.warnings span { display:inline-block; margin:4px 6px 0 0; padding:2px 8px; border-radius:999px; background:#fff7ed; color:var(--warn); border:1px solid #fed7aa; font-size:12px; }
table { width:100%; border-collapse:collapse; margin-top:12px; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--muted); font-weight:600; font-size:12px; }
td.val { font-weight:600; } td.raw { color:var(--muted); font-size:13px; } .c-ok { color:var(--ok);} .c-mid { color:var(--warn);} .c-bad { color:var(--bad);}
.mrz { margin-top:12px; font-family:ui-monospace, monospace; background:#0f172a; color:#e2e8f0; padding:10px; border-radius:8px; white-space:pre; overflow:auto; }
.crops { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:10px; margin-top:12px; } .crops figure { margin:0; } .crops img { width:100%; border:1px solid var(--line); border-radius:6px; background:#fff; } .crops figcaption { font-size:12px; color:var(--muted); }
.ocr-text { white-space:pre-wrap; background:#f8fafc; border:1px solid var(--line); padding:10px; border-radius:8px; min-height:3em; font-family:inherit; }
details { margin-top:12px; } pre { overflow:auto; font-size:12px; }
footer { text-align:center; color:var(--muted); font-size:12px; padding:16px; }