*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f7fb;color:#111827}
.page{min-height:100vh;padding:32px 16px}
.shell{width:100%;max-width:980px;margin:0 auto}
.card{background:white;border-radius:28px;box-shadow:0 24px 70px rgba(16,24,40,.12);overflow:hidden;border:1px solid #eaecf0}
.header{background:linear-gradient(135deg,#000080,#071bb8);color:white;padding:38px;text-align:center}
.logo{font-size:30px;font-weight:900}
.tagline{margin-top:10px;color:#e5e7ff}
.content{padding:38px}
h1,h2,h3{color:#000080;margin-top:0}
p{line-height:1.7;color:#667085}
label{display:block;font-weight:800;color:#344054;margin-bottom:8px}
input{width:100%;height:56px;border:1px solid #d0d5dd;border-radius:16px;padding:0 16px;font-size:16px;outline:none}
input:focus{border-color:#000080;box-shadow:0 0 0 4px rgba(0,0,128,.08)}
.btn{display:inline-block;width:100%;border:0;background:#C4A77D;color:#111;text-align:center;padding:17px 22px;border-radius:16px;font-weight:900;font-size:16px;cursor:pointer;text-decoration:none}
.btn:hover{background:#d6bb8c}
.btn-navy{background:#000080;color:#fff}
.btn-navy:hover{background:#071bb8;color:#fff}
.btn-light{background:#f4f4f5;color:#111;border:1px solid #e4e4e7}
.invoice-box{background:#f9fafb;border:1px solid #eaecf0;border-radius:20px;padding:24px;margin:24px 0}
.row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid #eaecf0}
.row:last-child{border-bottom:0}
.row span{color:#667085}
.row strong{color:#101828;text-align:right}
.amount{font-size:34px;font-weight:900;color:#000080}
.badge{display:inline-block;padding:7px 12px;border-radius:999px;font-weight:900;font-size:12px}
.badge-paid{background:#dcfce7;color:#166534}
.badge-unpaid{background:#fff7ed;color:#9a3412}
.alert{padding:16px;border-radius:14px;margin-bottom:20px}
.alert-error{background:#fff1f3;color:#b42318;border:1px solid #fecdd3}
.alert-success{background:#ecfdf3;color:#027a48;border:1px solid #bbf7d0}
.footer{padding:24px 38px;background:#f9fafb;text-align:center;color:#98a2b3;font-size:13px}
.table-wrap{overflow:auto;border:1px solid #eaecf0;border-radius:18px;margin:22px 0}
table{width:100%;border-collapse:collapse;background:#fff}
th{background:#f9fafb;color:#344054;text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:14px;border-bottom:1px solid #eaecf0}
td{padding:15px;border-bottom:1px solid #eaecf0;color:#475467;vertical-align:top}
td.right,th.right{text-align:right}
.summary{max-width:420px;margin-left:auto;background:#f9fafb;border:1px solid #eaecf0;border-radius:18px;padding:18px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.support-box{background:#faf7f1;border:1px solid rgba(196,167,125,.35);border-radius:18px;padding:18px;margin-top:22px;color:#344054}
@media(max-width:650px){.header,.content{padding:28px 20px}.row{flex-direction:column;gap:4px}.actions{grid-template-columns:1fr}.amount{font-size:28px}}