:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#19273b;background:#f4f6fa}*{box-sizing:border-box}body{margin:0}.wrap{max-width:1120px;padding:24px 22px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px}.brand{display:flex;align-items:center;gap:12px}.logo{height:44px;width:44px;display:grid;place-items:center;color:white;background:#173e72;border-radius:12px;font-weight:800;font-size:25px}.brand strong{display:block;font-size:20px;letter-spacing:-.5px}.muted{font-size:12px;color:#76869c}.demo{border-radius:20px;background:#e6eef9;padding:7px 12px;color:#345984;font-size:12px;font-weight:700}.hero{background:#152b49;border-radius:16px;color:white;padding:27px 30px;margin-bottom:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.eyebrow{color:#a9bfd6;letter-spacing:1.5px;font-weight:700;font-size:11px}.hero h1{margin:7px 0 4px;font-size:24px}.hero p{font-size:13px;color:#b8c6d9;margin:0}.balance{text-align:right}.balance small{display:block;color:#b8c6d9;margin-bottom:7px}.balance strong{font-size:32px;letter-spacing:-.7px}.panel{background:white;border:1px solid #e2e9f1;border-radius:14px;padding:24px;box-shadow:0 3px 12px #22334b08}.heading{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:20px}.heading h2{margin:0 0 5px;font-size:20px}.heading p{margin:0;color:#78869a;font-size:13px}.count{font-size:12px;color:#697c92;white-space:nowrap}.controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.controls input,.controls select{border:1px solid #d6e0eb;border-radius:9px;padding:11px 12px;background:white;color:#1b3049;font:inherit;font-size:13px}.controls input{flex:1;min-width:210px}.controls select{min-width:152px}.controls input:focus,.controls select:focus{outline:2px solid #a4c5ed;outline-offset:1px}.tablewrap{overflow:auto;border:1px solid #e5ebf2;border-radius:10px}table{border-collapse:collapse;width:100%;min-width:820px}thead{background:#f1f5fa}th{font-size:11px;color:#657891;text-align:left;text-transform:uppercase;letter-spacing:.6px;padding:13px 15px}td{font-size:13px;padding:14px 15px;border-top:1px solid #edf0f4}tbody tr:hover{background:#f8faff}td strong{font-size:13px;display:block}td small{font-size:11px;color:#8a97a8;display:block;margin-top:3px}.amount{text-align:right;font-weight:750;white-space:nowrap}.in{color:#16825c}.out{color:#273d55}.num{font-variant-numeric:tabular-nums}tfoot td{background:#f5f8fc;font-weight:bold}.empty{padding:28px;text-align:center;color:#71839a}.note{font-size:12px;color:#8492a3;margin-top:15px}footer{text-align:center;font-size:11px;color:#8795a5;margin:27px 0}footer a{color:#4f7198;text-decoration:none}footer a:hover{text-decoration:underline}@media(max-width:630px){.wrap{padding:15px}.hero{padding:22px}.balance{text-align:left}.balance strong{font-size:27px}.panel{padding:16px}.heading{display:block}.count{margin-top:7px}.controls select{flex:1}}


