:root { --topbar-h: 52px; --topbar-bg:#0b1f4b; }

    body{
      margin:0;
      font-family: Arial, sans-serif;
      background:#f4f6f8;
    }

    .topbar{
      height: var(--topbar-h);
      background: var(--topbar-bg);
      display:flex;
      align-items:center;
      padding:0 16px;
      box-shadow:0 2px 8px rgba(0,0,0,.15);
      z-index:1000;
    }
    .brand{ color:#fff; font-weight:600; }

    .topbar-right{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:18px;
    }

    .toplink{
      color:white;
      text-decoration:none;
      font-size:15px;
      padding:6px 10px;
      border-radius:6px;
      display:inline-block;
    }
    .toplink:hover{ background:rgba(255,255,255,.12); }

    /* layout onder de topbar */
    .layout{
      padding-top: var(--topbar-h);
      display: flex;
      min-height: 100vh;
    }

    .menu{
      width: 220px;
      padding: 16px;
      box-sizing: border-box;
    }
    .menu a{
      display:block;
      padding:12px 14px;
      margin:10px 0;
      text-decoration:none;
      font-size:16px;
      color:white;
      background:#2c3e50;
      border-radius:6px;
    }
    .menu a:hover{ background:#34495e; }

    .content{
      flex: 1;
      padding: 16px 16px 16px 0;
      box-sizing: border-box;
    }