:root { color-scheme: light; --ink:#16233a; --muted:#65738a; --line:#dce3ee; --soft:#f5f7fb; --blue:#2563eb; --green:#087443; --red:#a21c2d; --amber:#9a5b00; }
* { box-sizing:border-box; }
body { margin:0; background:#eef2f7; color:var(--ink); font:15px/1.45 "Segoe UI", Arial, sans-serif; }
.shell, .mobile-shell { max-width:1200px; margin:0 auto; padding:28px 22px 60px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:30px; } h2 { margin-bottom:8px; font-size:19px; } p { color:var(--muted); }
.eyebrow { display:block; color:var(--blue); text-transform:uppercase; letter-spacing:.11em; font-size:11px; font-weight:700; }
.card { background:white; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 8px 24px #13264b0c; margin-bottom:18px; }
.intro, .section-head { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:18px; }
.fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } label { display:grid; gap:5px; color:var(--muted); font-size:13px; font-weight:600; } input,select { width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 11px; font:inherit; color:var(--ink); background:#fff; } input:focus,select:focus { outline:3px solid #2563eb22; border-color:var(--blue); }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } button,.camera-button { border:0; border-radius:9px; padding:10px 14px; font:600 14px inherit; cursor:pointer; display:inline-block; text-align:center; } button:disabled { opacity:.55; cursor:not-allowed; }
.primary { color:white; background:var(--blue); } .secondary { color:var(--ink); background:#e9eef7; } .send { color:white; background:#087443; }
.badge { padding:5px 10px; border-radius:999px; background:#e7f5ed; color:var(--green); font-weight:700; font-size:12px; white-space:nowrap; } .path,.small,code { color:var(--muted); font-size:12px; word-break:break-all; }
.qr-card { text-align:center; } #qr { display:block; width:210px; height:210px; margin:8px auto 15px; image-rendering:pixelated; } code { display:block; }
.documents { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .document-row { border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; } .document-row h3 { margin:0 0 5px; font-size:15px; } .doc-status { font-weight:700; font-size:12px; } .status-ok { color:var(--green); } .status-pending { color:var(--red); } .status-visual { color:var(--amber); }
.result { margin:12px 0 0; min-height:1.2em; } .settings summary { cursor:pointer; font-weight:700; } .settings-grid { margin-top:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.mobile-body { background:#e9eef7; } .mobile-shell { max-width:600px; padding:20px 14px 40px; } .mobile-shell .card { padding:18px; } .mobile-shell select { margin:5px 0 16px; } .camera-button { width:100%; background:#16233a; color:white; margin-bottom:10px; } #imageInput { display:none; } .full { width:100%; } .preview-wrap { margin:12px 0; border:1px solid var(--line); border-radius:10px; padding:8px; text-align:center; } .preview-wrap img { max-height:280px; max-width:100%; object-fit:contain; } .hidden { display:none; } .mobile-result { margin-top:14px; border-radius:10px; padding:14px; text-align:center; } .accepted { background:#e7f5ed; color:var(--green); } .rejected { background:#fff0f1; color:var(--red); } .waiting { background:#eef4ff; color:var(--blue); }
.mobile-actions { display:flex; gap:10px; } .mobile-actions button { flex:1; }
.mobile-note { background:#eef4ff; border-radius:9px; padding:10px 12px; color:var(--blue); font-size:13px; }
@media (max-width:850px) { .layout { grid-template-columns:1fr; } .fields,.settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .shell { padding:18px 12px 40px; } .fields,.settings-grid,.documents { grid-template-columns:1fr; } .intro,.section-head { align-items:flex-start; flex-direction:column; } h1 { font-size:25px; } }