@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;500;600;700&display=swap');
:root{--red:#B71918;--dark:#1D1D1B;--gray:#8D8F8F;--light:#BFBEBF;--white:#fff;--bg:#f5f5f4;--line:#e4e4e2}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--dark);font-family:Exo,Arial,sans-serif;font-size:15px;line-height:1.55}.top{background:#fff;border-bottom:1px solid var(--line);padding:16px max(22px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px}.brand strong,.brand small{display:block}.brand small{color:#666;font-size:12px}.mark{display:inline-flex;background:var(--red);color:white;border-radius:10px;padding:10px 12px;font-weight:700;letter-spacing:.05em}.mark.large{font-size:21px;padding:14px 18px}.logout{color:var(--red);text-decoration:none;font-weight:600}.navlinks,.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.navlinks a:not(.logout){text-decoration:none;color:var(--dark);font-weight:600}.wrap{max-width:1120px;margin:38px auto;padding:0 22px}.narrow{max-width:760px}.hero{padding:24px 0 30px}.eyebrow{color:var(--red);font-size:11px;font-weight:700;letter-spacing:.11em}.hero h1{font-size:36px;margin:6px 0}.hero p:last-child{color:#666;margin-top:4px}.panel,.login-card,.install-card{background:white;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 8px 28px #00000008}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.panel h2{margin:0 0 4px}.panel-head p,.panel>p{margin:0 0 20px;color:#666}.button{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:8px;background:var(--red);color:#fff;text-decoration:none;font:600 14px Exo,Arial,sans-serif;padding:12px 17px;cursor:pointer}.button:hover{background:#971513}.button.secondary{background:#fff;color:var(--red);border:1px solid var(--red)}.full{width:100%;margin-top:8px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:14px 10px;border-bottom:1px solid var(--line);white-space:nowrap}th{font-size:12px;color:#666}td{font-size:14px}.empty{padding:24px;background:#fafafa;border-radius:8px;color:#666;margin:14px 0}.foot{text-align:center;color:#888;font-size:12px;margin:24px}.login-body{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:24px}.login-card,.install-card{width:100%;max-width:460px}.install-card{max-width:560px}.login-card h1,.install-card h1{margin:12px 0 0}.login-card>p:not(.eyebrow),.install-card>p{color:#666}.install-card h2{font-size:16px;margin:22px 0 8px}form label{display:block;font-size:13px;font-weight:600;margin:14px 0}input,textarea{display:block;width:100%;margin-top:6px;border:1px solid #d4d4d2;border-radius:7px;padding:12px;font:400 15px Exo,Arial,sans-serif;background:#fff;color:var(--dark)}input[type=checkbox]{display:inline-block;width:auto;margin-right:8px}.check{display:flex;align-items:center}.search{display:flex;gap:10px;align-items:center;margin:20px 0}.search input{margin:0;flex:1}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.error{background:#fff0ef;color:#9c1614;padding:12px;border-radius:8px;margin:14px 0;font-size:13px;overflow-wrap:anywhere}.success{background:#f2f8f1;padding:16px;border-radius:8px}.success h2{margin-top:0}.login-card small,.install-card small{display:block;color:#777;font-size:11px;margin-top:18px}.install-card .button{margin-top:8px}@media(max-width:650px){.wrap{margin:20px auto}.panel{padding:18px}.panel-head{align-items:flex-start;flex-direction:column}.hero h1{font-size:30px}.two{grid-template-columns:1fr;gap:0}.top{padding:12px 16px;align-items:flex-start}.brand small{max-width:190px}.install-card{padding:20px}.search{align-items:stretch;flex-direction:column}}

/* Kerklogo in de applicatiekop */
.church-logo{display:block;width:74px;height:58px;object-fit:contain;flex:0 0 auto}.login-church-logo{width:150px;height:94px;margin:0 auto 12px}.brand{gap:14px}
@media(max-width:700px){.church-logo{width:58px;height:48px}.login-church-logo{width:130px;height:82px}}


/* VBGE app-wide visual system refresh */
:root{--red:#B71918;--dark:#1D1D1B;--gray:#687078;--light:#BFBEBF;--white:#fff;--bg:#f4f5f3;--line:#e5e7e4;--soft-red:#fbefee;--shadow:0 10px 30px rgba(29,29,27,.045)}
body{background:var(--bg);color:var(--dark);font-size:15px;line-height:1.6}
.top{min-height:72px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);padding:12px max(22px,calc((100% - 1120px)/2));position:relative;z-index:2}
.navlinks{gap:8px 14px}.navlinks a{font-size:13px;transition:color .15s ease}.navlinks a:hover{color:var(--red)!important}
.wrap{max-width:1120px;margin:28px auto;padding:0 22px}.narrow{max-width:860px}
.hero{padding:18px 0 24px}.hero h1,.panel h1{font-size:clamp(27px,3vw,38px);letter-spacing:-.035em;line-height:1.18;margin:8px 0 14px}.hero p:last-child,.panel>p{color:#687078}
.panel,.login-card,.install-card{border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);padding:26px;background:#fff}
.panel h2{font-size:20px;letter-spacing:-.02em}.panel-head{margin-bottom:10px}
.button{border-radius:8px;padding:11px 16px;min-height:42px;transition:background .15s,transform .15s}.button:hover{transform:translateY(-1px)}.button.secondary{background:#fff;border-color:#d8b0af}.button.secondary:hover{background:var(--soft-red)}
input,textarea,select{border:1px solid #d9ddda;border-radius:8px;padding:12px 13px;min-height:42px;max-width:100%;font:400 15px Exo,Arial,sans-serif}input:focus,textarea:focus,select:focus{outline:3px solid rgba(183,25,24,.12);border-color:var(--red)}
form label{font-size:13px;color:#333;margin:15px 0}textarea{line-height:1.55}
th{background:#fafaf9;font-weight:700}th,td{border-bottom:1px solid var(--line);padding:13px 12px}tbody tr:hover{background:#fdfafa}
.info,.warn{background:#faf7f4;border:1px solid #eee5dd;border-radius:10px;padding:14px 16px}.success{background:#f0f7f0;border:1px solid #dcebdc;border-radius:10px;padding:14px 16px;color:#275c34}.error{background:#fcf0ef;border:1px solid #f2d9d7;border-radius:10px;padding:14px 16px;color:#8f1b18}.empty{background:#fafaf9;border:1px dashed #d9ddda;border-radius:12px;padding:26px}
.eyebrow{letter-spacing:.13em;font-size:11px}.foot{margin:28px 0 36px}
@media(max-width:760px){.top{flex-direction:column;align-items:flex-start;gap:10px}.navlinks{width:100%;gap:8px 12px}.wrap{margin:18px auto;padding:0 14px}.panel{padding:19px;border-radius:13px}.hero h1{font-size:29px}.navlinks a{font-size:12px}}


/* VBGE 4.1 — shared visual system aligned with Slimme inzichten */
:root{--card-line:#e9e2e0;--card-shadow:0 8px 24px rgba(45,25,22,.035);--card-soft:#faf5f4;--muted:#777575}
body{background:#f4f5f3}
.app-top{max-width:none;width:100%;min-height:76px;display:flex;align-items:center;gap:24px;padding:12px max(22px,calc((100% - 1240px)/2));box-shadow:0 2px 12px rgba(29,29,27,.025)}
.app-brand{flex:0 0 auto;text-decoration:none;color:var(--dark);gap:12px;min-width:225px}
.app-brand .mark{width:46px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:13px;padding:0;box-shadow:0 4px 10px rgba(183,25,24,.12)}
.brand-copy strong{font-size:14px;letter-spacing:-.015em;line-height:1.25}.brand-copy small{font-size:11px;color:#777575;line-height:1.35;margin-top:3px}
.app-nav{justify-content:flex-end;gap:5px;flex:1}
.app-nav a{display:inline-flex;align-items:center;min-height:36px;padding:8px 10px;border-radius:9px;text-decoration:none;color:#4f4b4a;font-size:12px;font-weight:600;white-space:nowrap;transition:background .16s,color .16s}
.app-nav a:hover{background:#faf0ef;color:var(--red)!important}
.app-nav a.active{background:#fae9e7;color:var(--red)!important;box-shadow:inset 0 0 0 1px #f1d8d6}
.app-nav a.logout{color:var(--red);margin-left:3px}
.panel,.login-card,.install-card{border-color:var(--card-line);border-radius:18px;box-shadow:var(--card-shadow)}
.panel{padding:26px;background:linear-gradient(180deg,#fff 0%,#fff 100%)}
.panel h1{letter-spacing:-.035em}.panel h2{letter-spacing:-.02em}
.panel .panel,.panel .empty,.info,.warn,.success,.error{border-radius:12px}
.table-wrap{border:1px solid var(--card-line);border-radius:12px;background:#fff}
.table-wrap table{border-collapse:separate;border-spacing:0;overflow:hidden}
.table-wrap th:first-child{border-top-left-radius:11px}.table-wrap th:last-child{border-top-right-radius:11px}
input,textarea,select{transition:border-color .15s,box-shadow .15s}
.button{box-shadow:0 3px 8px rgba(183,25,24,.08)}.button.secondary{box-shadow:none}
@media(max-width:1100px){.app-top{align-items:flex-start;flex-direction:column;gap:10px}.app-nav{justify-content:flex-start;width:100%}}
@media(max-width:760px){.app-top{padding:12px 14px}.app-brand{min-width:0}.app-nav{gap:5px;max-height:none}.app-nav a{font-size:12px;padding:7px 9px;white-space:normal}.panel{padding:19px}}