Skip to main content

oefenhub_beheerder_05_sys_01_frontpage_V1_9.html

Korte beschrijving​

Mockup van de systeem-frontpage voor beheerders binnen OefenHub. Deze pagina toont de startweergave van het systeembeheer met snelle toegang tot technische of configuratiegerichte beheeronderdelen.

Gerelateerde documentatie​

Bestand​

Broncode​

/mockups_html/beheerder/oefenhub_beheerder_05_sys_01_frontpage_V1_9.html
<!DOCTYPE html>

<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OefenHub Beheerder - Frontpage beheer</title>
<link href="./oefenhub_shared_logo.css" rel="stylesheet">
<style>
    :root {
      --blue-1: #8fd0ff;
      --blue-2: #5bb3ff;
      --blue-3: #1f82e9;
      --blue-4: #0d5db8;
      --text: #114f95;
      --muted: #5f7ea5;
      --line: rgba(17,79,149,.12);
      --orange-1: #ffbb4d;
      --orange-2: #ff9620;
      --orange-3: #f87400;
      --green-1: #8adf67;
      --green-2: #57ba3c;
      --green-3: #2c9348;
      --yellow-1: #ffd04e;
      --yellow-2: #f6aa07;
      --red-1: #ff8f8f;
      --red-2: #df4949;
      --purple-1: #8d6cff;
      --purple-2: #6248d8;
      --shadow: 0 12px 28px rgba(35, 100, 177, 0.12);
      --shadow-soft: 0 8px 18px rgba(35, 100, 177, 0.08);
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 8% 14%, rgba(255,255,255,.68) 0 12%, transparent 13%),
        radial-gradient(circle at 18% 10%, rgba(255,255,255,.45) 0 9%, transparent 10%),
        radial-gradient(circle at 86% 17%, rgba(255,255,255,.58) 0 11%, transparent 12%),
        linear-gradient(180deg, #7ec2f8 0%, #bfe2fd 15%, #edf7ff 34%, #f7fbff 100%);
      min-height: 100vh;
    }
    .wrap { width: min(1220px, calc(100% - 30px)); margin: 0 auto; }

    .header {
      padding: 10px 0 12px;
      background: linear-gradient(180deg, rgba(100,171,238,.92), rgba(120,192,248,.85));
      border-bottom: 1px solid rgba(255,255,255,.38);
      box-shadow: 0 8px 20px rgba(28, 100, 177, .08);
      position: relative;
      z-index: 5;
    }
    .header-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
    }
    .brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-width: 250px;
    }
    .brand img { display: block; height: 46px; width: auto; }
    .welcome-text {
      font-size: 12px;
      color: rgba(17,79,149,.82);
      font-weight: 700;
      margin-top: -10px;
      margin-left: 53px;
    }

    .nav-pills {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .nav-item { position: relative; display: inline-flex; align-items: center; }
    .pill {
      border: 0;
      border-radius: 12px;
      padding: 9px 14px;
      color: #fff;
      font-size: 13px;
      font-weight: 900;
      box-shadow: var(--shadow-soft);
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .pill:hover { transform: translateY(-1px); filter: brightness(1.02); }
    .pill.orange { background: linear-gradient(180deg, #ffbb4d, #ff7f12); }
    .pill.blue { background: linear-gradient(180deg, #2f88ea, #176acc); }
    .pill.yellow { background: linear-gradient(180deg, #ffd04d, #f4ab08); }
    .pill.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }
    .pill.has-chevron { display: inline-flex; align-items: center; gap: 6px; padding-right: 14px; }
    .pill-caret { font-size: 12px; line-height: 1; transform: translateY(1px); }

    .dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      width: 306px;
      background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.98));
      border-radius: 20px;
      box-shadow: 0 12px 24px rgba(35,100,177,.16);
      border: 1px solid rgba(170, 204, 238, .55);
      padding: 10px 12px;
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }
    .dropdown-menu::before {
      content: "";
      position: absolute;
      top: -10px;
      left: 36px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid rgba(255,255,255,.97);
      filter: drop-shadow(0 -1px 0 rgba(170, 204, 238, .45));
    }
    .dropdown-menu.align-right { left: auto; right: 0; width: 312px; }
    .dropdown-menu.align-right::before { left: auto; right: 20px; }
    .nav-item:hover .dropdown-menu,
    .nav-item:focus-within .dropdown-menu,
    .nav-item.open .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .menu-list { display: flex; flex-direction: column; gap: 0; }
    .menu-link {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 9px;
      padding: 9px 11px;
      border-radius: 13px;
      text-decoration: none;
      color: #18518f;
      font-size: 15px;
      font-weight: 900;
      box-shadow: inset 0 -1px 0 rgba(17,79,149,.10);
      transition: background .18s ease, transform .18s ease;
    }
    .menu-link:last-child { box-shadow: none; }
    .menu-link:hover,
    .menu-link.is-active { background: linear-gradient(180deg, #edf5ff, #dcecff); }
    .menu-link:hover { transform: translateX(2px); }
    .menu-icon {
      width: 23px;
      height: 23px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 4px 8px rgba(0,0,0,.10);
    }
    .menu-icon.green { background: linear-gradient(180deg, #8add68, #4baa35); }
    .menu-icon.blue { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
    .menu-icon.yellow { background: linear-gradient(180deg, #ffd45a, #f0b000); color: #8a5d00; }
    .menu-icon.purple { background: linear-gradient(180deg, #8d6cff, #6147d8); }
    .menu-icon.red { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
    .menu-icon.orange { background: linear-gradient(180deg, #ffb558, #f97e18); }

    .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 140px; }
    .mail-btn, .profile-chip { border: 0; box-shadow: var(--shadow-soft); cursor: pointer; }
    .mail-btn {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffffff, #eef6ff);
      color: var(--blue-4);
      font-size: 17px;
    }
    .badge {
      position: absolute;
      right: -2px;
      bottom: -2px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: #e23838;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #fff;
    }
    .profile-nav { position: relative; }
    .profile-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffffff, #edf6ff);
      padding: 0;
      position: relative;
    }
    .avatar {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #ffd04d, #f4ab08);
      color: #fff;
      font-size: 16px;
      font-weight: 900;
      box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
    }
    .profile-badge {
      position: absolute;
      top: -4px;
      right: -5px;
      min-width: 20px;
      height: 20px;
      padding: 0 5px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ff7878, #df3636);
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #fff;
      box-shadow: 0 6px 12px rgba(223,54,54,.26);
    }

    .page-shell {
      padding: 22px 0 28px;
    }
    .hero-card {
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
      border: 1px solid rgba(170,204,238,.62);
      border-radius: 26px;
      box-shadow: var(--shadow);
      padding: 20px 24px 22px;
      margin-bottom: 16px;
    }
    .hero-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }
    .hero-text h1 {
      margin: 0 0 8px;
      font-size: 22px;
      line-height: 1.2;
      color: #0f4d91;
    }
    .hero-text p {
      margin: 0;
      max-width: 760px;
      font-size: 14px;
      line-height: 1.55;
      color: #496d99;
    }
    .hero-tags { display: flex; gap: 10px; flex-wrap: wrap; }
    .hero-stat {
      min-width: 160px;
      background: linear-gradient(180deg, #edf6ff, #dbeeff);
      border: 1px solid rgba(94, 159, 225, .22);
      border-radius: 18px;
      padding: 12px 14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }
    .hero-stat-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #587da9; }
    .hero-stat-value { margin-top: 5px; font-size: 28px; font-weight: 900; color: #0f4d91; }
    .hero-stat-sub { margin-top: 4px; font-size: 12px; color: #5f7ea5; }

    .process-note {
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .process-step {
      border-radius: 18px;
      background: linear-gradient(180deg, #fff, #f4f9ff);
      border: 1px solid rgba(17,79,149,.10);
      padding: 14px 14px 13px;
      box-shadow: var(--shadow-soft);
    }
    .process-step strong { display: block; margin-bottom: 4px; font-size: 14px; }
    .process-step p { margin: 0; font-size: 12px; line-height: 1.45; color: #5a7ba3; }

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .searchbox {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: min(100%, 360px);
      padding: 12px 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(170,204,238,.58);
      box-shadow: var(--shadow-soft);
      color: var(--muted);
    }
    .searchbox input {
      width: 100%;
      border: 0;
      outline: none;
      font: inherit;
      color: var(--text);
      background: transparent;
    }
    .chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .filter-chip {
      border: 0;
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 800;
      color: #1c5d9f;
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(170,204,238,.56);
      box-shadow: var(--shadow-soft);
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .filter-chip:hover { transform: translateY(-1px); }
    .filter-chip.active {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(180deg, #2f88ea, #176acc);
      box-shadow: 0 8px 18px rgba(47,143,236,.26);
    }

    .management-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
      gap: 18px;
      align-items: start;
    }
    .column-card {
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
      border: 1px solid rgba(170,204,238,.58);
      border-radius: 24px;
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .column-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .column-title h2,
    .column-title h3 { margin: 0; font-size: 18px; }
    .column-title span { font-size: 12px; color: var(--muted); font-weight: 700; }

    .ticket-list { display: grid; gap: 12px; }
    .ticket-card {
      position: relative;
      border-radius: 20px;
      border: 1px solid rgba(17,79,149,.12);
      background: linear-gradient(180deg, #ffffff, #f4f9ff);
      padding: 16px 16px 15px;
      box-shadow: var(--shadow-soft);
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .ticket-card:hover,
    .ticket-card.is-active {
      transform: translateY(-2px);
      box-shadow: 0 16px 28px rgba(35,100,177,.16);
      border-color: rgba(31,130,233,.38);
    }
    .ticket-card.is-active::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      box-shadow: inset 0 0 0 2px rgba(31,130,233,.18);
      pointer-events: none;
    }
    .ticket-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .ticket-tags { display: flex; gap: 8px; flex-wrap: wrap; }
    .type-pill, .state-pill, .tiny-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .01em;
    }
    .type-pill.tech { background: #e3f2ff; color: #1469bf; }
    .type-pill.content { background: #fff0d7; color: #a36a07; }
    .type-pill.request { background: #efe8ff; color: #6542d3; }
    .state-pill.open { background: #ffe3e3; color: #b24949; }
    .state-pill.waiting { background: #fff4d5; color: #a47106; }
    .state-pill.progress { background: #def4e7; color: #227c47; }
    .tiny-pill.mine { background: #dff2ff; color: #1565b8; }
    .tiny-pill.shared { background: #edf0ff; color: #4d56c7; }

    .ticket-title { margin: 0 0 8px; font-size: 18px; line-height: 1.28; color: #0f4d91; }
    .ticket-snippet { margin: 0 0 10px; color: #54769e; font-size: 14px; line-height: 1.5; }
    .ticket-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      color: #6381a6;
      font-size: 12px;
      font-weight: 700;
    }

    .detail-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .detail-head h2 { margin: 0 0 5px; font-size: 21px; }
    .detail-intro { margin: 0; font-size: 14px; line-height: 1.55; color: #56779f; max-width: 620px; }
    .detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }
    .status-card {
      padding: 16px;
      border-radius: 18px;
      background: linear-gradient(180deg, #edf6ff, #dbeeff);
      border: 1px solid rgba(94,159,225,.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }
    .status-card .label { font-size: 12px; color: #6081a6; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
    .status-card .value { margin-top: 5px; font-size: 19px; font-weight: 900; color: #0f4d91; }
    .status-card .sub { margin-top: 5px; font-size: 12px; color: #6583a8; line-height: 1.45; }

    .timeline {
      display: grid;
      gap: 10px;
      margin: 16px 0;
    }
    .timeline-item {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 10px;
      align-items: start;
      padding: 12px 12px 11px;
      border-radius: 18px;
      background: linear-gradient(180deg, #fff, #f6fbff);
      border: 1px solid rgba(17,79,149,.10);
    }
    .timeline-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 18px;
      font-weight: 900;
      box-shadow: var(--shadow-soft);
    }
    .timeline-icon.blue { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
    .timeline-icon.orange { background: linear-gradient(180deg, #ffb558, #f97e18); }
    .timeline-icon.green { background: linear-gradient(180deg, #8add68, #4baa35); }
    .timeline-icon.purple { background: linear-gradient(180deg, #8d6cff, #6147d8); }
    .timeline-item strong { display: block; margin-bottom: 3px; font-size: 15px; }
    .timeline-item p { margin: 0; color: #58799f; font-size: 13px; line-height: 1.52; }

    .action-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 16px 0 10px;
    }
    .action-btn {
      border: 0;
      border-radius: 14px;
      padding: 11px 14px;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .action-btn:hover { transform: translateY(-1px); filter: brightness(1.02); }
    .action-btn.primary { color: #fff; background: linear-gradient(180deg, #2f88ea, #176acc); }
    .action-btn.success { color: #fff; background: linear-gradient(180deg, #79cf5b, #48a432); }
    .action-btn.secondary { color: #195797; background: linear-gradient(180deg, #ffffff, #edf5ff); }
    .action-btn.warn { color: #fff; background: linear-gradient(180deg, #ffb558, #f97e18); }

    .note-box {
      border-radius: 18px;
      background: linear-gradient(180deg, #fff8e8, #fff2cf);
      border: 1px solid rgba(241, 186, 74, .42);
      padding: 14px 15px;
      margin-top: 12px;
    }
    .note-box strong { display: block; margin-bottom: 4px; }
    .note-box p { margin: 0; font-size: 13px; line-height: 1.5; color: #81632a; }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }
    .summary-card {
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
      border: 1px solid rgba(170,204,238,.58);
      box-shadow: var(--shadow-soft);
      padding: 16px;
    }
    .summary-label { font-size: 12px; font-weight: 800; text-transform: uppercase; color: #6381a6; letter-spacing: .04em; }
    .summary-value { margin-top: 6px; font-size: 24px; font-weight: 900; color: #0f4d91; }
    .summary-sub { margin-top: 5px; font-size: 12px; line-height: 1.45; color: #5e7fa5; }

    .site-footer {
      margin-top: 22px;
      padding: 24px 0 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92));
      border-top: 1px solid rgba(170,204,238,.62);
      border-radius: 26px 26px 0 0;
      box-shadow: 0 -10px 24px rgba(35,100,177,.06);
    }
    .footer-grid {
      width: min(1220px, calc(100% - 30px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr;
      gap: 22px;
    }
    .footer-col h4 { margin: 0 0 8px; font-size: 16px; color: #0f4d91; }
    .footer-col p { margin: 0; color: #5d7da4; font-size: 14px; line-height: 1.55; }
    .footer-links { display: flex; flex-direction: column; gap: 7px; }
    .footer-links a { color: #2364a7; text-decoration: none; font-weight: 700; font-size: 14px; }
    .footer-links a:hover { text-decoration: underline; }
    .footer-bottom {
      width: min(1220px, calc(100% - 30px));
      margin: 18px auto 0;
      padding-top: 14px;
      border-top: 1px solid rgba(170,204,238,.56);
      color: #6b86aa;
      font-size: 13px;
      font-weight: 700;
    }

    @media (max-width: 1080px) {
      .management-layout,
      .summary-grid,
      .process-note { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 900px) {
      .header-row { grid-template-columns: 1fr; gap: 14px; }
      .brand { min-width: 0; }
      .nav-pills { overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; width: 100%; }
      .header-actions { justify-content: flex-start; }
      .management-layout,
      .detail-grid,
      .summary-grid,
      .process-note,
      .footer-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .wrap { width: min(100%, calc(100% - 18px)); }
      .hero-card,
      .column-card { padding: 16px; border-radius: 20px; }
      .ticket-card { padding: 14px; }
      .ticket-title { font-size: 17px; }
      .action-row { flex-direction: column; }
      .action-btn { width: 100%; }
    }
  

/* v1.1 beheer updates */
.admin-header-row { grid-template-columns: minmax(220px, 1fr) auto minmax(160px, 1fr); }
.admin-nav-pills { justify-content: center; gap: 10px; }
.admin-nav-pills .pill { padding: 10px 16px; }
.profile-nav { position: relative; }
.profile-nav .dropdown-menu { display:none; }
.profile-nav.open .dropdown-menu { display:block; opacity:1; visibility:visible; transform:translateY(0); }
.profile-chip[aria-expanded="false"] { box-shadow: 0 12px 24px rgba(35,100,177,.18); }
.profile-dropdown { min-width: 250px; }
.page-shell { padding-top: 22px; }
.admin-hero-card { padding: 20px 24px 22px; }
.admin-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.admin-hero-stats { display: grid; gap: 8px; }
.compact-stat { min-width: 0; padding: 2px 18px; }
.compact-stat .hero-stat-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.compact-stat .hero-stat-label { margin:0; }
.compact-stat .hero-stat-value { font-size: 18px; line-height: 1; padding-top: 5px; }
.compact-stat .hero-stat-sub { font-size: 11px; text-align: center; margin-top: -3px; }
.admin-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.admin-searchbox { min-width: min(100%, 250px); max-width: 280px; padding: 10px 12px; }
.admin-filter-row { flex: 1 1 520px; align-items: center; justify-content: flex-end; margin-left:auto; }
.filter-chip-right { margin-left: 0; }
.admin-management-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); }
.ticket-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; line-height: 1.45; color: #0f4d91; }
.ticket-snippet { font-size: 14px; }
.admin-detail-card { padding: 16px 18px; }
.admin-detail-head { display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:start; gap:10px; margin-bottom: 12px; }
.admin-detail-head h2 { margin:0; font-size:15px; line-height:1.4; color:#0f4d91; }
.admin-detail-tags { justify-content:flex-end; }
.detail-section { border: 1px solid rgba(17,79,149,.10); border-radius: 18px; background: linear-gradient(180deg, #fff, #f7fbff); box-shadow: var(--shadow-soft); margin-top: 10px; overflow: hidden; }
.detail-section > summary { list-style:none; cursor:pointer; padding: 12px 14px; font-weight: 900; color:#0f4d91; position: relative; }
.detail-section > summary::-webkit-details-marker { display:none; }
.detail-section > summary::after { content: "▾"; position:absolute; right:14px; top:12px; color:#5b7fa7; transition: transform .18s ease; }
.detail-section[open] > summary::after { transform: rotate(180deg); }
.detail-section-body { padding: 0 14px 14px; }
.compact-table-wrap { padding-top: 2px; }
.detail-table { width:100%; border-collapse: collapse; font-size: 13px; }
.detail-table th, .detail-table td { padding: 9px 0; border-top: 1px solid rgba(17,79,149,.08); vertical-align: top; text-align:left; }
.detail-table tr:first-child th, .detail-table tr:first-child td { border-top: 0; }
.detail-table th { width: 138px; color:#6283a8; font-weight:800; padding-right: 16px; }
.detail-table td { color:#205993; }
.subtle-link { display:inline-block; margin-top: 6px; font-size: 12px; text-decoration: none; font-weight: 800; }
.subtle-link-danger { color:#b75a5a; }
.subtle-link-success { color:#4d8f56; }
.subtle-link-assign { color:#1d6bb8; }
.inline-x { color:#cf4a4a; font-weight:900; text-decoration:none; margin-left:6px; }
.assign-stack { display:grid; gap:4px; }
.assign-person { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.subtle-link:hover { text-decoration: underline; }
.status-select { min-width: 170px; border: 1px solid rgba(170,204,238,.8); border-radius: 12px; padding: 8px 10px; font: inherit; color:#195797; background:#fff; }
.select-field { min-width: 170px; border: 1px solid rgba(170,204,238,.8); border-radius: 12px; padding: 8px 10px; font: inherit; color:#195797; background:#fff; width:100%; }
.forward-note { margin: 0 0 10px; font-size: 12px; color:#5f7ea5; }
.warning-text { margin-top: 8px; color:#b15a35; font-size: 12px; font-weight: 700; }
.field-label { display:block; margin-bottom:8px; color:#6283a8; font-weight:800; font-size:13px; }
.muted-inline { color:#5f7ea5; font-size:12px; }
.thread-box, .history-box { max-height: 230px; overflow: auto; display: grid; gap: 3px; padding-right: 4px; }
.thread-message { border-radius: 16px; padding: 11px 12px; border:1px solid rgba(17,79,149,.10); }
.thread-message.external { background: linear-gradient(180deg, #eef6ff, #deecff); }
.thread-message.internal { background: linear-gradient(180deg, #fff7e8, #fff1cf); }
.thread-message.from-emma { background: linear-gradient(180deg, #eef6ff, #dfeeff); }
.thread-message.from-self { background: linear-gradient(180deg, #edfbe9, #dcf4d3); }
.thread-message.from-daan { background: linear-gradient(180deg, #f3ecff, #e7dcff); }
.thread-message.from-system { background: linear-gradient(180deg, #fff3f3, #ffe0e0); }
.thread-meta { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:#6283a8; margin-bottom:6px; }
.thread-author { color:#0f4d91; }
.message-tag { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.02em; }
.message-tag.internal { background:#fff0be; color:#875d00; border:1px solid rgba(240,176,0,.35); }
.message-tag.external { background:#dcedff; color:#14579b; border:1px solid rgba(31,130,233,.24); }
.message-tag.system { background:#fff0be; color:#875d00; border:1px solid rgba(240,176,0,.35); }
.thread-message p { margin:0; font-size:13px; line-height:1.5; color:#285d96; }
.composer-box { margin-top:12px; display:grid; gap:8px; }
.message-input { width:100%; border:1px solid rgba(170,204,238,.8); border-radius: 12px; padding: 10px 12px; font: inherit; color:#114f95; background:#fff; min-height: 42px; height: 42px; resize: vertical; }
.composer-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:8px; }
.audience-switch { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:#587da9; }
.audience-switch label { display:inline-flex; align-items:center; gap:5px; padding: 7px 9px; border-radius: 999px; background: rgba(237,246,255,.9); border:1px solid rgba(170,204,238,.56); cursor:pointer; }
.compact-send { padding: 10px 12px; font-size: 13px; margin-left:auto; }
.resizable-textarea { width:100%; border:1px solid rgba(170,204,238,.8); border-radius: 14px; padding:12px; font: inherit; color:#114f95; resize: vertical; min-height: 42px; }
.solution-input { width:100%; border:1px solid rgba(170,204,238,.8); border-radius: 14px; padding:12px; font: inherit; color:#114f95; resize: vertical; min-height: 98px; }
.solution-hint { margin: 8px 0 10px; font-size: 12px; color:#6786aa; }
.solution-status { margin: 10px 0 12px; display:grid; gap:7px; }
.solution-status-title { font-size:12px; font-weight:800; color:#5a7ea8; }
.radio-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:7px 10px; }
.radio-option { display:flex; align-items:flex-start; gap:8px; padding:0; border:none; border-radius:0; background:transparent; font-size:12px; font-weight:700; color:#285d96; }
.solution-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.solution-close { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#456f9b; }
.solution-send { padding: 10px 14px; margin-left:auto; }
.history-item { display: grid; grid-template-columns: 1fr; gap: 2px; align-items: start; padding: 3px 0; border-top: 1px solid rgba(17, 79, 149, .08); font-size: 13px; color: #285d96; }
.history-item:first-child { border-top:0; }
.history-meta { color:#6283a8; font-size:12px; }
.history-meta strong { color:#0f4d91; margin-left:8px; }
.history-action { color:#285d96; }
.summary-grid, .process-note, .action-row, .detail-grid, .detail-intro { display:none !important; }
.site-footer { margin-top: 22px; padding: 24px 0 22px; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92)); border-top: 1px solid rgba(170,204,238,.62); border-radius: 26px 26px 0 0; box-shadow: 0 -10px 24px rgba(35,100,177,.06); }
.footer-grid { width: min(1220px, calc(100% - 30px)); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; }
.footer-col h4 { margin: 0 0 8px; font-size: 16px; color: #0f4d91; }
.footer-col p { margin: 0; color: #5d7da4; font-size: 14px; line-height: 1.55; }
.footer-links { display: flex; flex-direction: column; gap: 7px; }
.footer-links a { color: #2364a7; text-decoration: none; font-weight: 700; font-size: 14px; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { width: min(1220px, calc(100% - 30px)); margin: 18px auto 0; padding-top: 14px; border-top: 1px solid rgba(170,204,238,.56); color: #6b86aa; font-size: 13px; font-weight: 700; }
@media (max-width: 1080px) {
  .admin-management-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .admin-header-row { grid-template-columns: 1fr; }
  .admin-nav-pills { justify-content: flex-start; overflow-x: auto; }
  .admin-hero-top { grid-template-columns: 1fr; }
  .admin-filter-row { flex-basis: 100%; }
  .filter-chip-right { margin-left: 0; }
  .admin-detail-head { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .detail-table th, .detail-table td { display:block; width:100%; }
  .detail-table th { padding-bottom: 3px; }
  .history-item { grid-template-columns: 1fr; gap: 3px; }
  .composer-actions { align-items: stretch; }
  .compact-send { width: 100%; }
}


    .hub-page { padding: 22px 0 28px; }
    .breadcrumb-bar {
      display:flex; align-items:center; gap:8px; flex-wrap:wrap;
      margin: 0 0 14px;
      font-size:13px; font-weight:800; color:#5f7ea5;
    }
    .breadcrumb-bar a { color:#2364a7; text-decoration:none; }
    .breadcrumb-bar a:hover { text-decoration:underline; }
    .breadcrumb-sep { opacity:.7; }

    .settings-intro-card {
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
      border: 1px solid rgba(170,204,238,.62);
      border-radius: 26px;
      box-shadow: var(--shadow);
      padding: 22px 24px;
      margin-bottom: 16px;
    }
    .settings-intro-top {
      display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start;
    }
    .settings-intro-title { margin:0 0 8px; font-size:24px; line-height:1.18; color:#0f4d91; }
    .settings-intro-text { margin:0; max-width:780px; font-size:14px; line-height:1.6; color:#496d99; }
    .settings-intro-note {
      margin-top:14px; padding-top:14px; border-top:1px solid rgba(17,79,149,.10);
      font-size:13px; line-height:1.55; color:#5b7ba2;
    }

    .hub-stat-card {
      min-width: 0;
      background: linear-gradient(180deg, #edf6ff, #dbeeff);
      border: 1px solid rgba(94, 159, 225, .22);
      border-radius: 18px;
      padding: 14px 15px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }
    .hub-stat-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#587da9; }
    .hub-stat-value { margin-top:6px; font-size:29px; font-weight:900; color:#0f4d91; }
    .hub-stat-sub { margin-top:4px; font-size:12px; line-height:1.45; color:#5f7ea5; }

    .hub-grid {
      display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
    }
    .hub-tile {
      position:relative;
      border-radius:24px;
      background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.96));
      border:1px solid rgba(170,204,238,.58);
      box-shadow: var(--shadow-soft);
      padding:18px 18px 16px;
      display:grid; gap:12px;
      min-height: 250px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    }
    .hub-tile:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 28px rgba(35,100,177,.16);
      border-color: rgba(31,130,233,.32);
      background: linear-gradient(180deg, #ffffff, #eaf4ff);
    }
    .hub-tile-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .hub-icon {
      width:52px; height:52px; border-radius:18px; display:grid; place-items:center;
      color:#fff; font-size:25px; box-shadow: var(--shadow-soft);
    }
    .hub-icon.frontpage { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
    .hub-icon.popup { background: linear-gradient(180deg, #ffb558, #f97e18); }
    .hub-icon.messages { background: linear-gradient(180deg, #8d6cff, #6147d8); }
    .hub-icon.links { background: linear-gradient(180deg, #79cf5b, #48a432); }
    .hub-icon.features { background: linear-gradient(180deg, #ffd45a, #f0b000); color:#8a5d00; }
    .hub-icon.tech { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
    .hub-tag {
      display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 10px;
      border-radius:999px; font-size:12px; font-weight:800; color:#175c9f; background:#eaf4ff;
    }
    .hub-title { margin:0; font-size:20px; line-height:1.18; color:#0f4d91; }
    .hub-text { margin:0; font-size:14px; line-height:1.55; color:#55779f; }
    .hub-list { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
    .hub-list li {
      position:relative; padding-left:16px; font-size:13px; line-height:1.48; color:#4f7198;
    }
    .hub-list li::before {
      content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:999px;
      background: linear-gradient(180deg, #5eb8ff, #2f8fec);
    }
    .hub-foot {
      margin-top:auto; padding-top:12px; border-top:1px solid rgba(17,79,149,.10);
      display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
      text-align:center;
    }
    .hub-link { color:#2364a7; text-decoration:none; font-size:13px; font-weight:900; }
    .hub-link:hover { text-decoration:underline; }

    .hub-bottom-note {
      margin-top:16px;
      border-radius:22px;
      background: linear-gradient(180deg, #fff8e8, #fff2cf);
      border: 1px solid rgba(241, 186, 74, .42);
      box-shadow: var(--shadow-soft);
      padding: 18px 18px 16px;
    }
    .hub-bottom-note h3 { margin:0 0 8px; font-size:18px; color:#875f0a; }
    .hub-bottom-note p { margin:0; font-size:13px; line-height:1.58; color:#81632a; }

    @media (max-width: 1080px) {
      .hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .settings-intro-top { grid-template-columns:1fr; }
    }
    @media (max-width: 700px) {
      .hub-grid { grid-template-columns:1fr; }
      .settings-intro-card { padding:18px; border-radius:22px; }
      .settings-intro-title { font-size:22px; }
    }



    .frontpage-admin-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr);
      gap: 18px;
      align-items: start;
    }
    .frontpage-main-card,
    .side-card-compact,
    .editor-card {
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
      border: 1px solid rgba(170,204,238,.58);
      border-radius: 24px;
      box-shadow: var(--shadow);
    }
    .frontpage-main-card { padding: 18px; }
    .frontpage-side-stack { display: grid; gap: 18px; }
    .side-card-compact { padding: 18px; }
    .section-head { margin-bottom: 14px; }
    .section-head.split { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
    .section-kicker { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: #e8f2ff; color: #1f67b5; font-size: 11px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
    .section-title { margin: 8px 0 6px; font-size: 21px; color: #0f4d91; }
    .section-copy { margin: 0; color: #56779f; font-size: 14px; line-height: 1.55; }
    .section-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: linear-gradient(180deg,#edf6ff,#dcecff); color: #0d5db8; font-size: 12px; font-weight: 900; white-space: nowrap; }
    .editor-stack { display: grid; gap: 16px; }
    .editor-card { padding: 16px; box-shadow: var(--shadow-soft); }
    .editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .editor-head h3 { margin: 0 0 4px; font-size: 17px; color: #0f4d91; }
    .editor-head p { margin: 0; color: #5d7da4; font-size: 13px; line-height: 1.45; }
    .mini-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; }
    .mini-chip.blue { background: #dff0ff; color: #1d6dc1; }
    .mini-chip.purple { background: #ede7ff; color: #6847d5; }
    .form-grid.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .field.field-span-2 { grid-column: 1 / -1; }
    .field span { display: block; margin-bottom: 6px; color: #235790; font-size: 13px; font-weight: 900; }
    .field input, .field textarea, .field select {
      width: 100%; border: 1px solid rgba(17,79,149,.14); background: rgba(255,255,255,.98);
      border-radius: 16px; padding: 13px 14px; font: inherit; color: #134f92; box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }
    .field textarea { min-height: 116px; resize: vertical; }
    .compact-actions { padding-top: 16px; margin-top: 16px; border-top: 1px solid rgba(17,79,149,.10); }
    .toggle-list { display: grid; gap: 10px; }
    .toggle-item { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, #fff, #f6fbff); border: 1px solid rgba(17,79,149,.10); }
    .toggle-item strong { display: block; margin-bottom: 4px; font-size: 14px; color: #0f4d91; }
    .toggle-item span { display: block; font-size: 12px; line-height: 1.45; color: #597aa1; }
    .toggle-item input { width: 18px; height: 18px; accent-color: #2f88ea; }
    .preview-box { padding: 13px 14px; border-radius: 18px; background: linear-gradient(180deg, #edf6ff, #dbeeff); border: 1px solid rgba(94, 159, 225, .22); margin-bottom: 12px; }
    .preview-box.soft { background: linear-gradient(180deg, #fff, #f6fbff); border-color: rgba(17,79,149,.10); }
    .preview-box strong { display: block; margin-bottom: 5px; color: #0f4d91; }
    .preview-box p { margin: 0; font-size: 13px; color: #5f7ea5; line-height: 1.45; }
    .plain-list { margin: 0; padding-left: 18px; color: #5f7ea5; font-size: 13px; line-height: 1.5; }
    .stacked-actions { display: grid; gap: 10px; }
    .stacked-actions .action-btn { width: 100%; }
    .history-list.compact-history { display: grid; gap: 10px; }
    .history-item { padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg,#fff,#f6fbff); border: 1px solid rgba(17,79,149,.10); }
    .history-item strong { display: block; margin-bottom: 4px; font-size: 13px; color: #0f4d91; }
    .history-item span { display: block; color: #5f7ea5; font-size: 13px; line-height: 1.45; }
    @media (max-width: 980px) {
      .frontpage-admin-layout { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      .form-grid.two-col, .section-head.split { grid-template-columns: 1fr; display: grid; }
      .editor-head { flex-direction: column; align-items: flex-start; }
    }


    .frontpage-admin-layout {
      display:grid;
      grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
      gap:18px;
      align-items:start;
    }
    .frontpage-main-card, .frontpage-side-card {
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
      border: 1px solid rgba(170,204,238,.58);
      border-radius: 24px;
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .context-switch-card {
      border-radius: 20px;
      background: linear-gradient(180deg, #ffffff, #f5faff);
      border: 1px solid rgba(17,79,149,.10);
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-soft);
    }
    .context-switch-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
    .context-switch-head h2 { margin:0 0 4px; font-size:18px; color:#0f4d91; }
    .context-switch-head p { margin:0; font-size:13px; line-height:1.5; color:#5a7ba3; max-width:720px; }
    .context-tabs { display:flex; gap:10px; flex-wrap:wrap; }
    .context-tab {
      border: 1px solid rgba(170,204,238,.58);
      background: rgba(255,255,255,.92);
      color:#1c5d9f;
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }
    .context-tab:hover { transform: translateY(-1px); background:#f2f8ff; }
    .context-tab.active {
      color:#fff;
      border-color:transparent;
      background: linear-gradient(180deg, #2f88ea, #176acc);
      box-shadow: 0 8px 18px rgba(47,143,236,.22);
    }
    .context-panel { display:none; gap:16px; }
    .context-panel.active { display:grid; }
    .context-summary {
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .summary-mini {
      border-radius: 18px;
      padding: 14px;
      border: 1px solid rgba(17,79,149,.08);
      background: linear-gradient(180deg, #ffffff, #f4f9ff);
      box-shadow: var(--shadow-soft);
    }
    .summary-mini strong { display:block; margin-bottom:6px; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:#6786ab; }
    .summary-mini span { display:block; font-size:15px; font-weight:800; line-height:1.4; color:#0f4d91; }
    .content-slab {
      border-radius: 20px;
      border: 1px solid rgba(17,79,149,.10);
      background: linear-gradient(180deg, #fff, #f6fbff);
      padding: 16px;
      box-shadow: var(--shadow-soft);
    }
    .content-slab h3 { margin:0 0 10px; font-size:17px; color:#0f4d91; }
    .content-slab p { margin:0 0 12px; font-size:13px; line-height:1.55; color:#5a7ba3; }
        .toggle-grid { display:grid; grid-template-columns:1fr; gap:12px; }
    .toggle-item {
      display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center;
      padding:14px 15px; border-radius:18px;
      border:1px solid rgba(17,79,149,.10); background:linear-gradient(180deg, #ffffff, #f6fbff);
      box-shadow: var(--shadow-soft);
    }
    .toggle-item.state-on { background:linear-gradient(180deg, #ffffff, #f3f9ff); }
    .toggle-item.state-off { background:linear-gradient(180deg, #ffffff, #fbfdff); }
    .toggle-item.state-locked {
      background:linear-gradient(180deg, #f5f8fc, #eef3f8);
      border-color: rgba(17,79,149,.12);
    }
    .toggle-copy strong { display:block; font-size:14px; color:#124f94; }
    .toggle-copy span { display:block; margin-top:4px; font-size:12px; line-height:1.45; color:#5d7da4; }
    .toggle-control { display:flex; align-items:center; justify-content:flex-end; }
    .toggle-checkbox {
      position:absolute;
      opacity:0;
      width:1px;
      height:1px;
      pointer-events:none;
    }
    .toggle-switch {
      position:relative; display:inline-block; width:56px; height:32px; border-radius:999px; cursor:pointer;
      background:linear-gradient(180deg, #dfe8f2, #c9d8e6); box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 6px 12px rgba(35,100,177,.10);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .toggle-switch::after {
      content:""; position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:999px;
      background:linear-gradient(180deg, #ffffff, #eef5ff); box-shadow:0 4px 10px rgba(0,0,0,.12);
      transition:left .18s ease, background .18s ease;
    }
    .toggle-switch:hover { transform: translateY(-1px); }
    .toggle-checkbox:checked + .toggle-switch { background:linear-gradient(180deg, #56abff, #1d7ae0); }
    .toggle-checkbox:checked + .toggle-switch::after { left:28px; background:linear-gradient(180deg, #ffffff, #f4fbff); }
    .toggle-checkbox:focus-visible + .toggle-switch { outline:3px solid rgba(47,143,236,.22); outline-offset:2px; }
    .toggle-checkbox:disabled + .toggle-switch,
    .toggle-switch.is-locked {
      cursor:not-allowed; background:linear-gradient(180deg, #c7d4e2, #aabdcf); box-shadow: inset 0 1px 2px rgba(255,255,255,.55);
      opacity:.95;
    }
    .toggle-checkbox:disabled + .toggle-switch::before,
    .toggle-switch.is-locked::before {
      content:"🔒"; position:absolute; left:8px; top:7px; font-size:12px; line-height:1; color:#4d6278; z-index:2;
    }
    .toggle-checkbox:checked:disabled + .toggle-switch::after,
    .toggle-switch.is-locked::after { left:28px; background:linear-gradient(180deg, #ffffff, #edf2f8); }
    @media (max-width: 760px) {
      .toggle-item { grid-template-columns:1fr; }
      .toggle-control { justify-content:space-between; }
    }
    .role-note {
      border-radius: 18px;
      background: linear-gradient(180deg, #fff8e8, #fff2cf);
      border: 1px solid rgba(241,186,74,.38);
      padding: 14px 15px;
    }
    .role-note strong { display:block; margin-bottom:5px; color:#8a6724; }
    .role-note p { margin:0; font-size:13px; line-height:1.55; color:#7f622a; }
    .preview-box + .preview-box { margin-top: 12px; }
    .preview-box {
      border-radius:18px;
      background: linear-gradient(180deg, #ffffff, #f4f9ff);
      border: 1px solid rgba(17,79,149,.10);
      padding:14px 15px;
      box-shadow: var(--shadow-soft);
    }
    .preview-box.soft { background: linear-gradient(180deg, #f7fbff, #eef6ff); }
    .preview-box strong { display:block; margin-bottom:6px; font-size:14px; color:#0f4d91; }
    .preview-box p { margin:0; font-size:13px; line-height:1.55; color:#5a7ba3; }
    .history-list { display:grid; gap:10px; }
    .history-item {
      display:grid; gap:4px; padding:12px 13px; border-radius:16px;
      background:linear-gradient(180deg, #fff, #f6fbff);
      border:1px solid rgba(17,79,149,.08);
    }
    .history-item strong { font-size:13px; color:#0f4d91; }
    .history-item span { font-size:13px; line-height:1.5; color:#5d7da4; }
    @media (max-width: 980px) {
      .frontpage-admin-layout, .context-summary, .toggle-grid { grid-template-columns:1fr; }
    }


    .combined-preview-box { display:grid; gap:12px; }
    .preview-line p { margin:4px 0 0; }
    .scroll-history { max-height: 280px; overflow: auto; padding-right: 6px; }
    .scroll-history::-webkit-scrollbar { width: 10px; }
    .scroll-history::-webkit-scrollbar-thumb { background: rgba(17,79,149,.18); border-radius: 999px; }
    .history-item em { display:block; margin-top:6px; font-style:normal; font-size:12px; color:#6c89ad; font-weight:700; }

  .frontpage-admin-layout{display:block !important;}
  .frontpage-main-card{width:100%;max-width:none;}
  .tab-shell{width:100%;}
  .tab-panel{width:100%;}
</style>
<style>
  .page { padding: 22px 0 26px; }
  .hero-card { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.98)); border: 1px solid rgba(170,204,238,.62); border-radius: 24px; box-shadow: var(--shadow); padding: 18px 22px; display:grid; grid-template-columns: 1.5fr .9fr; gap:18px; }
  .hero-title { margin:0 0 8px; font-size:20px; color:#0f4d91; }
  .hero-text { margin:0; font-size:14px; line-height:1.6; color:#5d7da4; }
  .stat-stack { display:grid; gap:10px; }
  .compact-stat { min-width:0; padding: 6px 18px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(236,246,255,.95)); border:1px solid rgba(170,204,238,.55); box-shadow:var(--shadow-soft); display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .hero-stat-label { font-weight:900; font-size:14px; color:#0f4d91; }
  .hero-stat-sub { font-size:11px; text-align:center; margin-top:-2px; color:#6b86aa; }
  .hero-stat-value { font-size:18px; line-height:1; padding-top:2px; font-weight:900; color:#1c66b2; }
  .controls-card, .list-card, .detail-card { background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.98)); border:1px solid rgba(170,204,238,.62); border-radius:24px; box-shadow:var(--shadow); }
  .controls-card { margin-top:16px; padding:14px 18px; display:grid; grid-template-columns: 1.2fr auto auto auto; gap:10px; align-items:center; }
  .search-input, .filter-select { width:100%; border:1px solid rgba(170,204,238,.7); background:#fff; border-radius:14px; padding:10px 12px; font:inherit; color:var(--text); }
  .ghost-btn, .solid-btn, .danger-btn { border:0; border-radius:14px; padding:10px 14px; font-size:13px; font-weight:900; cursor:pointer; box-shadow:var(--shadow-soft); }
  .ghost-btn { background:linear-gradient(180deg, #ffffff, #edf6ff); color:#1c66b2; border:1px solid rgba(170,204,238,.7); }
  .solid-btn { background:linear-gradient(180deg, #2f88ea, #176acc); color:#fff; }
  .danger-btn { background:linear-gradient(180deg, #ffb0b0, #df4949); color:#fff; }
  .main-layout { margin-top:16px; display:grid; grid-template-columns: 1.2fr .9fr; gap:16px; align-items:start; }
  .list-head, .detail-head { padding:16px 18px 12px; border-bottom:1px solid rgba(170,204,238,.52); display:flex; justify-content:space-between; align-items:end; gap:12px; }
  .card-title { margin:0; font-size:18px; color:#0f4d91; }
  .card-sub { margin:4px 0 0; font-size:13px; color:#6a86aa; }
  .account-list { padding:12px 14px 14px; display:grid; gap:8px; max-height:720px; overflow:auto; }
  .account-item { border:1px solid rgba(170,204,238,.58); border-radius:18px; background:linear-gradient(180deg, #fff, #f3f9ff); padding:12px 13px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; box-shadow:var(--shadow-soft); transition:transform .16s ease, box-shadow .16s ease; }
  .account-item:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(35,100,177,.10); }
  .account-item.is-active { border-color: rgba(47,136,234,.6); box-shadow: 0 0 0 3px rgba(47,136,234,.08), var(--shadow-soft); }
  .account-avatar { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:900; background:linear-gradient(180deg, #8d6cff, #6248d8); }
  .account-main { min-width:0; }
  .account-name { margin:0; font-size:15px; font-weight:900; color:#0f4d91; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .account-meta { margin:4px 0 0; font-size:13px; color:#5d7da4; display:flex; flex-wrap:wrap; gap:8px 14px; }
  .role-tags { display:flex; flex-wrap:wrap; gap:6px; }
  .tag { display:inline-flex; align-items:center; justify-content:center; min-width: fit-content; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:900; color:#fff; }
  .tag.blue { background:linear-gradient(180deg, #2f88ea, #176acc); }
  .tag.green { background:linear-gradient(180deg, #8adf67, #58ba3d); }
  .tag.orange { background:linear-gradient(180deg, #ffbb4d, #ff7f12); }
  .tag.purple { background:linear-gradient(180deg, #8d6cff, #6248d8); }
  .tag.red { background:linear-gradient(180deg, #ff9d9d, #df4949); }
  .mini-actions { display:flex; flex-direction:column; gap:8px; }
  .mini-btn { border:0; border-radius:12px; padding:8px 10px; background:linear-gradient(180deg, #ffffff, #eef7ff); color:#1c66b2; font-size:12px; font-weight:900; border:1px solid rgba(170,204,238,.64); cursor:pointer; }
  .detail-body { padding:16px 18px 18px; display:grid; gap:14px; }
  .detail-top { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
  .detail-avatar { width:62px; height:62px; border-radius:20px; display:grid; place-items:center; color:#fff; font-size:22px; font-weight:900; background:linear-gradient(180deg, #8d6cff, #6248d8); }
  .detail-name { margin:0; font-size:17px; color:#0f4d91; }
  .detail-line { margin:4px 0 0; font-size:13px; color:#5d7da4; }
  .detail-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  .info-card { border-radius:18px; border:1px solid rgba(170,204,238,.55); background:linear-gradient(180deg, #fff, #f5faff); padding:12px 13px; }
  .info-label { margin:0 0 6px; font-size:12px; color:#6a86aa; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
  .info-value { margin:0; font-size:14px; color:#0f4d91; font-weight:800; line-height:1.45; }
  .inline-list { display:flex; flex-wrap:wrap; gap:6px; }
  .section-card { border-radius:18px; border:1px solid rgba(170,204,238,.55); background:linear-gradient(180deg, #fff, #f5faff); padding:12px 13px; }
  .section-title { margin:0 0 8px; font-size:14px; color:#0f4d91; }
  .log-list { display:grid; gap:7px; }
  .log-item { font-size:13px; color:#5d7da4; padding:7px 0; border-top:1px solid rgba(17,79,149,.08); }
  .log-item:first-child { border-top:0; padding-top:0; }
  .action-row { display:flex; flex-wrap:wrap; gap:10px; }
  @media (max-width: 1080px) { .hero-card, .main-layout { grid-template-columns:1fr; } .controls-card { grid-template-columns:1fr 1fr; } .detail-grid { grid-template-columns:1fr; } }
  @media (max-width: 760px) { .controls-card { grid-template-columns:1fr; } .account-item { grid-template-columns:auto 1fr; } .mini-actions { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; } }


    .hub-page { padding: 22px 0 28px; }
    .breadcrumb-bar {
      display:flex; align-items:center; gap:8px; flex-wrap:wrap;
      margin: 0 0 14px;
      font-size:13px; font-weight:800; color:#5f7ea5;
    }
    .breadcrumb-bar a { color:#2364a7; text-decoration:none; }
    .breadcrumb-bar a:hover { text-decoration:underline; }
    .breadcrumb-sep { opacity:.7; }

    .settings-intro-card {
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
      border: 1px solid rgba(170,204,238,.62);
      border-radius: 26px;
      box-shadow: var(--shadow);
      padding: 22px 24px;
      margin-bottom: 16px;
    }
    .settings-intro-top {
      display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start;
    }
    .settings-intro-title { margin:0 0 8px; font-size:24px; line-height:1.18; color:#0f4d91; }
    .settings-intro-text { margin:0; max-width:780px; font-size:14px; line-height:1.6; color:#496d99; }
    .settings-intro-note {
      margin-top:14px; padding-top:14px; border-top:1px solid rgba(17,79,149,.10);
      font-size:13px; line-height:1.55; color:#5b7ba2;
    }

    .hub-stat-card {
      min-width: 0;
      background: linear-gradient(180deg, #edf6ff, #dbeeff);
      border: 1px solid rgba(94, 159, 225, .22);
      border-radius: 18px;
      padding: 14px 15px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }
    .hub-stat-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#587da9; }
    .hub-stat-value { margin-top:6px; font-size:29px; font-weight:900; color:#0f4d91; }
    .hub-stat-sub { margin-top:4px; font-size:12px; line-height:1.45; color:#5f7ea5; }

    .hub-grid {
      display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
    }
    .hub-tile {
      position:relative;
      border-radius:24px;
      background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.96));
      border:1px solid rgba(170,204,238,.58);
      box-shadow: var(--shadow-soft);
      padding:18px 18px 16px;
      display:grid; gap:12px;
      min-height: 250px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    }
    .hub-tile:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 28px rgba(35,100,177,.16);
      border-color: rgba(31,130,233,.32);
      background: linear-gradient(180deg, #ffffff, #eaf4ff);
    }
    .hub-tile-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .hub-icon {
      width:52px; height:52px; border-radius:18px; display:grid; place-items:center;
      color:#fff; font-size:25px; box-shadow: var(--shadow-soft);
    }
    .hub-icon.frontpage { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
    .hub-icon.popup { background: linear-gradient(180deg, #ffb558, #f97e18); }
    .hub-icon.messages { background: linear-gradient(180deg, #8d6cff, #6147d8); }
    .hub-icon.links { background: linear-gradient(180deg, #79cf5b, #48a432); }
    .hub-icon.features { background: linear-gradient(180deg, #ffd45a, #f0b000); color:#8a5d00; }
    .hub-icon.tech { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
    .hub-tag {
      display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 10px;
      border-radius:999px; font-size:12px; font-weight:800; color:#175c9f; background:#eaf4ff;
    }
    .hub-title { margin:0; font-size:20px; line-height:1.18; color:#0f4d91; }
    .hub-text { margin:0; font-size:14px; line-height:1.55; color:#55779f; }
    .hub-list { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
    .hub-list li {
      position:relative; padding-left:16px; font-size:13px; line-height:1.48; color:#4f7198;
    }
    .hub-list li::before {
      content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:999px;
      background: linear-gradient(180deg, #5eb8ff, #2f8fec);
    }
    .hub-foot {
      margin-top:auto; padding-top:12px; border-top:1px solid rgba(17,79,149,.10);
      display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
      text-align:center;
    }
    .hub-link { color:#2364a7; text-decoration:none; font-size:13px; font-weight:900; }
    .hub-link:hover { text-decoration:underline; }

    .hub-bottom-note {
      margin-top:16px;
      border-radius:22px;
      background: linear-gradient(180deg, #fff8e8, #fff2cf);
      border: 1px solid rgba(241, 186, 74, .42);
      box-shadow: var(--shadow-soft);
      padding: 18px 18px 16px;
    }
    .hub-bottom-note h3 { margin:0 0 8px; font-size:18px; color:#875f0a; }
    .hub-bottom-note p { margin:0; font-size:13px; line-height:1.58; color:#81632a; }

    @media (max-width: 1080px) {
      .hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .settings-intro-top { grid-template-columns:1fr; }
    }
    @media (max-width: 700px) {
      .hub-grid { grid-template-columns:1fr; }
      .settings-intro-card { padding:18px; border-radius:22px; }
      .settings-intro-title { font-size:22px; }
    }



    .frontpage-admin-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr);
      gap: 18px;
      align-items: start;
    }
    .frontpage-main-card,
    .side-card-compact,
    .editor-card {
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
      border: 1px solid rgba(170,204,238,.58);
      border-radius: 24px;
      box-shadow: var(--shadow);
    }
    .frontpage-main-card { padding: 18px; }
    .frontpage-side-stack { display: grid; gap: 18px; }
    .side-card-compact { padding: 18px; }
    .section-head { margin-bottom: 14px; }
    .section-head.split { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
    .section-kicker { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: #e8f2ff; color: #1f67b5; font-size: 11px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
    .section-title { margin: 8px 0 6px; font-size: 21px; color: #0f4d91; }
    .section-copy { margin: 0; color: #56779f; font-size: 14px; line-height: 1.55; }
    .section-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: linear-gradient(180deg,#edf6ff,#dcecff); color: #0d5db8; font-size: 12px; font-weight: 900; white-space: nowrap; }
    .editor-stack { display: grid; gap: 16px; }
    .editor-card { padding: 16px; box-shadow: var(--shadow-soft); }
    .editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .editor-head h3 { margin: 0 0 4px; font-size: 17px; color: #0f4d91; }
    .editor-head p { margin: 0; color: #5d7da4; font-size: 13px; line-height: 1.45; }
    .mini-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; }
    .mini-chip.blue { background: #dff0ff; color: #1d6dc1; }
    .mini-chip.purple { background: #ede7ff; color: #6847d5; }
    .form-grid.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .field.field-span-2 { grid-column: 1 / -1; }
    .field span { display: block; margin-bottom: 6px; color: #235790; font-size: 13px; font-weight: 900; }
    .field input, .field textarea, .field select {
      width: 100%; border: 1px solid rgba(17,79,149,.14); background: rgba(255,255,255,.98);
      border-radius: 16px; padding: 13px 14px; font: inherit; color: #134f92; box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }
    .field textarea { min-height: 116px; resize: vertical; }
    .compact-actions { padding-top: 16px; margin-top: 16px; border-top: 1px solid rgba(17,79,149,.10); }
    .toggle-list { display: grid; gap: 10px; }
    .toggle-item { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, #fff, #f6fbff); border: 1px solid rgba(17,79,149,.10); }
    .toggle-item strong { display: block; margin-bottom: 4px; font-size: 14px; color: #0f4d91; }
    .toggle-item span { display: block; font-size: 12px; line-height: 1.45; color: #597aa1; }
    .toggle-item input { width: 18px; height: 18px; accent-color: #2f88ea; }
    .preview-box { padding: 13px 14px; border-radius: 18px; background: linear-gradient(180deg, #edf6ff, #dbeeff); border: 1px solid rgba(94, 159, 225, .22); margin-bottom: 12px; }
    .preview-box.soft { background: linear-gradient(180deg, #fff, #f6fbff); border-color: rgba(17,79,149,.10); }
    .preview-box strong { display: block; margin-bottom: 5px; color: #0f4d91; }
    .preview-box p { margin: 0; font-size: 13px; color: #5f7ea5; line-height: 1.45; }
    .plain-list { margin: 0; padding-left: 18px; color: #5f7ea5; font-size: 13px; line-height: 1.5; }
    .stacked-actions { display: grid; gap: 10px; }
    .stacked-actions .action-btn { width: 100%; }
    .history-list.compact-history { display: grid; gap: 10px; }
    .history-item { padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg,#fff,#f6fbff); border: 1px solid rgba(17,79,149,.10); }
    .history-item strong { display: block; margin-bottom: 4px; font-size: 13px; color: #0f4d91; }
    .history-item span { display: block; color: #5f7ea5; font-size: 13px; line-height: 1.45; }
    @media (max-width: 980px) {
      .frontpage-admin-layout { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      .form-grid.two-col, .section-head.split { grid-template-columns: 1fr; display: grid; }
      .editor-head { flex-direction: column; align-items: flex-start; }
    }


    .frontpage-admin-layout {
      display:grid;
      grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
      gap:18px;
      align-items:start;
    }
    .frontpage-main-card, .frontpage-side-card {
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,250,255,.96));
      border: 1px solid rgba(170,204,238,.58);
      border-radius: 24px;
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .context-switch-card {
      border-radius: 20px;
      background: linear-gradient(180deg, #ffffff, #f5faff);
      border: 1px solid rgba(17,79,149,.10);
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-soft);
    }
    .context-switch-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
    .context-switch-head h2 { margin:0 0 4px; font-size:18px; color:#0f4d91; }
    .context-switch-head p { margin:0; font-size:13px; line-height:1.5; color:#5a7ba3; max-width:720px; }
    .context-tabs { display:flex; gap:10px; flex-wrap:wrap; }
    .context-tab {
      border: 1px solid rgba(170,204,238,.58);
      background: rgba(255,255,255,.92);
      color:#1c5d9f;
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }
    .context-tab:hover { transform: translateY(-1px); background:#f2f8ff; }
    .context-tab.active {
      color:#fff;
      border-color:transparent;
      background: linear-gradient(180deg, #2f88ea, #176acc);
      box-shadow: 0 8px 18px rgba(47,143,236,.22);
    }
    .context-panel { display:none; gap:16px; }
    .context-panel.active { display:grid; }
    .context-summary {
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .summary-mini {
      border-radius: 18px;
      padding: 14px;
      border: 1px solid rgba(17,79,149,.08);
      background: linear-gradient(180deg, #ffffff, #f4f9ff);
      box-shadow: var(--shadow-soft);
    }
    .summary-mini strong { display:block; margin-bottom:6px; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:#6786ab; }
    .summary-mini span { display:block; font-size:15px; font-weight:800; line-height:1.4; color:#0f4d91; }
    .content-slab {
      border-radius: 20px;
      border: 1px solid rgba(17,79,149,.10);
      background: linear-gradient(180deg, #fff, #f6fbff);
      padding: 16px;
      box-shadow: var(--shadow-soft);
    }
    .content-slab h3 { margin:0 0 10px; font-size:17px; color:#0f4d91; }
    .content-slab p { margin:0 0 12px; font-size:13px; line-height:1.55; color:#5a7ba3; }
    .toggle-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
    .toggle-item {
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      min-height:48px; padding:11px 13px; border-radius:16px;
      border:1px solid rgba(17,79,149,.08); background:rgba(255,255,255,.92);
    }
    .toggle-copy strong { display:block; font-size:13px; color:#124f94; }
    .toggle-copy span { display:block; margin-top:3px; font-size:12px; line-height:1.4; color:#5d7da4; }
    .toggle-pill { display:inline-flex; align-items:center; justify-content:center; min-width:78px; min-height:30px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:900; }
    .toggle-pill.on { background:#def4e7; color:#227c47; }
    .toggle-pill.off { background:#ffe8e8; color:#b24949; }
    .role-note {
      border-radius: 18px;
      background: linear-gradient(180deg, #fff8e8, #fff2cf);
      border: 1px solid rgba(241,186,74,.38);
      padding: 14px 15px;
    }
    .role-note strong { display:block; margin-bottom:5px; color:#8a6724; }
    .role-note p { margin:0; font-size:13px; line-height:1.55; color:#7f622a; }
    .preview-box + .preview-box { margin-top: 12px; }
    .preview-box {
      border-radius:18px;
      background: linear-gradient(180deg, #ffffff, #f4f9ff);
      border: 1px solid rgba(17,79,149,.10);
      padding:14px 15px;
      box-shadow: var(--shadow-soft);
    }
    .preview-box.soft { background: linear-gradient(180deg, #f7fbff, #eef6ff); }
    .preview-box strong { display:block; margin-bottom:6px; font-size:14px; color:#0f4d91; }
    .preview-box p { margin:0; font-size:13px; line-height:1.55; color:#5a7ba3; }
    .history-list { display:grid; gap:10px; }
    .history-item {
      display:grid; gap:4px; padding:12px 13px; border-radius:16px;
      background:linear-gradient(180deg, #fff, #f6fbff);
      border:1px solid rgba(17,79,149,.08);
    }
    .history-item strong { font-size:13px; color:#0f4d91; }
    .history-item span { font-size:13px; line-height:1.5; color:#5d7da4; }
    @media (max-width: 980px) {
      .frontpage-admin-layout, .context-summary, .toggle-grid { grid-template-columns:1fr; }
    }

</style>

<style>
  .frontpage-main-card{background:transparent;border:0;box-shadow:none;padding:0}
  .tab-shell{display:grid}
  .top-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 0 0;padding:0;background:transparent;border:0;box-shadow:none}
  .tab-btn{position:relative;border:1px solid rgba(17,79,149,.16);background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(237,246,255,.92));border-radius:18px 18px 0 0;padding:0px 20px;color:#2d5f97;font-size:13px;font-weight:900;cursor:pointer;box-shadow:var(--shadow-soft);min-height:25px}
  .tab-btn.active{background:linear-gradient(180deg,#2f88ea,#176acc);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(35,100,177,.18)}
  .tab-panel{display:none;background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.96));border:1px solid rgba(170,204,238,.6);border-radius:0 24px 24px 24px;box-shadow:var(--shadow);padding:18px 20px 20px}
  .tab-panel.active{display:block}
  .frontpage-tab-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.8fr);gap:18px;align-items:start}
  .frontpage-tab-main{display:grid;gap:16px}
  .frontpage-side-card{margin:0}
  @media (max-width: 980px){.frontpage-tab-grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="header-row admin-header-row">
<div class="brand">
<div class="brand-logo" aria-label="OefenHub logo" role="img"></div>
<div class="welcome-text">Welkom terug, Noor</div>
</div>
<div aria-label="Beheernavigatie" class="nav-pills admin-nav-pills">
<button class="pill blue" type="button">Site instellingen</button>
<button class="pill orange" type="button">Categorieën beheren</button>
<button class="pill green" type="button">Accounts beheren</button>
</div>
<div class="header-actions">
<button aria-label="Berichten" class="mail-btn">✉️<span class="badge">3</span></button>
<div class="profile-nav">
<button aria-expanded="false" aria-label="Profiel" class="profile-chip" type="button">
<span class="avatar">N</span>
<span class="profile-badge">2</span>
</button>
<div class="dropdown-menu align-right profile-dropdown">
<div class="menu-list">
<a class="menu-link" href="#"><span class="menu-icon green">👤</span><span>Profiel</span></a>
<a class="menu-link" href="#"><span class="menu-icon blue">⚙</span><span>Voorkeuren</span></a>
<a class="menu-link" href="#"><span class="menu-icon yellow">♿</span><span>Toegankelijkheid</span></a>
<a class="menu-link" href="#"><span class="menu-icon purple">👥</span><span>Vrienden</span></a>
<a class="menu-link is-active" href="#"><span class="menu-icon orange">!</span><span>Meldingen (2)</span></a>
<a class="menu-link" href="#"><span class="menu-icon red">↩</span><span>Uitloggen</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="hub-page">
  <div class="wrap">
    <nav class="breadcrumb-bar" aria-label="Breadcrumb">
      <a href="#">Home</a>
      <span class="breadcrumb-sep">›</span>
      <a href="#">Site instellingen</a>
      <span class="breadcrumb-sep">›</span>
      <span>Frontpage</span>
    </nav>

    <section class="settings-intro-card">
      <div class="settings-intro-top">
        <div>
          <h1 class="settings-intro-title">Frontpage</h1>
          <p class="settings-intro-text">Beheer hier per frontpage-context de zichtbare onderdelen, hoofdteksten en basisgedrag van de startpagina. Kies eerst voor welke gebruikerssituatie je werkt en pas daarna alleen die variant aan. Zo blijft het beheer overzichtelijk, ook wanneer de inhoud per rol of inlogsituatie verschilt.</p>
        </div>
      </div>
    </section>

    <section class="frontpage-admin-layout" aria-label="Frontpage beheer">
      <article class="frontpage-main-card">
        <div class="tab-shell" aria-label="Frontpage context selector">
          <div class="top-tabs" role="tablist" aria-label="Frontpage contexten">
            <button class="tab-btn active" role="tab" aria-selected="true" aria-controls="panel-public" id="tab-public" type="button">Niet ingelogd</button>
            <button class="tab-btn" role="tab" aria-selected="false" aria-controls="panel-norole" id="tab-norole" type="button">Zonder rol</button>
            <button class="tab-btn" role="tab" aria-selected="false" aria-controls="panel-admin" id="tab-admin" type="button">Beheerder</button>
            <button class="tab-btn" role="tab" aria-selected="false" aria-controls="panel-teacher" id="tab-teacher" type="button">Docent</button>
            <button class="tab-btn" role="tab" aria-selected="false" aria-controls="panel-student" id="tab-student" type="button">Leerling</button>
          </div>

        <section class="tab-panel active" id="panel-public" role="tabpanel" aria-labelledby="tab-public">
          <div class="frontpage-tab-grid">
            <div class="frontpage-tab-main">
          <div class="context-summary">
            <div class="summary-mini"><strong>Doelgroep</strong><span>Bezoekers vóór inloggen of registreren</span></div>
            <div class="summary-mini"><strong>Focus</strong><span>Werving, uitleg en eerste vertrouwen</span></div>
            <div class="summary-mini"><strong>Hoofdacties</strong><span>Inloggen en eventueel registreren</span></div>
          </div>
          <div class="content-slab">
            <h3>Teksten & knoppen</h3>
            <div class="form-grid two-col">
              <label class="field field-span-2"><span>Hoofdtitel</span><input type="text" value="Welkom bij OefenHub"/></label>
              <label class="field field-span-2"><span>Introductietekst</span><textarea>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek, met passende begeleiding voor thuis en in de klas.</textarea></label>
              <label class="field"><span>Primaire knop</span><input type="text" value="Inloggen"/></label>
              <label class="field"><span>Secundaire knop</span><input type="text" value="Meer informatie"/></label>
            </div>
          </div>
          <div class="content-slab">
            <h3>Zichtbare onderdelen</h3>
            <div class="toggle-grid">
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Introblok</strong><span>Welkomstblok bovenaan de pagina met titel, uitleg en hoofdactie.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-1"><label class="toggle-switch is-on" for="toggle-1"></label></div></div>
              <div class="toggle-item state-off"><div class="toggle-copy"><strong>Registratieblok</strong><span>Alleen tonen als registratie publiek open staat.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" aria-label="Toggle zichtbaar onderdeel" id="toggle-2"><label class="toggle-switch" for="toggle-2"></label></div></div>
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Uitlegblokken</strong><span>Korte toelichting over werking en doelgroep.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-3"><label class="toggle-switch is-on" for="toggle-3"></label></div></div>
            </div>
          </div>
        
            </div>
            <aside class="frontpage-side-card">
        <div class="section-head">
          <div>
            <h2 class="section-title">Preview & publicatie</h2>
          </div>
        </div>
        <div class="preview-box combined-preview-box">
          <div class="preview-line"><strong>Actieve context in preview</strong><p>Niet ingelogd · openbare frontpage</p></div>
          <div class="preview-line"><strong>Laatste publicatie</strong><p>24 mrt 2026 · 14:18 door Noor van Dijk</p></div>
        </div>
        <div class="action-row compact-actions">
          <button class="action-btn secondary" type="button">Preview openen</button>
          <button class="action-btn primary" type="button">Wijzigingen opslaan</button>
        </div>

        <div class="section-head history-head">
          <div>
            <h2 class="section-title">Geschiedenis</h2>
          </div>
        </div>
        <div class="history-list compact-history scroll-history">
          <div class="history-item"><strong>24 mrt 2026 · 14:18</strong><span>Welkomsttitel voor ingelogde gebruikers aangepast.</span><em>Uitgevoerd door Noor van Dijk</em></div>
          <div class="history-item"><strong>24 mrt 2026 · 14:22</strong><span>Registratie op openbare frontpage uitgezet.</span><em>Uitgevoerd door Noor van Dijk</em></div>
          <div class="history-item"><strong>22 mrt 2026 · 09:41</strong><span>Controletekst voor frontpage zonder rol toegevoegd.</span><em>Uitgevoerd door Sam Peters</em></div>
          <div class="history-item"><strong>21 mrt 2026 · 16:03</strong><span>Leerlingfrontpage geactualiseerd met statistiekblok.</span><em>Uitgevoerd door Noor van Dijk</em></div>
        </div>
      </aside>
          </div>
        </section>

        <section class="tab-panel" id="panel-norole" role="tabpanel" aria-labelledby="tab-norole">
          <div class="frontpage-tab-grid">
            <div class="frontpage-tab-main">
          <div class="context-summary">
            <div class="summary-mini"><strong>Doelgroep</strong><span>Ingelogd, maar nog zonder actieve rol</span></div>
            <div class="summary-mini"><strong>Focus</strong><span>Oriëntatie en rolkeuze begeleiden</span></div>
            <div class="summary-mini"><strong>Hoofdacties</strong><span>Geen blanco pagina; rolkeuze staat centraal</span></div>
          </div>
          <div class="content-slab">
            <h3>Teksten & uitleg</h3>
            <div class="form-grid one-col">
              <label class="field"><span>Welkomsttitel</span><input type="text" value="Welkom in OefenHub"/></label>
              <label class="field"><span>Uitlegtekst</span><textarea>Kies eerst in welke rol je OefenHub wilt gebruiken. Daarna zie je de onderdelen die bij die rol horen en kun je direct verder.</textarea></label>
              <label class="field"><span>Knoptekst rolkeuze</span><input type="text" value="Kies je rol"/></label>
            </div>
          </div>
          <div class="content-slab">
            <h3>Zichtbare onderdelen</h3>
            <div class="toggle-grid">
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Neutrale welkomsectie</strong><span>Korte uitleg in plaats van een lege frontpage.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-5"><label class="toggle-switch is-on" for="toggle-5"></label></div></div>
</div>
          </div>
          <div class="role-note"><strong>Let op</strong><p>Deze context heeft geen blanco frontpage. De gebruiker ziet een neutrale startweergave en wordt direct geholpen richting rolkeuze.</p></div>
        
            </div>
            <aside class="frontpage-side-card">
        <div class="section-head">
          <div>
            <h2 class="section-title">Preview & publicatie</h2>
          </div>
        </div>
        <div class="preview-box combined-preview-box">
          <div class="preview-line"><strong>Actieve context in preview</strong><p>Ingelogd zonder rol · neutrale frontpage</p></div>
          <div class="preview-line"><strong>Laatste publicatie</strong><p>24 mrt 2026 · 14:18 door Noor van Dijk</p></div>
        </div>
        <div class="action-row compact-actions">
          <button class="action-btn secondary" type="button">Preview openen</button>
          <button class="action-btn primary" type="button">Wijzigingen opslaan</button>
        </div>

        <div class="section-head history-head">
          <div>
            <h2 class="section-title">Geschiedenis</h2>
          </div>
        </div>
        <div class="history-list compact-history scroll-history">
          <div class="history-item"><strong>24 mrt 2026 · 14:18</strong><span>Welkomsttitel voor ingelogde gebruikers aangepast.</span><em>Uitgevoerd door Noor van Dijk</em></div>
          <div class="history-item"><strong>24 mrt 2026 · 14:22</strong><span>Registratie op openbare frontpage uitgezet.</span><em>Uitgevoerd door Noor van Dijk</em></div>
          <div class="history-item"><strong>22 mrt 2026 · 09:41</strong><span>Controletekst voor frontpage zonder rol toegevoegd.</span><em>Uitgevoerd door Sam Peters</em></div>
          <div class="history-item"><strong>21 mrt 2026 · 16:03</strong><span>Leerlingfrontpage geactualiseerd met statistiekblok.</span><em>Uitgevoerd door Noor van Dijk</em></div>
        </div>
      </aside>
          </div>
        </section>

        <section class="tab-panel" id="panel-admin" role="tabpanel" aria-labelledby="tab-admin">
          <div class="frontpage-tab-grid">
            <div class="frontpage-tab-main">
          <div class="context-summary">
            <div class="summary-mini"><strong>Doelgroep</strong><span>Gebruikers met actieve beheerdersrol</span></div>
            <div class="summary-mini"><strong>Focus</strong><span>Overzicht, meldingen en beheer-ingangen</span></div>
            <div class="summary-mini"><strong>Hoofdacties</strong><span>Snelle toegang tot relevante beheerinformatie</span></div>
          </div>
          <div class="content-slab">
            <h3>Teksten & uitleg</h3>
            <div class="form-grid one-col">
              <label class="field"><span>Welkomsttitel</span><input type="text" value="Welkom in het beheer"/></label>
              <label class="field"><span>Introductietekst</span><textarea>Gebruik de frontpage om snel zicht te houden op meldingen, accounts en systeemonderdelen die aandacht nodig hebben. Vanuit hier ga je gericht door naar de juiste beheerpagina.</textarea></label>
            </div>
          </div>
          <div class="content-slab">
            <h3>Zichtbare onderdelen</h3>
            <div class="toggle-grid">
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Introblok</strong><span>Welkomstblok bovenaan de pagina met titel en korte uitleg.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-8"><label class="toggle-switch is-on" for="toggle-8"></label></div></div>
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Meldingenoverzicht</strong><span>Compact overzicht van open of nieuwe meldingen.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-9"><label class="toggle-switch is-on" for="toggle-9"></label></div></div>
            </div>
          </div>
        
            </div>
            <aside class="frontpage-side-card">
        <div class="section-head">
          <div>
            <h2 class="section-title">Preview & publicatie</h2>
          </div>
        </div>
        <div class="preview-box combined-preview-box">
          <div class="preview-line"><strong>Actieve context in preview</strong><p>Beheerder · beheerfrontpage</p></div>
          <div class="preview-line"><strong>Laatste publicatie</strong><p>24 mrt 2026 · 14:18 door Noor van Dijk</p></div>
        </div>
        <div class="action-row compact-actions">
          <button class="action-btn secondary" type="button">Preview openen</button>
          <button class="action-btn primary" type="button">Wijzigingen opslaan</button>
        </div>

        <div class="section-head history-head">
          <div>
            <h2 class="section-title">Geschiedenis</h2>
          </div>
        </div>
        <div class="history-list compact-history scroll-history">
          <div class="history-item"><strong>24 mrt 2026 · 14:18</strong><span>Welkomsttitel voor ingelogde gebruikers aangepast.</span><em>Uitgevoerd door Noor van Dijk</em></div>
          <div class="history-item"><strong>24 mrt 2026 · 14:22</strong><span>Registratie op openbare frontpage uitgezet.</span><em>Uitgevoerd door Noor van Dijk</em></div>
          <div class="history-item"><strong>22 mrt 2026 · 09:41</strong><span>Controletekst voor frontpage zonder rol toegevoegd.</span><em>Uitgevoerd door Sam Peters</em></div>
          <div class="history-item"><strong>21 mrt 2026 · 16:03</strong><span>Leerlingfrontpage geactualiseerd met statistiekblok.</span><em>Uitgevoerd door Noor van Dijk</em></div>
        </div>
      </aside>
          </div>
        </section>

        <section class="tab-panel" id="panel-teacher" role="tabpanel" aria-labelledby="tab-teacher">
          <div class="frontpage-tab-grid">
            <div class="frontpage-tab-main">
          <div class="context-summary">
            <div class="summary-mini"><strong>Doelgroep</strong><span>Docenten en testdocenten in docentcontext</span></div>
            <div class="summary-mini"><strong>Focus</strong><span>Overzicht in plaats van taakgestuurde lijstjes</span></div>
            <div class="summary-mini"><strong>Hoofdacties</strong><span>Relevante overzichtsblokken en snelle oriëntatie</span></div>
          </div>
          <div class="content-slab">
            <h3>Teksten & uitleg</h3>
            <div class="form-grid one-col">
              <label class="field"><span>Welkomsttitel</span><input type="text" value="Welkom terug"/></label>
              <label class="field"><span>Introductietekst</span><textarea>Hier zie je in één oogopslag de belangrijkste informatie voor jouw docentcontext. Gebruik de navigatie om gericht naar leerlingen, online overzicht of oefenaanbod te gaan.</textarea></label>
            </div>
          </div>
          <div class="content-slab">
            <h3>Zichtbare onderdelen</h3>
            <div class="toggle-grid">
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Introblok</strong><span>Welkomstblok bovenaan de pagina met korte toelichting.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-12"><label class="toggle-switch is-on" for="toggle-12"></label></div></div>
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Leerlingenoverzicht</strong><span>Compact samenvattingsblok op de frontpage.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-13"><label class="toggle-switch is-on" for="toggle-13"></label></div></div>
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Oefenaanbod</strong><span>Samenvatting van niveaus en inhoud.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-14"><label class="toggle-switch is-on" for="toggle-14"></label></div></div>
            </div>
          </div>
        
            </div>
            <aside class="frontpage-side-card">
        <div class="section-head">
          <div>
            <h2 class="section-title">Preview & publicatie</h2>
          </div>
        </div>
        <div class="preview-box combined-preview-box">
          <div class="preview-line"><strong>Actieve context in preview</strong><p>Docent · docentfrontpage</p></div>
          <div class="preview-line"><strong>Laatste publicatie</strong><p>24 mrt 2026 · 14:18 door Noor van Dijk</p></div>
        </div>
        <div class="action-row compact-actions">
          <button class="action-btn secondary" type="button">Preview openen</button>
          <button class="action-btn primary" type="button">Wijzigingen opslaan</button>
        </div>

        <div class="section-head history-head">
          <div>
            <h2 class="section-title">Geschiedenis</h2>
          </div>
        </div>
        <div class="history-list compact-history scroll-history">
          <div class="history-item"><strong>24 mrt 2026 · 14:18</strong><span>Welkomsttitel voor ingelogde gebruikers aangepast.</span><em>Uitgevoerd door Noor van Dijk</em></div>
          <div class="history-item"><strong>24 mrt 2026 · 14:22</strong><span>Registratie op openbare frontpage uitgezet.</span><em>Uitgevoerd door Noor van Dijk</em></div>
          <div class="history-item"><strong>22 mrt 2026 · 09:41</strong><span>Controletekst voor frontpage zonder rol toegevoegd.</span><em>Uitgevoerd door Sam Peters</em></div>
          <div class="history-item"><strong>21 mrt 2026 · 16:03</strong><span>Leerlingfrontpage geactualiseerd met statistiekblok.</span><em>Uitgevoerd door Noor van Dijk</em></div>
        </div>
      </aside>
          </div>
        </section>

        <section class="tab-panel" id="panel-student" role="tabpanel" aria-labelledby="tab-student">
          <div class="frontpage-tab-grid">
            <div class="frontpage-tab-main">
          <div class="context-summary">
            <div class="summary-mini"><strong>Doelgroep</strong><span>Leerlingen met actieve leerlingcontext</span></div>
            <div class="summary-mini"><strong>Focus</strong><span>Motivatie, recente voortgang en snelle start</span></div>
            <div class="summary-mini"><strong>Hoofdacties</strong><span>Motivatie, voortgang en relevante inhoud</span></div>
          </div>
          <div class="content-slab">
            <h3>Teksten & uitleg</h3>
            <div class="form-grid one-col">
              <label class="field"><span>Welkomsttitel</span><input type="text" value="Klaar om te oefenen?"/></label>
              <label class="field"><span>Introductietekst</span><textarea>Je frontpage laat zien waar je verder kunt oefenen, wat je laatst hebt gedaan en welke onderdelen op dit moment voor jou beschikbaar zijn.</textarea></label>
            </div>
          </div>
          <div class="content-slab">
            <h3>Zichtbare onderdelen</h3>
            <div class="toggle-grid">
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Introblok</strong><span>Welkomstblok bovenaan de pagina met korte motivatie.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-15"><label class="toggle-switch is-on" for="toggle-15"></label></div></div>
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Recente categorieën</strong><span>Helpt leerlingen sneller opnieuw te starten.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-16"><label class="toggle-switch is-on" for="toggle-16"></label></div></div>
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Populaire categorieën</strong><span>Laat veelgebruikte of aanbevolen categorieën zien.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-17"><label class="toggle-switch is-on" for="toggle-17"></label></div></div>
              <div class="toggle-item state-on"><div class="toggle-copy"><strong>Statistieken</strong><span>Alleen tonen als leerlingstatistieken zijn ingeschakeld.</span></div><div class="toggle-control"><input type="checkbox" class="toggle-checkbox" checked aria-label="Toggle zichtbaar onderdeel" id="toggle-18"><label class="toggle-switch is-on" for="toggle-18"></label></div></div>
            </div>
          </div>
        
            </div>
            <aside class="frontpage-side-card">
        <div class="section-head">
          <div>
            <h2 class="section-title">Preview & publicatie</h2>
          </div>
        </div>
        <div class="preview-box combined-preview-box">
          <div class="preview-line"><strong>Actieve context in preview</strong><p>Leerling · leerlingfrontpage</p></div>
          <div class="preview-line"><strong>Laatste publicatie</strong><p>24 mrt 2026 · 14:18 door Noor van Dijk</p></div>
        </div>
        <div class="action-row compact-actions">
          <button class="action-btn secondary" type="button">Preview openen</button>
          <button class="action-btn primary" type="button">Wijzigingen opslaan</button>
        </div>

        <div class="section-head history-head">
          <div>
            <h2 class="section-title">Geschiedenis</h2>
          </div>
        </div>
        <div class="history-list compact-history scroll-history">
          <div class="history-item"><strong>24 mrt 2026 · 14:18</strong><span>Welkomsttitel voor ingelogde gebruikers aangepast.</span><em>Uitgevoerd door Noor van Dijk</em></div>
          <div class="history-item"><strong>24 mrt 2026 · 14:22</strong><span>Registratie op openbare frontpage uitgezet.</span><em>Uitgevoerd door Noor van Dijk</em></div>
          <div class="history-item"><strong>22 mrt 2026 · 09:41</strong><span>Controletekst voor frontpage zonder rol toegevoegd.</span><em>Uitgevoerd door Sam Peters</em></div>
          <div class="history-item"><strong>21 mrt 2026 · 16:03</strong><span>Leerlingfrontpage geactualiseerd met statistiekblok.</span><em>Uitgevoerd door Noor van Dijk</em></div>
        </div>
      </aside>
          </div>
        </section>
        </div>
      </article>
    </section>
  </div>
</main>
<footer class="site-footer">
<div class="footer-grid">
<div class="footer-col">
<h4>OefenHub</h4>
<p>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</p>
</div>
<div class="footer-col">
<h4>Handige Links</h4>
<div class="footer-links">
<a href="#">Over OefenHub</a>
<a href="#">Contact</a>
<a href="#">Privacybeleid</a>
</div>
</div>
<div class="footer-col">
<h4>Snel naar</h4>
<div class="footer-links">
<a href="#">Profiel</a>
<a href="#">Berichten</a>
<a href="#">Meldingen</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 OefenHub</span>
</div>
</footer>

<script>
(function () {
  const profileNav = document.querySelector('.profile-nav');
  const profileBtn = profileNav?.querySelector('.profile-chip');
  if (profileNav && profileBtn) {
    const setOpen = function (open) {
      profileNav.classList.toggle('open', open);
      profileBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
    };
    setOpen(false);
    profileBtn.addEventListener('click', function (event) {
      event.preventDefault();
      event.stopPropagation();
      setOpen(!profileNav.classList.contains('open'));
    });
    document.addEventListener('click', function (event) {
      if (!profileNav.contains(event.target)) {
        setOpen(false);
      }
    });
    document.addEventListener('keydown', function (event) {
      if (event.key === 'Escape') {
        setOpen(false);
      }
    });
  }
})();
</script>
<script>
  (function () {
    const tabs = Array.from(document.querySelectorAll('.top-tabs .tab-btn'));
    const panels = Array.from(document.querySelectorAll('.tab-panel'));
    function activate(tab) {
      const targetId = tab.getAttribute('aria-controls');
      tabs.forEach(btn => {
        const isActive = btn === tab;
        btn.classList.toggle('active', isActive);
        btn.setAttribute('aria-selected', String(isActive));
      });
      panels.forEach(panel => {
        panel.classList.toggle('active', panel.id === targetId);
      });
    }
    tabs.forEach(tab => tab.addEventListener('click', () => activate(tab)));
  })();
</script>
</body>
</html>