/* Eén lange lijst zonder paginering: de browser tekent elke rij maar één keer. */
.mobile-view{display:none}
.empty[hidden]{display:none}
/* Verbetering bij lange lijsten op desktop */
tbody tr{content-visibility:auto;contain-intrinsic-size:auto 47px}
@media(max-width:700px){
 .wrap{padding:12px}
 header{gap:8px;margin-bottom:15px}
 .brand{gap:8px;min-width:0}
 .brand strong{font-size:16px}
 .brand .muted{font-size:10px;line-height:1.3}
 .logo{width:34px;height:34px;font-size:20px;flex:none}
 .demo{font-size:10px;padding:5px 8px;white-space:nowrap}
 .hero{padding:18px;margin-bottom:14px;border-radius:12px}
 .hero h1{font-size:20px}
 .hero p{font-size:11px;overflow-wrap:anywhere}
 .balance strong{font-size:25px}
 .panel{padding:12px}
 .heading{margin-bottom:14px}
 .heading h2{font-size:18px}
 .controls{gap:8px}
 .controls input{width:100%;min-width:0;flex:auto}
 .controls select{min-width:0;width:calc(50% - 4px);flex:1}
 .desktop-view{display:none}
 .mobile-view{display:block;border:1px solid #e5ebf2;border-radius:10px;overflow:hidden}
 .transaction{border-bottom:1px solid #e9edf4;background:#fff;content-visibility:auto;contain-intrinsic-size:auto 65px}
 .transaction:last-child{border-bottom:0}
 .transaction[open]{background:#f8faff}
 .transaction summary{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer;list-style:none;min-height:59px}
 .transaction summary::-webkit-details-marker{display:none}
 .transaction summary:focus-visible{outline:2px solid #487eb7;outline-offset:-2px}
 .transaction .summary-main{flex:1;min-width:0}
 .transaction .who{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
 .transaction .when{font-size:10px;color:#7b899a;margin-top:3px;display:block}
 .transaction .summary-right{text-align:right;flex:none}
 .transaction .sum{font-size:12px;font-weight:750;white-space:nowrap}
 .transaction .more{font-size:10px;color:#8593a5;margin-top:4px;display:block}
 .transaction .chevron{font-size:16px;color:#8a97a8;flex:none;transition:transform .15s ease}
 .transaction[open] .chevron{transform:rotate(180deg)}
 .transaction .detail{border-top:1px solid #e7edf5;padding:10px 12px 13px;display:grid;gap:9px}
 .transaction .detail-row{display:grid;grid-template-columns:95px minmax(0,1fr);gap:9px;font-size:12px;line-height:1.35}
 .transaction .detail-label{color:#77869a}
 .transaction .detail-value{overflow-wrap:anywhere;color:#21344d}
 .note{line-height:1.5}
}

/* Simulatie van een bankapp-toegangsscherm; geen echte authenticatie. */
[hidden]{display:none!important}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:22px;background:linear-gradient(155deg,#10243e,#214b7f)}
.login-card{width:min(100%,385px);background:#fff;border-radius:23px;padding:31px 28px 24px;text-align:center;box-shadow:0 20px 70px #07142655}
.login-logo{display:grid;place-items:center;margin:0 auto 12px;width:56px;height:56px;border-radius:16px;background:#173e72;color:white;font-size:32px;font-weight:800}
.login-brand{font-size:21px;font-weight:800;letter-spacing:-.7px}.login-brand span{color:#4176ad}
.login-subtitle{color:#7c8c9c;font-size:11px;margin:6px 0 27px}
.login-card h1{font-size:23px;margin:0 0 6px}.login-instruction{font-size:13px;color:#708297;margin:0 0 18px}
.pin-input{display:block;width:166px;height:52px;margin:0 auto 19px;border:1px solid #cbd8e6;border-radius:12px;text-align:center;font-size:27px;letter-spacing:10px;padding-left:12px;color:#193752;outline-offset:3px}
.pin-input:focus-visible{outline:2px solid #4176ad}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:245px;margin:0 auto}
.keypad button{font:600 21px inherit;font-family:inherit;font-size:21px;font-weight:600;background:#f0f4f9;border:1px solid #e0e7f0;border-radius:13px;min-height:49px;color:#203954;cursor:pointer}
.keypad button:active{background:#d8e6f6}.keypad button:focus-visible{outline:2px solid #3d7ec2}
.pin-error{height:18px;font-size:12px;color:#bb3434;margin:10px 0 6px}
.login-submit{width:100%;border:0;border-radius:11px;background:#173e72;color:white;font-weight:700;font-size:15px;padding:14px;cursor:pointer}
.login-submit:hover{background:#25568f}.login-hint{font-size:12px;color:#637b95;margin:17px 0 0}
.login-disclaimer{font-size:10px;color:#8c9aa9;line-height:1.5;margin:20px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header-actions{display:flex;align-items:center;gap:9px}.logout-btn{padding:7px 11px;border:1px solid #cbd7e5;border-radius:20px;background:#fff;font:600 12px inherit;font-family:inherit;font-size:12px;color:#345984;cursor:pointer}
.logout-btn:hover{background:#e9f1fa}
@media(max-width:700px){.header-actions{gap:5px}.logout-btn{font-size:10px;padding:6px 8px}.login-card{padding:26px 20px 21px}}

/* Op laptop/desktop invoeren via toetsenbord; op mobiel eigen cijferpaneel. */
@media (min-width: 701px) {
  .keypad { display: none; }
  .pin-input { width: 215px; margin-bottom: 10px; }
}