:root { --deep:#1c393d; --green:#02bf5a; --paper:#f7f8f7; --muted:#747373; --line:#dfe6e3; }
* { box-sizing:border-box; }
body { margin:0; color:var(--deep); background:var(--paper); font-family:Arial,Helvetica,sans-serif; }
.topbar,main { max-width:1240px; margin:auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:22px 28px; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand img { width:50px; height:50px; }
.brand strong { color:#070b0c; font-size:28px; font-weight:800; letter-spacing:-.04em; }
.brand span { padding-left:13px; color:#667579; border-left:1px solid #d7dedd; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.back-link { color:var(--green); font-size:13px; font-weight:700; text-decoration:none; }
main { padding:58px 28px 100px; }
.intro { max-width:840px; margin-bottom:40px; }
.eyebrow { margin:0 0 8px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1,h2 { margin:0; font-weight:400; }
h1 { font-size:clamp(48px,7vw,78px); line-height:.97; letter-spacing:-.05em; }
h1 em { color:var(--green); font-style:italic; }
.intro>p:last-child { max-width:720px; margin:20px 0 0; color:var(--muted); font-size:16px; line-height:1.65; }
.message { margin-bottom:22px; padding:15px 18px; border-radius:8px; font-size:13px; }
.message.error { color:#812e2e; border:1px solid #e8bcbc; background:#fbe9e8; }
.message.success { color:#245d48; border:1px solid #b9d7c9; background:#e5f1eb; }
.upload-card { display:grid; grid-template-columns:1fr 1.2fr; gap:45px; align-items:center; padding:34px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.upload-card h2,.panel-heading h2,.sign-panel h2 { font-size:28px; }
.upload-card>div>p:last-child,#upload-status { color:var(--muted); font-size:11px; }
.file-picker { display:flex; align-items:center; gap:15px; padding:20px; border:1px dashed #adc3b9; border-radius:9px; cursor:pointer; background:#f8faf8; }
.file-picker.drag-over { border-color:var(--green); box-shadow:0 0 0 3px rgba(2,191,90,.14); background:#eff9f3; }
.file-picker>span { display:grid; place-items:center; width:48px; height:58px; color:#a64e31; border-radius:6px; background:#f4ded5; font-size:10px; font-weight:800; }
.file-picker .picker-copy { display:block; width:auto; height:auto; color:var(--deep); border-radius:0; background:none; font-size:13px; font-weight:400; }
.picker-copy strong,.picker-copy small { display:block; }
.picker-copy small { margin-top:5px; color:var(--muted); font-size:10px; font-weight:400; }
.file-picker input { position:absolute; width:1px; height:1px; opacity:0; }
#upload-status { margin:10px 3px 0; }
.workspace { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:20px; align-items:start; }
.original-panel,.sign-panel { padding:25px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.panel-heading h2 { max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px; }
.text-button { padding:0; color:var(--green); border:0; background:none; cursor:pointer; font-weight:700; }
.document-window { display:grid; place-items:center; height:610px; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:8px; background:#ecefed; }
.document-stage { position:relative; display:inline-block; max-width:100%; line-height:0; cursor:crosshair; user-select:none; }
.document-stage img { display:block; max-width:100%; max-height:580px; width:auto; height:auto; object-fit:contain; }
.redaction-box { position:absolute; z-index:2; border:2px solid #e04343; background:rgba(15,20,21,.82); pointer-events:none; }
.redaction-help { margin:10px 2px 0; color:var(--muted); font-size:10px; }
.redaction-help.disabled { color:#9ea6a2; text-decoration:line-through; }
.ocr-feedback { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:8px; }
.ocr-feedback p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; }
.ocr-feedback p.found { color:#1b7748; font-weight:700; }
.ocr-feedback p.warning { color:#9a5a21; }
.ocr-button { flex:0 0 auto; padding:7px 10px; color:var(--green); border:1px solid #bcd0c7; border-radius:6px; background:#fff; cursor:pointer; font:700 10px Arial,Helvetica,sans-serif; }
.ocr-button:disabled { cursor:wait; opacity:.55; }
.stamp-sample { position:relative; height:185px; margin:20px 0; overflow:hidden; border:1px dashed #c4d0cb; border-radius:8px; background:#fafbfa; }
.stamp-sample>img:first-child { width:100%; height:100%; object-fit:contain; }
.signature-sample { position:absolute; right:14%; bottom:13%; width:42%; height:42%; object-fit:contain; }
.date-sample { position:absolute; left:15.5%; top:33%; color:var(--deep); font-size:clamp(8px, .85vw, 11px); line-height:1; }
.sign-panel label { display:block; margin-bottom:7px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.sign-panel input { width:100%; padding:14px; color:var(--deep); border:1px solid #bccbc5; border-radius:7px; font:inherit; }
.checkbox-row { display:flex!important; align-items:flex-start; gap:10px; margin:14px 0 2px; padding:12px; border:1px solid var(--line); border-radius:7px; cursor:pointer; text-transform:none!important; letter-spacing:0!important; }
.checkbox-row input { width:17px; height:17px; margin:1px 0 0; accent-color:var(--green); }
.checkbox-row span,.checkbox-row strong,.checkbox-row small { display:block; }
.checkbox-row strong { font-size:12px; }
.checkbox-row small { margin-top:4px; color:var(--muted); font-size:9px; font-weight:400; }
.primary { display:flex; justify-content:space-between; width:100%; margin-top:12px; padding:14px 18px; color:#fff; border:0; border-radius:7px; background:var(--green); cursor:pointer; font-weight:800; }
.download-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; margin-top:20px; padding:24px 28px; color:#fff; border-radius:14px; background:var(--deep); }
.download-card>span { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--green); font-size:22px; }
.download-card .eyebrow { color:#a9c5b9; }
.download-card h2 { font-size:25px; }
.download-card a { display:flex; gap:24px; padding:13px 18px; color:#fff; border-radius:7px; background:var(--green); font-size:12px; font-weight:800; text-decoration:none; }
.processing-overlay { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; visibility:hidden; opacity:0; background:rgba(28,57,61,.8); backdrop-filter:blur(4px); transition:.18s; }
.processing-overlay.visible { visibility:visible; opacity:1; }
.processing-overlay>div { width:min(380px,100%); padding:36px; border-radius:14px; background:#fff; text-align:center; }
.spinner { display:block; width:58px; height:58px; margin:0 auto 22px; border:5px solid #dff5e8; border-top-color:var(--green); border-radius:50%; animation:spin .75s linear infinite; }
.processing-overlay strong { font-size:18px; }
.processing-overlay p { margin:8px 0 0; color:var(--muted); font-size:12px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:800px){.workspace,.upload-card{grid-template-columns:1fr}.document-window{height:480px}.brand span{display:none}}
@media(max-width:520px){main{padding-top:35px}.document-window{height:380px}.download-card{grid-template-columns:auto 1fr}.download-card a{grid-column:1/-1;justify-content:space-between}}