/**
 * Toetsrevolutie Apps — hub-portaal (zelfstandige pagina's). Mobile-first, huisstijl.
 */
:root{
	--trapps-blue-dark:#042768; --trapps-blue:#0081C0; --trapps-yellow:#F9BF30;
	--trapps-green:#1CAD72; --trapps-red:#EF5B85;
	--trapps-ink:#14233f; --trapps-muted:#5a6577; --trapps-line:#dde4ee; --trapps-soft:#f4f7fb;
	--trapps-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--trapps-radius:14px; --trapps-shadow:0 1px 3px rgba(4,39,104,.08),0 8px 24px rgba(4,39,104,.07);
}
*{box-sizing:border-box;}
body.trapps{ margin:0; background:var(--trapps-soft); color:var(--trapps-ink); font-family:var(--trapps-font); -webkit-font-smoothing:antialiased; }
.trapps-wrap{ max-width:880px; margin:0 auto; padding:32px 18px 64px; }

.trapps-card{
	background:#fff; border:1px solid var(--trapps-line); border-radius:var(--trapps-radius);
	box-shadow:var(--trapps-shadow); padding:26px 26px; margin:24px auto; max-width:440px;
}
.trapps-card h1{ margin-top:0; color:var(--trapps-blue-dark); }
.trapps-center{ text-align:center; }
.trapps-h{ color:var(--trapps-blue-dark); margin:8px 2px 4px; }

.trapps-form{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.trapps-form label{ display:flex; flex-direction:column; gap:5px; font-weight:600; color:var(--trapps-blue-dark); font-size:14px; }
.trapps-form input{ width:100%; padding:12px 14px; font-size:16px; border:1.5px solid var(--trapps-line); border-radius:10px; font-family:inherit; }
.trapps-form input:focus{ outline:0; border-color:var(--trapps-blue); box-shadow:0 0 0 3px rgba(0,129,192,.3); }
.trapps-btn{
	margin-top:4px; background:var(--trapps-blue); color:#fff; border:0; border-radius:10px;
	padding:14px 16px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit;
}
.trapps-btn:hover{ background:var(--trapps-blue-dark); }
.trapps-check{ flex-direction:row; align-items:flex-start; gap:9px; font-weight:500; font-size:13px; color:var(--trapps-muted); line-height:1.5; }
.trapps-check input{ width:auto; flex:0 0 auto; margin-top:2px; }
.trapps-check a{ color:var(--trapps-blue); }
.trapps-alt{ margin-top:16px; font-size:14px; color:var(--trapps-muted); }
.trapps-note{ padding:10px 14px; border-radius:10px; margin:14px 0; font-size:14px; }
.trapps-note--ok{ background:rgba(28,173,114,.14); color:#0f7a4e; }
.trapps-note--err{ background:rgba(239,91,133,.16); color:#b3325c; }

.trapps-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; color:var(--trapps-muted); }
.trapps-logout{ margin:0; }
.trapps-link{ background:none; border:0; color:var(--trapps-blue); cursor:pointer; font:inherit; padding:0; text-decoration:underline; }

/* App-tegels */
.trapps-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; margin-top:14px; }
.trapps-tile{
	display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--trapps-ink);
	background:#fff; border:1px solid var(--trapps-line); border-radius:var(--trapps-radius);
	box-shadow:var(--trapps-shadow); padding:22px; transition:transform .08s, box-shadow .14s, border-color .14s;
}
.trapps-tile:hover{ transform:translateY(-2px); border-color:var(--trapps-blue); box-shadow:0 12px 30px rgba(4,39,104,.14); }
.trapps-tile__ic{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--trapps-blue); }
.trapps-tile__ic svg{ width:34px; height:34px; }
.trapps-tile__name{ font-size:18px; font-weight:800; color:var(--trapps-blue-dark); }
.trapps-tile__desc{ font-size:14px; color:var(--trapps-muted); line-height:1.45; }