bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
RosterChief/design_handoff_rosterchief_platform/RosterChief Platform.dc.html
Bernard Siebens adf1120358 Checkpoint: management app redesign, onboarding/signup workflow, and events calendar backend 
Large uncommitted body of work accumulated across sessions on this branch --
committing as a checkpoint so it's tracked and future worktree-isolated agents
see the real codebase instead of a stale ancestor commit. Covers the
management app's dedicated Tailwind theme and templates, the club onboarding
requirement/signup workflow (club/services/onboarding.py, requirement/status
models, sign-up dashboard), fee/status auto-activation decoupling, referee
management, and the new events calendar grid service layer.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
2026-08-19 23:34:43 +02:00

1784 lines
329 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<meta name="design_doc_mode" content="canvas">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<script src="./image-slot.js"></script>
<style>
body { margin: 0; background: #E8EAEE; font-family: Barlow, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #E4002B; text-decoration: none; }
a:hover { color: #B00021; text-decoration: underline; }
image-slot { --is-bg: #d8dce2; }
</style>
</helmet>
<section id="sec-foundations" style="padding:72px 64px;background:#F4F5F7;border-bottom:1px solid #D6DAE1">
<div style="display:flex;align-items:flex-end;gap:16px;margin-bottom:8px">
<span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:4px 9px;border-radius:4px">00</span>
<h1 style="margin:0;font-family:'Barlow Condensed';font-weight:800;font-size:56px;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;color:#0B1220">Foundations</h1>
</div>
<p style="margin:0 0 44px;max-width:720px;color:#6C7787;font-size:17px;line-height:1.5;text-wrap:pretty">One design language across four surfaces. Condensed uppercase display type, scoreboard numerals, tight all-caps labels, and a navy/red core that yields to club branding where the club's own audience sees it.</p>
<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:1360px">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:28px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:18px">Core palette</div>
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px">
<div><div style="height:64px;border-radius:8px;background:#0B1220"></div><div style="font-family:'IBM Plex Mono';font-size:11px;margin-top:8px;color:#0B1220">#0B1220</div><div style="font-size:12px;color:#6C7787">Ink</div></div>
<div><div style="height:64px;border-radius:8px;background:#101E36"></div><div style="font-family:'IBM Plex Mono';font-size:11px;margin-top:8px;color:#0B1220">#101E36</div><div style="font-size:12px;color:#6C7787">Navy</div></div>
<div><div style="height:64px;border-radius:8px;background:#1B2B47"></div><div style="font-family:'IBM Plex Mono';font-size:11px;margin-top:8px;color:#0B1220">#1B2B47</div><div style="font-size:12px;color:#6C7787">Steel</div></div>
<div><div style="height:64px;border-radius:8px;background:#F4F5F7;border:1px solid #E3E6EB"></div><div style="font-family:'IBM Plex Mono';font-size:11px;margin-top:8px;color:#0B1220">#F4F5F7</div><div style="font-size:12px;color:#6C7787">Paper</div></div>
<div><div style="height:64px;border-radius:8px;background:#E3E6EB"></div><div style="font-family:'IBM Plex Mono';font-size:11px;margin-top:8px;color:#0B1220">#E3E6EB</div><div style="font-size:12px;color:#6C7787">Line</div></div>
</div>
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px">
<div><div style="height:64px;border-radius:8px;background:#E4002B"></div><div style="font-family:'IBM Plex Mono';font-size:11px;margin-top:8px;color:#0B1220">#E4002B</div><div style="font-size:12px;color:#6C7787">Club accent</div></div>
<div><div style="height:64px;border-radius:8px;background:#14B8E8"></div><div style="font-family:'IBM Plex Mono';font-size:11px;margin-top:8px;color:#0B1220">#14B8E8</div><div style="font-size:12px;color:#6C7787">Ice / coach</div></div>
<div><div style="height:64px;border-radius:8px;background:#14A05A"></div><div style="font-family:'IBM Plex Mono';font-size:11px;margin-top:8px;color:#0B1220">#14A05A</div><div style="font-size:12px;color:#6C7787">In / paid</div></div>
<div><div style="height:64px;border-radius:8px;background:#F0A22E"></div><div style="font-family:'IBM Plex Mono';font-size:11px;margin-top:8px;color:#0B1220">#F0A22E</div><div style="font-size:12px;color:#6C7787">Pending</div></div>
<div><div style="height:64px;border-radius:8px;background:#6C7787"></div><div style="font-family:'IBM Plex Mono';font-size:11px;margin-top:8px;color:#0B1220">#6C7787</div><div style="font-size:12px;color:#6C7787">Muted</div></div>
</div>
<div style="margin-top:20px;padding-top:18px;border-top:1px solid #E3E6EB;font-size:13px;color:#6C7787;line-height:1.5">Club theming replaces <strong style="color:#0B1220">accent</strong> only — primary + secondary colour, logo and wordmark. Structure, type and neutrals never change.</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:28px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:18px">Type</div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:54px;line-height:.92;text-transform:uppercase;color:#0B1220;letter-spacing:-.01em">Fear the Sharks</div>
<div style="font-size:12px;color:#6C7787;margin-top:6px;font-family:'IBM Plex Mono'">Barlow Condensed 800 · display / screen titles</div>
<div style="display:flex;align-items:baseline;gap:20px;margin-top:26px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:76px;line-height:.8;color:#0B1220;font-variant-numeric:tabular-nums">18</div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:76px;line-height:.8;color:#E4002B;font-variant-numeric:tabular-nums">4—2</div>
<div style="font-size:12px;color:#6C7787;font-family:'IBM Plex Mono';line-height:1.5">Scoreboard<br>numerals</div>
</div>
<div style="margin-top:26px;font-size:17px;line-height:1.55;color:#0B1220;max-width:460px">Body copy is Barlow. It carries member names, event details and long-form news without shouting over the display type.</div>
<div style="display:flex;gap:10px;margin-top:20px;flex-wrap:wrap">
<span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787">Label / U16</span>
<span style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787">MONO · IDS, MONEY, TIMESTAMPS</span>
</div>
</div>
</div>
<div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1360px;margin-top:32px">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:24px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:14px">Buttons</div>
<div style="display:flex;flex-direction:column;gap:10px">
<div style="height:46px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase">Primary</div>
<div style="height:46px;border-radius:8px;background:#101E36;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase">Dark</div>
<div style="height:46px;border-radius:8px;background:#fff;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase">Secondary</div>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:24px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:14px">Status</div>
<div style="display:flex;flex-wrap:wrap;gap:8px">
<span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:5px 10px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase">In</span>
<span style="background:#FDECEC;color:#B00021;border:1px solid #F5C9CE;padding:5px 10px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Out</span>
<span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:5px 10px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase">No reply</span>
<span style="background:#EAF7FC;color:#0A6F91;border:1px solid #C3E7F4;padding:5px 10px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Selected</span>
<span style="background:#EEF0F3;color:#4A5566;border:1px solid #DDE1E7;padding:5px 10px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Draft</span>
</div>
<div style="margin-top:16px;display:flex;gap:8px">
<span style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#6C7787"><span style="width:9px;height:9px;border-radius:2px;background:#14A05A"></span>Paid</span>
<span style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#6C7787"><span style="width:9px;height:9px;border-radius:2px;background:#F0A22E"></span>Due</span>
<span style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#6C7787"><span style="width:9px;height:9px;border-radius:2px;background:#E4002B"></span>Overdue</span>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:24px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:14px">Role switcher</div>
<div style="display:flex;background:#1B2B47;border-radius:999px;padding:4px;gap:4px">
<div style="flex:1;height:38px;border-radius:999px;background:#fff;color:#0B1220;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Member</div>
<div style="flex:1;height:38px;border-radius:999px;color:#93A0B4;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Coach</div>
</div>
<div style="margin-top:12px;display:flex;background:#0B1220;border-radius:999px;padding:4px;gap:4px">
<div style="flex:1;height:38px;border-radius:999px;color:#8492A6;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Member</div>
<div style="flex:1;height:38px;border-radius:999px;background:#14B8E8;color:#04212C;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Coach</div>
</div>
<div style="margin-top:14px;font-size:13px;color:#6C7787;line-height:1.5">Only shown to people who hold a staff role. Mode is remembered per device.</div>
</div>
<div style="background:#0B1220;border:1px solid #0B1220;border-radius:14px;padding:24px;color:#fff">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7C8AA0;margin-bottom:14px">Surfaces</div>
<div style="display:flex;flex-direction:column;gap:10px;font-family:'Barlow Condensed';font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase">
<div style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1E2B42;padding-bottom:8px"><span>Control panel</span><span style="font-family:'IBM Plex Mono';font-size:11px;letter-spacing:0;color:#7C8AA0;text-transform:none">desktop</span></div>
<div style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1E2B42;padding-bottom:8px"><span>Club management</span><span style="font-family:'IBM Plex Mono';font-size:11px;letter-spacing:0;color:#7C8AA0;text-transform:none">desktop</span></div>
<div style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1E2B42;padding-bottom:8px"><span style="color:#14B8E8">Coach mode</span><span style="font-family:'IBM Plex Mono';font-size:11px;letter-spacing:0;color:#7C8AA0;text-transform:none">mobile</span></div>
<div style="display:flex;justify-content:space-between;align-items:center"><span style="color:#E4002B">Member mode</span><span style="font-family:'IBM Plex Mono';font-size:11px;letter-spacing:0;color:#7C8AA0;text-transform:none">mobile</span></div>
</div>
<div style="margin-top:16px;font-size:13px;color:#93A0B4;line-height:1.5">Coach and Member are two modes of one installed app, not two apps.</div>
</div>
</div>
</section>
<section id="sec-member" style="padding:72px 64px;background:#E8EAEE;border-bottom:1px solid #D6DAE1">
<div style="display:flex;align-items:flex-end;gap:16px;margin-bottom:8px">
<span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;background:#E4002B;color:#fff;padding:4px 9px;border-radius:4px">01</span>
<h2 style="margin:0;font-family:'Barlow Condensed';font-weight:800;font-size:56px;line-height:.95;text-transform:uppercase;color:#0B1220">Member app — mobile</h2>
</div>
<p style="margin:0 0 44px;max-width:760px;color:#6C7787;font-size:17px;line-height:1.5;text-wrap:pretty">For everyone in the club: parents answering for their kids, and adult members answering for themselves. The same screens serve both — a person switcher at the top of anything that is per-member.</p>
<div style="display:flex;flex-wrap:wrap;gap:44px">
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:3px 8px;border-radius:4px">M1</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Home</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#F4F5F7;font-family:Barlow,sans-serif">
<div style="padding:54px 16px 14px;background:#101E36;color:#fff;flex-shrink:0">
<div style="display:flex;align-items:center;gap:10px;height:44px">
<div style="width:30px;height:32px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div>
<div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:19px;letter-spacing:.06em;text-transform:uppercase;line-height:1">Sharks Mechelen</div><div style="font-size:12px;color:#93A0B4">Season 2026–2027</div></div>
<div style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;position:relative"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg><span style="position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:99px;background:#E4002B;border:2px solid #101E36"></span></div>
</div>
<div style="display:flex;background:#1B2B47;border-radius:999px;padding:4px;gap:4px;margin-top:10px">
<div style="flex:1;height:36px;border-radius:999px;background:#fff;color:#0B1220;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Member</div>
<div style="flex:1;height:36px;border-radius:999px;color:#93A0B4;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Coach</div>
</div>
</div>
<div style="flex:1;overflow:auto;padding:14px 16px 12px;display:flex;flex-direction:column;gap:14px">
<div style="display:flex;gap:8px;flex-shrink:0">
<div style="display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #0B1220;border-radius:999px;padding:5px 12px 5px 5px"><div style="width:28px;height:28px;border-radius:999px;background:#E4002B;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px">LS</div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase">Lars</span></div>
<div style="display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #E3E6EB;border-radius:999px;padding:5px 12px 5px 5px"><div style="width:28px;height:28px;border-radius:999px;background:#C9CFD8;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px">NS</div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">Noor</span></div>
<div style="display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #E3E6EB;border-radius:999px;padding:5px 12px"><span style="font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">Me</span></div>
</div>
<div style="background:#0B1220;border-radius:14px;overflow:hidden;color:#fff;flex-shrink:0">
<div style="position:relative;height:120px">
<image-slot id="rc-m1-hero" shape="rect" placeholder="Team action photo"></image-slot>
<div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,.15),rgba(11,18,32,.92));pointer-events:none"></div>
<div style="position:absolute;left:16px;bottom:12px;pointer-events:none"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#14B8E8">Next up · Sat 22 Aug</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:28px;line-height:1;text-transform:uppercase">Sharks U16 vs Leuven</div></div>
</div>
<div style="padding:14px 16px 16px">
<div style="display:flex;gap:18px;font-size:13px;color:#93A0B4"><span>18:30 face-off</span><span>Meet 17:15</span><span>ISC Mechelen</span></div>
<div style="margin-top:12px;font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7C8AA0">Lars — are you in?</div>
<div style="display:flex;gap:8px;margin-top:8px">
<div style="flex:1;height:46px;border-radius:8px;background:#14A05A;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase">In</div>
<div style="flex:1;height:46px;border-radius:8px;background:#1B2B47;color:#93A0B4;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase">Out</div>
</div>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:14px 16px;flex-shrink:0">
<div style="display:flex;justify-content:space-between;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787">Needs your answer</span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px;color:#E4002B">3</span></div>
<div style="display:flex;flex-direction:column;gap:10px;margin-top:12px">
<div style="display:flex;align-items:center;gap:12px"><div style="width:38px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:20px;line-height:1;color:#0B1220">25</div><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Aug</div></div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Practice · Ice 3</div><div style="font-size:13px;color:#6C7787">Noor · 19:15–20:45</div></div><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:4px 9px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Reply</span></div>
<div style="height:1px;background:#EEF0F3"></div>
<div style="display:flex;align-items:center;gap:12px"><div style="width:38px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:20px;line-height:1;color:#0B1220">27</div><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Aug</div></div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Away · Herentals</div><div style="font-size:13px;color:#6C7787">Lars · bus 16:00</div></div><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:4px 9px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Reply</span></div>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:center;flex-shrink:0">
<div style="width:44px;height:44px;border-radius:8px;background:#FDECEC;display:flex;align-items:center;justify-content:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px;color:#E4002B">€</span></div>
<div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Season dues — Noor</div><div style="font-size:13px;color:#6C7787">€ 420,00 · due 31 Aug</div></div>
<div style="height:38px;padding:0 14px;border-radius:8px;background:#0B1220;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Pay</div>
</div>
<div style="flex-shrink:0">
<div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787">Club news</span><span style="font-size:13px;color:#E4002B;font-weight:600">All news</span></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;overflow:hidden;flex-shrink:0">
<div style="height:104px;position:relative"><image-slot id="rc-m1-news" shape="rect" placeholder="News photo"></image-slot></div>
<div style="padding:12px 14px 14px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#E4002B">Sharks Women · 15 Aug</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:21px;line-height:1.05;text-transform:uppercase;color:#0B1220;margin-top:4px">Signed: Kolbrun Bjornsdottir</div></div>
</div>
</div>
</div>
<div style="flex-shrink:0;background:#fff;border-top:1px solid #E3E6EB;padding:8px 8px 26px;display:flex">
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#E4002B" stroke-width="2"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 10v10h14V10"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#E4002B">Home</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">Calendar</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M4 5h16v14H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">News</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.5-6 8-6s8 2 8 6"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">Me</span></div>
</div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:3px 8px;border-radius:4px">M2</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Event · answer for several</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#F4F5F7;font-family:Barlow,sans-serif">
<div style="position:relative;height:250px;flex-shrink:0">
<image-slot id="rc-m2-hero" shape="rect" placeholder="Game action photo"></image-slot>
<div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,.75) 0%,rgba(11,18,32,.15) 45%,rgba(11,18,32,.9) 100%);pointer-events:none"></div>
<div style="position:absolute;top:54px;left:12px;width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><path d="M15 5l-7 7 7 7"/></svg></div>
<div style="position:absolute;left:16px;right:16px;bottom:14px;color:#fff;pointer-events:none">
<div style="display:inline-block;background:#E4002B;padding:3px 8px;border-radius:4px;font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase">Home game</div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:38px;line-height:.98;text-transform:uppercase;margin-top:8px">Sharks U16<br>vs Leuven Chiefs</div>
</div>
</div>
<div style="flex:1;overflow:auto;padding:14px 16px 12px;display:flex;flex-direction:column;gap:12px">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px">
<div style="display:flex;gap:14px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;width:78px">Face-off</div><div style="font-weight:600;font-size:15px;color:#0B1220">Sat 22 Aug · 18:30</div></div>
<div style="display:flex;gap:14px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;width:78px">Meet</div><div style="font-weight:600;font-size:15px;color:#0B1220">17:15 · dressing room 4</div></div>
<div style="display:flex;gap:14px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;width:78px">Where</div><div style="font-weight:600;font-size:15px;color:#0B1220">ISC Mechelen<br><span style="font-weight:400;font-size:13px;color:#6C7787">Spuibeekstraat 1, 2800 Mechelen</span></div></div>
<div style="display:flex;gap:14px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;width:78px">Kit</div><div style="font-weight:600;font-size:15px;color:#0B1220">Dark jerseys</div></div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:14px 16px;flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787">Your answers</div>
<div style="display:flex;flex-direction:column;gap:12px;margin-top:12px">
<div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px"><div style="width:32px;height:32px;border-radius:999px;background:#E4002B;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px">LS</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Lars Somers</div><div style="font-size:12px;color:#6C7787">U16 · #17 · Forward</div></div></div>
<div style="display:flex;gap:6px"><div style="flex:1;height:44px;border-radius:8px;background:#14A05A;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">In</div><div style="flex:1;height:44px;border-radius:8px;background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Maybe</div><div style="flex:1;height:44px;border-radius:8px;background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Out</div></div>
</div>
<div style="height:1px;background:#EEF0F3"></div>
<div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px"><div style="width:32px;height:32px;border-radius:999px;background:#1B2B47;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px">NS</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Noor Somers</div><div style="font-size:12px;color:#6C7787">U16 · #9 · Defence</div></div><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">No reply</span></div>
<div style="display:flex;gap:6px"><div style="flex:1;height:44px;border-radius:8px;background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">In</div><div style="flex:1;height:44px;border-radius:8px;background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Maybe</div><div style="flex:1;height:44px;border-radius:8px;background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Out</div></div>
</div>
</div>
<div style="margin-top:12px;background:#F4F5F7;border-radius:8px;padding:10px 12px;font-size:13px;color:#6C7787">Add a note for the coach <span style="color:#0B1220;font-weight:600">+</span></div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;padding:14px 16px;flex-shrink:0">
<div style="display:flex;justify-content:space-between;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787">Squad response</span><span style="font-size:13px;color:#6C7787">14 of 19</span></div>
<div style="display:flex;height:8px;border-radius:999px;overflow:hidden;margin-top:10px;background:#EEF0F3"><div style="width:58%;background:#14A05A"></div><div style="width:16%;background:#E4002B"></div><div style="width:26%;background:#E3E6EB"></div></div>
<div style="display:flex;gap:14px;margin-top:8px;font-size:13px;color:#6C7787"><span><strong style="color:#0B1220">11</strong> in</span><span><strong style="color:#0B1220">3</strong> out</span><span><strong style="color:#0B1220">5</strong> no reply</span></div>
</div>
</div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:3px 8px;border-radius:4px">M3</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Calendar</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#F4F5F7;font-family:Barlow,sans-serif">
<div style="padding:54px 16px 12px;background:#101E36;color:#fff;flex-shrink:0">
<div style="height:44px;display:flex;align-items:center;justify-content:space-between"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;letter-spacing:.02em;text-transform:uppercase">Calendar</div><div style="display:flex;gap:8px"><div style="height:34px;padding:0 12px;border-radius:999px;background:#1B2B47;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#fff">All members</div></div></div>
<div style="display:flex;gap:6px;margin-top:8px">
<div style="height:32px;padding:0 12px;border-radius:999px;background:#fff;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">List</div>
<div style="height:32px;padding:0 12px;border-radius:999px;background:#1B2B47;color:#93A0B4;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Month</div>
<div style="height:32px;padding:0 12px;border-radius:999px;background:#1B2B47;color:#93A0B4;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Games only</div>
</div>
</div>
<div style="flex:1;overflow:auto;padding:0 0 12px">
<div style="padding:14px 16px 8px;font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;background:#F4F5F7;position:sticky;top:0">This week</div>
<div style="display:flex;flex-direction:column;gap:1px;background:#E3E6EB">
<div style="background:#fff;padding:12px 16px;display:flex;gap:12px;align-items:center"><div style="width:42px;text-align:center"><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Tue</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;line-height:1;color:#0B1220">19</div></div><div style="width:3px;height:38px;border-radius:2px;background:#14B8E8"></div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Practice · Ice 3 &amp; 4</div><div style="font-size:13px;color:#6C7787">19:15–21:00 · U16 · Lars, Noor</div></div><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:4px 9px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">In</span></div>
<div style="background:#fff;padding:12px 16px;display:flex;gap:12px;align-items:center"><div style="width:42px;text-align:center"><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Thu</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;line-height:1;color:#0B1220">21</div></div><div style="width:3px;height:38px;border-radius:2px;background:#14B8E8"></div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Practice · Ice 1 &amp; 2</div><div style="font-size:13px;color:#6C7787">17:15–18:45 · U16 · Noor</div></div><span style="background:#FDECEC;color:#B00021;border:1px solid #F5C9CE;padding:4px 9px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Out</span></div>
<div style="background:#fff;padding:12px 16px;display:flex;gap:12px;align-items:center;border-left:4px solid #E4002B"><div style="width:42px;text-align:center"><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Sat</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;line-height:1;color:#0B1220">22</div></div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Game · vs Leuven Chiefs</div><div style="font-size:13px;color:#6C7787">18:30 · Home · meet 17:15</div></div><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:4px 9px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">1 open</span></div>
</div>
<div style="padding:14px 16px 8px;font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787">Next week</div>
<div style="display:flex;flex-direction:column;gap:1px;background:#E3E6EB">
<div style="background:#fff;padding:12px 16px;display:flex;gap:12px;align-items:center"><div style="width:42px;text-align:center"><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Mon</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;line-height:1;color:#0B1220">24</div></div><div style="width:3px;height:38px;border-radius:2px;background:#14B8E8"></div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Practice · U18 &amp; Future</div><div style="font-size:13px;color:#6C7787">19:15–20:15 · Lars</div></div><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:4px 9px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">In</span></div>
<div style="background:#fff;padding:12px 16px;display:flex;gap:12px;align-items:center"><div style="width:42px;text-align:center"><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Tue</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;line-height:1;color:#0B1220">25</div></div><div style="width:3px;height:38px;border-radius:2px;background:#14B8E8"></div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Practice · Ice 3</div><div style="font-size:13px;color:#6C7787">19:15–20:45 · Noor</div></div><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:4px 9px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Reply</span></div>
<div style="background:#fff;padding:12px 16px;display:flex;gap:12px;align-items:center;border-left:4px solid #E4002B"><div style="width:42px;text-align:center"><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Thu</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;line-height:1;color:#0B1220">27</div></div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Away · Herentals</div><div style="font-size:13px;color:#6C7787">20:00 · bus leaves 16:00</div></div><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:4px 9px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Reply</span></div>
<div style="background:#fff;padding:12px 16px;display:flex;gap:12px;align-items:center"><div style="width:42px;text-align:center"><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Sun</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;line-height:1;color:#0B1220">30</div></div><div style="width:3px;height:38px;border-radius:2px;background:#F0A22E"></div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Club day · barbecue</div><div style="font-size:13px;color:#6C7787">12:00 · whole club</div></div><span style="background:#EEF0F3;color:#4A5566;border:1px solid #DDE1E7;padding:4px 9px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Optional</span></div>
</div>
</div>
<div style="flex-shrink:0;background:#fff;border-top:1px solid #E3E6EB;padding:8px 8px 26px;display:flex">
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 10v10h14V10"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">Home</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#E4002B" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#E4002B">Calendar</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M4 5h16v14H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">News</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.5-6 8-6s8 2 8 6"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">Me</span></div>
</div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:3px 8px;border-radius:4px">M4</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">News article</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#fff;font-family:Barlow,sans-serif">
<div style="position:relative;height:330px;flex-shrink:0">
<image-slot id="rc-m4-hero" shape="rect" placeholder="Player portrait"></image-slot>
<div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,.6) 0%,rgba(11,18,32,0) 40%,rgba(11,18,32,.88) 100%);pointer-events:none"></div>
<div style="position:absolute;top:54px;left:12px;width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><path d="M15 5l-7 7 7 7"/></svg></div>
<div style="position:absolute;left:16px;right:16px;bottom:16px;color:#fff;pointer-events:none">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#14B8E8">Sharks Women · 15 Aug 2026</div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:40px;line-height:.96;text-transform:uppercase;margin-top:6px">Signed:<br>Kolbrun<br>Bjornsdottir</div>
</div>
</div>
<div style="flex:1;overflow:auto;padding:20px 20px 24px">
<p style="margin:0 0 14px;font-size:18px;line-height:1.5;font-weight:600;color:#0B1220;text-wrap:pretty">Sharks Women Mechelen add 18-year-old Icelandic forward Kolbrun Bjornsdottir for the DFEL2 Nord campaign.</p>
<p style="margin:0 0 14px;font-size:16px;line-height:1.6;color:#3A4658;text-wrap:pretty">She moves to Belgium this month and joins the group for the first on-ice sessions next week. The coaching staff sees her as an immediate fit for the top six, with the pace to play alongside the club's international line.</p>
<p style="margin:0 0 20px;font-size:16px;line-height:1.6;color:#3A4658;text-wrap:pretty">A full introduction, including her first interview in Mechelen, follows at the season opener on 12 September.</p>
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px">
<span style="background:#F4F5F7;border:1px solid #E3E6EB;padding:5px 10px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#4A5566">Sharks Women</span>
<span style="background:#F4F5F7;border:1px solid #E3E6EB;padding:5px 10px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#4A5566">Transfers</span>
</div>
<div style="border-top:1px solid #E3E6EB;padding-top:14px;display:flex;align-items:center;gap:10px"><div style="width:36px;height:36px;border-radius:999px;background:#101E36;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px">BS</div><div style="flex:1"><div style="font-weight:600;font-size:14px;color:#0B1220">Posted by Bernard S.</div><div style="font-size:12px;color:#6C7787">Club communications</div></div><div style="height:38px;padding:0 14px;border-radius:8px;border:1.5px solid #C9CFD8;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220">Share</div></div>
</div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:3px 8px;border-radius:4px">M5</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Me &amp; my people</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#F4F5F7;font-family:Barlow,sans-serif">
<div style="padding:54px 16px 16px;background:#101E36;color:#fff;flex-shrink:0">
<div style="height:44px;display:flex;align-items:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;text-transform:uppercase">Me</div></div>
<div style="display:flex;align-items:center;gap:12px;margin-top:6px">
<div style="width:56px;height:56px;border-radius:999px;background:#E4002B;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:22px">KS</div>
<div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:22px;line-height:1;text-transform:uppercase">Katrien Somers</div><div style="font-size:13px;color:#93A0B4">Member since 2019 · Team manager U16</div></div>
</div>
</div>
<div style="flex:1;overflow:auto;padding:14px 16px 12px;display:flex;flex-direction:column;gap:14px">
<div style="flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:8px">People I manage</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;overflow:hidden;flex-shrink:0">
<div style="padding:12px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #EEF0F3"><div style="width:40px;height:40px;border-radius:999px;background:#E4002B;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:16px">LS</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Lars Somers</div><div style="font-size:13px;color:#6C7787">U16 · #17 · licence OK</div></div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></div>
<div style="padding:12px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #EEF0F3"><div style="width:40px;height:40px;border-radius:999px;background:#1B2B47;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:16px">NS</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Noor Somers</div><div style="font-size:13px;color:#6C7787">U16 · #9 · <span style="color:#B00021;font-weight:600">medical form due</span></div></div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></div>
<div style="padding:12px 14px;display:flex;align-items:center;gap:12px"><div style="width:40px;height:40px;border-radius:999px;background:#14B8E8;color:#04212C;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:16px">KS</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Katrien Somers <span style="font-size:12px;color:#6C7787">(me)</span></div><div style="font-size:13px;color:#6C7787">Recreational · Div 4 · licence OK</div></div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></div>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;overflow:hidden;flex-shrink:0">
<div style="padding:13px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #EEF0F3;min-height:44px;box-sizing:border-box"><span style="flex:1;font-weight:600;font-size:15px;color:#0B1220">Personal details</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></div>
<div style="padding:13px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #EEF0F3;min-height:44px;box-sizing:border-box"><span style="flex:1;font-weight:600;font-size:15px;color:#0B1220">Household &amp; contacts</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></div>
<div style="padding:13px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #EEF0F3;min-height:44px;box-sizing:border-box"><span style="flex:1;font-weight:600;font-size:15px;color:#0B1220">Payments &amp; dues</span><span style="background:#FDECEC;color:#B00021;border:1px solid #F5C9CE;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">1 open</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></div>
<div style="padding:13px 14px;display:flex;align-items:center;gap:12px;min-height:44px;box-sizing:border-box"><span style="flex:1;font-weight:600;font-size:15px;color:#0B1220">Notifications</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></div>
</div>
<div style="background:#0B1220;border-radius:14px;padding:16px;color:#fff;display:flex;gap:14px;align-items:center;flex-shrink:0">
<div style="width:44px;height:44px;border-radius:10px;background:#14B8E8;display:flex;align-items:center;justify-content:center"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#04212C" stroke-width="2.2"><path d="M4 19V6l8-3 8 3v13"/><path d="M9 19v-6h6v6"/></svg></div>
<div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:18px;letter-spacing:.04em;text-transform:uppercase">Coach mode</div><div style="font-size:13px;color:#93A0B4">You manage U16 — switch any time</div></div>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#93A0B4" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg>
</div>
<div style="text-align:center;font-size:13px;color:#8B95A4;padding:4px 0 8px">RosterChief · Sharks Mechelen · v3.0.1</div>
</div>
<div style="flex-shrink:0;background:#fff;border-top:1px solid #E3E6EB;padding:8px 8px 26px;display:flex">
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 10v10h14V10"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">Home</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">Calendar</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M4 5h16v14H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">News</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#E4002B" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.5-6 8-6s8 2 8 6"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#E4002B">Me</span></div>
</div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:3px 8px;border-radius:4px">M6</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Edit personal info</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#F4F5F7;font-family:Barlow,sans-serif">
<div style="padding:54px 16px 12px;background:#fff;border-bottom:1px solid #E3E6EB;flex-shrink:0;display:flex;align-items:center;gap:8px">
<div style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-left:-10px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0B1220" stroke-width="2.4"><path d="M15 5l-7 7 7 7"/></svg></div>
<div style="flex:1;font-family:'Barlow Condensed';font-weight:800;font-size:20px;text-transform:uppercase;color:#0B1220">Noor Somers</div>
<div style="height:36px;padding:0 14px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Save</div>
</div>
<div style="flex:1;overflow:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:16px">
<div style="background:#FFF5E4;border:1px solid #F6E0B8;border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px;color:#9A6410;line-height:1">!</span><div style="font-size:14px;color:#7A4E08;line-height:1.45">Medical form for the 2026–2027 season is missing. The club needs it before the first game.</div></div>
<div style="flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:8px">Identity</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden">
<div style="padding:10px 14px;border-bottom:1px solid #EEF0F3"><div style="font-size:12px;color:#6C7787">First name</div><div style="font-size:16px;color:#0B1220;font-weight:500">Noor</div></div>
<div style="padding:10px 14px;border-bottom:1px solid #EEF0F3"><div style="font-size:12px;color:#6C7787">Last name</div><div style="font-size:16px;color:#0B1220;font-weight:500">Somers</div></div>
<div style="padding:10px 14px;border-bottom:1px solid #EEF0F3"><div style="font-size:12px;color:#6C7787">Date of birth</div><div style="font-size:16px;color:#0B1220;font-weight:500;font-family:'IBM Plex Mono'">14 / 03 / 2011</div></div>
<div style="padding:10px 14px"><div style="font-size:12px;color:#6C7787">National register no.</div><div style="font-size:16px;color:#0B1220;font-weight:500;font-family:'IBM Plex Mono'">11.03.14-234.56</div></div>
</div>
</div>
<div style="flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:8px">Contact</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden">
<div style="padding:10px 14px;border-bottom:1px solid #EEF0F3"><div style="font-size:12px;color:#6C7787">Email</div><div style="font-size:16px;color:#0B1220;font-weight:500">noor.somers@example.be</div></div>
<div style="padding:10px 14px;border-bottom:1px solid #EEF0F3"><div style="font-size:12px;color:#6C7787">Mobile</div><div style="font-size:16px;color:#0B1220;font-weight:500;font-family:'IBM Plex Mono'">+32 470 12 34 56</div></div>
<div style="padding:10px 14px"><div style="font-size:12px;color:#6C7787">Address</div><div style="font-size:16px;color:#0B1220;font-weight:500">Kerkstraat 12, 2800 Mechelen</div></div>
</div>
</div>
<div style="flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:8px">Emergency</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden">
<div style="padding:10px 14px;border-bottom:1px solid #EEF0F3"><div style="font-size:12px;color:#6C7787">Contact 1</div><div style="font-size:16px;color:#0B1220;font-weight:500">Katrien Somers · mother</div></div>
<div style="padding:10px 14px"><div style="font-size:12px;color:#6C7787">Allergies / notes</div><div style="font-size:16px;color:#8B95A4;font-weight:400">None recorded</div></div>
</div>
</div>
<div style="flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:8px">Consent</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden">
<div style="padding:12px 14px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><span style="flex:1;font-size:15px;color:#0B1220">Photos on club channels</span><div style="width:48px;height:28px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:12px 14px;display:flex;align-items:center;gap:12px"><span style="flex:1;font-size:15px;color:#0B1220">Share contact with team parents</span><div style="width:48px;height:28px;border-radius:999px;background:#D6DAE1;position:relative"><div style="position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:#fff"></div></div></div>
</div>
</div>
</div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:3px 8px;border-radius:4px">M7</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Notifications</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#F4F5F7;font-family:Barlow,sans-serif">
<div style="padding:54px 16px 12px;background:#101E36;color:#fff;flex-shrink:0">
<div style="height:44px;display:flex;align-items:center;gap:8px"><div style="flex:1;font-family:'Barlow Condensed';font-weight:800;font-size:26px;text-transform:uppercase">Inbox</div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#14B8E8">Mark all read</span></div>
<div style="display:flex;gap:6px;margin-top:8px">
<div style="height:32px;padding:0 12px;border-radius:999px;background:#fff;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">All</div>
<div style="height:32px;padding:0 12px;border-radius:999px;background:#1B2B47;color:#93A0B4;display:flex;align-items:center;gap:6px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Action <span style="background:#E4002B;color:#fff;border-radius:999px;padding:0 6px;font-size:11px">3</span></div>
<div style="height:32px;padding:0 12px;border-radius:999px;background:#1B2B47;color:#93A0B4;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Club</div>
</div>
</div>
<div style="flex:1;overflow:auto;padding:0 0 12px">
<div style="padding:14px 16px 8px;font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787">Today</div>
<div style="display:flex;flex-direction:column;gap:1px;background:#E3E6EB;border-top:1px solid #E3E6EB">
<div style="background:#fff;padding:13px 16px;display:flex;gap:12px;border-left:4px solid #E4002B">
<div style="width:38px;height:38px;border-radius:10px;background:#FDECEC;display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#E4002B" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></div>
<div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Answer needed · Noor</div><div style="font-size:13px;color:#6C7787;line-height:1.4">Practice Tue 25 Aug 19:15 — replies close tomorrow 19:15</div><div style="display:flex;gap:6px;margin-top:8px"><div style="height:36px;padding:0 16px;border-radius:8px;background:#14A05A;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">In</div><div style="height:36px;padding:0 16px;border-radius:8px;background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Out</div></div></div>
<span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">08:12</span>
</div>
<div style="background:#fff;padding:13px 16px;display:flex;gap:12px;border-left:4px solid #F0A22E">
<div style="width:38px;height:38px;border-radius:10px;background:#FFF5E4;display:flex;align-items:center;justify-content:center;flex-shrink:0"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px;color:#9A6410">!</span></div>
<div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Medical form missing · Noor</div><div style="font-size:13px;color:#6C7787;line-height:1.4">Needed before the first game on 5 Sep</div><div style="margin-top:8px;height:36px;padding:0 16px;border-radius:8px;background:#0B1220;color:#fff;display:inline-flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Upload</div></div>
<span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">07:40</span>
</div>
<div style="background:#fff;padding:13px 16px;display:flex;gap:12px;align-items:center">
<div style="width:38px;height:38px;border-radius:10px;background:#EAF7FC;display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#0A6F91" stroke-width="2"><path d="M4 5h16v14H4z"/><path d="M8 9h8M8 13h5"/></svg></div>
<div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">New club news</div><div style="font-size:13px;color:#6C7787">Signed: Kolbrun Bjornsdottir</div></div>
<span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">06:05</span>
</div>
</div>
<div style="padding:14px 16px 8px;font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787">Earlier this week</div>
<div style="display:flex;flex-direction:column;gap:1px;background:#E3E6EB;border-top:1px solid #E3E6EB">
<div style="background:#fff;padding:13px 16px;display:flex;gap:12px;align-items:center;border-left:4px solid #E4002B">
<div style="width:38px;height:38px;border-radius:10px;background:#FDECEC;display:flex;align-items:center;justify-content:center;flex-shrink:0"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:17px;color:#E4002B">€</span></div>
<div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Invoice due 31 Aug</div><div style="font-size:13px;color:#6C7787">€ 420,00 · instalment 2 of 3 · Noor</div></div>
<div style="height:34px;padding:0 12px;border-radius:8px;background:#0B1220;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Pay</div>
</div>
<div style="background:#fff;padding:13px 16px;display:flex;gap:12px;align-items:center;opacity:.72">
<div style="width:38px;height:38px;border-radius:10px;background:#EEF0F3;display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#6C7787" stroke-width="2"><path d="M4 18l6-6 4 4 6-8"/></svg></div>
<div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Line-up published · U16</div><div style="font-size:13px;color:#6C7787">Lars is in line 1 for Sat 22 Aug</div></div>
<span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">Wed</span>
</div>
<div style="background:#fff;padding:13px 16px;display:flex;gap:12px;align-items:center;opacity:.72">
<div style="width:38px;height:38px;border-radius:10px;background:#EEF0F3;display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#6C7787" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18"/></svg></div>
<div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Practice moved</div><div style="font-size:13px;color:#6C7787">Thu 21 Aug now 17:15 · Ice 1 &amp; 2</div></div>
<span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">Tue</span>
</div>
<div style="background:#fff;padding:13px 16px;display:flex;gap:12px;align-items:center;opacity:.72">
<div style="width:38px;height:38px;border-radius:10px;background:#EEF0F3;display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#6C7787" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.5-6 8-6s8 2 8 6"/></svg></div>
<div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">You are now team manager · U16</div><div style="font-size:13px;color:#6C7787">Coach mode is available in your app</div></div>
<span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">Mon</span>
</div>
</div>
<div style="padding:16px;text-align:center"><span style="font-size:13px;color:#8B95A4">Choose which of these arrive as push in </span><span style="font-size:13px;color:#E4002B;font-weight:600">Me → Notifications</span></div>
</div>
<div style="flex-shrink:0;background:#fff;border-top:1px solid #E3E6EB;padding:8px 8px 26px;display:flex">
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#E4002B" stroke-width="2"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 10v10h14V10"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#E4002B">Home</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">Calendar</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M4 5h16v14H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">News</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.5-6 8-6s8 2 8 6"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8B95A4">Me</span></div>
</div>
</div>
</x-import>
</div>
</div>
</section>
<sc-if value="{{ showCoach }}" hint-placeholder-val="{{ true }}"><section id="sec-coach" style="padding:72px 64px;background:#0B1220;border-bottom:1px solid #0B1220">
<div style="display:flex;align-items:flex-end;gap:16px;margin-bottom:8px">
<span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;background:#14B8E8;color:#04212C;padding:4px 9px;border-radius:4px">02</span>
<h2 style="margin:0;font-family:'Barlow Condensed';font-weight:800;font-size:56px;line-height:.95;text-transform:uppercase;color:#fff">Coach mode — mobile</h2>
</div>
<p style="margin:0 0 44px;max-width:760px;color:#93A0B4;font-size:17px;line-height:1.5;text-wrap:pretty">Same app, second mode. Dark chrome and an ice-blue accent make it unmistakable which hat you are wearing. Built for the rink: thumb-reachable, glove-sized targets, works with one hand on the bench.</p>
<div style="display:flex;flex-wrap:wrap;gap:44px">
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#14B8E8;color:#04212C;padding:3px 8px;border-radius:4px">C1</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#fff">Today</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#0B1220;font-family:Barlow,sans-serif">
<div style="padding:54px 16px 14px;background:#0B1220;flex-shrink:0;color:#fff">
<div style="display:flex;align-items:center;gap:10px;height:44px">
<div style="width:30px;height:32px;background:#14B8E8;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div>
<div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:19px;letter-spacing:.06em;text-transform:uppercase;line-height:1">Sharks U16</div><div style="font-size:12px;color:#7C8AA0">Head coach · Katrien S.</div></div>
<div style="height:34px;padding:0 12px;border-radius:999px;background:#16233A;display:flex;align-items:center;gap:6px;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#fff">U16 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7C8AA0" stroke-width="3"><path d="M5 9l7 7 7-7"/></svg></div>
</div>
<div style="display:flex;background:#16233A;border-radius:999px;padding:4px;gap:4px;margin-top:10px">
<div style="flex:1;height:36px;border-radius:999px;color:#7C8AA0;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Member</div>
<div style="flex:1;height:36px;border-radius:999px;background:#14B8E8;color:#04212C;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Coach</div>
</div>
</div>
<div style="flex:1;overflow:auto;padding:14px 16px 12px;display:flex;flex-direction:column;gap:14px;background:#F4F5F7;border-radius:20px 20px 0 0">
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex-shrink:0">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:12px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:30px;line-height:1;color:#0B1220">19</div><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787;margin-top:2px">Squad</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:12px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:30px;line-height:1;color:#14A05A">11</div><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787;margin-top:2px">In Sat</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:12px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:30px;line-height:1;color:#E4002B">5</div><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787;margin-top:2px">Silent</div></div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:14px;overflow:hidden;flex-shrink:0">
<div style="padding:12px 14px;background:#0B1220;color:#fff;display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#14B8E8">Tonight · 19:15</span><span style="flex:1"></span><span style="font-size:13px;color:#93A0B4">Ice 3 &amp; 4</span></div>
<div style="padding:14px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;line-height:1;text-transform:uppercase;color:#0B1220">Practice · U16</div>
<div style="font-size:14px;color:#6C7787;margin-top:4px">15 confirmed · 2 out · 2 silent</div>
<div style="display:flex;gap:8px;margin-top:12px">
<div style="flex:1;height:50px;border-radius:8px;background:#14B8E8;color:#04212C;display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.1em;text-transform:uppercase">Check attendance</div>
<div style="width:50px;height:50px;border-radius:8px;border:1.5px solid #C9CFD8;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0B1220" stroke-width="2"><circle cx="12" cy="12" r="1.6" fill="#0B1220"/><circle cx="12" cy="5" r="1.6" fill="#0B1220"/><circle cx="12" cy="19" r="1.6" fill="#0B1220"/></svg></div>
</div>
</div>
</div>
<div style="flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:8px">Needs you</div>
<div style="display:flex;flex-direction:column;gap:8px">
<div style="background:#fff;border:1px solid #E3E6EB;border-left:4px solid #E4002B;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Line-up for Sat vs Leuven</div><div style="font-size:13px;color:#6C7787">Not submitted · closes Fri 20:00</div></div><div style="height:38px;padding:0 14px;border-radius:8px;background:#0B1220;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Build</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-left:4px solid #F0A22E;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">5 players have not answered</div><div style="font-size:13px;color:#6C7787">Sat 22 Aug · game</div></div><div style="height:38px;padding:0 14px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Nudge</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-left:4px solid #14B8E8;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Noor Somers · medical form</div><div style="font-size:13px;color:#6C7787">Blocks game licence</div></div><div style="height:38px;padding:0 14px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Remind</div></div>
</div>
</div>
<div style="flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:8px">Also yours</div>
<div style="background:#101E36;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;color:#fff;flex-shrink:0"><div style="width:32px;height:32px;border-radius:999px;background:#E4002B;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px">LS</div><div style="flex:1"><div style="font-weight:600;font-size:15px">Lars needs an answer for Thu</div><div style="font-size:13px;color:#93A0B4">From your member side</div></div><span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#14B8E8">Open</span></div>
</div>
</div>
<div style="flex-shrink:0;background:#0B1220;padding:8px 8px 26px;display:flex">
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#14B8E8" stroke-width="2"><path d="M12 7v5l3 2"/><circle cx="12" cy="12" r="9"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#14B8E8">Today</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#6E7C93" stroke-width="2"><circle cx="9" cy="8" r="3.4"/><path d="M2 20c0-3.5 3-5.4 7-5.4s7 1.9 7 5.4"/><path d="M17 8.5h5M19.5 6v5"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6E7C93">Squad</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#6E7C93" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6E7C93">Schedule</span></div>
<div style="flex:1;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#6E7C93" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6E7C93">Create</span></div>
</div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#14B8E8;color:#04212C;padding:3px 8px;border-radius:4px">C2</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#fff">Bench attendance</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#0B1220;font-family:Barlow,sans-serif">
<div style="padding:54px 16px 12px;flex-shrink:0;color:#fff">
<div style="height:44px;display:flex;align-items:center;gap:8px"><div style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-left:-12px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><path d="M15 5l-7 7 7 7"/></svg></div><div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:22px;line-height:1;text-transform:uppercase">Attendance</div><div style="font-size:12px;color:#7C8AA0">Practice · Tue 19 Aug · 19:15</div></div></div>
<div style="display:flex;align-items:center;gap:10px;margin-top:8px">
<div style="flex:1;height:8px;border-radius:999px;background:#16233A;overflow:hidden;display:flex"><div style="width:63%;background:#14A05A"></div><div style="width:11%;background:#E4002B"></div></div>
<span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;color:#fff;font-variant-numeric:tabular-nums">14/19</span>
</div>
</div>
<div style="flex:1;overflow:auto;background:#F4F5F7;border-radius:20px 20px 0 0;padding:12px 0 0">
<div style="display:flex;gap:6px;padding:0 16px 12px"><div style="height:32px;padding:0 12px;border-radius:999px;background:#0B1220;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">All 19</div><div style="height:32px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Silent 5</div><div style="height:32px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Goalies</div></div>
<div style="display:flex;flex-direction:column;gap:1px;background:#E3E6EB;border-top:1px solid #E3E6EB">
<div style="background:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px"><div style="width:34px;font-family:'Barlow Condensed';font-weight:800;font-size:22px;color:#0B1220;text-align:center;font-variant-numeric:tabular-nums">1</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Ruben Claes</div><div style="font-size:12px;color:#6C7787">Goalie</div></div><div style="display:flex;gap:4px"><div style="width:46px;height:44px;border-radius:8px 0 0 8px;background:#14A05A;color:#fff;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M5 13l4 4 10-10"/></svg></div><div style="width:46px;height:44px;border-radius:0 8px 8px 0;background:#EEF0F3;display:flex;align-items:center;justify-content:center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="3"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div></div>
<div style="background:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px"><div style="width:34px;font-family:'Barlow Condensed';font-weight:800;font-size:22px;color:#0B1220;text-align:center;font-variant-numeric:tabular-nums">9</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Noor Somers</div><div style="font-size:12px;color:#6C7787">Defence</div></div><div style="display:flex;gap:4px"><div style="width:46px;height:44px;border-radius:8px 0 0 8px;background:#EEF0F3;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="3"><path d="M5 13l4 4 10-10"/></svg></div><div style="width:46px;height:44px;border-radius:0 8px 8px 0;background:#E4002B;display:flex;align-items:center;justify-content:center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div></div>
<div style="background:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px"><div style="width:34px;font-family:'Barlow Condensed';font-weight:800;font-size:22px;color:#0B1220;text-align:center;font-variant-numeric:tabular-nums">12</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Emma Peeters</div><div style="font-size:12px;color:#6C7787">Forward</div></div><div style="display:flex;gap:4px"><div style="width:46px;height:44px;border-radius:8px 0 0 8px;background:#14A05A;color:#fff;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M5 13l4 4 10-10"/></svg></div><div style="width:46px;height:44px;border-radius:0 8px 8px 0;background:#EEF0F3;display:flex;align-items:center;justify-content:center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="3"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div></div>
<div style="background:#FFFDF6;padding:10px 16px;display:flex;align-items:center;gap:12px"><div style="width:34px;font-family:'Barlow Condensed';font-weight:800;font-size:22px;color:#9A6410;text-align:center;font-variant-numeric:tabular-nums">14</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Milan De Wit</div><div style="font-size:12px;color:#9A6410">No reply</div></div><div style="display:flex;gap:4px"><div style="width:46px;height:44px;border-radius:8px 0 0 8px;background:#EEF0F3;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="3"><path d="M5 13l4 4 10-10"/></svg></div><div style="width:46px;height:44px;border-radius:0 8px 8px 0;background:#EEF0F3;display:flex;align-items:center;justify-content:center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="3"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div></div>
<div style="background:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px"><div style="width:34px;font-family:'Barlow Condensed';font-weight:800;font-size:22px;color:#0B1220;text-align:center;font-variant-numeric:tabular-nums">17</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Lars Somers</div><div style="font-size:12px;color:#6C7787">Forward · A</div></div><div style="display:flex;gap:4px"><div style="width:46px;height:44px;border-radius:8px 0 0 8px;background:#14A05A;color:#fff;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M5 13l4 4 10-10"/></svg></div><div style="width:46px;height:44px;border-radius:0 8px 8px 0;background:#EEF0F3;display:flex;align-items:center;justify-content:center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="3"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div></div>
<div style="background:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px"><div style="width:34px;font-family:'Barlow Condensed';font-weight:800;font-size:22px;color:#0B1220;text-align:center;font-variant-numeric:tabular-nums">21</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Jonas Verlinden</div><div style="font-size:12px;color:#6C7787">Defence</div></div><div style="display:flex;gap:4px"><div style="width:46px;height:44px;border-radius:8px 0 0 8px;background:#14A05A;color:#fff;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M5 13l4 4 10-10"/></svg></div><div style="width:46px;height:44px;border-radius:0 8px 8px 0;background:#EEF0F3;display:flex;align-items:center;justify-content:center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="3"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div></div>
<div style="background:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px"><div style="width:34px;font-family:'Barlow Condensed';font-weight:800;font-size:22px;color:#0B1220;text-align:center;font-variant-numeric:tabular-nums">23</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Sofie Maes</div><div style="font-size:12px;color:#6C7787">Forward</div></div><div style="display:flex;gap:4px"><div style="width:46px;height:44px;border-radius:8px 0 0 8px;background:#14A05A;color:#fff;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M5 13l4 4 10-10"/></svg></div><div style="width:46px;height:44px;border-radius:0 8px 8px 0;background:#EEF0F3;display:flex;align-items:center;justify-content:center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="3"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div></div>
</div>
</div>
<div style="flex-shrink:0;background:#fff;border-top:1px solid #E3E6EB;padding:10px 16px 30px"><div style="height:52px;border-radius:8px;background:#0B1220;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:18px;letter-spacing:.1em;text-transform:uppercase">Save attendance</div></div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#14B8E8;color:#04212C;padding:3px 8px;border-radius:4px">C3</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#fff">Game selection</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#0B1220;font-family:Barlow,sans-serif;color:#fff">
<div style="padding:54px 16px 12px;flex-shrink:0">
<div style="height:44px;display:flex;align-items:center;gap:8px"><div style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-left:-12px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><path d="M15 5l-7 7 7 7"/></svg></div><div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:22px;line-height:1;text-transform:uppercase">Line-up</div><div style="font-size:12px;color:#7C8AA0">vs Leuven Chiefs · Sat 22 Aug</div></div><div style="height:36px;padding:0 14px;border-radius:8px;background:#14B8E8;color:#04212C;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Publish</div></div>
<div style="display:flex;gap:14px;margin-top:8px;font-size:13px;color:#7C8AA0"><span><strong style="color:#fff;font-family:'Barlow Condensed';font-size:15px">15</strong> dressed</span><span><strong style="color:#fff;font-family:'Barlow Condensed';font-size:15px">2</strong> goalies</span><span><strong style="color:#F0A22E;font-family:'Barlow Condensed';font-size:15px">4</strong> scratched</span></div>
</div>
<div style="flex:1;overflow:auto;padding:0 16px 12px;display:flex;flex-direction:column;gap:12px">
<div style="background:#101E36;border-radius:12px;padding:12px 14px">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#14B8E8">Line 1</span><span style="font-size:12px;color:#7C8AA0">LW · C · RW</span></div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
<div style="background:#16233A;border-radius:10px;padding:10px 8px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;line-height:1">17</div><div style="font-size:12px;color:#93A0B4;margin-top:2px">Somers</div></div>
<div style="background:#16233A;border-radius:10px;padding:10px 8px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;line-height:1">23</div><div style="font-size:12px;color:#93A0B4;margin-top:2px">Maes</div></div>
<div style="background:#16233A;border-radius:10px;padding:10px 8px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;line-height:1">12</div><div style="font-size:12px;color:#93A0B4;margin-top:2px">Peeters</div></div>
</div>
</div>
<div style="background:#101E36;border-radius:12px;padding:12px 14px">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#14B8E8">Line 2</span><span style="font-size:12px;color:#7C8AA0">LW · C · RW</span></div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
<div style="background:#16233A;border-radius:10px;padding:10px 8px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;line-height:1">8</div><div style="font-size:12px;color:#93A0B4;margin-top:2px">Vermeer</div></div>
<div style="background:#16233A;border-radius:10px;padding:10px 8px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;line-height:1">15</div><div style="font-size:12px;color:#93A0B4;margin-top:2px">Aerts</div></div>
<div style="border:1.5px dashed #2C3B56;border-radius:10px;padding:10px 8px;text-align:center;display:flex;align-items:center;justify-content:center;min-height:52px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#5C6B85">Empty</span></div>
</div>
</div>
<div style="background:#101E36;border-radius:12px;padding:12px 14px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#14B8E8;margin-bottom:10px">Defence pairs</div>
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px">
<div style="background:#16233A;border-radius:10px;padding:10px 8px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;line-height:1">21</div><div style="font-size:12px;color:#93A0B4;margin-top:2px">Verlinden</div></div>
<div style="background:#16233A;border-radius:10px;padding:10px 8px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;line-height:1">4</div><div style="font-size:12px;color:#93A0B4;margin-top:2px">Janssens</div></div>
</div>
</div>
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7C8AA0;margin-bottom:8px">Available · drag into a slot</div>
<div style="display:flex;flex-wrap:wrap;gap:8px">
<div style="background:#16233A;border:1px solid #2C3B56;border-radius:999px;padding:8px 14px;display:flex;align-items:center;gap:8px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px">27</span><span style="font-size:14px;color:#93A0B4">Willems</span></div>
<div style="background:#16233A;border:1px solid #2C3B56;border-radius:999px;padding:8px 14px;display:flex;align-items:center;gap:8px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px">6</span><span style="font-size:14px;color:#93A0B4">Dhondt</span></div>
<div style="background:#16233A;border:1px solid #2C3B56;border-radius:999px;padding:8px 14px;display:flex;align-items:center;gap:8px;opacity:.5"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px">9</span><span style="font-size:14px;color:#93A0B4">Somers · out</span></div>
<div style="background:#16233A;border:1px solid #2C3B56;border-radius:999px;padding:8px 14px;display:flex;align-items:center;gap:8px;opacity:.5"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px">14</span><span style="font-size:14px;color:#93A0B4">De Wit · silent</span></div>
</div>
</div>
</div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#14B8E8;color:#04212C;padding:3px 8px;border-radius:4px">C4</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#fff">Create event</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#F4F5F7;font-family:Barlow,sans-serif">
<div style="padding:54px 16px 12px;background:#fff;border-bottom:1px solid #E3E6EB;flex-shrink:0;display:flex;align-items:center;gap:8px">
<span style="font-size:16px;color:#6C7787;font-weight:500">Cancel</span>
<div style="flex:1;text-align:center;font-family:'Barlow Condensed';font-weight:800;font-size:20px;text-transform:uppercase;color:#0B1220">New event</div>
<div style="height:36px;padding:0 14px;border-radius:8px;background:#14B8E8;color:#04212C;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Create</div>
</div>
<div style="flex:1;overflow:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:16px">
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
<div style="background:#0B1220;color:#fff;border-radius:10px;padding:14px 8px;text-align:center"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#14B8E8" stroke-width="2"><path d="M4 18l6-6 4 4 6-8"/></svg><div style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px">Practice</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:10px;padding:14px 8px;text-align:center"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><circle cx="12" cy="12" r="8"/><path d="M12 4v16M4 12h16"/></svg><div style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;color:#6C7787">Game</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:10px;padding:14px 8px;text-align:center"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M4 20V8l8-4 8 4v12"/></svg><div style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;color:#6C7787">Other</div></div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden">
<div style="padding:12px 14px;border-bottom:1px solid #EEF0F3"><div style="font-size:12px;color:#6C7787">Title</div><div style="font-size:16px;color:#0B1220;font-weight:500">Practice · Ice 3 &amp; 4</div></div>
<div style="padding:12px 14px;border-bottom:1px solid #EEF0F3;display:flex;gap:10px"><div style="flex:1"><div style="font-size:12px;color:#6C7787">Date</div><div style="font-size:16px;color:#0B1220;font-weight:500;font-family:'IBM Plex Mono'">Tue 26 Aug</div></div><div style="flex:1"><div style="font-size:12px;color:#6C7787">Time</div><div style="font-size:16px;color:#0B1220;font-weight:500;font-family:'IBM Plex Mono'">19:15 – 21:00</div></div></div>
<div style="padding:12px 14px"><div style="font-size:12px;color:#6C7787">Location</div><div style="font-size:16px;color:#0B1220;font-weight:500">Ice Skating Center Mechelen</div></div>
</div>
<div style="flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:8px">Who</div>
<div style="display:flex;flex-wrap:wrap;gap:8px">
<div style="background:#0B1220;color:#fff;border-radius:999px;padding:9px 14px;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase">U16 · 19</div>
<div style="background:#fff;border:1px solid #E3E6EB;color:#6C7787;border-radius:999px;padding:9px 14px;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase">U18</div>
<div style="background:#fff;border:1px solid #E3E6EB;color:#6C7787;border-radius:999px;padding:9px 14px;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase">Goalies only</div>
<div style="background:#fff;border:1px solid #E3E6EB;color:#6C7787;border-radius:999px;padding:9px 14px;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase">Pick players</div>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden">
<div style="padding:12px 14px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><span style="flex:1;font-size:15px;color:#0B1220">Ask for attendance</span><div style="width:48px;height:28px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:12px 14px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-size:15px;color:#0B1220">Answers close</div><div style="font-size:12px;color:#6C7787">24h before start</div></div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></div>
<div style="padding:12px 14px;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-size:15px;color:#0B1220">Repeat weekly</div><div style="font-size:12px;color:#6C7787">Until 21 Dec 2026 · 17 events</div></div><div style="width:48px;height:28px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:999px;background:#fff"></div></div></div>
</div>
<div style="background:#EAF7FC;border:1px solid #C3E7F4;border-radius:12px;padding:12px 14px;font-size:14px;color:#0A6F91;line-height:1.45">19 members will be notified. 3 have a clash with U18 practice on the same slot.</div>
</div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#14B8E8;color:#04212C;padding:3px 8px;border-radius:4px">C5</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#fff">Post news</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" keyboard="{{ true }}" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#fff;font-family:Barlow,sans-serif">
<div style="padding:54px 16px 12px;border-bottom:1px solid #E3E6EB;flex-shrink:0;display:flex;align-items:center;gap:8px">
<span style="font-size:16px;color:#6C7787;font-weight:500">Cancel</span>
<div style="flex:1;text-align:center;font-family:'Barlow Condensed';font-weight:800;font-size:20px;text-transform:uppercase;color:#0B1220">Post news</div>
<div style="height:36px;padding:0 14px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Publish</div>
</div>
<div style="flex:1;overflow:auto;padding:14px 16px">
<div style="height:120px;border-radius:12px;overflow:hidden;position:relative;margin-bottom:14px"><image-slot id="rc-c5-cover" shape="rect" placeholder="Add a cover photo"></image-slot></div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:28px;line-height:1.02;text-transform:uppercase;color:#0B1220">U16 takes the derby in Leuven</div>
<div style="height:2px;width:40px;background:#E4002B;margin:10px 0 12px"></div>
<div style="font-size:16px;line-height:1.55;color:#3A4658">Two goals from Sofie Maes and a clean third period gave the U16 a 4—2 win in Leuven. Next home game is Saturday<span style="display:inline-block;width:2px;height:18px;background:#E4002B;vertical-align:-3px;margin-left:1px"></span></div>
<div style="display:flex;gap:8px;margin-top:16px;flex-wrap:wrap">
<span style="background:#0B1220;color:#fff;padding:6px 12px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">U16</span>
<span style="background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;padding:6px 12px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Game report</span>
<span style="background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;padding:6px 12px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">+ tag</span>
</div>
<div style="margin-top:14px;background:#F4F5F7;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-size:15px;color:#0B1220;font-weight:600">Audience</div><div style="font-size:13px;color:#6C7787">U16 families · also on club website</div></div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></div>
</div>
</div>
</x-import>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#14B8E8;color:#04212C;padding:3px 8px;border-radius:4px">C6</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#fff">Add members to team</span></div>
<x-import component="IOSDevice" from="./ios-frame.jsx" dark="{{ true }}" hint-size="402px,874px">
<div style="height:100%;display:flex;flex-direction:column;background:#0B1220;font-family:Barlow,sans-serif">
<div style="padding:54px 16px 12px;flex-shrink:0;color:#fff">
<div style="height:44px;display:flex;align-items:center;gap:8px"><div style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-left:-12px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><path d="M15 5l-7 7 7 7"/></svg></div><div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:22px;line-height:1;text-transform:uppercase">Add to U16</div><div style="font-size:12px;color:#7C8AA0">Season 2026–2027 · 19 in squad</div></div></div>
<div style="margin-top:8px;height:42px;border-radius:10px;background:#16233A;display:flex;align-items:center;gap:10px;padding:0 12px"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#7C8AA0" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg><span style="font-size:15px;color:#7C8AA0">Search club members</span></div>
</div>
<div style="flex:1;overflow:auto;background:#F4F5F7;border-radius:20px 20px 0 0;padding:12px 0 0">
<div style="padding:0 16px 10px;display:flex;gap:6px"><div style="height:32px;padding:0 12px;border-radius:999px;background:#0B1220;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Suggested</div><div style="height:32px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Age eligible</div><div style="height:32px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">No team</div></div>
<div style="padding:0 16px 8px;font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787">Moving up from U14</div>
<div style="display:flex;flex-direction:column;gap:1px;background:#E3E6EB;border-top:1px solid #E3E6EB">
<div style="background:#fff;padding:11px 16px;display:flex;align-items:center;gap:12px"><div style="width:38px;height:38px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px">TV</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Tuur Vandael</div><div style="font-size:12px;color:#6C7787">2011 · Forward · licence OK</div></div><div style="width:28px;height:28px;border-radius:6px;background:#14A05A;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.2"><path d="M5 13l4 4 10-10"/></svg></div></div>
<div style="background:#fff;padding:11px 16px;display:flex;align-items:center;gap:12px"><div style="width:38px;height:38px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px">AD</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Anna Dierckx</div><div style="font-size:12px;color:#6C7787">2011 · Defence · licence OK</div></div><div style="width:28px;height:28px;border-radius:6px;background:#14A05A;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.2"><path d="M5 13l4 4 10-10"/></svg></div></div>
<div style="background:#fff;padding:11px 16px;display:flex;align-items:center;gap:12px"><div style="width:38px;height:38px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px">MB</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Matteo Bruyns</div><div style="font-size:12px;color:#B00021">2011 · licence pending</div></div><div style="width:28px;height:28px;border-radius:6px;border:1.5px solid #C9CFD8"></div></div>
</div>
<div style="padding:14px 16px 8px;font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787">New this season</div>
<div style="display:flex;flex-direction:column;gap:1px;background:#E3E6EB;border-top:1px solid #E3E6EB">
<div style="background:#fff;padding:11px 16px;display:flex;align-items:center;gap:12px"><div style="width:38px;height:38px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px">SK</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Sam Koninckx</div><div style="font-size:12px;color:#6C7787">2010 · joined 2 Aug · no team</div></div><div style="width:28px;height:28px;border-radius:6px;border:1.5px solid #C9CFD8"></div></div>
<div style="background:#fff;padding:11px 16px;display:flex;align-items:center;gap:12px"><div style="width:38px;height:38px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px">IV</div><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">Ines Vercauteren</div><div style="font-size:12px;color:#6C7787">2010 · goalie · no team</div></div><div style="width:28px;height:28px;border-radius:6px;border:1.5px solid #C9CFD8"></div></div>
</div>
</div>
<div style="flex-shrink:0;background:#fff;border-top:1px solid #E3E6EB;padding:10px 16px 30px;display:flex;gap:10px;align-items:center"><div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:20px;line-height:1;color:#0B1220">2 selected</div><div style="font-size:12px;color:#6C7787">Squad becomes 21</div></div><div style="height:52px;padding:0 22px;border-radius:8px;background:#14B8E8;color:#04212C;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.1em;text-transform:uppercase">Add</div></div>
</div>
</x-import>
</div>
</div>
</section>
</sc-if><section id="sec-mgmt" style="padding:72px 64px;background:#E8EAEE;border-bottom:1px solid #D6DAE1">
<div style="display:flex;align-items:flex-end;gap:16px;margin-bottom:8px">
<span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;background:#101E36;color:#fff;padding:4px 9px;border-radius:4px">03</span>
<h2 style="margin:0;font-family:'Barlow Condensed';font-weight:800;font-size:56px;line-height:.95;text-transform:uppercase;color:#0B1220">Club management — desktop</h2>
</div>
<p style="margin:0 0 44px;max-width:760px;color:#6C7787;font-size:17px;line-height:1.5;text-wrap:pretty">Secretariat, treasurer and board. Dense tables, bulk actions and keyboard-friendly filters. Same type and colour system as the apps, tuned for long sessions on a 1440-wide screen.</p>
<div style="display:flex;flex-direction:column;gap:52px">
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#101E36;color:#fff;padding:3px 8px;border-radius:4px">D1</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Club home</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;font-family:Barlow,sans-serif">
<div style="width:236px;background:#0B1220;flex-shrink:0;display:flex;flex-direction:column;padding:20px 0">
<div style="display:flex;align-items:center;gap:10px;padding:0 18px 22px">
<div style="width:28px;height:30px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div>
<div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1">Sharks Mechelen</div><div style="font-family:'IBM Plex Mono';font-size:10px;color:#5C6B85">RosterChief · management</div></div>
</div>
<div style="display:flex;flex-direction:column;gap:2px;padding:0 10px">
<div style="height:40px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;gap:10px;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Overview</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;gap:10px;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Members</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;gap:10px;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Teams</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;gap:10px;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Calendar</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;gap:10px;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">News</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;gap:10px;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Finance</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;gap:10px;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Settings</div>
</div>
<div style="flex:1"></div>
<div style="padding:0 18px"><div style="border-top:1px solid #1E2B42;padding-top:14px;display:flex;align-items:center;gap:10px"><div style="width:32px;height:32px;border-radius:999px;background:#1B2B47;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">BS</div><div style="flex:1"><div style="font-size:13px;color:#fff;font-weight:600">Bernard S.</div><div style="font-size:11px;color:#5C6B85">Secretary</div></div></div></div>
</div>
<div style="flex:1;display:flex;flex-direction:column;min-width:0">
<div style="height:64px;background:#fff;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 28px;gap:16px;flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;text-transform:uppercase;color:#0B1220">Season 2026–2027</div>
<div style="height:28px;padding:0 10px;border-radius:6px;background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase">Active</div>
<div style="flex:1"></div>
<div style="height:36px;width:280px;border:1px solid #E3E6EB;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 10px"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg><span style="font-size:14px;color:#8B95A4">Search members, teams, events</span><span style="margin-left:auto;font-family:'IBM Plex Mono';font-size:11px;color:#B4BCC7">⌘K</span></div>
<div style="height:36px;padding:0 14px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">New member</div>
</div>
<div style="flex:1;overflow:hidden;padding:24px 28px;display:flex;flex-direction:column;gap:20px">
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:16px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Members</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:44px;line-height:1;color:#0B1220;margin-top:4px">312</div><div style="font-size:13px;color:#14A05A;margin-top:2px">+18 vs last season</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:16px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Awaiting approval</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:44px;line-height:1;color:#E4002B;margin-top:4px">7</div><div style="font-size:13px;color:#6C7787;margin-top:2px">oldest 4 days</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:16px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Dues collected</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:44px;line-height:1;color:#0B1220;margin-top:4px">68<span style="font-size:24px">%</span></div><div style="font-size:13px;color:#6C7787;margin-top:2px">€ 84.240 of € 123.900</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:16px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Licences missing</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:44px;line-height:1;color:#F0A22E;margin-top:4px">11</div><div style="font-size:13px;color:#6C7787;margin-top:2px">across 5 teams</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:16px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Turnout · 30d</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:44px;line-height:1;color:#0B1220;margin-top:4px">81<span style="font-size:24px">%</span></div><div style="font-size:13px;color:#B00021;margin-top:2px">−4 pts vs June</div></div>
</div>
<div style="display:grid;grid-template-columns:1.35fr 1fr;gap:20px;flex:1;min-height:0">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;display:flex;flex-direction:column;overflow:hidden">
<div style="padding:14px 18px;border-bottom:1px solid #E3E6EB;display:flex;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Needs attention</span><span style="flex:1"></span><span style="font-size:13px;color:#E4002B;font-weight:600">Clear all</span></div>
<div style="display:flex;flex-direction:column">
<div style="padding:13px 18px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:14px"><span style="width:6px;height:34px;border-radius:3px;background:#E4002B"></span><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">7 sign-ups waiting for approval</div><div style="font-size:13px;color:#6C7787">U8 (3), U10 (2), Div 4 (2)</div></div><div style="height:32px;padding:0 12px;border-radius:6px;background:#0B1220;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Review</div></div>
<div style="padding:13px 18px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:14px"><span style="width:6px;height:34px;border-radius:3px;background:#F0A22E"></span><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">11 members without a valid licence</div><div style="font-size:13px;color:#6C7787">Federation deadline 1 Sep</div></div><div style="height:32px;padding:0 12px;border-radius:6px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Export</div></div>
<div style="padding:13px 18px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:14px"><span style="width:6px;height:34px;border-radius:3px;background:#F0A22E"></span><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">23 invoices overdue by 30+ days</div><div style="font-size:13px;color:#6C7787">€ 9.840 outstanding</div></div><div style="height:32px;padding:0 12px;border-radius:6px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Chase</div></div>
<div style="padding:13px 18px;display:flex;align-items:center;gap:14px"><span style="width:6px;height:34px;border-radius:3px;background:#14B8E8"></span><div style="flex:1"><div style="font-weight:600;font-size:15px;color:#0B1220">U14 has no head coach assigned</div><div style="font-size:13px;color:#6C7787">Season starts in 27 days</div></div><div style="height:32px;padding:0 12px;border-radius:6px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Assign</div></div>
</div>
<div style="flex:1;border-top:1px solid #E3E6EB;padding:16px 18px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220;margin-bottom:14px">Membership by team</div>
<div style="display:flex;align-items:flex-end;gap:14px;height:150px">
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:52px;background:#101E36;border-radius:4px 4px 0 0"></div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">U8</span></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:74px;background:#101E36;border-radius:4px 4px 0 0"></div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">U10</span></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:96px;background:#101E36;border-radius:4px 4px 0 0"></div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">U12</span></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:66px;background:#101E36;border-radius:4px 4px 0 0"></div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">U14</span></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:88px;background:#E4002B;border-radius:4px 4px 0 0"></div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#0B1220">U16</span></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:70px;background:#101E36;border-radius:4px 4px 0 0"></div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">U18</span></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:58px;background:#101E36;border-radius:4px 4px 0 0"></div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">U23</span></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:110px;background:#101E36;border-radius:4px 4px 0 0"></div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">Women</span></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:84px;background:#101E36;border-radius:4px 4px 0 0"></div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">Div 2</span></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px"><div style="width:100%;height:62px;background:#101E36;border-radius:4px 4px 0 0"></div><span style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787">Div 4</span></div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:20px;min-height:0">
<div style="background:#0B1220;border-radius:12px;padding:18px;color:#fff">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px">This weekend</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;gap:12px;align-items:center"><div style="width:44px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:22px;line-height:1">22</div><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7C8AA0">Sat</div></div><div style="flex:1"><div style="font-size:14px;font-weight:600">U16 vs Leuven Chiefs</div><div style="font-size:12px;color:#7C8AA0">18:30 · home · line-up pending</div></div></div>
<div style="height:1px;background:#1E2B42"></div>
<div style="display:flex;gap:12px;align-items:center"><div style="width:44px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:22px;line-height:1">23</div><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7C8AA0">Sun</div></div><div style="flex:1"><div style="font-size:14px;font-weight:600">Women Nat vs Tilburg</div><div style="font-size:12px;color:#7C8AA0">17:00 · away · bus booked</div></div></div>
<div style="height:1px;background:#1E2B42"></div>
<div style="display:flex;gap:12px;align-items:center"><div style="width:44px;text-align:center"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:22px;line-height:1">23</div><div style="font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7C8AA0">Sun</div></div><div style="flex:1"><div style="font-size:14px;font-weight:600">U10 tournament · Sportiom</div><div style="font-size:12px;color:#7C8AA0">08:00–18:00 · 4 volunteers short</div></div></div>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;flex:1;padding:18px;min-height:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220;margin-bottom:14px">Recent activity</div>
<div style="display:flex;flex-direction:column;gap:12px;font-size:13px">
<div style="display:flex;gap:10px"><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4;width:44px;flex-shrink:0">09:12</span><div style="color:#3A4658"><strong style="color:#0B1220">Katrien S.</strong> published news “U16 takes the derby”</div></div>
<div style="display:flex;gap:10px"><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4;width:44px;flex-shrink:0">08:47</span><div style="color:#3A4658"><strong style="color:#0B1220">Payment</strong> € 420,00 received · Somers, N.</div></div>
<div style="display:flex;gap:10px"><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4;width:44px;flex-shrink:0">08:31</span><div style="color:#3A4658"><strong style="color:#0B1220">Sign-up</strong> Ines Vercauteren · goalie · U16</div></div>
<div style="display:flex;gap:10px"><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4;width:44px;flex-shrink:0">Yest.</span><div style="color:#3A4658"><strong style="color:#0B1220">Tom V.</strong> assigned as assistant coach · U12</div></div>
<div style="display:flex;gap:10px"><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4;width:44px;flex-shrink:0">Yest.</span><div style="color:#3A4658"><strong style="color:#0B1220">Calendar</strong> 17 U16 practices generated</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#101E36;color:#fff;padding:3px 8px;border-radius:4px">D2</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Members — list &amp; bulk actions</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;font-family:Barlow,sans-serif">
<div style="width:236px;background:#0B1220;flex-shrink:0;display:flex;flex-direction:column;padding:20px 0">
<div style="display:flex;align-items:center;gap:10px;padding:0 18px 22px"><div style="width:28px;height:30px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1">Sharks Mechelen</div><div style="font-family:'IBM Plex Mono';font-size:10px;color:#5C6B85">RosterChief · management</div></div></div>
<div style="display:flex;flex-direction:column;gap:2px;padding:0 10px">
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Overview</div>
<div style="height:40px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Members</div>
<div style="display:flex;flex-direction:column;gap:1px;padding:4px 0 4px 22px">
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#fff;font-weight:600">All members</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Sign-ups <span style="margin-left:8px;background:#E4002B;color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:700">7</span></div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Households</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Roles</div>
</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Teams</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Calendar</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">News</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Finance</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Settings</div>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column;min-width:0">
<div style="height:64px;background:#fff;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 28px;gap:16px;flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;text-transform:uppercase;color:#0B1220">Members</div>
<span style="font-family:'IBM Plex Mono';font-size:13px;color:#6C7787">312 total · 24 shown</span>
<div style="flex:1"></div>
<div style="height:36px;padding:0 14px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Import CSV</div>
<div style="height:36px;padding:0 14px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">New member</div>
</div>
<div style="height:54px;background:#fff;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 28px;gap:8px;flex-shrink:0">
<div style="height:34px;width:240px;border:1px solid #E3E6EB;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 10px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8B95A4" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg><span style="font-size:14px;color:#8B95A4">Name, email, licence no.</span></div>
<div style="height:34px;padding:0 12px;border-radius:8px;background:#0B1220;color:#fff;display:flex;align-items:center;gap:6px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Team: U16 ✕</div>
<div style="height:34px;padding:0 12px;border-radius:8px;background:#0B1220;color:#fff;display:flex;align-items:center;gap:6px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Status: active ✕</div>
<div style="height:34px;padding:0 12px;border-radius:8px;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">+ Filter</div>
<div style="flex:1"></div>
<span style="font-size:13px;color:#6C7787">Saved view</span>
<div style="height:34px;padding:0 12px;border-radius:8px;border:1px solid #E3E6EB;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">U16 squad ▾</div>
</div>
<div style="height:48px;background:#0B1220;display:flex;align-items:center;padding:0 28px;gap:14px;flex-shrink:0;color:#fff">
<span style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase">3 selected</span>
<div style="width:1px;height:20px;background:#2C3B56"></div>
<span style="font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#14B8E8">Move to team</span>
<span style="font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#14B8E8">Assign role</span>
<span style="font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#14B8E8">Send message</span>
<span style="font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#14B8E8">Create invoice</span>
<div style="flex:1"></div>
<span style="font-size:13px;color:#93A0B4">Clear</span>
</div>
<div style="flex:1;overflow:hidden;background:#fff">
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:40px;align-items:center;border-bottom:1px solid #E3E6EB;background:#F8F9FA;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;border:1.5px solid #C9CFD8"></span></span><span>No.</span><span>Member</span><span>Team · position</span><span>Licence</span><span>Dues</span><span>Attendance</span><span>Household</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220;background:#FFF7F8">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;background:#E4002B"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">17</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#E4002B;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">LS</span><span><strong style="font-weight:600">Lars Somers</strong><br><span style="font-size:12px;color:#6C7787">2011 · M</span></span></span><span>U16 · Forward</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0C7A43">BE-2411893</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Paid</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">92%</span><span style="font-size:13px;color:#6C7787">Somers</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220;background:#FFF7F8">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;background:#E4002B"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">9</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#1B2B47;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">NS</span><span><strong style="font-weight:600">Noor Somers</strong><br><span style="font-size:12px;color:#6C7787">2011 · F</span></span></span><span>U16 · Defence</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#B00021">missing</span><span><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Due</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">78%</span><span style="font-size:13px;color:#6C7787">Somers</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220;background:#FFF7F8">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;background:#E4002B"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">23</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">SM</span><span><strong style="font-weight:600">Sofie Maes</strong><br><span style="font-size:12px;color:#6C7787">2010 · F</span></span></span><span>U16 · Forward</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0C7A43">BE-2411655</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Paid</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">96%</span><span style="font-size:13px;color:#6C7787">Maes</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;border:1.5px solid #C9CFD8"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">1</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">RC</span><span><strong style="font-weight:600">Ruben Claes</strong><br><span style="font-size:12px;color:#6C7787">2010 · M</span></span></span><span>U16 · Goalie</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0C7A43">BE-2410322</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Paid</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">88%</span><span style="font-size:13px;color:#6C7787">Claes</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;border:1.5px solid #C9CFD8"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">12</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">EP</span><span><strong style="font-weight:600">Emma Peeters</strong><br><span style="font-size:12px;color:#6C7787">2011 · F</span></span></span><span>U16 · Forward</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0C7A43">BE-2411901</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Paid</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">84%</span><span style="font-size:13px;color:#6C7787">Peeters</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;border:1.5px solid #C9CFD8"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">14</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">MD</span><span><strong style="font-weight:600">Milan De Wit</strong><br><span style="font-size:12px;color:#6C7787">2011 · M</span></span></span><span>U16 · Forward</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0C7A43">BE-2411774</span><span><span style="background:#FDECEC;color:#B00021;border:1px solid #F5C9CE;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Overdue</span></span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#B00021">54%</span><span style="font-size:13px;color:#6C7787">De Wit</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;border:1.5px solid #C9CFD8"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">21</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">JV</span><span><strong style="font-weight:600">Jonas Verlinden</strong><br><span style="font-size:12px;color:#6C7787">2010 · M</span></span></span><span>U16 · Defence</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0C7A43">BE-2410188</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Paid</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">90%</span><span style="font-size:13px;color:#6C7787">Verlinden</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;border:1.5px solid #C9CFD8"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">4</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">LJ</span><span><strong style="font-weight:600">Lotte Janssens</strong><br><span style="font-size:12px;color:#6C7787">2011 · F</span></span></span><span>U16 · Defence</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0C7A43">BE-2411442</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Paid</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">81%</span><span style="font-size:13px;color:#6C7787">Janssens</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;border:1.5px solid #C9CFD8"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">8</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">FV</span><span><strong style="font-weight:600">Finn Vermeer</strong><br><span style="font-size:12px;color:#6C7787">2010 · M</span></span></span><span>U16 · Forward</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0C7A43">BE-2410967</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Paid</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">73%</span><span style="font-size:13px;color:#6C7787">Vermeer</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;border:1.5px solid #C9CFD8"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">15</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">WA</span><span><strong style="font-weight:600">Wout Aerts</strong><br><span style="font-size:12px;color:#6C7787">2011 · M</span></span></span><span>U16 · Forward</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0C7A43">BE-2411510</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Paid</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">79%</span><span style="font-size:13px;color:#6C7787">Aerts</span>
</div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr 1fr 100px;padding:0 28px;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220">
<span><span style="display:inline-block;width:16px;height:16px;border-radius:4px;border:1.5px solid #C9CFD8"></span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">27</span><span style="display:flex;align-items:center;gap:10px"><span style="width:30px;height:30px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">SW</span><span><strong style="font-weight:600">Stan Willems</strong><br><span style="font-size:12px;color:#6C7787">2011 · M</span></span></span><span>U16 · Forward</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0C7A43">BE-2411388</span><span><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Due</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">68%</span><span style="font-size:13px;color:#6C7787">Willems</span>
</div>
<div style="display:flex;align-items:center;padding:14px 28px;gap:14px;font-size:13px;color:#6C7787"><span>Showing 11 of 24</span><div style="flex:1"></div><div style="display:flex;gap:6px"><span style="width:30px;height:30px;border:1px solid #E3E6EB;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#0B1220">1</span><span style="width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center">2</span></div></div>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#101E36;color:#fff;padding:3px 8px;border-radius:4px">D3</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Sign-up intake &amp; approval</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;font-family:Barlow,sans-serif">
<div style="width:236px;background:#0B1220;flex-shrink:0;display:flex;flex-direction:column;padding:20px 0">
<div style="display:flex;align-items:center;gap:10px;padding:0 18px 22px"><div style="width:28px;height:30px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1">Sharks Mechelen</div><div style="font-family:'IBM Plex Mono';font-size:10px;color:#5C6B85">RosterChief · management</div></div></div>
<div style="display:flex;flex-direction:column;gap:2px;padding:0 10px">
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Overview</div>
<div style="height:40px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Members</div>
<div style="display:flex;flex-direction:column;gap:1px;padding:4px 0 4px 22px">
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">All members</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#fff;font-weight:600">Sign-ups <span style="margin-left:8px;background:#E4002B;color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:700">7</span></div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Households</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Roles</div>
</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Teams</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Calendar</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">News</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Finance</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Settings</div>
</div>
</div>
<div style="flex:1;display:flex;min-width:0">
<div style="flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #E3E6EB">
<div style="height:64px;background:#fff;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 24px;gap:14px;flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;text-transform:uppercase;color:#0B1220">Sign-ups</div>
<span style="background:#FDECEC;color:#B00021;border:1px solid #F5C9CE;padding:3px 9px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">7 waiting</span>
<div style="flex:1"></div>
<div style="height:34px;padding:0 12px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Approve all clean</div>
</div>
<div style="flex:1;overflow:hidden;background:#fff">
<div style="display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr 90px;padding:0 24px;height:40px;align-items:center;border-bottom:1px solid #E3E6EB;background:#F8F9FA;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787"><span>Applicant</span><span>Born</span><span>Wants</span><span>Checks</span><span>Age</span></div>
<div style="display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr 90px;padding:0 24px;height:60px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;background:#F4F9FF;border-left:3px solid #14B8E8">
<span style="display:flex;align-items:center;gap:10px"><span style="width:32px;height:32px;border-radius:999px;background:#101E36;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">IV</span><span><strong style="font-weight:600">Ines Vercauteren</strong><br><span style="font-size:12px;color:#6C7787">via website form</span></span></span>
<span style="font-family:'IBM Plex Mono';font-size:13px">2010</span><span>U16 · goalie</span><span><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">2 open</span></span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#B00021">4 d</span>
</div>
<div style="display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr 90px;padding:0 24px;height:60px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px">
<span style="display:flex;align-items:center;gap:10px"><span style="width:32px;height:32px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">TB</span><span><strong style="font-weight:600">Thijs Bogaert</strong><br><span style="font-size:12px;color:#6C7787">sibling of Lore B. (U12)</span></span></span>
<span style="font-family:'IBM Plex Mono';font-size:13px">2018</span><span>U8 · skater</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Clean</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">2 d</span>
</div>
<div style="display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr 90px;padding:0 24px;height:60px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px">
<span style="display:flex;align-items:center;gap:10px"><span style="width:32px;height:32px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">NK</span><span><strong style="font-weight:600">Nora Kestens</strong><br><span style="font-size:12px;color:#6C7787">try-out 12 Aug</span></span></span>
<span style="font-family:'IBM Plex Mono';font-size:13px">2016</span><span>U10 · skater</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Clean</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">2 d</span>
</div>
<div style="display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr 90px;padding:0 24px;height:60px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px">
<span style="display:flex;align-items:center;gap:10px"><span style="width:32px;height:32px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">PD</span><span><strong style="font-weight:600">Pieter Daems</strong><br><span style="font-size:12px;color:#6C7787">adult · recreational</span></span></span>
<span style="font-family:'IBM Plex Mono';font-size:13px">1989</span><span>Div 4 · skater</span><span><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">1 open</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">1 d</span>
</div>
<div style="display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr 90px;padding:0 24px;height:60px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px">
<span style="display:flex;align-items:center;gap:10px"><span style="width:32px;height:32px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">SK</span><span><strong style="font-weight:600">Sam Koninckx</strong><br><span style="font-size:12px;color:#6C7787">transfer · Antwerp Phantoms</span></span></span>
<span style="font-family:'IBM Plex Mono';font-size:13px">2010</span><span>U16 · forward</span><span><span style="background:#FDECEC;color:#B00021;border:1px solid #F5C9CE;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Transfer</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">1 d</span>
</div>
<div style="display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr 90px;padding:0 24px;height:60px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px">
<span style="display:flex;align-items:center;gap:10px"><span style="width:32px;height:32px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">AV</span><span><strong style="font-weight:600">Aya Van Loo</strong><br><span style="font-size:12px;color:#6C7787">via website form</span></span></span>
<span style="font-family:'IBM Plex Mono';font-size:13px">2018</span><span>U8 · skater</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Clean</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">6 h</span>
</div>
<div style="display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr 90px;padding:0 24px;height:60px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px">
<span style="display:flex;align-items:center;gap:10px"><span style="width:32px;height:32px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">RB</span><span><strong style="font-weight:600">Ruth Bekaert</strong><br><span style="font-size:12px;color:#6C7787">adult · Women Nat</span></span></span>
<span style="font-family:'IBM Plex Mono';font-size:13px">2004</span><span>Women · defence</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Clean</span></span><span style="font-family:'IBM Plex Mono';font-size:13px">3 h</span>
</div>
</div>
</div>
<div style="width:420px;background:#fff;flex-shrink:0;display:flex;flex-direction:column">
<div style="padding:20px 22px;border-bottom:1px solid #E3E6EB">
<div style="display:flex;align-items:center;gap:12px"><div style="width:46px;height:46px;border-radius:999px;background:#101E36;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:18px">IV</div><div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;line-height:1;text-transform:uppercase;color:#0B1220">Ines Vercauteren</div><div style="font-size:13px;color:#6C7787">Applied 12 Aug · U16 goalie</div></div></div>
</div>
<div style="flex:1;overflow:hidden;padding:18px 22px;display:flex;flex-direction:column;gap:18px">
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:10px">Checks</div>
<div style="display:flex;flex-direction:column;gap:8px">
<div style="display:flex;align-items:center;gap:10px;font-size:14px;color:#0B1220"><span style="width:20px;height:20px;border-radius:5px;background:#14A05A;display:flex;align-items:center;justify-content:center"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.4"><path d="M5 13l4 4 10-10"/></svg></span>Age eligible for U16</div>
<div style="display:flex;align-items:center;gap:10px;font-size:14px;color:#0B1220"><span style="width:20px;height:20px;border-radius:5px;background:#14A05A;display:flex;align-items:center;justify-content:center"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.4"><path d="M5 13l4 4 10-10"/></svg></span>Household contact verified</div>
<div style="display:flex;align-items:center;gap:10px;font-size:14px;color:#9A6410"><span style="width:20px;height:20px;border-radius:5px;background:#F0A22E;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Barlow Condensed';font-weight:800;font-size:13px">!</span>Medical form not uploaded</div>
<div style="display:flex;align-items:center;gap:10px;font-size:14px;color:#9A6410"><span style="width:20px;height:20px;border-radius:5px;background:#F0A22E;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Barlow Condensed';font-weight:800;font-size:13px">!</span>Federation licence to request</div>
</div>
</div>
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:10px">Place in</div>
<div style="display:flex;gap:8px;flex-wrap:wrap">
<span style="background:#0B1220;color:#fff;padding:8px 14px;border-radius:8px;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase">U16</span>
<span style="background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;padding:8px 14px;border-radius:8px;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase">U18</span>
<span style="background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;padding:8px 14px;border-radius:8px;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase">Women</span>
</div>
</div>
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:10px">Fee plan</div>
<div style="border:1px solid #E3E6EB;border-radius:10px;overflow:hidden">
<div style="padding:11px 14px;border-bottom:1px solid #EEF0F3;display:flex;justify-content:space-between;font-size:14px"><span style="color:#0B1220">Youth competitive 2026–27</span><span style="font-family:'IBM Plex Mono';color:#0B1220">€ 780,00</span></div>
<div style="padding:11px 14px;border-bottom:1px solid #EEF0F3;display:flex;justify-content:space-between;font-size:14px"><span style="color:#6C7787">Sibling discount</span><span style="font-family:'IBM Plex Mono';color:#6C7787">— € 0,00</span></div>
<div style="padding:11px 14px;display:flex;justify-content:space-between;font-size:14px;background:#F8F9FA"><span style="color:#0B1220;font-weight:600">Instalments</span><span style="font-family:'IBM Plex Mono';color:#0B1220">3 × € 260,00</span></div>
</div>
</div>
<div style="background:#F4F5F7;border-radius:10px;padding:12px 14px;font-size:14px;color:#3A4658;line-height:1.5">“Ines played four years with Antwerp. Looking for a club closer to home.” <span style="color:#6C7787">— note from the sign-up form</span></div>
</div>
<div style="padding:16px 22px;border-top:1px solid #E3E6EB;display:flex;gap:10px">
<div style="flex:1;height:46px;border-radius:8px;background:#14A05A;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase">Approve &amp; invoice</div>
<div style="height:46px;padding:0 16px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase">Hold</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#101E36;color:#fff;padding:3px 8px;border-radius:4px">D4</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Team &amp; staff assignment</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;font-family:Barlow,sans-serif">
<div style="width:236px;background:#0B1220;flex-shrink:0;display:flex;flex-direction:column;padding:20px 0">
<div style="display:flex;align-items:center;gap:10px;padding:0 18px 22px"><div style="width:28px;height:30px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1">Sharks Mechelen</div><div style="font-family:'IBM Plex Mono';font-size:10px;color:#5C6B85">RosterChief · management</div></div></div>
<div style="display:flex;flex-direction:column;gap:2px;padding:0 10px">
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Overview</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Members</div>
<div style="height:40px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Teams</div>
<div style="display:flex;flex-direction:column;gap:1px;padding:4px 0 4px 22px">
<div style="height:28px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">U8 · U10 · U12</div>
<div style="height:28px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">U14</div>
<div style="height:28px;display:flex;align-items:center;font-size:14px;color:#fff;font-weight:600">U16</div>
<div style="height:28px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">U18 · U23</div>
<div style="height:28px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Women Nat · NL</div>
<div style="height:28px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Div 2 · Div 3 · Div 4</div>
</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Calendar</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">News</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Finance</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Settings</div>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column;min-width:0">
<div style="position:relative;height:180px;flex-shrink:0;background:#0B1220">
<image-slot id="rc-d4-cover" shape="rect" placeholder="Team photo"></image-slot>
<div style="position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,18,32,.95) 30%,rgba(11,18,32,.4));pointer-events:none"></div>
<div style="position:absolute;left:28px;bottom:22px;color:#fff;pointer-events:none">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#14B8E8">Youth · competitive</div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:52px;line-height:.94;text-transform:uppercase">Sharks U16</div>
<div style="display:flex;gap:20px;margin-top:8px;font-size:14px;color:#93A0B4"><span>19 players</span><span>4 staff</span><span>Season 2026–2027</span><span style="color:#14A05A">Roster locked 1 Sep</span></div>
</div>
<div style="position:absolute;right:28px;bottom:22px;display:flex;gap:10px">
<div style="height:38px;padding:0 14px;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Export roster</div>
<div style="height:38px;padding:0 14px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase">Add player</div>
</div>
</div>
<div style="height:48px;background:#fff;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 28px;gap:24px;flex-shrink:0;font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase">
<span style="color:#0B1220;border-bottom:3px solid #E4002B;height:100%;display:flex;align-items:center">Roster</span>
<span style="color:#8B95A4">Staff</span><span style="color:#8B95A4">Schedule</span><span style="color:#8B95A4">Attendance</span><span style="color:#8B95A4">Results</span><span style="color:#8B95A4">Settings</span>
</div>
<div style="flex:1;overflow:hidden;padding:22px 28px;display:grid;grid-template-columns:1.55fr 1fr;gap:22px">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden;display:flex;flex-direction:column">
<div style="padding:14px 18px;border-bottom:1px solid #E3E6EB;display:flex;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Roster · 19</span><span style="flex:1"></span><span style="font-size:13px;color:#6C7787">Sort: number</span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:36px;align-items:center;background:#F8F9FA;border-bottom:1px solid #E3E6EB;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787"><span>No.</span><span>Player</span><span>Position</span><span>Shoots</span><span>Status</span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">1</span><span style="font-weight:600;color:#0B1220">Ruben Claes</span><span style="color:#3A4658">Goalie</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">L</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Ready</span></span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">4</span><span style="font-weight:600;color:#0B1220">Lotte Janssens</span><span style="color:#3A4658">Defence</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">R</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Ready</span></span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">6</span><span style="font-weight:600;color:#0B1220">Mika Dhondt</span><span style="color:#3A4658">Defence</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">L</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Ready</span></span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">8</span><span style="font-weight:600;color:#0B1220">Finn Vermeer</span><span style="color:#3A4658">Forward · C</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">L</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Ready</span></span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;background:#FFFDF6"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">9</span><span style="font-weight:600;color:#0B1220">Noor Somers</span><span style="color:#3A4658">Defence</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">R</span><span><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Medical</span></span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">12</span><span style="font-weight:600;color:#0B1220">Emma Peeters</span><span style="color:#3A4658">Forward</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">R</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Ready</span></span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">14</span><span style="font-weight:600;color:#0B1220">Milan De Wit</span><span style="color:#3A4658">Forward</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">L</span><span><span style="background:#FDECEC;color:#B00021;border:1px solid #F5C9CE;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Dues</span></span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">15</span><span style="font-weight:600;color:#0B1220">Wout Aerts</span><span style="color:#3A4658">Forward · C</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">R</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Ready</span></span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">17</span><span style="font-weight:600;color:#0B1220">Lars Somers <span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;color:#E4002B;letter-spacing:.08em">A</span></span><span style="color:#3A4658">Forward · LW</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">L</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Ready</span></span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">21</span><span style="font-weight:600;color:#0B1220">Jonas Verlinden <span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;color:#E4002B;letter-spacing:.08em">C</span></span><span style="color:#3A4658">Defence</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">R</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Ready</span></span></div>
<div style="display:grid;grid-template-columns:56px 2fr 1.2fr 1fr 1fr;padding:0 18px;height:46px;align-items:center;font-size:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:19px">23</span><span style="font-weight:600;color:#0B1220">Sofie Maes</span><span style="color:#3A4658">Forward · RW</span><span style="color:#6C7787;font-family:'IBM Plex Mono';font-size:13px">R</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:3px 8px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Ready</span></span></div>
</div>
<div style="display:flex;flex-direction:column;gap:18px;min-height:0">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden">
<div style="padding:14px 18px;border-bottom:1px solid #E3E6EB;display:flex;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Staff</span><span style="flex:1"></span><span style="font-size:13px;color:#E4002B;font-weight:600">+ Assign</span></div>
<div style="padding:12px 18px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="width:34px;height:34px;border-radius:999px;background:#E4002B;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">KS</div><div style="flex:1"><div style="font-size:14px;font-weight:600;color:#0B1220">Katrien Somers</div><div style="font-size:12px;color:#6C7787">Head coach · full app rights</div></div><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">since 2024</span></div>
<div style="padding:12px 18px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="width:34px;height:34px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">TV</div><div style="flex:1"><div style="font-size:14px;font-weight:600;color:#0B1220">Tom Verhoeven</div><div style="font-size:12px;color:#6C7787">Assistant coach</div></div><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">since 2025</span></div>
<div style="padding:12px 18px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="width:34px;height:34px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">HD</div><div style="flex:1"><div style="font-size:14px;font-weight:600;color:#0B1220">Hilde De Clerck</div><div style="font-size:12px;color:#6C7787">Team manager · no line-ups</div></div><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">since 2023</span></div>
<div style="padding:12px 18px;display:flex;align-items:center;gap:12px"><div style="width:34px;height:34px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px">GB</div><div style="flex:1"><div style="font-size:14px;font-weight:600;color:#0B1220">Gert Bosmans</div><div style="font-size:12px;color:#6C7787">Goalie coach · read only</div></div><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">since 2026</span></div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:18px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220;margin-bottom:14px">Squad make-up</div>
<div style="display:flex;gap:12px">
<div style="flex:1;text-align:center;background:#F4F5F7;border-radius:8px;padding:12px 6px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:30px;line-height:1;color:#0B1220">2</div><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Goalies</div></div>
<div style="flex:1;text-align:center;background:#F4F5F7;border-radius:8px;padding:12px 6px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:30px;line-height:1;color:#0B1220">6</div><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Defence</div></div>
<div style="flex:1;text-align:center;background:#F4F5F7;border-radius:8px;padding:12px 6px"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:30px;line-height:1;color:#0B1220">11</div><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Forwards</div></div>
</div>
<div style="margin-top:14px;font-size:13px;color:#6C7787;line-height:1.5">Federation minimum for a game sheet is 2 goalies and 12 skaters. <strong style="color:#0B1220">Met.</strong></div>
</div>
<div style="background:#0B1220;border-radius:12px;padding:18px;color:#fff">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px">Blocking the season start</div>
<div style="display:flex;flex-direction:column;gap:8px;font-size:14px">
<div style="display:flex;gap:10px;align-items:center"><span style="width:8px;height:8px;border-radius:2px;background:#F0A22E"></span><span style="flex:1">Noor Somers · medical form</span><span style="color:#14B8E8;font-family:'Barlow Condensed';font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px">Remind</span></div>
<div style="display:flex;gap:10px;align-items:center"><span style="width:8px;height:8px;border-radius:2px;background:#E4002B"></span><span style="flex:1">Milan De Wit · dues 60 days</span><span style="color:#14B8E8;font-family:'Barlow Condensed';font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px">Chase</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#101E36;color:#fff;padding:3px 8px;border-radius:4px">D5</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Season calendar planning</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;font-family:Barlow,sans-serif">
<div style="width:236px;background:#0B1220;flex-shrink:0;display:flex;flex-direction:column;padding:20px 0">
<div style="display:flex;align-items:center;gap:10px;padding:0 18px 22px"><div style="width:28px;height:30px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1">Sharks Mechelen</div><div style="font-family:'IBM Plex Mono';font-size:10px;color:#5C6B85">RosterChief · management</div></div></div>
<div style="display:flex;flex-direction:column;gap:2px;padding:0 10px">
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Overview</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Members</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Teams</div>
<div style="height:40px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Calendar</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">News</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Finance</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Settings</div>
</div>
<div style="padding:22px 18px 0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5C6B85;margin-bottom:10px">Ice resources</div>
<div style="display:flex;flex-direction:column;gap:8px;font-size:13px;color:#93A0B4">
<div style="display:flex;align-items:center;gap:8px"><span style="width:10px;height:10px;border-radius:2px;background:#14B8E8"></span>ISCM · main rink</div>
<div style="display:flex;align-items:center;gap:8px"><span style="width:10px;height:10px;border-radius:2px;background:#7C5CFC"></span>ISCM · training rink</div>
<div style="display:flex;align-items:center;gap:8px"><span style="width:10px;height:10px;border-radius:2px;background:#F0A22E"></span>Off-ice · gym</div>
<div style="display:flex;align-items:center;gap:8px"><span style="width:10px;height:10px;border-radius:2px;background:#E4002B"></span>Games</div>
</div>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column;min-width:0">
<div style="height:64px;background:#fff;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 28px;gap:14px;flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;text-transform:uppercase;color:#0B1220">Week 35</div>
<span style="font-family:'IBM Plex Mono';font-size:13px;color:#6C7787">24 – 30 Aug 2026</span>
<div style="display:flex;gap:4px"><span style="width:30px;height:30px;border:1px solid #E3E6EB;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#0B1220">‹</span><span style="width:30px;height:30px;border:1px solid #E3E6EB;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#0B1220">›</span></div>
<div style="flex:1"></div>
<div style="display:flex;border:1px solid #E3E6EB;border-radius:8px;overflow:hidden"><span style="height:34px;padding:0 12px;display:flex;align-items:center;background:#0B1220;color:#fff;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Week</span><span style="height:34px;padding:0 12px;display:flex;align-items:center;color:#6C7787;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Month</span><span style="height:34px;padding:0 12px;display:flex;align-items:center;color:#6C7787;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase">Season</span></div>
<div style="height:34px;padding:0 14px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Plan recurring</div>
</div>
<div style="flex:1;display:flex;min-height:0">
<div style="flex:1;overflow:hidden;padding:16px 0 0 20px">
<div style="display:grid;grid-template-columns:54px repeat(7,1fr);gap:6px;height:100%">
<div style="display:flex;flex-direction:column;padding-top:34px;font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">
<div style="height:64px">17:00</div><div style="height:64px">18:00</div><div style="height:64px">19:00</div><div style="height:64px">20:00</div><div style="height:64px">21:00</div><div style="height:64px">22:00</div><div style="height:64px">23:00</div>
</div>
<div style="display:flex;flex-direction:column"><div style="height:34px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">Mon 24</div><div style="flex:1;background:#fff;border:1px solid #E3E6EB;border-radius:8px;position:relative;padding:4px"><div style="position:absolute;left:4px;right:4px;top:150px;height:60px;background:#14B8E8;border-radius:6px;padding:6px 8px;color:#04212C"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">U18 + Future</div><div style="font-size:11px">19:15–20:15</div></div><div style="position:absolute;left:4px;right:4px;top:214px;height:60px;background:#7C5CFC;border-radius:6px;padding:6px 8px;color:#fff"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">Women Int</div><div style="font-size:11px">20:30–21:30</div></div></div></div>
<div style="display:flex;flex-direction:column"><div style="height:34px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">Tue 25</div><div style="flex:1;background:#fff;border:1px solid #E3E6EB;border-radius:8px;position:relative;padding:4px"><div style="position:absolute;left:4px;right:4px;top:32px;height:92px;background:#14B8E8;border-radius:6px;padding:6px 8px;color:#04212C"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">Ice 1 &amp; 2</div><div style="font-size:11px">17:30–19:00</div></div><div style="position:absolute;left:4px;right:4px;top:128px;height:110px;background:#0B1220;border-radius:6px;padding:6px 8px;color:#fff;border:2px solid #E4002B"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">U16 practice</div><div style="font-size:11px">19:15–21:00 · Ice 3 &amp; 4</div><div style="font-size:11px;color:#14B8E8;margin-top:4px">15 in · 2 out</div></div></div></div>
<div style="display:flex;flex-direction:column"><div style="height:34px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">Wed 26</div><div style="flex:1;background:#fff;border:1px solid #E3E6EB;border-radius:8px;position:relative;padding:4px"><div style="position:absolute;left:4px;right:4px;top:96px;height:60px;background:#7C5CFC;border-radius:6px;padding:6px 8px;color:#fff"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">Women Nat</div><div style="font-size:11px">18:30–19:30</div></div><div style="position:absolute;left:4px;right:4px;top:160px;height:60px;background:#14B8E8;border-radius:6px;padding:6px 8px;color:#04212C"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">U18</div><div style="font-size:11px">19:45–20:45</div></div><div style="position:absolute;left:4px;right:4px;top:288px;height:74px;background:#14B8E8;border-radius:6px;padding:6px 8px;color:#04212C"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">Div III</div><div style="font-size:11px">22:15–23:30</div></div></div></div>
<div style="display:flex;flex-direction:column"><div style="height:34px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">Thu 27</div><div style="flex:1;background:#fff;border:1px solid #E3E6EB;border-radius:8px;position:relative;padding:4px"><div style="position:absolute;left:4px;right:4px;top:16px;height:92px;background:#14B8E8;border-radius:6px;padding:6px 8px;color:#04212C"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">Ice 1 &amp; 2</div><div style="font-size:11px">17:15–18:45</div></div><div style="position:absolute;left:4px;right:4px;top:192px;height:82px;background:#E4002B;border-radius:6px;padding:6px 8px;color:#fff"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">Away · Herentals</div><div style="font-size:11px">20:00 · bus 16:00</div></div></div></div>
<div style="display:flex;flex-direction:column"><div style="height:34px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">Fri 28</div><div style="flex:1;background:#fff;border:1px solid #E3E6EB;border-radius:8px;position:relative;padding:4px"><div style="position:absolute;left:4px;right:4px;top:96px;height:60px;background:#F0A22E;border-radius:6px;padding:6px 8px;color:#3A2A05"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">Off-ice U16</div><div style="font-size:11px">18:30–19:30 · gym</div></div></div></div>
<div style="display:flex;flex-direction:column"><div style="height:34px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Sat 29</div><div style="flex:1;background:#fff;border:1px solid #E3E6EB;border-radius:8px;position:relative;padding:4px"><div style="position:absolute;left:4px;right:4px;top:64px;height:96px;background:#E4002B;border-radius:6px;padding:6px 8px;color:#fff"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">U16 vs Turnhout</div><div style="font-size:11px">18:30 · home</div><div style="font-size:11px;margin-top:4px;opacity:.85">Line-up open</div></div></div></div>
<div style="display:flex;flex-direction:column"><div style="height:34px;font-family:'Barlow Condensed';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Sun 30</div><div style="flex:1;background:#fff;border:1px solid #E3E6EB;border-radius:8px;position:relative;padding:4px"><div style="position:absolute;left:4px;right:4px;top:8px;height:120px;background:#F0A22E;border-radius:6px;padding:6px 8px;color:#3A2A05"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase">Club barbecue</div><div style="font-size:11px">12:00–17:00</div><div style="font-size:11px;margin-top:4px">Whole club · optional</div></div></div></div>
</div>
</div>
<div style="width:300px;flex-shrink:0;background:#fff;border-left:1px solid #E3E6EB;padding:18px 20px;display:flex;flex-direction:column;gap:18px">
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220;margin-bottom:12px">Plan recurring</div>
<div style="border:1px solid #E3E6EB;border-radius:10px;overflow:hidden">
<div style="padding:10px 12px;border-bottom:1px solid #EEF0F3"><div style="font-size:12px;color:#6C7787">Team</div><div style="font-size:15px;color:#0B1220;font-weight:500">U16</div></div>
<div style="padding:10px 12px;border-bottom:1px solid #EEF0F3"><div style="font-size:12px;color:#6C7787">Pattern</div><div style="font-size:15px;color:#0B1220;font-weight:500">Tue 19:15 · Thu 17:15</div></div>
<div style="padding:10px 12px;border-bottom:1px solid #EEF0F3"><div style="font-size:12px;color:#6C7787">Range</div><div style="font-size:15px;color:#0B1220;font-weight:500;font-family:'IBM Plex Mono'">01 Sep → 21 Dec</div></div>
<div style="padding:10px 12px"><div style="font-size:12px;color:#6C7787">Skip</div><div style="font-size:15px;color:#0B1220;font-weight:500">Autumn break, 25 Dec</div></div>
</div>
<div style="margin-top:10px;height:42px;border-radius:8px;background:#0B1220;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Generate 32 events</div>
</div>
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220;margin-bottom:12px">Conflicts</div>
<div style="display:flex;flex-direction:column;gap:8px">
<div style="background:#FDECEC;border:1px solid #F5C9CE;border-radius:8px;padding:10px 12px"><div style="font-size:14px;color:#B00021;font-weight:600">Thu 27 · double booking</div><div style="font-size:13px;color:#7A2531;line-height:1.4">Away game overlaps Ice 3 &amp; 4 for U16</div></div>
<div style="background:#FFF5E4;border:1px solid #F6E0B8;border-radius:8px;padding:10px 12px"><div style="font-size:14px;color:#9A6410;font-weight:600">3 players in two teams</div><div style="font-size:13px;color:#7A4E08;line-height:1.4">U16 / U18 Monday slot</div></div>
</div>
</div>
<div style="margin-top:auto;background:#F4F5F7;border-radius:10px;padding:12px;font-size:13px;color:#6C7787;line-height:1.5">Published events push to member apps and the public club site at the same time.</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#101E36;color:#fff;padding:3px 8px;border-radius:4px">D6</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Dues &amp; billing</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;font-family:Barlow,sans-serif">
<div style="width:236px;background:#0B1220;flex-shrink:0;display:flex;flex-direction:column;padding:20px 0">
<div style="display:flex;align-items:center;gap:10px;padding:0 18px 22px"><div style="width:28px;height:30px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1">Sharks Mechelen</div><div style="font-family:'IBM Plex Mono';font-size:10px;color:#5C6B85">RosterChief · management</div></div></div>
<div style="display:flex;flex-direction:column;gap:2px;padding:0 10px">
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Overview</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Members</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Teams</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Calendar</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">News</div>
<div style="height:40px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Finance</div>
<div style="display:flex;flex-direction:column;gap:1px;padding:4px 0 4px 22px">
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#fff;font-weight:600">Dues</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Fee plans</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Payments</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Sponsors</div>
</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Settings</div>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column;min-width:0">
<div style="height:64px;background:#fff;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 28px;gap:14px;flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;text-transform:uppercase;color:#0B1220">Dues · 2026–2027</div>
<div style="flex:1"></div>
<div style="height:34px;padding:0 12px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Export SEPA</div>
<div style="height:34px;padding:0 12px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Send reminders</div>
<div style="height:34px;padding:0 14px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">New invoice run</div>
</div>
<div style="flex:1;overflow:hidden;padding:22px 28px;display:flex;flex-direction:column;gap:20px">
<div style="display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:16px">
<div style="background:#0B1220;border-radius:12px;padding:18px;color:#fff">
<div style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#7C8AA0">Collected</div>
<div style="display:flex;align-items:baseline;gap:10px;margin-top:4px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:46px;line-height:1">€ 84.240</span><span style="font-size:15px;color:#14B8E8">68%</span></div>
<div style="height:8px;border-radius:999px;background:#1E2B42;margin-top:12px;overflow:hidden;display:flex"><div style="width:68%;background:#14A05A"></div><div style="width:14%;background:#F0A22E"></div><div style="width:8%;background:#E4002B"></div></div>
<div style="display:flex;gap:16px;margin-top:10px;font-size:13px;color:#93A0B4"><span>Target € 123.900</span><span>Last year 71% at this date</span></div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:18px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Open</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:40px;line-height:1;color:#0B1220;margin-top:4px">€ 30.020</div><div style="font-size:13px;color:#6C7787;margin-top:4px">86 invoices</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:18px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Overdue 30+</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:40px;line-height:1;color:#E4002B;margin-top:4px">€ 9.840</div><div style="font-size:13px;color:#6C7787;margin-top:4px">23 invoices · 19 households</div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:18px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Instalment plans</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:40px;line-height:1;color:#0B1220;margin-top:4px">41</div><div style="font-size:13px;color:#6C7787;margin-top:4px">3 defaulted</div></div>
</div>
<div style="flex:1;display:grid;grid-template-columns:1.7fr 1fr;gap:20px;min-height:0">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden;display:flex;flex-direction:column">
<div style="padding:14px 18px;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Invoices</span><span style="height:28px;padding:0 10px;border-radius:6px;background:#0B1220;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Overdue</span><span style="height:28px;padding:0 10px;border-radius:6px;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">All</span></div>
<div style="display:grid;grid-template-columns:110px 2fr 1.4fr 1fr 1fr 90px;padding:0 18px;height:36px;align-items:center;background:#F8F9FA;border-bottom:1px solid #E3E6EB;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787"><span>Invoice</span><span>Household</span><span>For</span><span>Amount</span><span>Due</span><span>Age</span></div>
<div style="display:grid;grid-template-columns:110px 2fr 1.4fr 1fr 1fr 90px;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787">2627-0184</span><span style="font-weight:600;color:#0B1220">De Wit</span><span style="color:#3A4658">Milan · U16</span><span style="font-family:'IBM Plex Mono'">€ 780,00</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#6C7787">15 Jun</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#B00021">68 d</span></div>
<div style="display:grid;grid-template-columns:110px 2fr 1.4fr 1fr 1fr 90px;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787">2627-0091</span><span style="font-weight:600;color:#0B1220">Willems</span><span style="color:#3A4658">Stan · U16</span><span style="font-family:'IBM Plex Mono'">€ 260,00</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#6C7787">01 Jul</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#B00021">52 d</span></div>
<div style="display:grid;grid-template-columns:110px 2fr 1.4fr 1fr 1fr 90px;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787">2627-0142</span><span style="font-weight:600;color:#0B1220">Aerts</span><span style="color:#3A4658">Wout · U16</span><span style="font-family:'IBM Plex Mono'">€ 780,00</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#6C7787">05 Jul</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#B00021">48 d</span></div>
<div style="display:grid;grid-template-columns:110px 2fr 1.4fr 1fr 1fr 90px;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787">2627-0067</span><span style="font-weight:600;color:#0B1220">Van Loo</span><span style="color:#3A4658">2 members · U8 + U12</span><span style="font-family:'IBM Plex Mono'">€ 1.180,00</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#6C7787">10 Jul</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#B00021">43 d</span></div>
<div style="display:grid;grid-template-columns:110px 2fr 1.4fr 1fr 1fr 90px;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787">2627-0203</span><span style="font-weight:600;color:#0B1220">Somers</span><span style="color:#3A4658">Noor · U16</span><span style="font-family:'IBM Plex Mono'">€ 420,00</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#6C7787">31 Aug</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#9A6410">due</span></div>
<div style="display:grid;grid-template-columns:110px 2fr 1.4fr 1fr 1fr 90px;padding:0 18px;height:46px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px"><span style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787">2627-0177</span><span style="font-weight:600;color:#0B1220">Bogaert</span><span style="color:#3A4658">Lore · U12</span><span style="font-family:'IBM Plex Mono'">€ 640,00</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#6C7787">20 Jul</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#B00021">33 d</span></div>
<div style="display:grid;grid-template-columns:110px 2fr 1.4fr 1fr 1fr 90px;padding:0 18px;height:46px;align-items:center;font-size:14px"><span style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787">2627-0058</span><span style="font-weight:600;color:#0B1220">Kestens</span><span style="color:#3A4658">Nora · U10</span><span style="font-family:'IBM Plex Mono'">€ 540,00</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#6C7787">22 Jul</span><span style="font-family:'IBM Plex Mono';font-size:13px;color:#B00021">31 d</span></div>
</div>
<div style="display:flex;flex-direction:column;gap:20px;min-height:0">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:18px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220;margin-bottom:16px">Aging</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div><div style="display:flex;justify-content:space-between;font-size:13px;color:#3A4658;margin-bottom:5px"><span>Not due</span><span style="font-family:'IBM Plex Mono'">€ 14.320</span></div><div style="height:10px;border-radius:999px;background:#EEF0F3;overflow:hidden"><div style="width:48%;height:100%;background:#0B1220"></div></div></div>
<div><div style="display:flex;justify-content:space-between;font-size:13px;color:#3A4658;margin-bottom:5px"><span>1–30 days</span><span style="font-family:'IBM Plex Mono'">€ 5.860</span></div><div style="height:10px;border-radius:999px;background:#EEF0F3;overflow:hidden"><div style="width:20%;height:100%;background:#F0A22E"></div></div></div>
<div><div style="display:flex;justify-content:space-between;font-size:13px;color:#3A4658;margin-bottom:5px"><span>31–60 days</span><span style="font-family:'IBM Plex Mono'">€ 6.180</span></div><div style="height:10px;border-radius:999px;background:#EEF0F3;overflow:hidden"><div style="width:21%;height:100%;background:#E4002B"></div></div></div>
<div><div style="display:flex;justify-content:space-between;font-size:13px;color:#3A4658;margin-bottom:5px"><span>60+ days</span><span style="font-family:'IBM Plex Mono'">€ 3.660</span></div><div style="height:10px;border-radius:999px;background:#EEF0F3;overflow:hidden"><div style="width:12%;height:100%;background:#8C0019"></div></div></div>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;padding:18px;flex:1;min-height:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220;margin-bottom:14px">Reminder ladder</div>
<div style="display:flex;flex-direction:column;gap:10px;font-size:14px;color:#3A4658">
<div style="display:flex;gap:10px;align-items:center"><span style="width:24px;height:24px;border-radius:6px;background:#EEF0F3;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;color:#4A5566">1</span>Friendly nudge in the app · day 7</div>
<div style="display:flex;gap:10px;align-items:center"><span style="width:24px;height:24px;border-radius:6px;background:#EEF0F3;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;color:#4A5566">2</span>Email to household · day 21</div>
<div style="display:flex;gap:10px;align-items:center"><span style="width:24px;height:24px;border-radius:6px;background:#FFF5E4;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;color:#9A6410">3</span>Coach informed · day 45</div>
<div style="display:flex;gap:10px;align-items:center"><span style="width:24px;height:24px;border-radius:6px;background:#FDECEC;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;color:#B00021">4</span>Game licence suspended · day 60</div>
</div>
<div style="margin-top:14px;background:#F4F5F7;border-radius:8px;padding:10px 12px;font-size:13px;color:#6C7787;line-height:1.45">Suspension is a club setting — never automatic for youth teams unless switched on.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#101E36;color:#fff;padding:3px 8px;border-radius:4px">D7</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Member detail</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;font-family:Barlow,sans-serif;position:relative">
<div style="width:236px;background:#0B1220;flex-shrink:0;display:flex;flex-direction:column;padding:20px 0">
<div style="display:flex;align-items:center;gap:10px;padding:0 18px 22px"><div style="width:28px;height:30px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1">Sharks Mechelen</div><div style="font-family:'IBM Plex Mono';font-size:10px;color:#5C6B85">RosterChief · management</div></div></div>
<div style="display:flex;flex-direction:column;gap:2px;padding:0 10px">
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Overview</div>
<div style="height:40px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Members</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Teams</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Calendar</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">News</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Finance</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Settings</div>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column;min-width:0">
<div style="height:64px;background:#fff;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 28px;gap:16px;flex-shrink:0"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;text-transform:uppercase;color:#0B1220">Members</div><span style="font-family:'IBM Plex Mono';font-size:13px;color:#6C7787">312 total</span></div>
<div style="flex:1;background:#fff;opacity:.5;padding:0 28px">
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr;height:40px;align-items:center;border-bottom:1px solid #E3E6EB;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787"><span></span><span>No.</span><span>Member</span><span>Team</span><span>Licence</span><span>Dues</span></div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220"><span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">17</span><span>Lars Somers</span><span>U16 · Forward</span><span style="font-family:'IBM Plex Mono';font-size:12px">BE-2411893</span><span>Paid</span></div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220;background:#FFF7F8"><span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">9</span><span>Noor Somers</span><span>U16 · Defence</span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#B00021">missing</span><span>Due</span></div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220"><span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">23</span><span>Sofie Maes</span><span>U16 · Forward</span><span style="font-family:'IBM Plex Mono';font-size:12px">BE-2411655</span><span>Paid</span></div>
<div style="display:grid;grid-template-columns:44px 60px 2fr 1.4fr 1fr 1fr;height:52px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:14px;color:#0B1220"><span></span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px">1</span><span>Ruben Claes</span><span>U16 · Goalie</span><span style="font-family:'IBM Plex Mono';font-size:12px">BE-2410322</span><span>Paid</span></div>
</div>
</div>
<div style="position:absolute;inset:0;background:rgba(11,18,32,.34)"></div>
<div style="position:absolute;top:0;right:0;bottom:0;width:620px;background:#fff;box-shadow:-24px 0 60px rgba(11,18,32,.2);display:flex;flex-direction:column">
<div style="padding:20px 26px;border-bottom:1px solid #E3E6EB;display:flex;align-items:flex-start;gap:16px">
<div style="width:56px;height:56px;border-radius:999px;background:#1B2B47;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:22px">NS</div>
<div style="flex:1">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:32px;line-height:1;text-transform:uppercase;color:#0B1220">Noor Somers</span><span style="font-family:'Barlow Condensed';font-weight:800;font-size:22px;color:#E4002B">#9</span></div>
<div style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787;margin-top:6px">member since 2021 · id 8f21·04 · U16 defence · household Somers</div>
</div>
<div style="display:flex;gap:8px"><div style="height:34px;padding:0 12px;border:1.5px solid #C9CFD8;border-radius:8px;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220">Message</div><div style="height:34px;width:34px;border:1.5px solid #C9CFD8;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#0B1220">✕</div></div>
</div>
<div style="height:44px;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 26px;gap:22px;font-family:'Barlow Condensed';font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0">
<span style="color:#0B1220;border-bottom:3px solid #E4002B;height:100%;display:flex;align-items:center">Profile</span><span style="color:#8B95A4">Attendance</span><span style="color:#8B95A4">Finance</span><span style="color:#8B95A4">Documents</span><span style="color:#8B95A4">History</span>
</div>
<div style="flex:1;overflow:hidden;padding:20px 26px;display:flex;flex-direction:column;gap:18px">
<div style="background:#FFF5E4;border:1px solid #F6E0B8;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:12px;flex-shrink:0"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:18px;color:#9A6410;line-height:1">!</span><div style="flex:1;font-size:14px;color:#7A4E08;line-height:1.45">Medical form and federation licence both outstanding — blocks the game sheet from 5 Sep.</div><div style="height:34px;padding:0 12px;border-radius:8px;background:#0B1220;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Request</div></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:18px;flex-shrink:0">
<div style="border:1px solid #E3E6EB;border-radius:10px;overflow:hidden">
<div style="padding:10px 14px;background:#F8F9FA;border-bottom:1px solid #E3E6EB;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Identity</div>
<div style="padding:12px 14px;display:flex;flex-direction:column;gap:9px;font-size:14px">
<div style="display:flex;justify-content:space-between"><span style="color:#6C7787">Born</span><span style="font-family:'IBM Plex Mono';color:#0B1220">2011-03-14</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#6C7787">Register no.</span><span style="font-family:'IBM Plex Mono';color:#0B1220">11.03.14-234.56</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#6C7787">Email</span><span style="color:#0B1220">noor.somers@example.be</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#6C7787">Mobile</span><span style="font-family:'IBM Plex Mono';color:#0B1220">+32 470 12 34 56</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#6C7787">Photo consent</span><span style="color:#0C7A43;font-weight:600">Given</span></div>
</div>
</div>
<div style="border:1px solid #E3E6EB;border-radius:10px;overflow:hidden">
<div style="padding:10px 14px;background:#F8F9FA;border-bottom:1px solid #E3E6EB;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Household · Somers</div>
<div style="padding:12px 14px;display:flex;flex-direction:column;gap:10px">
<div style="display:flex;align-items:center;gap:10px"><span style="width:28px;height:28px;border-radius:999px;background:#E4002B;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">KS</span><div style="flex:1;font-size:14px;color:#0B1220">Katrien Somers</div><span style="font-size:12px;color:#6C7787">mother · payer · coach</span></div>
<div style="display:flex;align-items:center;gap:10px"><span style="width:28px;height:28px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">DS</span><div style="flex:1;font-size:14px;color:#0B1220">Dirk Somers</div><span style="font-size:12px;color:#6C7787">father</span></div>
<div style="display:flex;align-items:center;gap:10px"><span style="width:28px;height:28px;border-radius:999px;background:#EEF0F3;color:#4A5566;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:12px">LS</span><div style="flex:1;font-size:14px;color:#0B1220">Lars Somers</div><span style="font-size:12px;color:#6C7787">brother · U16</span></div>
<div style="border-top:1px solid #EEF0F3;padding-top:8px;font-size:13px;color:#6C7787">Sibling discount applies to invoice 2627-0203</div>
</div>
</div>
</div>
<div style="border:1px solid #E3E6EB;border-radius:10px;overflow:hidden;flex-shrink:0">
<div style="padding:10px 14px;background:#F8F9FA;border-bottom:1px solid #E3E6EB;display:flex;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Season 2026–2027</span><span style="flex:1"></span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">attendance 78% · 24 of 31 events</span></div>
<div style="padding:14px;display:flex;gap:20px;align-items:center">
<div style="display:flex;gap:3px;align-items:flex-end;height:56px;flex:1">
<div style="flex:1;height:70%;background:#14A05A"></div><div style="flex:1;height:100%;background:#14A05A"></div><div style="flex:1;height:40%;background:#E4002B"></div><div style="flex:1;height:100%;background:#14A05A"></div><div style="flex:1;height:100%;background:#14A05A"></div><div style="flex:1;height:55%;background:#14A05A"></div><div style="flex:1;height:40%;background:#E4002B"></div><div style="flex:1;height:100%;background:#14A05A"></div><div style="flex:1;height:100%;background:#14A05A"></div><div style="flex:1;height:70%;background:#14A05A"></div><div style="flex:1;height:100%;background:#14A05A"></div><div style="flex:1;height:30%;background:#D6DAE1"></div>
</div>
<div style="display:flex;gap:18px">
<div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:28px;line-height:1;color:#0B1220">24</div><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Present</div></div>
<div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:28px;line-height:1;color:#E4002B">5</div><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">Absent</div></div>
<div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:28px;line-height:1;color:#F0A22E">2</div><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6C7787">No reply</div></div>
</div>
</div>
</div>
<div style="display:flex;gap:10px;flex-shrink:0">
<div style="flex:1;border:1px solid #E3E6EB;border-radius:10px;padding:12px 14px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Open balance</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;line-height:1.1;color:#0B1220">€ 420,00</div></div>
<div style="flex:1;border:1px solid #E3E6EB;border-radius:10px;padding:12px 14px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">Plan</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;line-height:1.1;color:#0B1220">3 × € 260</div></div>
<div style="flex:1;border:1px solid #E3E6EB;border-radius:10px;padding:12px 14px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787">App</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;line-height:1.1;color:#0B1220">Active</div></div>
</div>
</div>
<div style="padding:16px 26px;border-top:1px solid #E3E6EB;display:flex;gap:10px;align-items:center">
<div style="height:44px;padding:0 18px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Save changes</div>
<div style="height:44px;padding:0 16px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase">Move team</div>
<div style="flex:1"></div>
<span style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#B00021">End membership</span>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#101E36;color:#fff;padding:3px 8px;border-radius:4px">D8</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">News — list &amp; editor</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;font-family:Barlow,sans-serif">
<div style="width:236px;background:#0B1220;flex-shrink:0;display:flex;flex-direction:column;padding:20px 0">
<div style="display:flex;align-items:center;gap:10px;padding:0 18px 22px"><div style="width:28px;height:30px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1">Sharks Mechelen</div><div style="font-family:'IBM Plex Mono';font-size:10px;color:#5C6B85">RosterChief · management</div></div></div>
<div style="display:flex;flex-direction:column;gap:2px;padding:0 10px">
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Overview</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Members</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Teams</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Calendar</div>
<div style="height:40px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">News</div>
<div style="display:flex;flex-direction:column;gap:1px;padding:4px 0 4px 22px">
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#fff;font-weight:600">Posts</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Drafts <span style="margin-left:8px;background:#1B2B47;color:#93A0B4;border-radius:999px;padding:1px 7px;font-size:11px">3</span></div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Categories</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Website pages</div>
</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Finance</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Settings</div>
</div>
</div>
<div style="width:400px;flex-shrink:0;background:#fff;border-right:1px solid #E3E6EB;display:flex;flex-direction:column">
<div style="height:64px;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;text-transform:uppercase;color:#0B1220">News</div><div style="flex:1"></div><div style="height:34px;padding:0 12px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">New post</div></div>
<div style="height:44px;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 20px;gap:6px;flex-shrink:0"><span style="height:28px;padding:0 10px;border-radius:6px;background:#0B1220;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">All 42</span><span style="height:28px;padding:0 10px;border-radius:6px;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Drafts 3</span><span style="height:28px;padding:0 10px;border-radius:6px;border:1px solid #E3E6EB;color:#6C7787;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Scheduled 1</span></div>
<div style="flex:1;overflow:hidden">
<div style="padding:14px 20px;border-bottom:1px solid #EEF0F3;background:#FFF7F8;border-left:3px solid #E4002B"><div style="display:flex;gap:10px;align-items:center;margin-bottom:4px"><span style="background:#EEF0F3;color:#4A5566;border:1px solid #DDE1E7;padding:2px 7px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Draft</span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">edited 4 min ago</span></div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:20px;line-height:1.05;text-transform:uppercase;color:#0B1220">U16 takes the derby in Leuven</div><div style="font-size:13px;color:#6C7787;margin-top:3px">Katrien S. · U16 · game report</div></div>
<div style="padding:14px 20px;border-bottom:1px solid #EEF0F3"><div style="display:flex;gap:10px;align-items:center;margin-bottom:4px"><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:2px 7px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Live</span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">15 Aug · 1.204 reads</span></div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:20px;line-height:1.05;text-transform:uppercase;color:#0B1220">Signed: Kolbrun Bjornsdottir</div><div style="font-size:13px;color:#6C7787;margin-top:3px">Bernard S. · Sharks Women · transfers</div></div>
<div style="padding:14px 20px;border-bottom:1px solid #EEF0F3"><div style="display:flex;gap:10px;align-items:center;margin-bottom:4px"><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:2px 7px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Live</span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">10 Aug · 890 reads</span></div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:20px;line-height:1.05;text-transform:uppercase;color:#0B1220">Women ready for a new season</div><div style="font-size:13px;color:#6C7787;margin-top:3px">Bernard S. · Sharks Women</div></div>
<div style="padding:14px 20px;border-bottom:1px solid #EEF0F3"><div style="display:flex;gap:10px;align-items:center;margin-bottom:4px"><span style="background:#EAF7FC;color:#0A6F91;border:1px solid #C3E7F4;padding:2px 7px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Scheduled</span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">01 Sep · 08:00</span></div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:20px;line-height:1.05;text-transform:uppercase;color:#0B1220">Practice schedule 2026–2027</div><div style="font-size:13px;color:#6C7787;margin-top:3px">Bernard S. · club · practical</div></div>
<div style="padding:14px 20px;border-bottom:1px solid #EEF0F3"><div style="display:flex;gap:10px;align-items:center;margin-bottom:4px"><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:2px 7px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Live</span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">07 Aug · 1.633 reads</span></div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:20px;line-height:1.05;text-transform:uppercase;color:#0B1220">New season, new Sharks</div><div style="font-size:13px;color:#6C7787;margin-top:3px">Bernard S. · club</div></div>
<div style="padding:14px 20px"><div style="display:flex;gap:10px;align-items:center;margin-bottom:4px"><span style="background:#EEF0F3;color:#4A5566;border:1px solid #DDE1E7;padding:2px 7px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Draft</span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">edited 2 d ago</span></div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:20px;line-height:1.05;text-transform:uppercase;color:#0B1220">Volunteers wanted · U10 tournament</div><div style="font-size:13px;color:#6C7787;margin-top:3px">Hilde D. · club</div></div>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column;min-width:0;background:#F4F5F7">
<div style="height:64px;background:#fff;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 24px;gap:12px;flex-shrink:0">
<span style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787">draft · autosaved 4 min ago</span>
<div style="flex:1"></div>
<div style="height:34px;padding:0 12px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Preview</div>
<div style="height:34px;padding:0 12px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Schedule</div>
<div style="height:34px;padding:0 14px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Publish</div>
</div>
<div style="flex:1;display:flex;min-height:0">
<div style="flex:1;overflow:hidden;padding:24px 28px;min-width:0">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;height:100%;overflow:hidden;display:flex;flex-direction:column">
<div style="height:190px;position:relative;flex-shrink:0"><image-slot id="rc-d8-cover" shape="rect" placeholder="Cover photo · 16:9"></image-slot></div>
<div style="padding:22px 28px;flex:1;min-height:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#E4002B">U16 · game report</div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:42px;line-height:1;text-transform:uppercase;color:#0B1220;margin-top:8px">U16 takes the derby in Leuven</div>
<div style="height:3px;width:56px;background:#E4002B;margin:16px 0 18px"></div>
<p style="margin:0 0 14px;font-size:18px;line-height:1.5;font-weight:600;color:#0B1220">Two goals from Sofie Maes and a clean third period gave the U16 a 4—2 win in Leuven.</p>
<p style="margin:0 0 14px;font-size:16px;line-height:1.6;color:#3A4658">The first period was even, with Ruben Claes keeping the score level after a shaky start. From the second period on the pressure told: Maes converted twice inside four minutes, and Verlinden closed the game out with a shorthanded goal.</p>
<p style="margin:0;font-size:16px;line-height:1.6;color:#3A4658">Next home game is Saturday against Turnhout, face-off 18:30 at ISC Mechelen.<span style="display:inline-block;width:2px;height:18px;background:#E4002B;vertical-align:-3px;margin-left:2px"></span></p>
</div>
</div>
</div>
<div style="width:300px;flex-shrink:0;background:#fff;border-left:1px solid #E3E6EB;padding:20px;display:flex;flex-direction:column;gap:18px">
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:10px">Audience</div>
<div style="border:1px solid #E3E6EB;border-radius:10px;overflow:hidden">
<div style="padding:11px 13px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:10px"><span style="flex:1;font-size:14px;color:#0B1220">U16 families</span><div style="width:40px;height:22px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 13px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:10px"><span style="flex:1;font-size:14px;color:#0B1220">Whole club</span><div style="width:40px;height:22px;border-radius:999px;background:#D6DAE1;position:relative"><div style="position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 13px;display:flex;align-items:center;gap:10px"><span style="flex:1;font-size:14px;color:#0B1220">Public website</span><div style="width:40px;height:22px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
</div>
</div>
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:10px">Push notification</div>
<div style="border:1px solid #E3E6EB;border-radius:10px;padding:12px 13px;font-size:13px;color:#3A4658;line-height:1.5">Sends to <strong style="color:#0B1220">38 households</strong> · silent for members who muted news.</div>
</div>
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6C7787;margin-bottom:10px">Tags</div>
<div style="display:flex;flex-wrap:wrap;gap:6px">
<span style="background:#0B1220;color:#fff;padding:6px 11px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">U16</span>
<span style="background:#0B1220;color:#fff;padding:6px 11px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Game report</span>
<span style="background:#F4F5F7;border:1px solid #E3E6EB;color:#6C7787;padding:6px 11px;border-radius:999px;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">+ add</span>
</div>
</div>
<div style="margin-top:auto;background:#F4F5F7;border-radius:10px;padding:12px;font-size:13px;color:#6C7787;line-height:1.5">Coaches can post to their own team from the app. Club-wide and website posts need a news role.</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#101E36;color:#fff;padding:3px 8px;border-radius:4px">D9</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Club identity &amp; branding</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;font-family:Barlow,sans-serif">
<div style="width:236px;background:#0B1220;flex-shrink:0;display:flex;flex-direction:column;padding:20px 0">
<div style="display:flex;align-items:center;gap:10px;padding:0 18px 22px"><div style="width:28px;height:30px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1">Sharks Mechelen</div><div style="font-family:'IBM Plex Mono';font-size:10px;color:#5C6B85">RosterChief · management</div></div></div>
<div style="display:flex;flex-direction:column;gap:2px;padding:0 10px">
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Overview</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Members</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Teams</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Calendar</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">News</div>
<div style="height:40px;border-radius:8px;color:#93A0B4;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Finance</div>
<div style="height:40px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase">Settings</div>
<div style="display:flex;flex-direction:column;gap:1px;padding:4px 0 4px 22px">
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#fff;font-weight:600">Identity &amp; branding</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Seasons</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Roles &amp; rights</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Fee plans</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Locations</div>
<div style="height:30px;display:flex;align-items:center;font-size:14px;color:#7C8AA0">Notifications</div>
</div>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column;min-width:0">
<div style="height:64px;background:#fff;border-bottom:1px solid #E3E6EB;display:flex;align-items:center;padding:0 28px;gap:14px;flex-shrink:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:24px;text-transform:uppercase;color:#0B1220">Identity &amp; branding</div>
<div style="flex:1"></div>
<span style="font-family:'IBM Plex Mono';font-size:12px;color:#9A6410">unsaved changes</span>
<div style="height:34px;padding:0 12px;border-radius:8px;border:1.5px solid #C9CFD8;color:#0B1220;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Discard</div>
<div style="height:34px;padding:0 14px;border-radius:8px;background:#E4002B;color:#fff;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase">Save</div>
</div>
<div style="flex:1;overflow:hidden;padding:24px 28px;display:grid;grid-template-columns:1fr 1fr;gap:24px">
<div style="display:flex;flex-direction:column;gap:20px;min-height:0">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px">
<div style="padding:14px 18px;border-bottom:1px solid #E3E6EB;font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Club</div>
<div style="padding:18px;display:flex;flex-direction:column;gap:14px">
<div style="display:flex;gap:14px">
<div style="flex:2"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">Club name</div><div style="border:1px solid #D6DAE1;border-radius:8px;padding:10px 12px;font-size:15px;color:#0B1220">Sharks Mechelen</div></div>
<div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">Short code</div><div style="border:1px solid #D6DAE1;border-radius:8px;padding:10px 12px;font-family:'IBM Plex Mono';font-size:15px;color:#0B1220">SHKM</div></div>
</div>
<div><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">Tagline</div><div style="border:1px solid #D6DAE1;border-radius:8px;padding:10px 12px;font-size:15px;color:#0B1220">Fear the Sharks</div></div>
<div style="display:flex;gap:14px">
<div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">Website</div><div style="border:1px solid #D6DAE1;border-radius:8px;padding:10px 12px;font-family:'IBM Plex Mono';font-size:14px;color:#0B1220">sharksmechelen.be</div></div>
<div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">Federation</div><div style="border:1px solid #D6DAE1;border-radius:8px;padding:10px 12px;font-size:15px;color:#0B1220">RBIHF</div></div>
</div>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px">
<div style="padding:14px 18px;border-bottom:1px solid #E3E6EB;display:flex;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Colours</span><span style="flex:1"></span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#6C7787">accents only</span></div>
<div style="padding:18px;display:flex;flex-direction:column;gap:16px">
<div style="display:flex;gap:14px">
<div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">Primary</div><div style="display:flex;align-items:center;gap:10px;border:1px solid #D6DAE1;border-radius:8px;padding:8px 10px"><span style="width:26px;height:26px;border-radius:6px;background:#0B1220"></span><span style="font-family:'IBM Plex Mono';font-size:14px;color:#0B1220">#0B1220</span></div></div>
<div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">Secondary</div><div style="display:flex;align-items:center;gap:10px;border:1px solid #D6DAE1;border-radius:8px;padding:8px 10px"><span style="width:26px;height:26px;border-radius:6px;background:#E4002B"></span><span style="font-family:'IBM Plex Mono';font-size:14px;color:#0B1220">#E4002B</span></div></div>
</div>
<div>
<div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:8px">Contrast check</div>
<div style="display:flex;gap:8px">
<div style="flex:1;background:#E4002B;color:#fff;border-radius:8px;padding:10px 12px;font-size:13px;display:flex;justify-content:space-between"><span>White on secondary</span><span style="font-family:'IBM Plex Mono'">5.1 ✓</span></div>
<div style="flex:1;background:#0B1220;color:#fff;border-radius:8px;padding:10px 12px;font-size:13px;display:flex;justify-content:space-between"><span>White on primary</span><span style="font-family:'IBM Plex Mono'">16.4 ✓</span></div>
</div>
</div>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px">
<div style="padding:14px 18px;border-bottom:1px solid #E3E6EB;font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Logo &amp; wordmark</div>
<div style="padding:18px;display:flex;gap:14px">
<div style="width:120px"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">Crest · SVG</div><div style="height:76px;border:1.5px dashed #C9CFD8;border-radius:8px;display:flex;align-items:center;justify-content:center"><div style="width:40px;height:44px;background:#0B1220;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div></div></div>
<div style="flex:1"><div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">Wordmark</div><div style="height:76px;border:1.5px dashed #C9CFD8;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:26px;letter-spacing:.06em;text-transform:uppercase;color:#0B1220">Sharks Mechelen</span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">SVG · 240×40 · replace</span></div></div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:20px;min-height:0">
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px;flex:1;min-height:0;display:flex;flex-direction:column">
<div style="padding:14px 18px;border-bottom:1px solid #E3E6EB;display:flex;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Live preview</span><span style="flex:1"></span><div style="display:flex;border:1px solid #E3E6EB;border-radius:6px;overflow:hidden"><span style="padding:5px 10px;background:#0B1220;color:#fff;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">App</span><span style="padding:5px 10px;color:#6C7787;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Website</span><span style="padding:5px 10px;color:#6C7787;font-family:'Barlow Condensed';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase">Email</span></div></div>
<div style="padding:20px;display:flex;gap:20px;flex:1;min-height:0">
<div style="width:232px;flex-shrink:0;border-radius:22px;overflow:hidden;border:6px solid #0B1220;background:#F4F5F7;display:flex;flex-direction:column">
<div style="background:#0B1220;padding:14px 12px 12px;color:#fff">
<div style="display:flex;align-items:center;gap:8px"><div style="width:20px;height:22px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase">Sharks Mechelen</div></div>
<div style="display:flex;background:#1B2B47;border-radius:999px;padding:3px;gap:3px;margin-top:8px"><div style="flex:1;height:24px;border-radius:999px;background:#fff;color:#0B1220;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Member</div><div style="flex:1;height:24px;border-radius:999px;color:#93A0B4;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase">Coach</div></div>
</div>
<div style="padding:10px;display:flex;flex-direction:column;gap:8px">
<div style="background:#0B1220;border-radius:8px;padding:10px;color:#fff"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#14B8E8">Next up</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;line-height:1.05;text-transform:uppercase">U16 vs Leuven</div><div style="height:24px;border-radius:5px;background:#14A05A;margin-top:8px"></div></div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:8px;padding:10px"><div style="height:8px;width:60%;background:#EEF0F3;border-radius:99px"></div><div style="height:8px;width:80%;background:#EEF0F3;border-radius:99px;margin-top:6px"></div></div>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column;gap:12px;min-width:0">
<div style="border:1px solid #E3E6EB;border-radius:10px;overflow:hidden">
<div style="background:#0B1220;padding:10px 12px;display:flex;align-items:center;gap:8px"><div style="width:18px;height:20px;background:#E4002B;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff">Sharks Mechelen</span><span style="flex:1"></span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#93A0B4">Teams · Club</span><span style="background:#E4002B;color:#fff;padding:3px 7px;border-radius:4px;font-family:'Barlow Condensed';font-weight:800;font-size:10px;letter-spacing:.08em;text-transform:uppercase">Join</span></div>
<div style="padding:14px 12px;background:#F8F9FA"><div style="font-family:'Barlow Condensed';font-weight:800;font-size:22px;line-height:.98;text-transform:uppercase;color:#0B1220">#Fear the Sharks</div><div style="height:6px;width:70%;background:#E3E6EB;border-radius:99px;margin-top:8px"></div><div style="height:6px;width:50%;background:#E3E6EB;border-radius:99px;margin-top:5px"></div></div>
</div>
<div style="border:1px solid #E3E6EB;border-radius:10px;padding:12px">
<div style="font-family:'Barlow Condensed';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6C7787;margin-bottom:8px">Where the brand shows up</div>
<div style="display:flex;flex-direction:column;gap:6px;font-size:13px;color:#3A4658">
<div style="display:flex;gap:8px;align-items:center"><span style="width:8px;height:8px;border-radius:2px;background:#E4002B"></span>App header, active tab, primary buttons</div>
<div style="display:flex;gap:8px;align-items:center"><span style="width:8px;height:8px;border-radius:2px;background:#E4002B"></span>Public site nav, hero, join CTA</div>
<div style="display:flex;gap:8px;align-items:center"><span style="width:8px;height:8px;border-radius:2px;background:#E4002B"></span>Invoice header and reminder emails</div>
<div style="display:flex;gap:8px;align-items:center"><span style="width:8px;height:8px;border-radius:2px;background:#8B95A4"></span>Never: status colours, tables, form fields</div>
</div>
</div>
</div>
</div>
</div>
<div style="background:#fff;border:1px solid #E3E6EB;border-radius:12px">
<div style="padding:14px 18px;border-bottom:1px solid #E3E6EB;display:flex;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Advanced</span><span style="flex:1"></span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#6C7787">enabled by RosterChief</span></div>
<div style="padding:16px 18px;display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-size:15px;color:#0B1220;font-weight:600">Custom stylesheet · public site</div><div style="font-size:13px;color:#6C7787">sharks.css · 4,2 kB · edited 07 Aug</div></div><div style="height:32px;padding:0 12px;border:1.5px solid #C9CFD8;border-radius:8px;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220">Edit</div></div>
<div style="display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-size:15px;color:#0B1220;font-weight:600">Own domain</div><div style="font-size:13px;color:#0C7A43">sharksmechelen.be · verified</div></div><div style="width:40px;height:22px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<sc-if value="{{ showPanel }}" hint-placeholder-val="{{ true }}"><section id="sec-panel" style="padding:72px 64px;background:#F4F5F7;border-bottom:1px solid #D6DAE1">
<div style="display:flex;align-items:flex-end;gap:16px;margin-bottom:8px">
<span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:4px 9px;border-radius:4px">04</span>
<h2 style="margin:0;font-family:'Barlow Condensed';font-weight:800;font-size:56px;line-height:.95;text-transform:uppercase;color:#0B1220">Control panel — internal</h2>
</div>
<p style="margin:0 0 44px;max-width:760px;color:#6C7787;font-size:17px;line-height:1.5;text-wrap:pretty">Three or four people run every club on the platform from here. Industrial by intent: square corners, hairline rules, monospaced figures, no decoration — a dark command bar over a dense light workspace.</p>
<div style="display:flex;flex-direction:column;gap:52px">
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:3px 8px;border-radius:4px">P1</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Platform health</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:8px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;flex-direction:column;font-family:Barlow,sans-serif">
<div style="height:52px;background:#0B1220;display:flex;align-items:center;padding:0 20px;gap:20px;flex-shrink:0">
<div style="display:flex;align-items:center;gap:9px"><div style="width:22px;height:24px;background:#fff;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#fff">RosterChief</span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#5C6B85">control</span></div>
<div style="display:flex;gap:2px;font-family:'IBM Plex Mono';font-size:12px">
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#fff;background:#1B2B47;border-bottom:2px solid #14B8E8">platform</span>
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#7C8AA0">clubs</span>
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#7C8AA0">features</span>
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#7C8AA0">billing</span>
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#7C8AA0">admins</span>
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#7C8AA0">jobs</span>
</div>
<div style="flex:1"></div>
<div style="height:30px;padding:0 10px;border:1px solid #2C3B56;border-radius:4px;display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono';font-size:11px;color:#7C8AA0">⌘K run command</div>
<div style="display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono';font-size:11px;color:#14A05A"><span style="width:7px;height:7px;border-radius:99px;background:#14A05A"></span>all systems ok</div>
</div>
<div style="height:34px;background:#fff;border-bottom:1px solid #D6DAE1;display:flex;align-items:center;padding:0 20px;gap:16px;flex-shrink:0;font-family:'IBM Plex Mono';font-size:11px;color:#6C7787">
<span>prod · eu-west-1</span><span style="color:#D6DAE1">|</span><span>deploy v3.0.1 · 4 d ago</span><span style="color:#D6DAE1">|</span><span>p95 218 ms</span><span style="color:#D6DAE1">|</span><span>queue 3</span><span style="color:#D6DAE1">|</span><span style="color:#B00021">2 alerts</span>
</div>
<div style="flex:1;overflow:hidden;padding:18px 20px;display:flex;flex-direction:column;gap:16px">
<div style="display:grid;grid-template-columns:repeat(6,1fr);gap:12px">
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;padding:14px"><div style="font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">clubs live</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:38px;line-height:1;color:#0B1220;margin-top:2px">34</div><div style="font-family:'IBM Plex Mono';font-size:11px;color:#14A05A">+3 this quarter</div></div>
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;padding:14px"><div style="font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">members</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:38px;line-height:1;color:#0B1220;margin-top:2px">11.482</div><div style="font-family:'IBM Plex Mono';font-size:11px;color:#14A05A">+412 · 30 d</div></div>
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;padding:14px"><div style="font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">wau</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:38px;line-height:1;color:#0B1220;margin-top:2px">6.907</div><div style="font-family:'IBM Plex Mono';font-size:11px;color:#6C7787">60% of members</div></div>
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;padding:14px"><div style="font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">mrr</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:38px;line-height:1;color:#0B1220;margin-top:2px">€ 8.940</div><div style="font-family:'IBM Plex Mono';font-size:11px;color:#14A05A">+€ 620</div></div>
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;padding:14px"><div style="font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">zero-event clubs</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:38px;line-height:1;color:#F0A22E;margin-top:2px">4</div><div style="font-family:'IBM Plex Mono';font-size:11px;color:#6C7787">no events 14 d</div></div>
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;padding:14px"><div style="font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6C7787">failed jobs</div><div style="font-family:'Barlow Condensed';font-weight:800;font-size:38px;line-height:1;color:#E4002B;margin-top:2px">2</div><div style="font-family:'IBM Plex Mono';font-size:11px;color:#6C7787">sepa export</div></div>
</div>
<div style="display:grid;grid-template-columns:1.6fr 1fr;gap:16px;flex:1;min-height:0">
<div style="display:flex;flex-direction:column;gap:16px;min-height:0">
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;padding:16px 18px">
<div style="display:flex;align-items:center;margin-bottom:14px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220">Sign-ups · 12 weeks</span><span style="flex:1"></span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#6C7787">youth ▨ · adult ▧</span></div>
<div style="display:flex;align-items:flex-end;gap:8px;height:132px">
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:22px;background:#14B8E8"></div><div style="height:38px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:18px;background:#14B8E8"></div><div style="height:44px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:26px;background:#14B8E8"></div><div style="height:34px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:20px;background:#14B8E8"></div><div style="height:52px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:30px;background:#14B8E8"></div><div style="height:60px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:24px;background:#14B8E8"></div><div style="height:48px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:34px;background:#14B8E8"></div><div style="height:70px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:28px;background:#14B8E8"></div><div style="height:82px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:40px;background:#14B8E8"></div><div style="height:96px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:36px;background:#14B8E8"></div><div style="height:74px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:44px;background:#14B8E8"></div><div style="height:88px;background:#0B1220"></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px"><div style="height:30px;background:#14B8E8"></div><div style="height:58px;background:#0B1220"></div></div>
</div>
<div style="display:flex;justify-content:space-between;margin-top:8px;font-family:'IBM Plex Mono';font-size:10px;color:#8B95A4"><span>w23</span><span>w26</span><span>w29</span><span>w32</span><span>w35</span></div>
</div>
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;flex:1;min-height:0;display:flex;flex-direction:column">
<div style="padding:12px 18px;border-bottom:1px solid #D6DAE1;display:flex;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220">Club health</span><span style="flex:1"></span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#6C7787">sorted by risk</span></div>
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;padding:0 18px;height:30px;align-items:center;background:#F8F9FA;border-bottom:1px solid #E3E6EB;font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787"><span>club</span><span>members</span><span>wau</span><span>events 30d</span><span>plan</span><span>risk</span></div>
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;padding:0 18px;height:40px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:13px;color:#0B1220"><span style="font-weight:600">IHC Turnhout</span><span style="font-family:'IBM Plex Mono'">148</span><span style="font-family:'IBM Plex Mono';color:#B00021">21</span><span style="font-family:'IBM Plex Mono';color:#B00021">0</span><span style="font-family:'IBM Plex Mono'">club</span><span><span style="background:#FDECEC;color:#B00021;border:1px solid #F5C9CE;padding:2px 7px;font-family:'IBM Plex Mono';font-size:10px;text-transform:uppercase">high</span></span></div>
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;padding:0 18px;height:40px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:13px;color:#0B1220"><span style="font-weight:600">Leuven Chiefs</span><span style="font-family:'IBM Plex Mono'">203</span><span style="font-family:'IBM Plex Mono';color:#9A6410">78</span><span style="font-family:'IBM Plex Mono'">14</span><span style="font-family:'IBM Plex Mono'">club</span><span><span style="background:#FFF5E4;color:#9A6410;border:1px solid #F6E0B8;padding:2px 7px;font-family:'IBM Plex Mono';font-size:10px;text-transform:uppercase">watch</span></span></div>
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;padding:0 18px;height:40px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:13px;color:#0B1220"><span style="font-weight:600">Herentals HC</span><span style="font-family:'IBM Plex Mono'">176</span><span style="font-family:'IBM Plex Mono'">104</span><span style="font-family:'IBM Plex Mono'">22</span><span style="font-family:'IBM Plex Mono'">club</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:2px 7px;font-family:'IBM Plex Mono';font-size:10px;text-transform:uppercase">ok</span></span></div>
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;padding:0 18px;height:40px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:13px;color:#0B1220;background:#F4F9FF"><span style="font-weight:600">Sharks Mechelen</span><span style="font-family:'IBM Plex Mono'">312</span><span style="font-family:'IBM Plex Mono'">241</span><span style="font-family:'IBM Plex Mono'">38</span><span style="font-family:'IBM Plex Mono'">club+site</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:2px 7px;font-family:'IBM Plex Mono';font-size:10px;text-transform:uppercase">ok</span></span></div>
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;padding:0 18px;height:40px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:13px;color:#0B1220"><span style="font-weight:600">Gent Rockets</span><span style="font-family:'IBM Plex Mono'">98</span><span style="font-family:'IBM Plex Mono'">61</span><span style="font-family:'IBM Plex Mono'">11</span><span style="font-family:'IBM Plex Mono'">starter</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:2px 7px;font-family:'IBM Plex Mono';font-size:10px;text-transform:uppercase">ok</span></span></div>
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;padding:0 18px;height:40px;align-items:center;border-bottom:1px solid #EEF0F3;font-size:13px;color:#0B1220"><span style="font-weight:600">Brussels Bulldogs</span><span style="font-family:'IBM Plex Mono'">221</span><span style="font-family:'IBM Plex Mono'">158</span><span style="font-family:'IBM Plex Mono'">29</span><span style="font-family:'IBM Plex Mono'">club</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:2px 7px;font-family:'IBM Plex Mono';font-size:10px;text-transform:uppercase">ok</span></span></div>
<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;padding:0 18px;height:40px;align-items:center;font-size:13px;color:#0B1220"><span style="font-weight:600">Liège Bulldogs</span><span style="font-family:'IBM Plex Mono'">134</span><span style="font-family:'IBM Plex Mono'">88</span><span style="font-family:'IBM Plex Mono'">17</span><span style="font-family:'IBM Plex Mono'">starter</span><span><span style="background:#E6F6EE;color:#0C7A43;border:1px solid #BFE7D3;padding:2px 7px;font-family:'IBM Plex Mono';font-size:10px;text-transform:uppercase">ok</span></span></div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:16px;min-height:0">
<div style="background:#0B1220;border-radius:4px;padding:16px 18px;color:#fff">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px">Alerts</div>
<div style="display:flex;flex-direction:column;gap:10px;font-family:'IBM Plex Mono';font-size:12px">
<div style="border-left:2px solid #E4002B;padding-left:10px"><div style="color:#fff">sepa_export failed · 2×</div><div style="color:#7C8AA0">clubs: turnhout, gent · 06:12 UTC</div></div>
<div style="border-left:2px solid #F0A22E;padding-left:10px"><div style="color:#fff">turnhout · 0 events in 14 d</div><div style="color:#7C8AA0">onboarding stalled after import</div></div>
</div>
</div>
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;padding:16px 18px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220;margin-bottom:12px">Feature adoption</div>
<div style="display:flex;flex-direction:column;gap:10px;font-family:'IBM Plex Mono';font-size:11px;color:#3A4658">
<div><div style="display:flex;justify-content:space-between;margin-bottom:4px"><span>public_site</span><span>18/34</span></div><div style="height:6px;background:#EEF0F3"><div style="width:53%;height:100%;background:#0B1220"></div></div></div>
<div><div style="display:flex;justify-content:space-between;margin-bottom:4px"><span>online_payments</span><span>27/34</span></div><div style="height:6px;background:#EEF0F3"><div style="width:79%;height:100%;background:#0B1220"></div></div></div>
<div><div style="display:flex;justify-content:space-between;margin-bottom:4px"><span>lineups</span><span>21/34</span></div><div style="height:6px;background:#EEF0F3"><div style="width:62%;height:100%;background:#0B1220"></div></div></div>
<div><div style="display:flex;justify-content:space-between;margin-bottom:4px"><span>shop_beta</span><span>3/34</span></div><div style="height:6px;background:#EEF0F3"><div style="width:9%;height:100%;background:#14B8E8"></div></div></div>
</div>
</div>
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;padding:16px 18px;flex:1;min-height:0">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220;margin-bottom:12px">Job log</div>
<div style="display:flex;flex-direction:column;gap:7px;font-family:'IBM Plex Mono';font-size:11px">
<div style="display:flex;gap:8px"><span style="color:#8B95A4">09:40</span><span style="color:#14A05A">ok</span><span style="color:#3A4658">licence_sync rbihf · 214 rows</span></div>
<div style="display:flex;gap:8px"><span style="color:#8B95A4">09:00</span><span style="color:#14A05A">ok</span><span style="color:#3A4658">digest_email · 6.907 sent</span></div>
<div style="display:flex;gap:8px"><span style="color:#8B95A4">06:12</span><span style="color:#B00021">err</span><span style="color:#3A4658">sepa_export · turnhout</span></div>
<div style="display:flex;gap:8px"><span style="color:#8B95A4">06:12</span><span style="color:#B00021">err</span><span style="color:#3A4658">sepa_export · gent</span></div>
<div style="display:flex;gap:8px"><span style="color:#8B95A4">03:00</span><span style="color:#14A05A">ok</span><span style="color:#3A4658">backup_snapshot · 42 GB</span></div>
<div style="display:flex;gap:8px"><span style="color:#8B95A4">02:30</span><span style="color:#14A05A">ok</span><span style="color:#3A4658">attendance_rollup · 34 clubs</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<div style="display:flex;align-items:center;gap:10px"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;background:#0B1220;color:#fff;padding:3px 8px;border-radius:4px">P2</span><span style="font-family:'Barlow Condensed';font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#0B1220">Club provisioning &amp; feature flags</span></div>
<div style="width:1440px;height:900px;background:#F4F5F7;border-radius:8px;overflow:hidden;box-shadow:0 24px 60px rgba(11,18,32,.18);display:flex;flex-direction:column;font-family:Barlow,sans-serif">
<div style="height:52px;background:#0B1220;display:flex;align-items:center;padding:0 20px;gap:20px;flex-shrink:0">
<div style="display:flex;align-items:center;gap:9px"><div style="width:22px;height:24px;background:#fff;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div><span style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#fff">RosterChief</span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#5C6B85">control</span></div>
<div style="display:flex;gap:2px;font-family:'IBM Plex Mono';font-size:12px">
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#7C8AA0">platform</span>
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#fff;background:#1B2B47;border-bottom:2px solid #14B8E8">clubs</span>
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#7C8AA0">features</span>
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#7C8AA0">billing</span>
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#7C8AA0">admins</span>
<span style="height:52px;padding:0 14px;display:flex;align-items:center;color:#7C8AA0">jobs</span>
</div>
<div style="flex:1"></div>
<div style="height:30px;padding:0 12px;background:#E4002B;border-radius:4px;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff">Provision club</div>
</div>
<div style="height:34px;background:#fff;border-bottom:1px solid #D6DAE1;display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0;font-family:'IBM Plex Mono';font-size:11px;color:#6C7787">
<span style="color:#0B1220">clubs</span><span>/</span><span style="color:#0B1220">sharks-mechelen</span><span>/</span><span>settings</span><span style="flex:1"></span><span>id 0f3a·c21b</span><span style="color:#D6DAE1">|</span><span>created 2019-08-02</span>
</div>
<div style="flex:1;display:flex;min-height:0">
<div style="width:280px;border-right:1px solid #D6DAE1;background:#fff;flex-shrink:0;display:flex;flex-direction:column">
<div style="padding:10px 14px;border-bottom:1px solid #E3E6EB"><div style="height:30px;border:1px solid #D6DAE1;border-radius:4px;display:flex;align-items:center;padding:0 8px;font-family:'IBM Plex Mono';font-size:11px;color:#8B95A4">filter clubs…</div></div>
<div style="flex:1;overflow:hidden;font-family:'IBM Plex Mono';font-size:12px">
<div style="padding:9px 14px;border-bottom:1px solid #EEF0F3;display:flex;gap:8px;align-items:center;background:#0B1220;color:#fff"><span style="width:6px;height:6px;border-radius:99px;background:#14A05A"></span><span style="flex:1">sharks-mechelen</span><span style="color:#7C8AA0">312</span></div>
<div style="padding:9px 14px;border-bottom:1px solid #EEF0F3;display:flex;gap:8px;align-items:center;color:#3A4658"><span style="width:6px;height:6px;border-radius:99px;background:#14A05A"></span><span style="flex:1">brussels-bulldogs</span><span style="color:#8B95A4">221</span></div>
<div style="padding:9px 14px;border-bottom:1px solid #EEF0F3;display:flex;gap:8px;align-items:center;color:#3A4658"><span style="width:6px;height:6px;border-radius:99px;background:#F0A22E"></span><span style="flex:1">leuven-chiefs</span><span style="color:#8B95A4">203</span></div>
<div style="padding:9px 14px;border-bottom:1px solid #EEF0F3;display:flex;gap:8px;align-items:center;color:#3A4658"><span style="width:6px;height:6px;border-radius:99px;background:#14A05A"></span><span style="flex:1">herentals-hc</span><span style="color:#8B95A4">176</span></div>
<div style="padding:9px 14px;border-bottom:1px solid #EEF0F3;display:flex;gap:8px;align-items:center;color:#3A4658"><span style="width:6px;height:6px;border-radius:99px;background:#E4002B"></span><span style="flex:1">ihc-turnhout</span><span style="color:#8B95A4">148</span></div>
<div style="padding:9px 14px;border-bottom:1px solid #EEF0F3;display:flex;gap:8px;align-items:center;color:#3A4658"><span style="width:6px;height:6px;border-radius:99px;background:#14A05A"></span><span style="flex:1">liege-bulldogs</span><span style="color:#8B95A4">134</span></div>
<div style="padding:9px 14px;border-bottom:1px solid #EEF0F3;display:flex;gap:8px;align-items:center;color:#3A4658"><span style="width:6px;height:6px;border-radius:99px;background:#14A05A"></span><span style="flex:1">gent-rockets</span><span style="color:#8B95A4">98</span></div>
<div style="padding:9px 14px;border-bottom:1px solid #EEF0F3;display:flex;gap:8px;align-items:center;color:#3A4658"><span style="width:6px;height:6px;border-radius:99px;background:#8B95A4"></span><span style="flex:1">namur-rangers</span><span style="color:#8B95A4">76</span></div>
<div style="padding:9px 14px;border-bottom:1px solid #EEF0F3;display:flex;gap:8px;align-items:center;color:#3A4658"><span style="width:6px;height:6px;border-radius:99px;background:#8B95A4"></span><span style="flex:1">hasselt-huskies</span><span style="color:#8B95A4">64</span></div>
</div>
</div>
<div style="flex:1;overflow:hidden;padding:18px 20px;display:flex;flex-direction:column;gap:16px;min-width:0">
<div style="display:flex;align-items:flex-start;gap:18px">
<div style="width:64px;height:68px;background:#0B1220;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);display:flex;align-items:center;justify-content:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:22px;color:#fff">SM</span></div>
<div style="flex:1">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:34px;line-height:1;text-transform:uppercase;color:#0B1220">Sharks Mechelen</div>
<div style="font-family:'IBM Plex Mono';font-size:12px;color:#6C7787;margin-top:6px">sharks.rosterchief.app · sharksmechelen.be · RBIHF · 312 members · 14 teams</div>
</div>
<div style="display:flex;gap:8px">
<div style="height:32px;padding:0 12px;border:1px solid #C9CFD8;border-radius:4px;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220">Impersonate</div>
<div style="height:32px;padding:0 12px;border:1px solid #C9CFD8;border-radius:4px;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220">Audit log</div>
<div style="height:32px;padding:0 12px;background:#0B1220;border-radius:4px;display:flex;align-items:center;font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff">Save</div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0">
<div style="display:flex;flex-direction:column;gap:16px;min-height:0">
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px">
<div style="padding:11px 16px;border-bottom:1px solid #D6DAE1;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220">Branding</div>
<div style="padding:16px;display:flex;flex-direction:column;gap:14px">
<div style="display:flex;gap:14px">
<div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">primary_color</div><div style="display:flex;align-items:center;gap:8px;border:1px solid #D6DAE1;padding:7px 9px"><span style="width:20px;height:20px;background:#0B1220"></span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">#0B1220</span></div></div>
<div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">secondary_color</div><div style="display:flex;align-items:center;gap:8px;border:1px solid #D6DAE1;padding:7px 9px"><span style="width:20px;height:20px;background:#E4002B"></span><span style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">#E4002B</span></div></div>
</div>
<div><div style="font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6C7787;margin-bottom:6px">logo · wordmark</div><div style="display:flex;gap:8px"><div style="width:52px;height:52px;border:1px solid #D6DAE1;display:flex;align-items:center;justify-content:center"><div style="width:26px;height:28px;background:#0B1220;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%)"></div></div><div style="flex:1;border:1px solid #D6DAE1;display:flex;align-items:center;padding:0 12px;font-family:'Barlow Condensed';font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:#0B1220">Sharks Mechelen</div></div></div>
<div style="background:#F8F9FA;border:1px solid #E3E6EB;padding:10px 12px;font-family:'IBM Plex Mono';font-size:11px;color:#6C7787;line-height:1.5">Colours apply to accents only. Structure, type and neutrals are locked platform-wide.</div>
</div>
</div>
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;flex:1;min-height:0">
<div style="padding:11px 16px;border-bottom:1px solid #D6DAE1;font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220">Plan &amp; billing</div>
<div style="padding:16px;display:flex;flex-direction:column;gap:11px;font-family:'IBM Plex Mono';font-size:12px">
<div style="display:flex;justify-content:space-between"><span style="color:#6C7787">plan</span><span style="color:#0B1220">club + public_site</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#6C7787">seats</span><span style="color:#0B1220">312 / 400</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#6C7787">monthly</span><span style="color:#0B1220">€ 312,00</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#6C7787">renews</span><span style="color:#0B1220">2027-07-01</span></div>
<div style="display:flex;justify-content:space-between"><span style="color:#6C7787">last invoice</span><span style="color:#14A05A">paid · 2026-08-01</span></div>
</div>
</div>
</div>
<div style="background:#fff;border:1px solid #D6DAE1;border-radius:4px;display:flex;flex-direction:column;min-height:0">
<div style="padding:11px 16px;border-bottom:1px solid #D6DAE1;display:flex;align-items:center"><span style="font-family:'Barlow Condensed';font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#0B1220">Feature flags</span><span style="flex:1"></span><span style="font-family:'IBM Plex Mono';font-size:11px;color:#6C7787">7 on · 3 off</span></div>
<div style="flex:1;overflow:hidden">
<div style="padding:11px 16px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">public_site</div><div style="font-size:12px;color:#6C7787">Club website with news, teams, calendar</div></div><div style="width:40px;height:22px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 16px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">online_payments</div><div style="font-size:12px;color:#6C7787">Mollie · SEPA + Bancontact</div></div><div style="width:40px;height:22px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 16px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">lineups</div><div style="font-size:12px;color:#6C7787">Game selection in coach mode</div></div><div style="width:40px;height:22px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 16px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">licence_sync_rbihf</div><div style="font-size:12px;color:#6C7787">Nightly federation licence pull</div></div><div style="width:40px;height:22px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 16px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">instalment_plans</div><div style="font-size:12px;color:#6C7787">Split dues over 3 payments</div></div><div style="width:40px;height:22px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 16px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">licence_suspension</div><div style="font-size:12px;color:#6C7787">Auto-suspend on 60 d overdue</div></div><div style="width:40px;height:22px;border-radius:999px;background:#D6DAE1;position:relative"><div style="position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 16px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px;background:#F4F9FF"><div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">shop_beta</div><div style="font-size:12px;color:#6C7787">Club shop · 3 pilot clubs</div></div><span style="font-family:'IBM Plex Mono';font-size:10px;color:#0A6F91;border:1px solid #C3E7F4;background:#EAF7FC;padding:2px 6px">beta</span><div style="width:40px;height:22px;border-radius:999px;background:#14B8E8;position:relative"><div style="position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 16px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">season_registration</div><div style="font-size:12px;color:#6C7787">Self-service renewal in member app</div></div><span style="font-family:'IBM Plex Mono';font-size:10px;color:#6C7787;border:1px solid #E3E6EB;background:#F8F9FA;padding:2px 6px">soon</span><div style="width:40px;height:22px;border-radius:999px;background:#D6DAE1;position:relative"><div style="position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 16px;border-bottom:1px solid #EEF0F3;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">custom_stylesheet</div><div style="font-size:12px;color:#6C7787">Escape hatch for the public site</div></div><div style="width:40px;height:22px;border-radius:999px;background:#14A05A;position:relative"><div style="position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
<div style="padding:11px 16px;display:flex;align-items:center;gap:12px"><div style="flex:1"><div style="font-family:'IBM Plex Mono';font-size:12px;color:#0B1220">multi_sport</div><div style="font-size:12px;color:#6C7787">Non-hockey disciplines in one club</div></div><div style="width:40px;height:22px;border-radius:999px;background:#D6DAE1;position:relative"><div style="position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:999px;background:#fff"></div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</sc-if><sc-if value="{{ showMap }}" hint-placeholder-val="{{ true }}"><section id="sec-map" style="padding:72px 64px 96px;background:#0B1220">
<div style="display:flex;align-items:flex-end;gap:16px;margin-bottom:8px">
<span style="font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;background:#fff;color:#0B1220;padding:4px 9px;border-radius:4px">05</span>
<h2 style="margin:0;font-family:'Barlow Condensed';font-weight:800;font-size:56px;line-height:.95;text-transform:uppercase;color:#fff">How it hangs together</h2>
</div>
<p style="margin:0 0 40px;max-width:760px;color:#93A0B4;font-size:17px;line-height:1.5;text-wrap:pretty">One account, one identity, four surfaces. Rights decide what a person sees; nobody installs a second app to wear a second hat.</p>
<div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1440px">
<div style="border:1px solid #1E2B42;border-radius:10px;padding:22px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7C8AA0">Surface 01</div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:28px;line-height:1;text-transform:uppercase;color:#fff;margin-top:6px">Control panel</div>
<div style="font-size:14px;color:#93A0B4;line-height:1.55;margin-top:10px">Platform staff only. Provisioning, feature flags, billing, job health, impersonation with an audit trail.</div>
<div style="margin-top:14px;font-family:'IBM Plex Mono';font-size:11px;color:#5C6B85;line-height:1.7">desktop only<br>light + dark command bar<br>controlpanel/</div>
</div>
<div style="border:1px solid #1E2B42;border-radius:10px;padding:22px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7C8AA0">Surface 02</div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:28px;line-height:1;text-transform:uppercase;color:#fff;margin-top:6px">Club management</div>
<div style="font-size:14px;color:#93A0B4;line-height:1.55;margin-top:10px">Board, secretary, treasurer. Members, intake, teams and staff, season calendar, dues, news, club branding.</div>
<div style="margin-top:14px;font-family:'IBM Plex Mono';font-size:11px;color:#5C6B85;line-height:1.7">desktop only<br>club accent on navy<br>management/</div>
</div>
<div style="border:1px solid #14B8E8;border-radius:10px;padding:22px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#14B8E8">Surface 03 · mode</div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:28px;line-height:1;text-transform:uppercase;color:#fff;margin-top:6px">Coach mode</div>
<div style="font-size:14px;color:#93A0B4;line-height:1.55;margin-top:10px">Anyone with a staff role on a team. Attendance, line-ups, events, news, squad changes — a subset of what management can do, shaped for the rink.</div>
<div style="margin-top:14px;font-family:'IBM Plex Mono';font-size:11px;color:#5C6B85;line-height:1.7">mobile first<br>dark chrome + ice accent<br>same app as surface 04</div>
</div>
<div style="border:1px solid #E4002B;border-radius:10px;padding:22px">
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#E4002B">Surface 04 · mode</div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:28px;line-height:1;text-transform:uppercase;color:#fff;margin-top:6px">Member mode</div>
<div style="font-size:14px;color:#93A0B4;line-height:1.55;margin-top:10px">Every member and every parent. Answers for themselves and for the people they manage — never a separate “parent” account.</div>
<div style="margin-top:14px;font-family:'IBM Plex Mono';font-size:11px;color:#5C6B85;line-height:1.7">mobile first<br>club accent on navy<br>shop + renewal land here</div>
</div>
</div>
<div style="margin-top:24px;border:1px solid #1E2B42;border-radius:10px;padding:24px;max-width:1440px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px">
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:10px">One identity</div>
<div style="font-size:14px;color:#93A0B4;line-height:1.6">A person is one account with a set of memberships and roles. Katrien is a Div 4 player, mother of two U16 players, and head coach of U16 — three facts about one row, not three logins.</div>
</div>
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:10px">Rights, not apps</div>
<div style="font-size:14px;color:#93A0B4;line-height:1.6">The mode switch only appears when a staff role exists. Management rights open the desktop surface in the same session — no second sign-in, no second password.</div>
</div>
<div>
<div style="font-family:'Barlow Condensed';font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:10px">Club theming</div>
<div style="font-size:14px;color:#93A0B4;line-height:1.6">Primary and secondary colour, logo and wordmark come from the club record and reach every surface a club member sees. The control panel stays platform-branded.</div>
</div>
</div>
</section>
</sc-if></x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;showCoach&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Sections&quot;},&quot;showPanel&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Sections&quot;},&quot;showMap&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Sections&quot;}}">
class Component extends DCLogic {
renderVals() {
return {
showCoach: this.props.showCoach ?? true,
showPanel: this.props.showPanel ?? true,
showMap: this.props.showMap ?? true,
};
}
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink