@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#18332d; --muted:#63766f; --paper:#fbfaf5; --line:#dce3dc; --lime:#ceff53; --aqua:#b8f4e0; --red:#a33636; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 85% 7%, #e5f7e8 0 12%, transparent 34%), var(--paper); font-family:Manrope,Arial,sans-serif; }
.shell { max-width:1120px; margin:auto; padding:30px 28px 64px; }
.topbar { display:flex; justify-content:space-between; align-items:center; }.top-actions { display:flex; align-items:center; gap:16px; }.top-actions a { color:var(--muted); font-size:12px; font-weight:700; text-decoration:none; }.brand { display:inline-flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font-size:15px; font-weight:800; letter-spacing:-.3px; }
.brand span { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; background:var(--ink); color:var(--lime); font-size:11px; }
.hero { max-width:710px; padding:105px 0 0; }
.eyebrow, .page-label { margin:0 0 12px; color:#47816a; font-family:'DM Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
h1 { max-width:720px; margin:0; font-size:clamp(42px,6vw,72px); line-height:1.04; letter-spacing:-.065em; }
.lead { max-width:625px; margin:24px 0 31px; color:var(--muted); font-size:17px; line-height:1.65; }
.upload-card { padding:18px; border:1px solid var(--line); border-radius:18px; background:#fffefa; box-shadow:0 20px 45px #254a2610; }
.dropzone { display:flex; align-items:center; gap:15px; padding:23px; border:1.5px dashed #aabbb1; border-radius:12px; cursor:pointer; }
.dropzone:hover { border-color:#46856c; background:#f7fcf6; }.upload-icon { display:grid; place-items:center; width:42px; height:42px; background:var(--aqua); border-radius:50%; font-size:21px; }.dropzone strong { font-size:15px; }.dropzone small { margin-left:auto; color:var(--muted); font-size:12px; }.dropzone input { display:none; }
button { width:100%; margin-top:12px; padding:16px 20px; border:0; border-radius:10px; background:var(--ink); color:#fff; cursor:pointer; font:700 14px Manrope,sans-serif; transition:transform .15s, background .15s; } button:hover { transform:translateY(-1px); background:#264d43; } button span { color:var(--lime); margin-left:8px; font-size:18px; }.privacy { color:#788981; font-size:12px; }.error { padding:14px; border-radius:10px; background:#ffeded; color:var(--red); font-size:14px; }
.logout { width:auto; margin:0; padding:8px 13px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:12px; }.logout:hover { background:#fff; }.login-wrap { max-width:460px; padding-top:105px; }.login-wrap h1 { font-size:52px; }.login-card { display:grid; gap:15px; padding:22px; border:1px solid var(--line); border-radius:18px; background:#fffefa; }.login-card label { color:var(--muted); font-size:12px; font-weight:700; }.login-card input { display:block; width:100%; margin-top:6px; padding:12px; border:1px solid #cbd6ce; border-radius:8px; font:14px Manrope,sans-serif; }.login-card button { margin-top:4px; }
.recent { max-width:760px; margin-top:72px; }.recent h2 { margin:0 0 16px; font-size:27px; letter-spacing:-.04em; }.recent article, .history-item { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:15px 0; border-top:1px solid var(--line); }.recent strong, .history-item strong { display:block; font-size:14px; }.recent small, .history-item p { display:block; margin:4px 0 0; color:var(--muted); font-size:12px; }.download-link { padding:9px 12px; border-radius:8px; background:var(--aqua); color:var(--ink); text-decoration:none; font-size:12px; font-weight:800; white-space:nowrap; }.all-history { display:inline-block; margin-top:15px; color:#396f5b; font-size:13px; font-weight:800; text-decoration:none; }.processing[hidden] { display:none; }.processing { position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:20px; background:#18332dcc; }.progress-card { width:min(480px,100%); padding:32px; border-radius:17px; background:var(--paper); box-shadow:0 30px 80px #0004; }.progress-card h2 { margin:0; font-size:28px; letter-spacing:-.05em; }.progress-card p:not(.eyebrow) { margin:13px 0; color:var(--muted); font-size:14px; }.progress-card small { color:var(--muted); font-size:11px; }.progress-track { height:10px; margin:20px 0 13px; overflow:hidden; border-radius:99px; background:#dbe5dd; }.progress-track i { display:block; width:6%; height:100%; border-radius:inherit; background:var(--ink); transition:width .55s ease; }.history-list { max-width:760px; }.history-item { padding:20px 0; }.history-item p { margin-top:6px; }.analysis-summary { display:grid; gap:4px; margin-top:10px; color:#4b6b5d; font:11px 'DM Mono',monospace; }.pending { color:#876d22; font-size:12px; font-weight:700; }.empty { color:var(--muted); }
.review-header { padding:66px 0 30px; }.review-header h1 { font-size:48px; }.review-header .lead { margin:12px 0 0; }.invoice-list { display:grid; gap:15px; }.invoice { display:grid; grid-template-columns:190px 1fr; gap:25px; padding:17px; border:1px solid var(--line); border-radius:16px; background:#fffefa; }.invoice img { width:100%; height:205px; object-fit:cover; object-position:top; border:1px solid var(--line); border-radius:8px; }.fields { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; align-content:center; }.fields .page-label, .filename { grid-column:1/-1; }.fields label { color:var(--muted); font-size:11px; font-weight:700; }.fields input { display:block; width:100%; margin-top:5px; padding:10px; border:1px solid #cbd6ce; border-radius:7px; color:var(--ink); background:#fff; font:13px Manrope,sans-serif; }.fields input:focus { outline:2px solid var(--aqua); border-color:#62987f; }.filename { overflow-wrap:anywhere; margin:4px 0 0; padding:10px 12px; border-radius:7px; background:#eef6ed; color:#315d4d; font:12px 'DM Mono',monospace; }.confirm { position:sticky; bottom:18px; display:block; max-width:390px; margin:28px auto 0; background:#315d4d; box-shadow:0 8px 24px #18332d33; }
@media (max-width:640px) { .shell{padding:20px 16px 45px}.hero{padding-top:70px}.dropzone{flex-wrap:wrap}.dropzone small{margin-left:0}.review-header{padding-top:48px}.review-header h1{font-size:40px}.invoice{grid-template-columns:1fr}.invoice img{height:250px}.fields{grid-template-columns:1fr} }