:root{--blue:#082b61;--blue2:#0d63c7;--red:#e7352a;--green:#138a55;--ink:#172033;--muted:#667085;--line:#dbe4ef;--soft:#f3f7fc}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:linear-gradient(180deg,#eef5ff,#f8fafc)}a{color:var(--blue2);text-decoration:none}.portal-header{background:#082b61;color:#fff;min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:14px max(20px,calc((100vw - 1150px)/2));gap:20px}.portal-header>a{color:#fff;font-weight:950;font-size:1.15rem}.portal-header nav{display:flex;gap:16px}.portal-header nav a{color:#dbeaff;font-weight:800}.portal-main{width:min(980px,calc(100% - 28px));margin:34px auto;min-height:65vh}
.portal-card,.invoice-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 14px 40px rgba(8,43,97,.09);margin-bottom:22px}.portal-card h1,.portal-card h2,.invoice-card h1,.invoice-card h2{color:var(--blue)}.eyebrow{color:var(--red);font-weight:900;text-transform:uppercase;font-size:.8rem}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.full{grid-column:1/-1}
label{display:block;font-weight:800;color:var(--blue)}input,select,textarea{width:100%;padding:12px;margin-top:6px;border:1px solid #c9d5e4;border-radius:10px;font:inherit}textarea{resize:vertical}.consent{font-weight:500;color:var(--ink);display:flex;gap:10px;align-items:flex-start}.consent input{width:auto;margin-top:3px}
button,.button{display:inline-block;border:0;background:var(--blue2);color:#fff;padding:12px 19px;border-radius:10px;font-weight:900;cursor:pointer;text-decoration:none}.pay{background:var(--green);font-size:1.05rem}.notice{margin-top:18px;padding:15px;border-left:5px solid #e6a100;background:#fff6dc;border-radius:10px;color:#684b00}.alert{padding:13px 15px;border-radius:10px;margin-bottom:14px}.alert.error{background:#ffe5e3;color:#9c241c}.center{text-align:center}.success-icon{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#daf7e8;color:#087447;font-size:2.7rem;font-weight:900;margin:auto}.reference{font-size:1.45rem;font-weight:950;color:var(--blue);padding:14px;background:#eef5ff;border-radius:10px;margin:15px auto;max-width:420px}
.details{display:grid;grid-template-columns:150px 1fr;gap:10px}.details dt{font-weight:900;color:var(--blue)}.details dd{margin:0}.status-large{display:inline-block;background:#e7f1ff;color:#075cb7;padding:10px 15px;border-radius:999px;font-weight:950;margin-bottom:18px}.invoice-list{line-height:2}
.invoice-head{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid var(--blue);padding-bottom:18px}.invoice-meta{margin:24px 0}.invoice-description{padding:18px;background:#f7f9fc;border-radius:12px;white-space:normal}.invoice-total{display:flex;justify-content:space-between;align-items:center;margin:22px 0;padding:18px;background:var(--blue);color:#fff;border-radius:12px;font-size:1.25rem}.portal-footer{text-align:center;padding:25px;color:#dbe8f8;background:#061e45;line-height:1.7}.honeypot{position:absolute;left:-9999px}
@media(max-width:700px){.portal-header{align-items:flex-start;flex-direction:column}.portal-header nav{flex-wrap:wrap}.grid.two{grid-template-columns:1fr}.full{grid-column:auto}.portal-card,.invoice-card{padding:20px}.invoice-head{flex-direction:column}.details{grid-template-columns:1fr}.portal-main{margin-top:20px}}
@media print{.portal-header,.portal-footer,button,.button{display:none!important}.portal-main{width:100%;margin:0}.invoice-card{box-shadow:none;border:0}}