feat(ui): align workbench with Stitch screens

frontend/src/App.tsx

@@ -1,4 +1,10 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
+import '@fontsource/manrope/latin-500.css'
+import '@fontsource/manrope/latin-600.css'
+import '@fontsource/manrope/latin-700.css'
+import '@fontsource/public-sans/latin-400.css'
+import '@fontsource/public-sans/latin-500.css'
+import '@fontsource/public-sans/latin-600.css'
 import './styles/app.css'
 import './styles/premium.css'
 import './styles/atlas-workbench.css'

frontend/src/components/map/MapWorkspace.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react'
+import { BoxSelect, MapPinned, SlidersHorizontal, Trash2 } from 'lucide-react'
 import GeoMap from '../GeoMap'
 import type { AreaRead, CoverageResolveResponse, CoverageStatus, DatasetCreateResponse, DetectionQaResult, MapResultExportRequest, MapViewportState, OrthophotoAcquisitionResult, OrthophotoProductRead, ProjectRead, QaComparisonResult, VectorSelectionBBox, VectorSelectionMetric, VectorSelectionResponse } from '../../types'
 import { useMapThemeSelectionInsights, type MapThemeAcquisition, type MapThemeQuery } from '../../hooks/useMapThemeSelectionInsights'
@@ -1905,8 +1906,11 @@ export function MapWorkspace({
             onClick={() => setAdvancedMode(true)}
             aria-expanded={advancedMode}
             aria-controls="geo-advanced-workbench"
+            aria-label="Geavanceerde werkbank"
+            title="Geavanceerde werkbank"
           >
-            Geavanceerde werkbank
+            <SlidersHorizontal aria-hidden="true" />
+            <span>Geavanceerde werkbank</span>
           </button>
         </header>
 
@@ -2210,6 +2214,7 @@ export function MapWorkspace({
                   type="button"
                   onClick={startBboxSelection}
                 >
+                  <BoxSelect aria-hidden="true" />
                   {bboxSelectionMode ? 'Teken op de kaart…' : 'Teken rechthoek'}
                 </button>
                 <button
@@ -2223,9 +2228,11 @@ export function MapWorkspace({
                   }
                   onClick={() => selectedAreaBbox && void analyzeSelection(selectedAreaBbox, selectedMapArea?.id)}
                 >
+                  <MapPinned aria-hidden="true" />
                   {regionalRasterThemeActive || regionalOnDemandThemeActive ? 'Selecteer een deelgebied' : 'Volledig werkgebied'}
                 </button>
                 <button className="secondary-action" disabled={!mapSelectionBbox} type="button" onClick={clearAreaSelection}>
+                  <Trash2 aria-hidden="true" />
                   Wis selectie
                 </button>
               </div>

frontend/src/components/quality/QualityResultsPanel.tsx

@@ -208,14 +208,48 @@ export function QualityResultsPanel({
         </div>
 
         {qualityChecks.length === 0 ? (
-          <div className="result-state result-state-empty quality-user-empty-state">
-            <strong>Nog geen kwaliteitscontrole uitgevoerd</strong>
-            <p>Selecteer een gebied op de kaart en vergelijk een bewaard resultaat met een officiële referentielaag.</p>
+          <div className="quality-empty-workbench" aria-label="Lege kwaliteitswerkruimte">
+            <aside className="quality-empty-context">
+              <span className="eyebrow">Controles</span>
+              <strong>Nog geen resultaten</strong>
+              <p>Kwaliteitscontroles verschijnen hier nadat een resultaat met een officiële referentielaag is vergeleken.</p>
+              <div className="quality-empty-context-stat">
+                <span>Te controleren lagen</span>
+                <strong>{candidateDatasets.length}</strong>
+              </div>
+              <div className="quality-empty-context-stat">
+                <span>Referentielagen</span>
+                <strong>{referenceDatasets.length}</strong>
+              </div>
+              <button type="button" className="secondary-action" onClick={onRefresh} disabled={!selectedProjectId}>
+                Resultaten vernieuwen
+              </button>
+            </aside>
+            <div className="quality-empty-results">
+              <div className="quality-empty-column-heading">
+                <strong>Resultaten</strong>
+                <span>0 controles</span>
+              </div>
+              <div className="result-state result-state-empty quality-user-empty-state">
+                <strong>Nog geen kwaliteitscontrole uitgevoerd</strong>
+                <p>Selecteer een gebied op de kaart en vergelijk een bewaard resultaat met een officiële referentielaag.</p>
+              </div>
+            </div>
+            <aside className="quality-empty-inspector">
+              <div className="quality-empty-column-heading">
+                <strong>Controle-inspector</strong>
+                <span>Geen selectie</span>
+              </div>
+              <div className="result-state result-state-empty">
+                <strong>Geen bewijs geselecteerd</strong>
+                <p>Scores, databronnen en kaartbewijs worden hier samen getoond zodra een controle beschikbaar is.</p>
+              </div>
+            </aside>
           </div>
         ) : null}
 
         {qualityChecks.length > 0 ? (
-        <details className="quality-advanced-disclosure">
+        <details className="quality-advanced-disclosure" open>
           <summary>
             <span>Details, kaartbewijs en historiek</span>
             <strong>{qualityChecks.length} bewaarde controles</strong>