:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #14213a; background: #f3f6fa; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 10% 10%, #e6efff, transparent 32%), #f4f7fb; }
.invoice-shell { width: min(100% - 32px, 680px); margin: 0 auto; padding: 36px 0 60px; }
.back-link { display: inline-block; margin-bottom: 18px; color: #315072; font-size: 13px; font-weight: 700; text-decoration: none; }
.invoice-card { overflow: hidden; border: 1px solid #dce4ef; border-radius: 20px; background: #fff; box-shadow: 0 22px 70px rgba(25, 52, 89, .12); }
header { padding: 38px 42px 28px; border-bottom: 1px solid #edf1f6; }
header img { width: 170px; height: auto; margin-bottom: 30px; }
.eyebrow { margin: 0 0 8px; color: #2457cb; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(30px, 7vw, 42px); letter-spacing: -.04em; }
header > p:last-child { margin: 12px 0 0; color: #68778b; font-size: 14px; }
form { display: grid; gap: 20px; padding: 30px 42px 34px; }
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { color: #29384e; font-size: 12px; font-weight: 800; }
label > span { color: #d13a3a; }
input:not([type=file]) { width: 100%; height: 49px; margin-top: 8px; padding: 0 13px; border: 1px solid #ced8e6; border-radius: 9px; background: #fafbfd; color: #15233a; font: inherit; font-size: 14px; outline: none; }
input:focus { border-color: #3e70df; box-shadow: 0 0 0 3px rgba(62, 112, 223, .12); }
label small { display: block; margin-top: 6px; color: #7d8999; font-weight: 500; }
.upload-box { display: grid; place-items: center; min-height: 126px; padding: 22px; border: 1.5px dashed #aebdd1; border-radius: 12px; background: #f7f9fc; text-align: center; cursor: pointer; }
.upload-box:hover { border-color: #4d79db; background: #f3f7ff; }
.upload-box strong { color: #2457cb; font-size: 14px; }
.upload-box span { margin-top: 5px; color: #7b8798; font-size: 11px; font-weight: 600; }
.upload-box input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.feedback { min-height: 18px; margin: -4px 0; color: #b42318; font-size: 12px; font-weight: 700; }
.feedback.success { color: #08783d; }
button { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 20px; border: 0; border-radius: 9px; background: #204fc0; color: #fff; font-weight: 850; cursor: pointer; }
button:hover { background: #173e9d; }
button:disabled { opacity: .65; cursor: wait; }
footer { padding: 16px 42px; border-top: 1px solid #edf1f6; background: #f9fbfd; color: #748195; font-size: 10px; text-align: center; }
@media (max-width: 560px) { .invoice-shell { width: min(100% - 20px, 680px); padding-top: 18px; } header, form { padding-left: 22px; padding-right: 22px; } .name-row { grid-template-columns: 1fr; } footer { padding: 16px 22px; } }