    /* Stijlen voor een moderne en overzichtelijke gebruikersinterface */
    body {
      font-family: 'Inter', sans-serif;
      background-color: #f8fafc; /* bg-slate-50 */
      color: #334155; /* text-slate-700 */
    }
    :root {
      --accent-color: #06b6d4; /* cyan-500 */
    }
    .highlight-station {
      background-color: #cffafe; /* cyan-100 */
      color: #0e7490; /* cyan-800 */
      padding: 0.1rem 0.4rem;
      border-radius: 0.25rem;
      font-weight: 600;
    }
    .highlight-abbr {
      background-color: #f1f5f9; /* slate-100 */
      color: #475569; /* slate-600 */
      padding: 0.1rem 0.4rem;
      border-radius: 0.25rem;
      font-weight: 500;
      cursor: help;
      border-bottom: 2px dotted #94a3b8; /* slate-400 */
    }
    .highlight-estimation {
      background-color: var(--accent-color);
      color: white;
      padding: 0.2rem 0.5rem;
      border-radius: 0.375rem;
      font-weight: 700;
    }
    #loader-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(248, 250, 252, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      flex-direction: column;
      gap: 1rem;
      backdrop-filter: blur(4px);
    }
    .spinner {
      border: 5px solid #e2e8f0; /* slate-200 */
      border-top: 5px solid var(--accent-color);
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .tab-btn.active {
        border-color: #e2e8f0;
        border-bottom-color: white;
        color: var(--accent-color);
        font-weight: 700;
        transform: translateY(1px);
    }
    .pattern-block {
      background: #f0f9ff; /* sky-50 */
      border: 1px solid #bae6fd; /* sky-200 */
      border-radius: 0.7rem;
      padding: 1rem 1.25rem;
      margin-bottom: 1rem;
    }
    .pattern-name {
      font-size: 1.1rem;
      font-weight: 700;
      color: #0369a1; /* sky-700 */
    }
    .pattern-route {
      color: #0e7490; /* cyan-800 */
      font-weight: 500;
      margin-top: 0.2rem;
    }
    .pattern-notes {
      color: #475569; /* slate-600 */
      margin-top: 0.3rem;
      font-size: 0.97rem;
    }
    .wait-time-warning {
      background-color: #fef9c3; /* yellow-100 */
      color: #854d0e; /* yellow-800 */
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      border-left: 4px solid #facc15; /* yellow-400 */
      font-size: 0.95rem;
    }
    .heatmap-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
    }
    .heatmap-table th,
    .heatmap-table td {
      padding: 0.45rem 0.7rem;
      text-align: center;
      border-bottom: 1px solid #e2e8f0; /* slate-200 */
    }
    .heatmap-table th {
        font-weight: 600;
        background-color: #f1f5f9; /* slate-100 */
    }
    .heatmap-cell[data-level='3'] { background: #06b6d4; color: white; font-weight: bold; }
    .heatmap-cell[data-level='2'] { background: #67e8f9; color: #155e75; }
    .heatmap-cell[data-level='1'] { background: #cffafe; color: #164e63; }
    .heatmap-cell[data-level='0'] { background: #f8fafc; color: #94a3b8; }