:root {
        --bg: #0f1117;
        --surface: #1a1d27;
        --surface2: #232733;
        --surface3: #2a3040;
        --surface-ink: #111520;
        --surface-table: #1f2330;
        --border: #2d3140;
        --border-strong: rgba(226, 232, 240, 0.76);
        --text: #e4e6ed;
        --text-dim: #8b8fa3;
        --accent: #c87a3c;
        --accent-light: #e09550;
        --accent-bg: rgba(200, 122, 60, 0.1);
        --green: #4ade80;
        --green-bg: rgba(74, 222, 128, 0.1);
        --blue: #60a5fa;
        --blue-bg: rgba(96, 165, 250, 0.1);
        --red: #f87171;
        --red-bg: rgba(248, 113, 113, 0.1);
        --purple: #a78bfa;
        --purple-bg: rgba(167, 139, 250, 0.1);
        --yellow: #fbbf24;
        --yellow-bg: rgba(251, 191, 36, 0.12);
        --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        --radius: 14px;
        --radius-sm: 10px;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        min-height: 100%;
      }

      body {
        margin: 0;
        background:
          radial-gradient(circle at top left, rgba(200, 122, 60, 0.11), transparent 24%),
          radial-gradient(circle at right, rgba(96, 165, 250, 0.08), transparent 22%),
          var(--bg);
        color: var(--text);
        font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
      }

      h1,
      h2,
      h3,
      p {
        margin: 0;
      }

      button,
      input,
      select,
      textarea {
        font: inherit;
      }

      a {
        color: inherit;
      }

      .hidden {
        display: none !important;
      }

      .eyebrow,
      .muted {
        color: var(--text-dim);
      }

      .login-shell {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 32px 20px;
      }

      .login-card {
        width: min(100%, 460px);
        background:
          linear-gradient(135deg, rgba(200, 122, 60, 0.08), rgba(167, 139, 250, 0.06)),
          var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        box-shadow: var(--shadow);
        padding: 32px;
      }

      .login-brand {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .brand-mark,
      .logo-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--accent), var(--accent-light));
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .credential-box,
      .panel,
      .card,
      .table-card,
      .queue-card,
      .detail-card,
      .tree-node,
      .stat-card,
      .quick-action,
      .placeholder-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }

      .credential-box {
        margin-top: 22px;
        padding: 14px 16px;
        background: var(--accent-bg);
      }

      .form-grid {
        display: grid;
        gap: 14px;
        margin-top: 22px;
      }

      label {
        display: grid;
        gap: 8px;
      }

      .medewerker-functie-rollen-fieldset {
        grid-column: 1 / -1;
      }

      .medewerker-functie-rollen-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 10px 20px;
      }

      .medewerker-functie-rol-option {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 28px;
        cursor: pointer;
      }

      .medewerker-functie-rol-option input[type="checkbox"] {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 0;
        padding: 0;
      }

      .medewerker-functie-rol-option span {
        line-height: 1.25;
      }

      input,
      select,
      textarea {
        width: 100%;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface2);
        color: var(--text);
        padding: 11px 13px;
        outline: none;
      }

      textarea {
        resize: vertical;
      }

      input:focus,
      select:focus,
      textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(200, 122, 60, 0.12);
      }

      input.invalid,
      select.invalid,
      textarea.invalid,
      input[aria-invalid="true"],
      select[aria-invalid="true"],
      textarea[aria-invalid="true"] {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
      }

      .field-hint {
        display: block;
        font-size: 12px;
        line-height: 1.35;
      }

      .field-error {
        display: block;
        color: #fca5a5;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.35;
      }

      .field-error[hidden] {
        display: none;
      }

      #projectInfoStartDate,
      #projectInfoEndDate {
        color-scheme: dark;
        padding-right: 42px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
        background-position: right 13px center;
        background-repeat: no-repeat;
        background-size: 18px 18px;
        cursor: pointer;
      }

      #projectInfoStartDate::-webkit-calendar-picker-indicator,
      #projectInfoEndDate::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0;
      }

      #dagrapportDateInput,
      .dagrapport-inline-input[type="date"],
      .dagrapport-inline-input[type="time"] {
        color-scheme: dark;
        background-color: var(--bg) !important;
        background-position: right 13px center !important;
        background-repeat: no-repeat !important;
        background-size: 18px 18px !important;
        cursor: pointer;
        padding-right: 42px !important;
      }

      #dagrapportDateInput,
      .dagrapport-inline-input[type="date"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e8ecf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
      }

      .dagrapport-inline-input[type="time"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e8ecf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E") !important;
      }

      #dagrapportDateInput::-webkit-calendar-picker-indicator,
      .dagrapport-inline-input[type="date"]::-webkit-calendar-picker-indicator,
      .dagrapport-inline-input[type="time"]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0;
      }

      .dagrapport-inline-input[type="number"] {
        color-scheme: dark;
        padding-right: 10px !important;
      }

      .dagrapport-inline-input[type="number"]::-webkit-inner-spin-button,
      .dagrapport-inline-input[type="number"]::-webkit-outer-spin-button {
        cursor: pointer;
        opacity: 1;
        filter: invert(1) brightness(1.2);
      }

      .button,
      .btn,
      .nav-button,
      .icon-btn {
        transition: all 0.15s ease;
      }

      .button,
      .btn,
      .nav-button {
        border-radius: var(--radius-sm);
        border: 1px solid transparent;
        cursor: pointer;
      }

      .button,
      .btn {
        padding: 9px 16px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
      }

      .button:hover,
      .btn:hover,
      .nav-button:hover,
      .icon-btn:hover {
        transform: translateY(-1px);
      }

      .button.primary,
      .btn-primary {
        background: linear-gradient(135deg, var(--accent), var(--accent-light));
        border-color: rgba(255, 255, 255, 0.16);
        color: #fff;
        box-shadow: 0 10px 24px rgba(200, 122, 60, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24);
      }

      .button.secondary,
      .btn-secondary {
        background: var(--surface2);
        border-color: var(--border);
        color: var(--text);
      }

      #printTabs .button[aria-selected="true"] {
        background: rgba(59, 130, 246, 0.14);
        border-color: rgba(96, 165, 250, 0.92);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
        color: var(--text);
      }

      .button.ghost {
        background: transparent;
        border-color: var(--border);
        color: var(--text-dim);
      }

      .button.danger {
        background: var(--red-bg);
        border-color: rgba(248, 113, 113, 0.24);
        color: #ffd0d0;
      }

      .button:disabled,
      .btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
      }

      .app-shell {
        min-height: 100vh;
        display: flex;
      }

      .sidebar {
        width: 260px;
        background: var(--surface);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        height: 100vh;
      }

      .sidebar-header {
        padding: 20px;
        border-bottom: 1px solid var(--border);
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.4px;
      }

      .project-selector {
        margin-top: 18px;
        width: 100%;
        display: grid;
        gap: 4px;
      }

      .project-selector-label {
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-dim);
      }

      .project-selector input,
      .project-selector select {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 13px;
        line-height: 1.2;
      }

      .project-admin-lifecycle-row {
        cursor: pointer;
      }

      .project-admin-lifecycle-row:hover td,
      .project-admin-lifecycle-row:focus td {
        background: rgba(200, 122, 60, 0.08);
      }

      .project-admin-sections {
        display: grid;
        gap: 20px;
      }

      .project-admin-section summary {
        align-items: center;
        cursor: pointer;
        display: grid;
        gap: 8px 18px;
        grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr) auto;
        list-style: none;
      }

      .project-admin-section summary::-webkit-details-marker {
        display: none;
      }

      .project-admin-section summary::before {
        color: var(--accent);
        content: "▸";
        font-size: 16px;
        grid-column: 1;
        grid-row: 1;
        transform: translateX(-18px);
        transition: transform 0.18s ease;
      }

      .project-admin-section[open] summary::before {
        transform: translateX(-18px) rotate(90deg);
      }

      .project-admin-section summary > span:first-child {
        color: #f4f5fb;
        font-size: 15px;
        font-weight: 800;
        grid-column: 1;
        grid-row: 1;
      }

      .project-admin-section summary > .muted {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
      }

      .project-admin-section summary > .badge {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
      }

      @media (max-width: 760px) {
        .project-admin-section summary {
          grid-template-columns: 1fr;
        }

        .project-admin-section summary > span:first-child,
        .project-admin-section summary > .muted,
        .project-admin-section summary > .badge {
          grid-column: 1;
          grid-row: auto;
          justify-self: start;
        }
      }

      .project-admin-lifecycle-history-row td {
        background: rgba(255, 255, 255, 0.015);
        border-top: 0;
        padding-top: 0;
      }

      .project-admin-lifecycle-history-row:hover td,
      .project-admin-lifecycle-history-row:focus td {
        background: rgba(255, 255, 255, 0.015);
      }

      .project-admin-lifecycle-history-row + .project-admin-lifecycle-row td {
        border-top-color: rgba(255, 255, 255, 0.08);
      }

      .project-admin-lifecycle-history-row .project-admin-lifecycle-history {
        margin-top: 0;
      }

      .project-admin-lifecycle-history {
        display: grid;
        gap: 10px;
        margin-top: 10px;
        min-width: 320px;
      }

      .project-admin-lifecycle-history-entry {
        display: grid;
        gap: 8px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface-ink);
        color: var(--text);
      }

      .project-admin-lifecycle-history-transition {
        font-size: 13px;
        color: var(--text);
      }

      .project-admin-lifecycle-history-meta {
        display: grid;
        gap: 6px;
        margin: 0;
      }

      .project-admin-lifecycle-history-meta div {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 8px;
        align-items: baseline;
      }

      .project-admin-lifecycle-history-meta dt {
        margin: 0;
        color: var(--text-dim);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .project-admin-lifecycle-history-meta dd {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
        color: var(--text);
        font-size: 12px;
      }

      .project-lifecycle-dialog-card {
        width: min(860px, 100%);
      }

      .project-lifecycle-explainer {
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 16px;
        background: rgba(255, 255, 255, 0.03);
      }

      .project-lifecycle-explainer ol {
        margin: 12px 0 0 20px;
        color: var(--text-dim);
        display: grid;
        gap: 8px;
      }

      .project-lifecycle-dialog-body textarea {
        width: 100%;
        resize: vertical;
      }

      .project-lifecycle-status-dropdown {
        min-height: 44px;
      }

      .nav {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
      }

      .nav-section {
        margin-bottom: 10px;
      }

      .nav-section > details > summary {
        list-style: none;
        cursor: pointer;
      }

      .nav-section > details > summary::-webkit-details-marker {
        display: none;
      }

      .nav-section-title {
        padding: 7px 12px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #ffffff;
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--radius-sm);
        user-select: none;
      }

      .nav-section-title::-webkit-details-marker {
        display: none;
      }

      .nav-section > details > summary .nav-section-title::after {
        content: "⌄";
        color: var(--text-dim);
        font-size: 13px;
        line-height: 1;
        transition: transform 0.16s ease, color 0.16s ease;
      }

      .nav-section-title:hover {
        background: var(--surface2);
      }

      .nav-section > details[open] > summary .nav-section-title::after {
        transform: rotate(180deg);
      }

      .nav-section > details:not([open]) {
        margin-bottom: 4px;
      }

      .nav-section-items {
        padding-top: 2px;
      }

      .nav-button {
        width: 100%;
        padding: 10px 12px;
        background: transparent;
        border-color: transparent;
        color: var(--text-dim);
        display: flex;
        align-items: center;
        text-align: left;
      }

      .nav-button:hover {
        background: var(--surface2);
        color: var(--text);
        border-color: var(--border);
      }

      .nav-button.active {
        background: var(--accent-bg);
        color: var(--accent-light);
        border-color: rgba(200, 122, 60, 0.2);
      }

      .nav-note {
        margin-left: auto;
        font-size: 10px;
        color: var(--text-dim);
        padding: 2px 7px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface2);
      }

      .sidebar-footer {
        padding: 16px;
        border-top: 1px solid var(--border);
      }

      .user-pill {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-radius: var(--radius-sm);
        background: var(--surface2);
        border: 1px solid var(--border);
      }

      .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), var(--purple));
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        flex-shrink: 0;
      }

      .user-info .name {
        font-size: 13px;
        font-weight: 600;
      }

      .user-info .role {
        font-size: 11px;
        color: var(--text-dim);
      }

      .sidebar-footer-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
      }

      .sidebar-footer-actions .button {
        flex: 1;
        justify-content: center;
      }

      .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .topbar {
        height: 56px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0 24px;
        flex-shrink: 0;
      }

      .topbar-left {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-dim);
        font-size: 13px;
      }

      .breadcrumb .current {
        color: var(--text);
        font-weight: 600;
      }

      .page-title {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.03em;
      }

      .topbar-actions,
      .topbar-right,
      .inline-actions,
      .detail-actions,
      .btn-group,
      .carousel-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .search-bar {
        width: 260px;
        padding-left: 14px;
        min-height: 44px;
        border-radius: 13px;
        background: var(--surface2);
        border-color: var(--border);
        color: var(--text);
      }

      .search-bar::placeholder {
        color: rgba(228, 230, 237, 0.42);
      }

      .icon-btn {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--surface2);
        color: var(--text-dim);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .content {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
      }

      .section {
        display: none;
      }

      .section.active {
        display: block;
      }

      #section-werkputten.active {
        display: flex;
        flex-direction: column;
      }

      .map-shell {
        position: relative;
        height: calc(100vh - 120px);
      }

      .map-empty-state {
        position: absolute;
        left: 16px;
        bottom: 16px;
        z-index: 900;
        max-width: min(420px, calc(100% - 32px));
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: rgba(15, 17, 23, 0.92);
        color: var(--text);
        box-shadow: var(--shadow);
        backdrop-filter: blur(12px);
      }

      .map-empty-state strong {
        display: block;
        margin-bottom: 4px;
      }

      .leaflet-control-layers {
        background: rgba(26, 29, 39, 0.94);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: var(--shadow);
      }

      .map-popup {
        min-width: 180px;
      }

      .map-popup-title {
        font-weight: 700;
      }

      .map-popup-meta {
        margin-top: 6px;
        color: var(--text-dim);
        font-size: 12px;
      }

      .map-popup-actions {
        margin-top: 12px;
      }

      .map-popup-button {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid rgba(200, 122, 60, 0.22);
        border-radius: 10px;
        background: var(--accent-bg);
        color: var(--accent-light);
        font-weight: 600;
        cursor: pointer;
      }

      .map-material-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        padding: 4px 8px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 11px;
        font-weight: 700;
      }

      .leaflet-container {
        background: var(--bg);
        font: inherit;
      }

      .leaflet-control-layers-toggle {
        background-color: var(--surface2);
      }

      .leaflet-control-layers-expanded {
        padding: 12px;
      }

      .map-layer-legend {
        min-width: 220px;
        max-width: 280px;
        height: calc(100% - 24px);
        max-height: calc(100% - 24px);
        overflow: auto;
        padding: 12px;
        margin: 12px 12px 12px 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.24);
      }

      .map-layer-group + .map-layer-group {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
      }

      .map-layer-group summary {
        cursor: pointer;
        list-style: none;
        font-size: 12px;
        font-weight: 700;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .map-layer-group summary::-webkit-details-marker {
        display: none;
      }

      .map-layer-item {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        margin-top: 10px;
        color: var(--text);
      }

      .map-layer-item input {
        margin: 0;
      }

      .map-layer-item--base {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .map-layer-swatch {
        width: 16px;
        height: 16px;
        border-radius: 999px;
        border: 2px solid var(--layer-color);
        background: color-mix(in srgb, var(--layer-color) 18%, transparent);
        position: relative;
      }

      .map-layer-swatch::after {
        content: "";
        position: absolute;
        left: 2px;
        right: 2px;
        top: 50%;
        border-top: 2px dashed var(--layer-color);
        transform: translateY(-50%);
      }

      .map-layer-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .map-layer-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .map-layer-title {
        font-weight: 600;
      }

      .map-layer-count,
      .map-layer-meta {
        font-size: 12px;
        color: var(--text-dim);
      }

      .leaflet-control-layers-base label,
      .leaflet-control-layers-overlays label {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text);
        line-height: 1.25;
      }

      .leaflet-control-layers-base label span,
      .leaflet-control-layers-overlays label span {
        flex: 1;
      }

      .leaflet-control-layers-base input,
      .leaflet-control-layers-overlays input {
        margin: 0;
        order: -1;
        flex: 0 0 auto;
      }

      .leaflet-popup-content-wrapper,
      .leaflet-popup-tip {
        background: var(--surface);
        color: var(--text);
      }

      .leaflet-popup-content {
        margin: 12px 14px;
      }

      .leaflet-container a {
        color: var(--accent-light);
      }

      .section-stack,
      .stack {
        display: grid;
        gap: 20px;
      }

      .panel,
      .detail-card {
        padding: 20px;
      }

      .hero {
        padding: 24px;
        background:
          linear-gradient(135deg, rgba(200, 122, 60, 0.08), rgba(167, 139, 250, 0.07)),
          var(--surface);
      }

      .dashboard-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }

      .dashboard-meta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 12px;
      }

      .kanban-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 14px;
      }

      .kanban-board {
        display: grid;
        gap: 16px;
      }

      .kanban-board-columns {
        display: grid;
        grid-template-columns: repeat(5, minmax(220px, 1fr));
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 6px;
      }

      .kanban-column {
        min-height: 420px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: linear-gradient(180deg, rgba(200, 122, 60, 0.08), rgba(255, 255, 255, 0.02)), var(--surface);
      }

      .kanban-card {
        display: grid;
        gap: 10px;
        margin-top: 12px;
        padding: 14px;
        border: 1px solid rgba(200, 122, 60, 0.22);
        border-radius: var(--radius-sm);
        background: var(--surface2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
      }

      .kanban-card-modal,
      .kanban-locked-state {
        padding: 20px;
        border: 1px solid rgba(200, 122, 60, 0.26);
        border-radius: var(--radius);
        background: linear-gradient(135deg, rgba(200, 122, 60, 0.1), rgba(167, 139, 250, 0.06)), var(--surface);
      }

      .kanban-card-modal {
        display: grid;
        gap: 12px;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }

      .vondsten-dashboard-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
      }

      .stat-card {
        padding: 18px;
      }

      .stat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
      }

      .stat-label {
        color: var(--text-dim);
        font-size: 13px;
      }

      .stat-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        font-size: 12px;
        font-weight: 700;
      }

      .stat-card.orange .stat-icon {
        background: var(--accent-bg);
        color: var(--accent-light);
      }

      .stat-card.green .stat-icon {
        background: var(--green-bg);
        color: var(--green);
      }

      .stat-card.blue .stat-icon {
        background: var(--blue-bg);
        color: var(--blue);
      }

      .stat-card.purple .stat-icon {
        background: var(--purple-bg);
        color: var(--purple);
      }

      .stat-value {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -0.04em;
      }

      .stat-change {
        margin-top: 4px;
        font-size: 12px;
      }

      .quick-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .quick-action {
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        cursor: pointer;
        color: var(--text);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        text-align: left;
        font: inherit;
      }

      .quick-action:hover {
        border-color: rgba(200, 122, 60, 0.3);
      }

      .qa-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-weight: 700;
      }

      .qa-icon.sync {
        background: var(--purple-bg);
        color: var(--purple);
      }

      .qa-icon.find {
        background: var(--accent-bg);
        color: var(--accent-light);
      }

      .qa-icon.photo {
        background: var(--blue-bg);
        color: var(--blue);
      }

      .qa-title {
        font-weight: 600;
        color: var(--text);
      }

      .qa-desc {
        margin-top: 2px;
        color: var(--text-secondary, #94a3b8);
        font-size: 12px;
      }

      .ai-panel {
        background:
          linear-gradient(135deg, rgba(200, 122, 60, 0.08), rgba(167, 139, 250, 0.07)),
          var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 20px;
        overflow: hidden;
      }

      .ai-panel-header,
      .card-header,
      .toolbar,
      .detail-headline,
      .queue-title,
      .tree-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .dozen-detail-actions {
        flex-wrap: nowrap;
        gap: 10px;
      }

      .doos-action-button {
        padding: 6px 12px;
        min-height: 34px;
        font-size: 13px;
        line-height: 1.1;
        border-radius: 10px;
        font-weight: 700;
      }

      .ai-panel-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .ai-badge {
        background: linear-gradient(135deg, var(--accent), var(--purple));
        color: #fff;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
      }

      .carousel-track-wrapper {
        overflow: hidden;
      }

      .carousel-track {
        display: flex;
        gap: 16px;
        transition: transform 0.35s ease;
      }

      .carousel-btn {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface2);
        color: var(--text);
        cursor: pointer;
      }

      .ai-card {
        min-width: calc(33.333% - 11px);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        overflow: hidden;
        flex-shrink: 0;
      }

      .ai-card-img {
        position: relative;
        height: 170px;
        cursor: pointer;
        background: linear-gradient(135deg, rgba(200, 122, 60, 0.18), rgba(96, 165, 250, 0.14));
      }

      .ai-card-img img,
      .photo-thumb,
      .mini-photo-thumb,
      .find-thumb-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .ai-card-overlay {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        gap: 6px;
      }

      .ai-tag {
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
      }

      .ai-tag.high {
        background: rgba(74, 222, 128, 0.9);
        color: #052e16;
      }

      .ai-tag.medium {
        background: rgba(251, 191, 36, 0.9);
        color: #422006;
      }

      .ai-tag.low {
        background: rgba(248, 113, 113, 0.9);
        color: #450a0a;
      }

      .ai-card-body {
        padding: 14px;
      }

      .ai-card-title {
        font-weight: 600;
        margin-bottom: 4px;
      }

      .ai-card-conf {
        font-size: 12px;
        margin-bottom: 6px;
      }

      .ai-card-conf.high {
        color: var(--green);
      }

      .ai-card-conf.medium {
        color: var(--yellow);
      }

      .ai-card-conf.low {
        color: var(--red);
      }

      .ai-card-details {
        font-size: 12px;
        color: var(--text-dim);
      }

      .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 14px;
      }

      .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--border);
        cursor: pointer;
      }

      .carousel-dot.active {
        width: 22px;
        background: var(--accent);
      }

      .two-col,
      .content-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 20px;
      }

      .split-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
        gap: 20px;
      }

      .card,
      .table-card,
      .queue-card,
      .detail-card {
        overflow: hidden;
      }

      .card-header {
        padding: 16px 20px;
        border-bottom: 1px solid var(--border);
      }

      .card-body {
        padding: 0;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th {
        text-align: left;
        padding: 10px 20px;
        background: var(--surface2);
        color: var(--text-dim);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      td {
        padding: 14px 20px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
      }

      tr:hover td {
        background: rgba(255, 255, 255, 0.02);
      }

      .clickable-row {
        cursor: pointer;
      }

      .clickable-row.active td {
        background: rgba(200, 122, 60, 0.08);
      }

      .find-row {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .find-thumb {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: linear-gradient(135deg, rgba(200, 122, 60, 0.18), rgba(96, 165, 250, 0.12));
        color: #fff;
        font-size: 12px;
        font-weight: 700;
      }

      .find-meta-title {
        font-weight: 600;
      }

      .find-meta-subtitle {
        font-size: 12px;
        color: var(--text-dim);
      }

      .find-tag {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
      }

      .find-tag.keramiek {
        background: var(--accent-bg);
        color: var(--accent-light);
      }

      .find-tag.bot {
        background: var(--green-bg);
        color: var(--green);
      }

      .find-tag.metaal {
        background: var(--blue-bg);
        color: var(--blue);
      }

      .find-tag.steen {
        background: var(--purple-bg);
        color: var(--purple);
      }

      .find-tag.default {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text);
      }

      .status-dot {
        width: 8px;
        height: 8px;
        display: inline-block;
        border-radius: 50%;
        margin-right: 6px;
      }

      .status-dot.ai {
        background: var(--green);
      }

      .status-dot.manual {
        background: var(--accent);
      }

      .status-dot.pending {
        background: var(--text-dim);
      }

      .activity-list,
      .queue-list,
      .result-list,
      .detail-list,
      .meta-list,
      .upload-list,
      .tree {
        display: grid;
        gap: 10px;
      }

      .activity-item,
      .queue-item,
      .result-item,
      .meta-row,
      .detail-block,
      .tree-node,
      .determination-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface2);
      }

      .activity-item,
      .queue-item {
        padding: 14px;
      }

      .detail-subsection-title {
        margin-top: 18px;
        margin-bottom: 10px;
        color: var(--text-dim);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .activity-item {
        display: flex;
        gap: 12px;
      }

      .activity-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        flex-shrink: 0;
      }

      .activity-icon.find {
        background: var(--accent-bg);
        color: var(--accent-light);
      }

      .activity-icon.ai {
        background: var(--green-bg);
        color: var(--green);
      }

      .activity-icon.photo {
        background: var(--blue-bg);
        color: var(--blue);
      }

      .activity-icon.sync {
        background: var(--purple-bg);
        color: var(--purple);
      }

      .activity-time {
        color: var(--text-dim);
        font-size: 11px;
        margin-top: 2px;
      }

      .queue-item {
        cursor: pointer;
      }

      .queue-item.active {
        background: linear-gradient(135deg, rgba(200, 122, 60, 0.08), rgba(255, 255, 255, 0.03));
        border-color: rgba(200, 122, 60, 0.22);
      }

      .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 11px;
        border-radius: 999px;
        background: var(--surface2);
        border: 1px solid rgba(226, 232, 240, 0.07);
        color: var(--text-dim);
        font-size: 11px;
        font-weight: 700;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
      }

      .badge.accent {
        background: var(--accent-bg);
        color: var(--accent-light);
      }

      .badge.success {
        background: var(--green-bg);
        color: var(--green);
      }

      .badge.warning {
        background: var(--yellow-bg);
        color: var(--yellow);
      }

      .badge.danger {
        background: var(--red-bg);
        color: var(--red);
      }

      .badge.controle-niet_gesplitst {
        background: var(--red-bg);
        color: var(--red);
      }

      .badge.controle-gesplitst,
      .badge.controle-deels_gedetermineerd {
        background: var(--yellow-bg);
        color: var(--yellow);
      }

      .badge.controle-pending_review {
        background: var(--blue-bg);
        color: var(--blue);
      }

      .badge.controle-compleet {
        background: var(--green-bg);
        color: var(--green);
      }

      .badge.spoor-kuil {
        background: var(--accent-bg);
        color: var(--accent-light);
      }

      .badge.spoor-paalkuil {
        background: var(--blue-bg);
        color: var(--blue);
      }

      .badge.spoor-greppel {
        background: var(--green-bg);
        color: var(--green);
      }

      .badge.spoor-waterput {
        background: var(--purple-bg);
        color: var(--purple);
      }

      .badge.spoor-muur {
        background: rgba(156, 113, 83, 0.2);
        color: #e8c0a2;
      }

      .progress-card {
        padding: 20px;
      }

      .progress-track {
        height: 12px;
        border-radius: 999px;
        background: var(--surface2);
        overflow: hidden;
        border: 1px solid var(--border);
        margin-top: 14px;
      }

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent), var(--accent-light));
        border-radius: 999px;
      }

      .tree-wrap {
        padding: 14px;
      }

      .tree-empty {
        padding: 12px 6px;
        color: var(--text-dim);
      }

      .find-tree-node {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface2);
      }

      .find-tree-node + .find-tree-node {
        margin-top: 8px;
      }

      .find-tree-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px 12px;
      }

      .find-tree-row.level-1 {
        padding-left: 28px;
      }

      .find-tree-row.level-2 {
        padding-left: 42px;
      }

      .tree-toggle {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        border: 1px solid var(--border);
        background: var(--surface3);
        color: var(--text);
        cursor: pointer;
        flex-shrink: 0;
      }

      .tree-toggle.empty {
        opacity: 0.35;
        cursor: default;
      }

      .tree-node-main {
        min-width: 0;
        flex: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .tree-node-title {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
      }

      .tree-node-title strong {
        font-size: 13px;
      }

      .tree-node-subtitle {
        color: var(--text-dim);
        font-size: 11px;
        white-space: nowrap;
      }

      .find-tree-row .inline-actions {
        gap: 6px;
      }

      .find-tree-row .button {
        padding: 6px 10px;
        font-size: 12px;
        line-height: 1.1;
      }

      .tree-children {
        display: grid;
        gap: 8px;
        padding: 0 10px 10px;
      }

      .tree-inline-form {
        margin: 0 12px 12px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
      }

      .tree-inline-form .form-grid {
        margin-top: 12px;
      }

      .tree-inline-form .split-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      @media (max-width: 720px) {
        .tree-inline-form .split-form-grid {
          grid-template-columns: 1fr;
        }
      }

      .breadcrumb-inline {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .breadcrumb-link {
        color: var(--accent-light);
        text-decoration: none;
        cursor: pointer;
      }

      .breadcrumb-sep {
        color: var(--text-dim);
      }

      .controle-layout {
        display: grid;
        gap: 20px;
      }

      .vondsten-dashboard-progress-stack {
        display: grid;
        gap: 16px;
      }

      .vondsten-dashboard-filter-toolbar {
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }

      .vondsten-dashboard-filter-row {
        margin-left: auto;
        align-items: center;
        flex-wrap: wrap;
      }

      .vondsten-dashboard-filter-label {
        font-size: 12px;
        color: var(--text-dim);
        font-weight: 600;
      }

      .controle-table-row {
        cursor: pointer;
      }

      .controle-table-row.active td {
        background: rgba(200, 122, 60, 0.08);
      }

      .status-dot.red {
        background: var(--red);
      }

      .status-dot.amber {
        background: var(--yellow);
      }

      .status-dot.orange {
        background: var(--accent);
      }

      .status-dot.blue {
        background: var(--blue);
      }

      .status-dot.green {
        background: var(--green);
      }

      .detail-grid,
      .vondst-meta-grid,
      .export-grid {
        display: grid;
        gap: 12px;
      }

      .detail-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      }

      .vondst-meta-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      }

      .export-grid {
        grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
      }

      .ref-photo-panel {
        margin-top: 18px;
      }

      .ref-photo-upload {
        display: grid;
        gap: 12px;
        margin-top: 18px;
      }

      .ref-photo-upload-grid,
      .ref-photo-groups {
        display: grid;
        gap: 12px;
      }

      .ref-photo-upload-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      }

      .ref-photo-groups {
        margin-top: 18px;
      }

      .ref-photo-group {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        padding: 14px;
      }

      .ref-photo-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin-top: 12px;
      }

      .ref-photo-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface2);
        overflow: hidden;
      }

      .ref-photo-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
        background: rgba(15, 23, 42, 0.08);
      }

      .ref-photo-body {
        display: grid;
        gap: 8px;
        padding: 12px;
      }

      .template-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .template-card {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(15, 23, 42, 0.08)), var(--surface);
        padding: 18px;
        display: grid;
        gap: 14px;
        min-height: 260px;
      }

      .template-card.empty-card {
        background: linear-gradient(180deg, rgba(148, 163, 184, 0.03), rgba(15, 23, 42, 0.08)), var(--surface);
      }

      .template-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }

      .template-card-title {
        display: flex;
        gap: 12px;
      }

      .template-card-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        background: rgba(200, 122, 60, 0.12);
        border: 1px solid rgba(200, 122, 60, 0.18);
      }

      .template-card-name {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.03em;
      }

      .template-card-subtitle {
        margin-top: 4px;
        font-size: 12px;
        color: var(--text-dim);
      }

      .template-card-meta {
        display: grid;
        gap: 10px;
      }

      .template-file-name {
        font-size: 14px;
        font-weight: 600;
      }

      .template-card-foot {
        margin-top: auto;
        display: grid;
        gap: 12px;
      }

      .template-card-links {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .template-link {
        color: var(--accent-light);
        text-decoration: none;
        font-weight: 600;
      }

      .template-link:hover {
        text-decoration: underline;
      }

      .template-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }

      .template-hero-copy {
        max-width: 720px;
      }

      .template-meta-list {
        display: grid;
        gap: 8px;
      }

      .template-meta-item {
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface2);
      }

      .template-modal {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: grid;
        place-items: center;
        padding: 24px;
        background: rgba(2, 6, 23, 0.82);
        backdrop-filter: blur(8px);
      }

      .template-modal-card {
        width: min(720px, 100%);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .template-modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 20px 16px;
        border-bottom: 1px solid var(--border);
      }

      .template-modal-body {
        display: grid;
        gap: 16px;
        padding: 20px;
      }

      .template-upload-dropzone {
        min-height: 150px;
      }

      .template-dropzone-meta {
        margin-top: 10px;
        font-size: 12px;
        color: var(--text-dim);
      }

      .template-upload-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .project-info-section > .stack {
        max-width: 1180px;
        margin: 0 auto;
      }

      .project-info-panel {
        background: linear-gradient(90deg, rgba(18, 18, 20, 0.98), rgba(18, 18, 20, 0.92));
        border-color: rgba(255, 255, 255, 0.09);
        border-radius: 16px;
        padding: 18px 18px 20px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 48px rgba(0, 0, 0, 0.18);
      }

      .project-info-panel .toolbar {
        align-items: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin: 0 0 10px;
        padding: 0 0 14px;
      }

      .project-info-panel h3 {
        color: #f4f5fb;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.02em;
      }

      .project-info-form {
        gap: 10px;
      }

      .project-info-category {
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        background: rgba(10, 11, 14, 0.72);
      }

      .project-info-category summary {
        display: grid;
        grid-template-columns: 14px minmax(160px, 1fr) auto;
        gap: 10px;
        align-items: center;
        padding: 13px 16px;
        cursor: pointer;
        list-style: none;
        border-left: 3px solid transparent;
        background: rgba(255, 255, 255, 0.018);
      }

      .project-info-category summary::-webkit-details-marker {
        display: none;
      }

      .project-info-category summary::before {
        content: "▸";
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        color: var(--text-dim);
        line-height: 1;
        transform: translateY(-1px);
      }

      .project-info-category[open] summary::before {
        content: "▾";
        color: var(--accent);
      }

      .project-info-category summary > span {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        color: #f4f5fb;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .project-info-category summary > small {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        color: rgba(228, 230, 237, 0.48);
        font-size: 12px;
        font-weight: 600;
        text-align: right;
      }

      .project-info-category[open] summary {
        border-left-color: var(--accent);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(200, 122, 60, 0.08);
      }

      .project-info-category-body {
        display: grid;
        gap: 12px;
        padding: 14px 16px 16px;
      }

      .project-info-form .template-upload-grid {
        gap: 12px;
      }

      .project-info-form .template-upload-grid.compact-single {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }

      .project-info-form .template-upload-grid.compact-single > label {
        max-width: 100%;
      }

      .project-info-form label {
        gap: 6px;
      }

      .project-info-form label > span,
      .project-info-panel label > span {
        color: rgba(244, 245, 251, 0.88);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.025em;
      }

      .project-info-form input,
      .project-info-form select,
      .project-info-form textarea {
        min-height: 44px;
        border-radius: 12px;
        background: #17191f;
        border-color: rgba(255, 255, 255, 0.09);
        color: #f4f5fb;
        padding: 10px 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }

      .project-info-form textarea {
        min-height: 96px;
      }

      .project-info-form input:hover,
      .project-info-form select:hover,
      .project-info-form textarea:hover {
        border-color: rgba(226, 232, 240, 0.18);
      }

      .project-info-form input:focus,
      .project-info-form select:focus,
      .project-info-form textarea:focus {
        border-color: rgba(224, 149, 80, 0.85);
        background: #1d2028;
        box-shadow: 0 0 0 3px rgba(200, 122, 60, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.045);
      }

      .project-info-form input::placeholder,
      .project-info-form textarea::placeholder {
        color: rgba(228, 230, 237, 0.34);
      }

      .project-info-category-note {
        margin-top: -2px;
        font-size: 12px;
      }

      .project-info-actions {
        justify-content: flex-end;
        padding-top: 4px;
      }

      .project-info-form .button.primary {
        min-height: 42px;
        padding-inline: 18px;
      }

      @media (max-width: 900px) {
        .project-info-form .template-upload-grid,
        .project-info-form .template-upload-grid.compact-single {
          grid-template-columns: 1fr;
        }

        .project-info-category summary {
          grid-template-columns: 1fr;
        }

        .project-info-category summary > small {
          grid-column: 1;
          margin-left: 18px;
          text-align: left;
        }
      }

      .project-emergency-modal-card {
        width: min(980px, 100%);
      }

      .project-emergency-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .project-emergency-results {
        display: grid;
        gap: 16px;
      }

      .project-emergency-category {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface2);
        padding: 16px;
        display: grid;
        gap: 14px;
      }

      .project-emergency-category-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
      }

      .project-emergency-category-header h4 {
        margin: 0;
      }

      .project-emergency-candidate-list {
        display: grid;
        gap: 10px;
      }

      .project-emergency-candidate {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
      }

      .project-emergency-candidate-copy {
        display: grid;
        gap: 4px;
      }

      .project-emergency-candidate-meta {
        font-size: 13px;
        color: var(--text-dim);
      }

      .project-emergency-manual-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .project-emergency-empty {
        padding: 12px 14px;
        border: 1px dashed var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-dim);
        background: rgba(255, 255, 255, 0.02);
      }

      @media (max-width: 720px) {
        .template-upload-grid,
        .project-emergency-manual-grid {
          grid-template-columns: 1fr;
        }
      }

      .template-checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
      }

      .detail-block,
      .meta-row,
      .result-item,
      .vondst-meta-item {
        padding: 13px 14px;
      }

      .detail-copy {
        margin-top: 14px;
        padding: 16px;
        border-radius: var(--radius-sm);
        background: var(--surface2);
        border: 1px solid var(--border);
      }

      .empty,
      .loading {
        padding: 22px;
        color: var(--text-dim);
      }

      .hierarchy-tree,
      .hierarchy-children {
        display: grid;
        gap: 8px;
      }

      .hierarchy-children {
        margin-left: 16px;
        padding-left: 12px;
      }

      .hierarchy-children.level-werkput {
        border-left: 1px solid rgba(200, 122, 60, 0.3);
      }

      .hierarchy-children.level-vlak {
        border-left: 1px solid rgba(96, 165, 250, 0.28);
      }

      .hierarchy-children.level-spoor {
        border-left: 1px solid rgba(74, 222, 128, 0.24);
      }

      .hierarchy-row {
        min-height: 38px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: var(--radius-sm);
        background: var(--surface2);
        border: 1px solid var(--border);
      }

      .hierarchy-row.interactive {
        cursor: pointer;
      }

      .hierarchy-row.interactive:hover {
        border-color: rgba(200, 122, 60, 0.2);
      }

      .hierarchy-row.find.active {
        background: var(--accent-bg);
      }

      .hierarchy-arrow {
        width: 12px;
        color: var(--text-dim);
        transition: transform 0.15s ease;
      }

      .hierarchy-arrow.expanded {
        transform: rotate(90deg);
      }

      .hierarchy-arrow.placeholder {
        opacity: 0;
      }

      .hierarchy-label,
      .hierarchy-meta {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .hierarchy-label {
        flex: 1;
        min-width: 0;
      }

      .hierarchy-meta {
        margin-left: auto;
      }

      .hierarchy-title,
      .hierarchy-copy {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .hierarchy-copy {
        color: var(--text-dim);
        font-size: 12px;
      }

      .project-wizard-layout {
        display: grid;
        grid-template-columns: minmax(320px, 1.05fr) minmax(360px, 0.95fr);
        gap: 20px;
        align-items: start;
      }

      .project-import-layout {
        width: min(100%, 1120px);
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        align-items: start;
      }

      .project-import-layout > .panel {
        width: 100%;
      }

      .project-wizard-column {
        display: grid;
        gap: 20px;
      }

      .wizard-chat-panel,
      .wizard-profile-card,
      .wizard-pva-card {
        padding: 18px;
      }

      .wizard-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
      }

      .wizard-header-copy {
        display: grid;
        gap: 6px;
      }

      .wizard-header-copy h3 {
        font-size: 20px;
      }

      .wizard-header-copy p {
        color: var(--text-dim);
      }

      .wizard-chat-meta {
        margin-top: 16px;
        display: grid;
        gap: 10px;
      }

      .prog {
        height: 12px;
        border-radius: 999px;
        background: var(--surface2);
        overflow: hidden;
        border: 1px solid var(--border);
      }

      .prog-fill {
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, var(--accent), var(--accent-light));
        border-radius: 999px;
        transition: width 0.2s ease;
      }

      .wizard-message-list {
        margin-top: 16px;
        display: grid;
        gap: 12px;
        max-height: 460px;
        overflow-y: auto;
        padding-right: 4px;
      }

      .wizard-message {
        display: flex;
      }

      .wizard-message.user {
        justify-content: flex-end;
      }

      .wizard-bubble {
        max-width: min(85%, 520px);
        padding: 12px 14px;
        border-radius: 16px;
        border: 1px solid var(--border);
        background: var(--surface2);
      }

      .wizard-message.assistant .wizard-bubble {
        border-left: 3px solid var(--accent);
        background: linear-gradient(135deg, rgba(200, 122, 60, 0.08), rgba(255, 255, 255, 0.02)), var(--surface2);
      }

      .wizard-message.user .wizard-bubble {
        background: linear-gradient(135deg, rgba(200, 122, 60, 0.95), rgba(224, 149, 80, 0.9));
        border-color: rgba(255, 255, 255, 0.08);
        color: #fff;
      }

      .wizard-bubble-meta {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 6px;
        font-size: 11px;
        color: var(--text-dim);
      }

      .wizard-message.user .wizard-bubble-meta {
        color: rgba(255, 255, 255, 0.82);
      }

      .wizard-input-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        margin-top: 14px;
      }

      .wizard-profile-grid {
        margin-top: 14px;
        display: grid;
        gap: 10px;
      }

      .wizard-profile-item {
        padding: 12px 14px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--surface2);
      }

      .wizard-profile-item.filled {
        border-color: rgba(74, 222, 128, 0.28);
        background: linear-gradient(135deg, rgba(74, 222, 128, 0.08), rgba(255, 255, 255, 0.02)), var(--surface2);
      }

      .wizard-profile-item.missing {
        border-color: rgba(248, 113, 113, 0.16);
      }

      .wizard-profile-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
      }

      .wizard-profile-value {
        margin-top: 6px;
        color: var(--text-dim);
        font-size: 13px;
        white-space: pre-wrap;
      }

      .wizard-pva-body {
        margin-top: 14px;
        padding: 16px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--surface2);
        min-height: 180px;
      }

      .wizard-pva-rendered {
        display: grid;
        gap: 12px;
      }

      .wizard-pva-rendered h1,
      .wizard-pva-rendered h2,
      .wizard-pva-rendered h3 {
        margin: 0;
      }

      .wizard-pva-rendered h1 {
        font-size: 26px;
      }

      .wizard-pva-rendered h2 {
        font-size: 18px;
        color: var(--accent-light);
      }

      .wizard-pva-rendered h3 {
        font-size: 15px;
        color: var(--blue);
      }

      .wizard-pva-rendered p,
      .wizard-pva-rendered li {
        color: var(--text);
        white-space: pre-wrap;
      }

      .wizard-pva-rendered ul {
        margin: 0;
        padding-left: 18px;
      }

      .photo-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 20px;
        align-items: start;
      }

      .dropzone {
        position: relative;
        min-height: 220px;
        display: grid;
        place-items: center;
        text-align: center;
        border-radius: var(--radius);
        border: 1px dashed rgba(200, 122, 60, 0.34);
        background:
          linear-gradient(135deg, rgba(200, 122, 60, 0.08), rgba(255, 255, 255, 0.02)),
          var(--surface2);
      }

      .dropzone.dragover {
        border-color: var(--accent-light);
        background:
          linear-gradient(135deg, rgba(200, 122, 60, 0.16), rgba(255, 255, 255, 0.03)),
          var(--surface2);
      }

      .dropzone-copy {
        display: grid;
        gap: 12px;
        max-width: 300px;
        justify-items: center;
        padding: 28px;
      }

      .dropzone-title {
        font-size: 20px;
        font-weight: 700;
      }

      .button.success {
        background: var(--green-bg);
        border-color: rgba(74, 222, 128, 0.24);
        color: #d2ffe0;
      }

      .button.info {
        background: var(--blue-bg);
        border-color: rgba(96, 165, 250, 0.24);
        color: #d7e8ff;
      }

      .sandbox-panel {
        display: grid;
        gap: 18px;
      }

      .sandbox-dropzone {
        min-height: 180px;
        cursor: pointer;
      }

      .sandbox-preview {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
      }

      .sandbox-preview-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--surface2);
      }

      .sandbox-feedback {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      .sandbox-feedback-panel,
      .sandbox-hint-panel {
        display: grid;
        gap: 12px;
        padding: 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface2);
      }

      .sandbox-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .sandbox-alt-list,
      .sandbox-history {
        display: grid;
        gap: 12px;
      }

      .sandbox-alt-item {
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.03);
      }

      .sandbox-history-item {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
      }

      .sandbox-history-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        background: var(--surface2);
        border: 1px solid var(--border);
      }

      .sandbox-history-icon.analysis {
        color: var(--blue);
        background: var(--blue-bg);
      }

      .sandbox-history-icon.feedback {
        color: var(--green);
        background: var(--green-bg);
      }

      .sandbox-history-icon.retry {
        color: var(--accent-light);
        background: var(--accent-bg);
      }

      @media (max-width: 900px) {
        .sandbox-preview,
        .sandbox-grid {
          grid-template-columns: 1fr;
        }
      }

      .upload-item {
        padding: 14px;
        border-radius: var(--radius-sm);
        background: var(--surface2);
        border: 1px solid var(--border);
      }

      .upload-item-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
      }

      .upload-item-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .progress-bar {
        margin-top: 10px;
        width: 100%;
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        overflow: hidden;
      }

      .progress-bar-fill {
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, var(--accent), var(--accent-light));
      }

      .photo-grid,
      .mini-photo-grid {
        display: grid;
        gap: 16px;
      }

      .photo-link-grid {
        display: grid;
        gap: 8px;
      }

      .photo-link-grid select {
        width: 100%;
        min-width: 220px;
      }

      .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }

      .mini-photo-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
      }

      .photo-card,
      .mini-photo-card {
        overflow: hidden;
        border-radius: var(--radius-sm);
        background: var(--surface);
        border: 1px solid var(--border);
      }

      .photo-card {
        cursor: pointer;
      }

      .photo-card.active {
        border-color: rgba(200, 122, 60, 0.28);
        box-shadow: inset 0 0 0 1px rgba(200, 122, 60, 0.14);
      }

      .photo-thumb {
        aspect-ratio: 4 / 3;
        background: var(--surface2);
      }

      .photo-thumb.placeholder,
      .mini-photo-thumb.placeholder {
        display: grid;
        place-items: center;
        color: var(--text-dim);
      }

      .photo-meta,
      .mini-photo-meta {
        padding: 12px;
        display: grid;
        gap: 8px;
      }

      .mini-photo-meta {
        padding: 8px;
        gap: 6px;
      }

      .photo-badge-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .mini-photo-thumb {
        width: 100%;
        height: 84px;
        border-radius: 10px;
        object-fit: cover;
        cursor: zoom-in;
        background: var(--surface2);
      }

      .find-photo-filter-row {
        display: flex;
        gap: 10px;
        align-items: end;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .find-photo-filter-row label {
        color: var(--muted);
        display: grid;
        font-size: 11px;
        font-weight: 700;
        gap: 4px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .find-photo-filter-row select {
        min-width: 150px;
      }

      .mini-photo-meta-row {
        display: grid;
        gap: 1px;
        min-width: 0;
      }

      .mini-photo-meta-row span {
        color: var(--muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .mini-photo-meta-row strong {
        color: var(--text);
        font-size: 12px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mini-photo-location-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
      }

      .mini-photo-location-row div {
        min-width: 0;
      }

      .mini-photo-location-row span {
        color: var(--muted);
        display: block;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.08em;
      }

      .mini-photo-location-row strong {
        color: var(--text);
        display: block;
        font-size: 12px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .determination-card {
        padding: 14px;
      }

      .chat-panel {
        margin-top: 12px;
        padding: 14px;
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(200, 122, 60, 0.18);
      }

      .chat-history {
        display: grid;
        gap: 10px;
        max-height: 300px;
        overflow-y: auto;
      }

      .chat-message {
        display: flex;
      }

      .chat-message.specialist {
        justify-content: flex-end;
      }

      .chat-bubble {
        max-width: 80%;
        padding: 10px 12px;
        border-radius: 14px;
        font-size: 12px;
      }

      .chat-message.ai .chat-bubble {
        background: var(--accent-bg);
        border: 1px solid rgba(200, 122, 60, 0.2);
      }

      .chat-message.specialist .chat-bubble {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      .chat-timestamp {
        margin-top: 6px;
        color: var(--text-dim);
        font-size: 10px;
      }

      .chat-input-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        margin-top: 12px;
      }

      .chat-input {
        background: #121620;
      }

      .chat-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
      }

      .suggestion-chip {
        border: 1px solid rgba(200, 122, 60, 0.3);
        background: var(--accent-bg);
        color: var(--text);
        border-radius: 999px;
        padding: 7px 10px;
        cursor: pointer;
        font-size: 11px;
      }

      .placeholder-card {
        min-height: 260px;
        display: grid;
        place-items: center;
        padding: 24px;
        text-align: center;
        background:
          linear-gradient(135deg, rgba(200, 122, 60, 0.07), rgba(96, 165, 250, 0.04)),
          var(--surface);
      }

      .placeholder-card strong {
        display: block;
        margin-bottom: 8px;
        font-size: 18px;
      }

      .toast-stack {
        position: fixed;
        right: 18px;
        bottom: 18px;
        display: grid;
        gap: 10px;
        z-index: 1000;
      }

      .toast {
        min-width: 280px;
        max-width: min(420px, calc(100vw - 36px));
        padding: 14px 16px;
        border-radius: var(--radius-sm);
        background: rgba(22, 25, 34, 0.96);
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
      }

      .toast.error {
        border-color: rgba(248, 113, 113, 0.28);
      }

      .toast.success {
        border-color: rgba(74, 222, 128, 0.28);
      }

      .photo-lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.88);
        place-items: center;
        cursor: zoom-out;
      }

      .photo-lightbox.active {
        display: grid;
      }

      .photo-lightbox img {
        max-width: min(92vw, 1280px);
        max-height: 88vh;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
      }

      .photo-lightbox .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        border: 0;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 20px;
        cursor: pointer;
      }

      @media (max-width: 1200px) {
        .stats-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .ai-card {
          min-width: calc(50% - 8px);
        }

        .content-grid,
        .two-col,
        .photo-layout,
        .project-wizard-layout,
        .split-layout,
        .trash-layout,
        .export-grid {
          grid-template-columns: 1fr;
        }

        .template-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 860px) {
        .app-shell {
          flex-direction: column;
        }

        .sidebar {
          position: static;
          width: 100%;
          height: auto;
        }

        .main {
          min-height: 0;
        }

        .topbar {
          height: auto;
          padding: 16px;
          align-items: flex-start;
          flex-direction: column;
        }

        .topbar-right {
          width: 100%;
        }

        .search-bar {
          width: 100%;
        }

        .quick-actions {
          grid-template-columns: 1fr;
        }

        .trash-toolbar {
          grid-template-columns: 1fr;
        }

        #section-project #qfcLinkForm {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 640px) {
        .content {
          padding: 16px;
        }

        .login-card {
          padding: 24px;
        }

        .stats-grid {
          grid-template-columns: 1fr;
        }

        .template-grid {
          grid-template-columns: 1fr;
        }

        .template-upload-grid {
          grid-template-columns: 1fr;
        }

        .ai-card {
          min-width: 100%;
        }

        th:nth-child(4),
        td:nth-child(4),
        th:nth-child(5),
        td:nth-child(5) {
          display: none;
        }
      }

      /* Ruimtebeheer (ARC-53) */
      .ruimtebeheer-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        height: 100%;
      }

      .location-tree {
        padding: 1rem;
        overflow-y: auto;
        max-height: calc(100vh - 250px);
      }

      .tree-root {
        font-family: monospace;
        font-size: 0.95rem;
      }

      /* === Ruimtebeheer Tree === */
      .tree-root {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        overflow: hidden;
      }

      .tree-node-wrapper {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }

      .tree-node {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.75rem;
        border-radius: 8px;
        cursor: pointer;
        user-select: none;
        min-height: 2.2rem;
        background: var(--surface2);
        border: 1px solid var(--border);
        flex: 1;
        width: 0; /* forces flex:1 to not overflow parent */
        box-sizing: border-box;
        overflow: hidden;
      }

      .tree-node:hover {
        border-color: var(--accent-light);
        background: var(--surface);
      }

      .tree-toggle {
        flex-shrink: 0;
        width: 1rem;
        text-align: center;
        font-size: 0.7rem;
        color: var(--text-dim);
      }

      .tree-label {
        flex: 1;
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tree-leaf {
        border-style: dashed;
        opacity: 0.85;
      }


      .tree-actions {
        display: flex;
        gap: 0.25rem;
        opacity: 0;
        transition: opacity 0.2s;
        flex-shrink: 0;
        width: 72px; /* 3 × 20px button + 2 × 4px gap = 48px, padded to 72px for all levels */
        justify-content: flex-end;
      }

      .tree-node-wrapper:hover .tree-actions {
        opacity: 1;
      }

      .tree-btn {
        width: 20px;
        height: 20px;
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        background: white;
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
      }

      .tree-btn:hover {
        background: #f3f4f6;
      }

      .tree-btn.tree-add {
        color: #10b981;
      }

      .tree-btn.tree-add:hover {
        background: #d1fae5;
        border-color: #10b981;
      }

      .tree-btn.tree-edit {
        color: var(--text-dim);
      }
      .tree-btn.tree-edit:hover {
        color: var(--accent-light);
        background: var(--accent-bg);
      }
      .tree-btn.tree-delete {
        color: #ef4444;
      }

      .tree-btn.tree-delete:hover {
        background: #fee2e2;
        border-color: #ef4444;
      }

      /* Beheer Hub */
      .beheer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
      }

      .beheer-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 1.5rem;
        cursor: pointer;
        transition: all 0.2s;
      }

      .beheer-card:hover:not(.disabled) {
        border-color: var(--accent);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
      }

      .beheer-card.disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .beheer-card.hidden {
        display: none;
      }

      .beheer-card-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
      }

      .beheer-card h4 {
        margin: 0 0 0.5rem 0;
        font-size: 1.1rem;
        font-weight: 600;
      }

      .beheer-card p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 0;
      }

      .beheer-card-footer {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #f3f4f6;
      }

      .integrations-layout {
        display: grid;
        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
        gap: 1rem;
      }

      .beheer-tab-content {
        display: none;
      }

      .beheer-tab-content.active {
        display: block;
      }

      .beheer-integration-nav {
        display: grid;
        gap: 10px;
        align-content: start;
      }

      .beheer-integration-nav .sync-tab-button {
        width: 100%;
        justify-content: flex-start;
      }

      .beheer-integration-panel {
        display: none;
      }

      .beheer-integration-panel.active {
        display: block;
      }

      .beheer-users-table tr.is-inactive {
        opacity: 0.62;
      }

      .beheer-users-table td .subtle {
        display: block;
        margin-top: 6px;
        color: var(--text-dim);
        font-size: 12px;
      }

      .beheer-user-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
      }

      .beheer-placeholder {
        display: grid;
        gap: 10px;
      }

      .beheer-mock-row {
        display: none;
      }

      .beheer-mock-row.visible {
        display: block;
      }

      .afas-projects-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        margin-top: 4px;
      }

      .afas-projects-table th {
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-dim);
        padding: 6px 10px;
        border-bottom: 1px solid var(--border);
      }

      .afas-projects-table td {
        padding: 9px 10px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
      }

      .afas-projects-table tr:last-child td {
        border-bottom: none;
      }

      .afas-projects-table tr:hover td {
        background: var(--surface);
      }

      .afas-sync-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        white-space: nowrap;
      }

      .afas-sync-badge.synced {
        background: #dcfce7;
        color: #15803d;
      }

      .afas-sync-badge.not-synced {
        background: #f1f5f9;
        color: #64748b;
      }

      .afas-sync-badge.failed {
        background: #fee2e2;
        color: #dc2626;
      }

      .integration-status {
        min-height: 48px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--surface2);
        padding: 12px 14px;
        color: var(--text-dim);
      }

      .integration-status.success {
        border-color: rgba(74, 222, 128, 0.3);
        background: var(--green-bg);
        color: var(--green);
      }

      .integration-status.error {
        border-color: rgba(248, 113, 113, 0.3);
        background: var(--red-bg);
        color: #ffd0d0;
      }

      .trash-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
        gap: 1rem;
      }

      .trash-toolbar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        align-items: end;
      }

      .trash-toolbar label {
        display: grid;
        gap: 6px;
      }

      .trash-groups,
      .trash-group,
      .trash-list,
      .trash-row-description,
      .trash-preview-block,
      .trash-detail-actions,
      .trash-conflict-list,
      .trash-warning-list,
      .trash-diff-list {
        display: grid;
        gap: 10px;
      }

      .trash-group {
        gap: 12px;
      }

      .trash-group-header,
      .trash-row-header,
      .trash-row-meta,
      .trash-detail-meta,
      .trash-pagination {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .trash-row {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
        background: #fff;
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      }

      .trash-row:hover {
        border-color: var(--accent);
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
      }

      .trash-row.active {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
      }

      .trash-row-title {
        font-size: 15px;
        font-weight: 600;
      }

      .trash-row-subtitle {
        color: var(--text-dim);
        font-size: 13px;
        margin-top: 2px;
      }

      .trash-meta-line {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
      }

      .trash-preview-panel {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--border);
        display: grid;
        gap: 14px;
      }

      .trash-conflict-item,
      .trash-warning-item,
      .trash-diff-item {
        border-radius: 10px;
        border: 1px solid var(--border);
        padding: 10px 12px;
        background: var(--surface2);
      }

      .trash-conflict-item {
        border-color: rgba(239, 68, 68, 0.25);
        background: rgba(254, 242, 242, 0.9);
      }

      .trash-warning-item {
        border-color: rgba(245, 158, 11, 0.25);
        background: rgba(255, 251, 235, 0.95);
      }

      .trash-diff-item code {
        font-size: 12px;
      }

      .trash-pagination {
        margin-top: 18px;
        justify-content: flex-end;
      }

      .trash-restore-reason {
        width: 100%;
        min-height: 92px;
      }

      /* Dozen administratie (ARC-54) */
      .dozen-layout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1rem;
        height: 100%;
      }

      .data-table-wrap {
        overflow-y: auto;
        max-height: calc(100vh - 250px);
        background: var(--surface-ink);
        border: 1px solid rgba(226, 232, 240, 0.08);
        border-radius: 14px;
      }

      .data-table {
        width: 100%;
        border-collapse: collapse;
        color: var(--text);
      }

      .data-table th,
      .data-table td {
        padding: 17px 20px;
        text-align: left;
        border-bottom: 1px solid var(--border-strong);
        vertical-align: middle;
      }

      .data-table th {
        color: rgba(228, 230, 237, 0.58);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .data-table td {
        color: rgba(244, 245, 251, 0.92);
        font-size: 15px;
      }

      .data-table thead {
        background: var(--surface-table);
        position: sticky;
        top: 0;
        z-index: 1;
      }

      .data-table tr.clickable:hover {
        background: rgba(255, 255, 255, 0.035);
        cursor: pointer;
      }

      .data-table tr.clickable.selected {
        background: rgba(200, 122, 60, 0.16);
        box-shadow: inset 3px 0 0 var(--accent);
      }

      .data-table tr:last-child td {
        border-bottom-color: var(--border-strong);
      }

      .gemeente-toolbar-search {
        min-width: 240px;
        max-width: 360px;
      }

      .gemeente-detail-content .detail-row {
        align-items: flex-start;
      }

      .gemeente-detail-card {
        padding: 0;
        background: var(--surface-ink);
        border-color: rgba(226, 232, 240, 0.08);
        color: #f4f5fb;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }

      .gemeente-detail-card .detail-headline {
        padding: 22px 24px 12px;
      }

      .gemeente-detail-card .detail-headline h3 {
        color: #f4f5fb;
      }

      .gemeente-detail-card #gemeenteDetailMeta {
        padding: 0 24px 16px;
        margin-bottom: 0 !important;
        color: rgba(244, 245, 251, 0.62);
      }

      .gemeente-detail-card #gemeenteDetail {
        padding: 0 24px 24px;
      }

      .gemeente-detail-card .gemeente-detail-content {
        border-top: 1px solid var(--border-strong);
      }

      .gemeente-detail-card .gemeente-detail-section {
        border-bottom: 1px solid var(--border-strong);
      }

      .gemeente-detail-card .gemeente-detail-section:last-of-type {
        border-bottom: 0;
      }

      .gemeente-detail-card .gemeente-detail-section-title {
        padding: 16px 0 10px;
        color: rgba(244, 245, 251, 0.68);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .gemeente-detail-card .gemeente-detail-section .detail-row:last-child {
        border-bottom: 0;
      }

      .gemeente-detail-card .detail-row {
        display: grid;
        grid-template-columns: minmax(138px, 220px) minmax(0, 1fr);
        gap: 20px;
        padding: 15px 0;
        border-bottom: 1px solid var(--border-strong);
        color: rgba(244, 245, 251, 0.92);
      }

      .gemeente-detail-card .detail-label {
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 12px;
        font-weight: 800;
        color: rgba(244, 245, 251, 0.54);
      }

      .gemeente-detail-card hr {
        border: 0;
        border-top: 1px solid var(--border-strong);
        margin: 0;
      }

      .gemeente-detail-card .empty {
        background: rgba(255, 255, 255, 0.03);
        border: 1px dashed rgba(226, 232, 240, 0.25);
        color: rgba(244, 245, 251, 0.62);
      }

      .gemeente-detail-card .muted {
        color: rgba(244, 245, 251, 0.58);
      }

      .gemeente-admin-form {
        gap: 14px;
      }


      .gemeente-edit-form {
        display: grid;
        gap: 16px;
        padding: 0;
      }

      .gemeente-modal-card .gemeente-edit-form {
        gap: 18px;
      }

      .gemeente-edit-section {
        background: var(--surface-ink);
        border: 1px solid rgba(226, 232, 240, 0.1);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }

      .gemeente-edit-section-title {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-strong);
        color: rgba(244, 245, 251, 0.68);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .gemeente-edit-field-list {
        display: grid;
      }

      .gemeente-form-row {
        display: grid;
        grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
        gap: 22px;
        align-items: center;
        min-height: 58px;
        margin: 0;
        padding: 10px 16px;
        border-bottom: 1px solid var(--border-strong);
        color: rgba(244, 245, 251, 0.92);
      }

      .gemeente-form-row:last-child {
        border-bottom: 0;
      }

      .gemeente-form-row .detail-label {
        color: rgba(244, 245, 251, 0.56);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.09em;
        line-height: 1.3;
        text-transform: uppercase;
      }

      .gemeente-form-control {
        display: grid;
        gap: 5px;
        min-width: 0;
      }

      .gemeente-form-control input,
      .gemeente-form-control select,
      .gemeente-form-control textarea {
        width: 100% !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        border: 1px solid rgba(226, 232, 240, 0.14) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.035) !important;
        color: rgba(244, 245, 251, 0.94) !important;
        font-size: 14px !important;
        outline: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }

      .gemeente-form-control textarea {
        min-height: 76px !important;
        resize: vertical;
        line-height: 1.4;
      }

      .gemeente-form-control input:focus,
      .gemeente-form-control select:focus,
      .gemeente-form-control textarea:focus {
        border-color: rgba(200, 122, 60, 0.72) !important;
        box-shadow: 0 0 0 3px rgba(200, 122, 60, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04);
      }

      .gemeente-checkbox-control {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-start;
        color: rgba(244, 245, 251, 0.9);
        font-weight: 700;
      }

      .gemeente-checkbox-control input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        accent-color: var(--accent);
      }

      .gemeente-edit-form .field-hint {
        font-size: 11px;
        color: rgba(244, 245, 251, 0.42);
      }

      .gemeente-edit-form .field-error {
        color: #fca5a5;
        font-size: 11px;
        font-weight: 700;
      }

      .gemeente-edit-form .required-star {
        color: var(--accent);
      }

      .gemeente-edit-form > .muted {
        padding: 0 2px;
        color: rgba(244, 245, 251, 0.52);
      }

      @media (max-width: 860px) {
        .gemeente-form-row {
          grid-template-columns: 1fr;
          gap: 8px;
          align-items: stretch;
        }
      }

      .gemeente-modal-card {
        width: min(1040px, 100%);
        max-height: calc(100vh - 48px);
        display: flex;
        flex-direction: column;
      }

      .gemeente-modal-body {
        overflow-y: auto;
      }

      .split-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .split-list li {
        padding: 0.5rem 0;
        border-bottom: 1px solid #eee;
      }

      .filter-select {
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface2);
        color: var(--text);
        margin-right: 0.5rem;
        outline: none;
      }

      .filter-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(200, 122, 60, 0.12);
      }

      .orphan-layout {
        display: grid;
        gap: 16px;
      }

      .orphan-toolbar {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
      }

      .orphan-list {
        display: grid;
        gap: 14px;
      }

      .orphan-card {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 16px;
        padding: 16px;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 14px;
      }

      .orphan-thumb {
        width: 140px;
        height: 140px;
        object-fit: cover;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--surface);
      }

      .orphan-detail {
        display: grid;
        gap: 14px;
      }

      .orphan-meta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
      }

      .orphan-meta-item {
        padding: 10px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
      }

      .orphan-suggestion-list {
        display: grid;
        gap: 10px;
      }

      .orphan-suggestion {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
      }

      .orphan-suggestion.top-match {
        border-color: rgba(74, 222, 128, 0.45);
        box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.15);
      }

      .orphan-manual {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }

      .sync-panel {
        display: grid;
        gap: 14px;
        margin-bottom: 18px;
      }

      #section-project .sync-panel {
        width: 100%;
      }

      #section-project #qfcLinkForm {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(180px, 0.9fr) auto;
        gap: 10px;
        align-items: end;
      }

      .sync-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 14px;
      }

      .sync-card {
        display: grid;
        gap: 12px;
        padding: 16px;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 14px;
      }

      .sync-card-header,
      .sync-card-meta,
      .sync-status-summary,
      .sync-status-badges,
      .sync-tab-row,
      .sync-conflict-actions,
      .sync-result-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }

      .sync-card-header {
        justify-content: space-between;
      }

      .sync-card-stats,
      .sync-conflict-list {
        display: grid;
        gap: 10px;
      }

      .sync-stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 8px;
      }

      .sync-stat {
        padding: 10px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
      }

      .sync-stat-value {
        font-size: 18px;
        font-weight: 700;
        color: var(--text);
      }

      .sync-stat-label {
        font-size: 11px;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .sync-status-details {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface2);
        overflow: hidden;
      }

      .sync-status-details summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        cursor: pointer;
        list-style: none;
      }

      .sync-status-details summary::-webkit-details-marker {
        display: none;
      }

      .sync-status-content {
        display: grid;
        gap: 14px;
        padding: 0 16px 16px;
        border-top: 1px solid var(--border);
      }

      .sync-link-button {
        padding: 0;
        border: 0;
        background: none;
        color: var(--accent-light);
        cursor: pointer;
        text-decoration: underline;
      }

      .sync-link-button:disabled {
        color: var(--text-dim);
        cursor: default;
        text-decoration: none;
      }

      .sync-tab-button.active {
        background: rgba(200, 122, 60, 0.14);
        color: var(--accent-light);
        border-color: rgba(224, 149, 80, 0.78);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }

      .sync-conflict-item {
        display: grid;
        gap: 12px;
        padding: 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
      }

      .sync-conflict-values {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
      }

      .sync-conflict-value {
        padding: 10px 12px;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 10px;
      }

      .sync-panel-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .sync-row-table {
        display: grid;
        gap: 10px;
      }

      .sync-row-item,
      .sync-add-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 2fr) auto;
        gap: 12px;
        align-items: center;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
      }

      .sync-row-order {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .sync-row-order button,
      .sync-row-delete {
        min-width: 36px;
        padding: 6px 10px;
      }

      .sync-row-label {
        display: grid;
        gap: 4px;
      }

      .sync-row-title {
        font-weight: 700;
      }

      .sync-row-project {
        display: grid;
        gap: 6px;
      }

      .sync-row-meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .sync-meta-cell {
        display: grid;
        gap: 4px;
        padding: 10px 12px;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 10px;
      }

      .sync-meta-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-dim);
      }

      .sync-meta-value {
        font-size: 13px;
        color: var(--text);
      }

      .sync-row-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .sync-add-row {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .sync-add-form {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(160px, 0.8fr) auto;
        gap: 10px;
        align-items: end;
        width: 100%;
      }

      .sync-history-list {
        display: grid;
        gap: 10px;
      }

      .sync-history-item {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 12px 0;
        border-top: 1px solid var(--border);
      }

      .sync-history-item:first-child {
        border-top: 0;
        padding-top: 0;
      }

      @media (max-width: 900px) {
        .velddata-layout {
          flex-direction: column;
        }

        .velddata-tree-pane {
          width: 100%;
          height: 42%;
          border-right: none;
          border-bottom: 1px solid var(--border);
        }

        .sync-status-details summary,
        .sync-status-summary {
          align-items: flex-start;
          flex-direction: column;
        }

        .orphan-card {
          grid-template-columns: 1fr;
        }

        .orphan-thumb {
          width: 100%;
          height: 220px;
        }

        .integrations-layout {
          grid-template-columns: 1fr;
        }

        .sync-row-item,
        .sync-add-row,
        .sync-add-form,
        .sync-history-item {
          grid-template-columns: 1fr;
        }

        .sync-row-meta {
          grid-template-columns: 1fr;
        }

        .sync-row-actions,
        .sync-row-order {
          flex-direction: row;
        }
      }

      .velddata-layout {
        display: flex;
        height: 100%;
        overflow: hidden;
      }

      .velddata-tree-pane {
        width: 340px;
        flex-shrink: 0;
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--surface);
      }

      .velddata-tree-header {
        padding: 0.75rem;
        border-bottom: 1px solid var(--border);
      }

      .velddata-tree-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem 0;
      }

      .velddata-detail-pane {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .velddata-tabs {
        display: flex;
        gap: 8px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
      }

      .velddata-tab {
        border-color: rgba(226, 232, 240, 0.08);
        background: var(--surface-ink);
        color: var(--text-dim);
        min-height: 40px;
      }

      .velddata-tab.active {
        background: rgba(200, 122, 60, 0.14);
        color: var(--accent-light);
        border-color: rgba(224, 149, 80, 0.78);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }

      .velddata-detail-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem;
      }

      .vd-tree-node {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.75rem;
        cursor: pointer;
        font-size: 0.85rem;
      }

      .vd-tree-node:hover {
        background: var(--surface2);
      }

      .vd-tree-node.active {
        background: rgba(200, 122, 60, 0.14);
        border-left: 3px solid var(--accent);
      }

      .vd-tree-node .vd-icon {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
        flex-shrink: 0;
      }

      .vd-icon-wp {
        background: rgba(96, 165, 250, 0.1);
        color: #60a5fa;
      }

      .vd-icon-vl {
        background: rgba(167, 139, 250, 0.1);
        color: #a78bfa;
      }

      .vd-icon-sp {
        background: rgba(74, 222, 128, 0.08);
        color: #4ade80;
      }

      .vd-toggle {
        width: 14px;
        text-align: center;
        color: var(--text-dim);
        font-size: 0.6rem;
        flex-shrink: 0;
      }

      .vd-label {
        flex: 1;
        min-width: 0;
      }

      .vd-label .vd-sub {
        color: var(--text-dim);
        font-size: 0.72rem;
      }

      .vd-count {
        font-size: 0.7rem;
        color: var(--text-dim);
        background: var(--surface3);
        border-radius: 99px;
        padding: 1px 6px;
      }

      .vd-level-1 {
        padding-left: 1.5rem;
      }

      .vd-level-2 {
        padding-left: 2.75rem;
      }

      .vd-field-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: rgba(226, 232, 240, 0.12);
        border: 1px solid rgba(226, 232, 240, 0.12);
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 1.5rem;
      }

      .find-status-field-stack {
        grid-template-columns: 1fr;
      }

      .find-status-row {
        min-height: 0;
        padding: 0.35rem 0.45rem;
      }

      .find-status-select-shell {
        width: 100%;
        min-height: 2.35rem;
        display: grid;
        grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 14rem);
        align-items: center;
        gap: 0.75rem;
        padding: 0.25rem 0.5rem 0.25rem 0.7rem;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 0.75rem;
        background: rgba(30, 33, 47, 0.72);
      }

      .find-status-inline-label {
        color: rgba(228, 230, 237, 0.68);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .find-status-compact-select {
        width: 100%;
        min-width: 0;
        min-height: 1.85rem;
        padding: 0.18rem 1.75rem 0.18rem 0.45rem;
        border: 0;
        background-color: transparent;
        box-shadow: none;
        font-size: 0.86rem;
        font-weight: 700;
        text-align: right;
        text-align-last: right;
      }

      .find-status-value {
        margin-left: auto;
        text-align: right;
      }

      .vd-field-item {
        background: var(--surface-ink);
        padding: 0.85rem 1rem;
        min-height: 3.6rem;
        overflow: hidden;
      }

      .vd-field-label {
        font-size: 0.7rem;
        color: rgba(228, 230, 237, 0.62);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.22rem;
        font-weight: 800;
      }

      .vd-field-value {
        font-size: 0.88rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }

      .vd-field-value.empty {
        padding: 0;
        color: var(--text-dim);
        font-style: italic;
        line-height: 1.25;
      }

      .vd-section-title {
        font-size: 0.7rem;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 1.25rem 0 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .vd-section-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
      }

      .vd-vulling-stack {
        display: grid;
        gap: 0.9rem;
      }

      .vd-vulling-card {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface2);
        padding: 0.9rem;
      }

      .vd-vulling-card .vd-field-grid {
        margin-bottom: 0;
      }

      .vd-vulling-header {
        font-size: 0.82rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
      }

      /* Vondsten/Splitsen: Velddata look & feel, with Vondsten-specific ratio */
      .splits-velddata-section {
        position: relative;
        overflow: hidden;
      }

      .splits-velddata-layout {
        display: flex;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        gap: 0;
        grid-template-columns: none;
      }

      .splits-tree-pane {
        width: auto;
        flex: 4 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        border-radius: 0;
        border: 0;
        border-right: 1px solid var(--border);
        background: var(--surface);
      }

      .splits-tree-pane .card-header {
        padding: 14px 16px 12px;
        border-bottom: 1px solid var(--border);
      }

      .splits-tree-pane .card-header h3 {
        font-size: 16px;
        letter-spacing: -0.01em;
      }

      #section-vondsten #refreshFindTreeButton {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
      }

      #section-vondsten #filterFreeText,
      #section-vondsten #filterVondstnr,
      #section-vondsten #filterMateriaal,
      #section-vondsten #filterWerkput,
      #section-vondsten #filterVlak,
      #section-vondsten #filterStatus {
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 13px !important;
        background: var(--surface2) !important;
        border: 1px solid var(--border) !important;
        color: var(--text) !important;
        font-size: 13px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
      }

      #section-vondsten #filterFreeText::placeholder,
      #section-vondsten #filterVondstnr::placeholder {
        color: rgba(228, 230, 237, 0.42);
      }

      #section-vondsten #vondstenFilters {
        grid-template-columns: 72px repeat(4, minmax(0, 1fr)) auto !important;
      }

      #section-vondsten #filterClear {
        min-height: 42px;
        align-self: stretch;
      }

      #vondstenTableWrap {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        background: var(--surface);
      }

      #section-vondsten .tree-wrap {
        padding: 8px 0 14px;
      }

      #section-vondsten .find-tree-node {
        border: 0;
        border-radius: 0;
        background: transparent;
      }

      #section-vondsten .find-tree-node + .find-tree-node {
        margin-top: 0;
      }

      #section-vondsten .find-tree-row {
        min-height: 74px;
        padding: 11px 16px;
        border-left: 3px solid transparent;
        border-bottom: 1px solid rgba(226, 232, 240, 0.08);
      }

      #section-vondsten .find-tree-row.level-1 {
        padding-left: 34px;
      }

      #section-vondsten .find-tree-row.level-2 {
        padding-left: 54px;
      }

      #section-vondsten .find-tree-row:hover {
        background: var(--surface2);
      }

      #section-vondsten .find-tree-row.active {
        background: rgba(200, 122, 60, 0.18);
        border-left-color: var(--accent);
      }

      #section-vondsten .tree-toggle {
        width: 18px;
        height: 18px;
        border: 0;
        background: transparent;
        color: var(--text-dim);
      }

      #section-vondsten .splits-table .tree-toggle {
        width: 14px;
        height: 14px;
        min-width: 14px;
        font-size: 10px;
        line-height: 1;
      }

      #section-vondsten .tree-node-thumb img,
      #section-vondsten .tree-node-thumb > div {
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
        font-size: 11px !important;
      }

      #section-vondsten .tree-node-main {
        display: grid;
        gap: 5px;
      }

      #section-vondsten .tree-node-title {
        gap: 7px;
      }

      #section-vondsten .tree-node-title strong {
        font-size: 15px;
        color: #f4f5fb;
        letter-spacing: -0.01em;
      }

      #section-vondsten .tree-node-subtitle {
        color: var(--text-dim);
        font-size: 12px;
      }

      #section-vondsten .splits-level-token {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        border: 1px solid rgba(226, 232, 240, 0.1);
        background: rgba(96, 165, 250, 0.14);
        color: #7fc3ff;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.05em;
      }

      #section-vondsten .splits-level-token.level-1 {
        background: rgba(168, 85, 247, 0.14);
        color: #c4a2ff;
      }

      #section-vondsten .splits-level-token.level-2 {
        background: rgba(34, 197, 94, 0.12);
        color: #86efac;
      }

      #section-vondsten .splits-list-metadata {
        display: grid;
        grid-template-columns: repeat(7, minmax(66px, 1fr));
        gap: 1px;
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, 0.1);
        border-radius: 8px;
        background: rgba(226, 232, 240, 0.1);
      }

      #section-vondsten .splits-list-meta-item {
        min-height: 38px;
        padding: 6px 8px;
        background: var(--surface-ink);
        display: grid;
        align-content: center;
        gap: 2px;
      }

      #section-vondsten .splits-list-meta-item span {
        color: rgba(228, 230, 237, 0.5);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      #section-vondsten .splits-list-meta-item strong {
        color: rgba(244, 245, 251, 0.9);
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #section-vondsten .find-tree-row .inline-actions {
        margin-left: auto;
      }

      #section-vondsten .find-tree-row .button {
        min-height: 30px;
        padding: 5px 9px;
        font-size: 11px;
      }

      #section-vondsten .tree-children {
        gap: 0;
        padding: 0;
      }

      #section-vondsten .tree-empty {
        padding: 10px 18px 12px 54px;
        font-size: 12px;
      }

      #section-vondsten .tree-inline-form {
        margin: 8px 14px 12px;
        border-color: rgba(226, 232, 240, 0.12);
        background: var(--surface-ink);
      }

      .splits-detail-backdrop {
        position: absolute;
        inset: 0;
        z-index: 34;
        display: none;
        border: 0;
        padding: 0;
        background: rgba(3, 7, 18, 0.18);
        cursor: default;
        pointer-events: none;
      }

      .splits-detail-pane {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 35;
        width: min(560px, 42vw);
        min-width: 360px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        border: 0;
        border-left: 1px solid var(--border-strong);
        border-radius: 0;
        background: var(--bg);
        box-shadow: -22px 0 42px rgba(0, 0, 0, 0.34);
        transform: translateX(104%);
        transition: transform 180ms ease;
        pointer-events: none;
      }

      #section-vondsten.detail-slide-open .splits-detail-backdrop {
        display: block;
      }

      #section-vondsten.detail-slide-open .splits-detail-pane {
        transform: translateX(0);
        pointer-events: auto;
      }

      .splits-detail-pane > .detail-headline {
        min-height: 48px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
      }

      .splits-detail-pane > .detail-headline h3 {
        font-size: 15px;
      }

      .splits-detail-close {
        min-height: 30px;
        width: 30px;
        padding: 0;
        border-radius: 9px;
      }

      #vondstDetail {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 12px 14px 18px;
      }

      #vondstDetail > .detail-headline {
        align-items: center;
        margin-bottom: 8px;
        padding: 0 0 8px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
      }

      #vondstDetail > .detail-headline h3 {
        color: #f4f5fb;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.02em;
      }

      #vondstDetail > .detail-headline .badge {
        padding: 5px 9px;
        border-color: rgba(200, 122, 60, 0.2);
        background: rgba(200, 122, 60, 0.14);
        box-shadow: none;
      }

      #section-vondsten .breadcrumb-inline {
        margin: 0 0 10px;
        gap: 5px;
        font-size: 12px;
        flex-wrap: wrap;
        color: rgba(200, 122, 60, 0.84);
      }

      #section-vondsten .breadcrumb-link {
        color: rgba(226, 151, 85, 0.9);
        text-decoration: none;
      }

      #section-vondsten .breadcrumb-sep {
        color: rgba(166, 174, 193, 0.58);
      }

      #section-vondsten .vondst-meta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        background: rgba(226, 232, 240, 0.1);
        border: 1px solid rgba(226, 232, 240, 0.1);
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 14px;
      }

      #section-vondsten .vondst-meta-item {
        min-height: 0;
        padding: 8px 10px;
        background: rgba(14, 20, 34, 0.72);
      }

      #section-vondsten .vondst-meta-item .muted {
        margin-bottom: 3px;
        color: rgba(228, 230, 237, 0.58);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.12em;
        line-height: 1.15;
        text-transform: uppercase;
      }

      #section-vondsten .vondst-meta-item > div:last-child {
        color: rgba(244, 245, 251, 0.9);
        font-size: 13px;
        line-height: 1.25;
        min-height: 16px;
      }


      #section-vondsten .splits-table-wrap {
        height: 100%;
        overflow: auto;
        background: var(--surface);
      }

      #section-vondsten .splits-table {
        min-width: 1040px;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
      }

      #section-vondsten .splits-table th,
      #section-vondsten .splits-table td {
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
        border-right: 1px solid rgba(226, 232, 240, 0.06);
        padding: 6px 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
      }

      #section-vondsten .splits-table-row.level-2 td {
        padding-top: 4px;
        padding-bottom: 4px;
      }

      #section-vondsten .splits-table th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface-table);
        color: rgba(228, 230, 237, 0.72);
      }

      #section-vondsten .splits-table th:nth-child(1) { width: 220px; }
      #section-vondsten .splits-table th:nth-child(2) { width: 88px; }
      #section-vondsten .splits-table th:nth-child(3) { width: 112px; }
      #section-vondsten .splits-table th:nth-child(4) { width: 118px; }
      #section-vondsten .splits-table th:nth-child(5) { width: 66px; }
      #section-vondsten .splits-table th:nth-child(6) { width: 84px; }
      #section-vondsten .splits-table th:nth-child(7) { width: 84px; }
      #section-vondsten .splits-table th:nth-child(8) { width: 118px; }
      #section-vondsten .splits-table th:nth-child(9) { width: 112px; }
      #section-vondsten .splits-table th:nth-child(10) { width: 170px; }

      #section-vondsten .splits-table th input,
      #section-vondsten .splits-table th select {
        width: 100%;
        min-height: 34px !important;
        padding: 7px 8px !important;
        border-radius: 10px !important;
        background: var(--surface2) !important;
        border: 1px solid var(--border) !important;
        color: var(--text) !important;
        font-size: 12px !important;
      }

      #section-vondsten .splits-table th .button,
      #section-vondsten .splits-table th button {
        min-height: 34px;
        width: 100%;
        padding: 6px 8px;
      }

      #section-vondsten .splits-table-row {
        background: var(--surface);
      }

      #section-vondsten .splits-table-row.level-1 {
        background: rgba(255, 255, 255, 0.018);
      }

      #section-vondsten .splits-table-row.level-2 {
        background: rgba(255, 255, 255, 0.028);
      }

      #section-vondsten .splits-table-row:hover {
        background: var(--surface2);
      }

      #section-vondsten .splits-table-row.selected {
        background: rgba(200, 122, 60, 0.16);
        box-shadow: inset 4px 0 0 var(--accent);
      }

      #section-vondsten .splits-table .badge {
        white-space: nowrap;
        padding: 3px 7px;
        font-size: 11px;
        line-height: 1.15;
      }

      #section-vondsten .splits-table-main {
        cursor: pointer;
      }

      #section-vondsten .splits-main-cell {
        display: flex;
        align-items: center;
        gap: 6px;
        padding-left: calc(var(--level, 0) * 18px);
        min-width: 0;
      }

      #section-vondsten .splits-main-cell strong {
        font-size: 14px;
        color: #f4f5fb;
        white-space: nowrap;
      }

      #section-vondsten .splits-table .splits-level-token {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        font-size: 9px;
      }

      #section-vondsten .splits-table .splits-level-token.level-2 {
        width: 22px;
        height: 22px;
        border-radius: 7px;
      }

      #section-vondsten .splits-table-actions .inline-actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
      }

      #section-vondsten .splits-table-actions .button {
        min-height: 26px;
        padding: 3px 7px;
        font-size: 11px;
      }

      #section-vondsten .splits-table-inline-form td {
        padding: 0;
        background: var(--surface-ink);
      }

      #section-vondsten .splits-vondst-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 8px;
        border-radius: 8px;
        background: rgba(226, 232, 240, 0.08);
        border-color: rgba(226, 232, 240, 0.08);
      }

      #section-vondsten .splits-vondst-meta-grid .vd-field-item {
        min-height: 0;
        padding: 4px 8px 5px;
        background: rgba(14, 20, 34, 0.72);
      }

      #section-vondsten .splits-vondst-meta-grid .vd-field-label {
        font-size: 8px;
        line-height: 1.1;
        letter-spacing: 0.1em;
        margin-bottom: 1px;
      }

      #section-vondsten .splits-vondst-meta-grid .vd-field-value {
        font-size: 12px;
        line-height: 1.12;
      }

      #section-vondsten .splits-vondst-meta-grid .vd-field-value.empty {
        padding: 0;
        line-height: 1.12;
      }

      #section-vondsten .splits-description-block {
        margin-bottom: 12px;
        padding: 10px 12px;
        border: 1px solid rgba(226, 232, 240, 0.12);
        border-radius: 8px;
        background: var(--surface-ink);
        color: rgba(244, 245, 251, 0.92);
        line-height: 1.35;
        font-size: 13px;
      }

      #section-vondsten .detail-section {
        margin-top: 12px;
        padding: 12px;
        border: 1px solid rgba(226, 232, 240, 0.1);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.018);
        box-shadow: none;
      }

      #section-vondsten #vondstDetail > .detail-section:first-of-type {
        margin-top: 12px;
      }

      #section-vondsten .detail-section > .toolbar {
        min-height: 28px;
        margin-bottom: 10px;
        align-items: start;
      }

      #section-vondsten .detail-section > .toolbar h3 {
        color: rgba(228, 230, 237, 0.68);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      #section-vondsten .detail-section > .toolbar .muted {
        color: rgba(166, 174, 193, 0.72);
      }

      #section-vondsten .detail-section .button {
        min-height: 30px;
        padding: 5px 10px;
        font-size: 11px;
        box-shadow: none;
      }

      #section-vondsten .detail-section .button.primary {
        background: linear-gradient(180deg, rgba(212, 132, 62, 0.95), rgba(181, 99, 42, 0.95));
        border-color: rgba(240, 169, 99, 0.38);
        box-shadow: none;
      }

      #section-vondsten .detail-section .button.secondary,
      #section-vondsten .detail-section .button.ghost {
        background: rgba(31, 38, 56, 0.92);
        border-color: rgba(226, 232, 240, 0.1);
        color: rgba(244, 245, 251, 0.88);
      }

      #section-vondsten .determination-edit-section {
        margin-top: 12px;
        padding-top: 12px;
      }

      #section-vondsten .determination-edit-section > .toolbar {
        min-height: 28px;
        margin-bottom: 10px;
      }

      #section-vondsten .determination-editor {
        margin-top: 8px !important;
        padding: 12px !important;
        border-color: rgba(226, 232, 240, 0.12) !important;
        background: rgba(255, 255, 255, 0.025) !important;
        box-shadow: none !important;
      }

      #section-vondsten .determination-editor > .detail-headline {
        margin-bottom: 8px !important;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.08);
      }

      #section-vondsten .determination-editor label {
        color: rgba(166, 174, 193, 0.88);
        font-weight: 700;
      }

      #section-vondsten .determination-editor select,
      #section-vondsten .determination-editor textarea {
        border-color: rgba(226, 232, 240, 0.12) !important;
        background: rgba(14, 20, 34, 0.82) !important;
        border-radius: 8px !important;
      }

      #section-vondsten .determination-editor .detail-actions {
        margin-top: 10px !important;
      }

      #section-vondsten .determination-history-section {
        margin-top: 12px;
      }

      #section-vondsten .determination-history-section .determination-card {
        margin-top: 8px;
        padding: 12px;
        border-color: rgba(226, 232, 240, 0.1);
        background: rgba(255, 255, 255, 0.025);
        box-shadow: none;
      }

      #section-vondsten .determination-card .detail-headline {
        align-items: start;
        gap: 10px;
        margin-bottom: 0;
      }

      #section-vondsten .determination-card .inline-actions {
        gap: 6px;
      }

      #section-vondsten .determination-card .badge {
        box-shadow: none;
      }

      #section-vondsten .determination-card .meta-row {
        border-color: rgba(226, 232, 240, 0.08);
        background: rgba(14, 20, 34, 0.5);
      }

      #section-vondsten .mini-photo-grid {
        gap: 8px;
      }

      #section-vondsten .mini-photo-card {
        border-radius: 10px;
        min-width: 0;
        border-color: rgba(226, 232, 240, 0.1);
        background: rgba(18, 24, 38, 0.92);
        box-shadow: none;
      }

      #section-vondsten .mini-photo-card[data-find-photo-card-find-id] {
        cursor: pointer;
      }

      #section-vondsten .mini-photo-card[data-find-photo-card-find-id]:hover,
      #section-vondsten .mini-photo-card[data-find-photo-card-find-id]:focus-visible {
        border-color: rgba(226, 151, 85, 0.42);
        background: rgba(22, 29, 45, 0.98);
        outline: none;
      }

      #section-vondsten .mini-photo-thumb {
        height: 84px;
        border-radius: 10px 10px 0 0;
      }

      #section-vondsten .photo-delete-btn {
        background: rgba(239, 68, 68, 0.78) !important;
        box-shadow: none !important;
      }

      #section-vondsten .find-photo-filter-row select {
        border-color: rgba(226, 232, 240, 0.12);
        background-color: rgba(18, 24, 38, 0.92);
        border-radius: 10px;
        color: var(--text);
        min-height: 34px;
      }

      #section-vondsten .mini-photo-meta-row span,
      #section-vondsten .mini-photo-location-row span {
        color: rgba(166, 174, 193, 0.72);
      }

      #section-vondsten .mini-photo-meta-row strong,
      #section-vondsten .mini-photo-location-row strong {
        color: rgba(244, 245, 251, 0.92);
      }

      @media (max-width: 900px) {
        .mini-photo-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 520px) {
        .mini-photo-grid {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 1100px) {
        .splits-velddata-layout {
          flex-direction: column;
        }

        .splits-tree-pane {
          width: 100%;
          flex: 0 0 52%;
          border-right: 0;
          border-bottom: 1px solid var(--border);
        }

        .splits-detail-pane,
        .splits-tree-pane {
          min-width: 0;
        }

        .splits-detail-pane {
          width: min(100%, 520px);
          min-width: 0;
        }
      }

@keyframes spin{to{transform:rotate(360deg)}}