:root { --topbar-h: 52px; --topbar-bg:#0b1f4b; --admin-bg:#1f1010}
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    body{
      margin:0;
      font-family: Arial, sans-serif;
      background:#f4f6f8;
    }
    .warning::before {
      content: "⚠️ ";
    }

    .topbar{
      position: fixed;
      top:0; left:0; right:0;
      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); }

    /* login-status chip */
    .whoami{
      color:#dbe7ff;
      font-size:13px;
      padding:6px 10px;
      border:1px solid rgba(255,255,255,.25);
      border-radius:999px;
      white-space:nowrap;
    }

    /* 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: var(--topbar-bg);
      border-radius:6px;
      position: relative;
    }

    .menu a::before {
      content: "";
      position: absolute;
      inset: 0;
/*      background: linear-gradient(to right, transparent, white);*/
      background: white;
      opacity: 0;
      transition: 0.3s;
    }

    .menu a:hover::before {
      opacity: 0.2;
    }

    .content{
      flex: 1;
      padding: 16px 16px 16px 0;
      box-sizing: border-box;
    }
    iframe{
      width:100%;
      height: calc(100vh - var(--topbar-h) - 16px);
      border: 0;
      border-radius: 10px;
      background: white;
    }

    .menu a.disabled {
      background: #7f8c8d;        /* grijs */
      color: #d0d0d0;
      pointer-events: none;       /* niet klikbaar */
      cursor: default;
      opacity: 0.6;
    }