:root { --bg:#e6efe3; --card:#fff; --ink:#1f2933; --muted:#667085; --brand:#188038; --err:#d93025; --line:#d0d5dd; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
#app, #done { max-width: 720px; margin: 0 auto; padding: 12px 16px 48px; }
#done { margin-top: 24px; text-align: center; }
.card { background:var(--card); border-radius:10px; padding:16px 20px; margin:12px 0; border:1px solid var(--line); }
h1 { font-size:1.4rem; margin:0 0 4px; } h2 { font-size:1.05rem; margin:0 0 10px; }
.muted { color:var(--muted); font-size:.9rem; margin:4px 0; }
.req { color:var(--err); }
.field { margin:14px 0; }
.field label { display:block; font-weight:500; margin-bottom:4px; }
.field input, .field textarea, .field select { width:100%; padding:8px 6px; font:inherit; border:0; border-bottom:1px solid var(--line); background:transparent; }
.field input:focus, .field textarea:focus { outline:none; border-bottom:2px solid var(--brand); }
.field.bad input, .field.bad textarea { border-bottom-color:var(--err); }
.ltr { direction:ltr; text-align:left; }
.err { color:var(--err); font-size:.85rem; }
.radio { display:block; padding:4px 0; cursor:pointer; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.tab { border:1px solid var(--line); background:#fff; padding:8px 14px; border-radius:8px; cursor:pointer; font:inherit; position:relative; }
.tab.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.tab.bad::after { content:"●"; color:var(--err); margin-inline-start:6px; }
.tab.add { border-style:dashed; color:var(--brand); }
.tab .x { margin-inline-start:8px; opacity:.7; }
.btn { font:inherit; padding:10px 18px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; }
.btn.primary { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600; }
.btn.ghost { color:var(--muted); }
.btn:disabled { opacity:.6; cursor:wait; }
.scan { background:#f6faf5; border:1px dashed var(--brand); border-radius:10px; padding:12px; margin-bottom:8px; }
.scan .row { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.scanStatus { font-size:.9rem; min-height:1.4em; }
.scanStatus.ok { color:var(--brand); } .scanStatus.warn { color:#b54708; }
.sigWrap { border:1px solid var(--line); border-radius:8px; background:#fff; touch-action:none; }
#sig { width:100%; height:auto; display:block; cursor:crosshair; touch-action:none; }
.submitRow { display:flex; gap:12px; align-items:center; margin-top:8px; }
.gid { font-size:2rem; font-weight:700; letter-spacing:.1em; direction:ltr; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10; }
.modal[hidden] { display:none; }
.modalBox { background:#fff; border-radius:12px; padding:16px; max-width:640px; width:92%; text-align:center; }
.modalBox video { width:100%; border-radius:8px; background:#000; }
[hidden] { display:none !important; }