:root {
            --ui-font-body: 0.95rem;
            --ui-font-caption: 0.78rem;
            --ui-font-label: 0.82rem;
            --ui-font-section: 1.05rem;
            --ui-font-page: 1.45rem;
            --ui-space-1: 0.25rem;
            --ui-space-2: 0.5rem;
            --ui-space-3: 0.75rem;
            --ui-space-4: 1rem;
            --ui-space-5: 1.25rem;
            --ui-space-6: 1.5rem;
            --ui-radius-sm: 0.625rem;
            --ui-radius-md: 0.875rem;
            --ui-radius-lg: 1rem;
            --ui-shadow-soft: 0 4px 16px rgba(17, 24, 39, 0.08);
            --ui-focus-ring: 0 0 0 3px rgba(230, 57, 70, 0.22);
        }

        html {
            font-size: 100%;
        }

        body {
            font-size: var(--ui-font-body);
            line-height: 1.5;
        }

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

        .ui-page-title {
            font-size: var(--ui-font-page);
            font-weight: 800;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        .ui-section-title {
            font-size: var(--ui-font-section);
            font-weight: 700;
            letter-spacing: -0.01em;
            line-height: 1.3;
        }

        .ui-label {
            font-size: var(--ui-font-label);
            font-weight: 600;
            color: #4b5563;
        }

        .dark .ui-label {
            color: #d1d5db;
        }

        .ui-caption {
            font-size: var(--ui-font-caption);
            color: #6b7280;
        }

        .dark .ui-caption {
            color: #9ca3af;
        }

        .ui-panel {
            border-radius: var(--ui-radius-lg);
            box-shadow: var(--ui-shadow-soft);
        }

        .ui-input {
            border-radius: var(--ui-radius-md);
            font-size: var(--ui-font-body);
            line-height: 1.45;
            transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
        }

        .ui-input:focus {
            outline: none;
            box-shadow: var(--ui-focus-ring);
        }

        .ui-btn-primary {
            background: linear-gradient(135deg, #e63946, #ff6b35);
            color: #fff;
            font-weight: 700;
            border-radius: var(--ui-radius-md);
            box-shadow: 0 8px 18px rgba(230, 57, 70, 0.25);
            transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }

        .ui-btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(230, 57, 70, 0.32);
            filter: saturate(1.05);
        }

        .ui-btn-secondary {
            border-radius: var(--ui-radius-md);
            font-weight: 600;
            transition: background-color 0.2s ease, transform 0.15s ease;
        }

        .ui-btn-secondary:hover {
            transform: translateY(-1px);
        }

        .ui-clickable {
            transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
        }

        .ui-clickable:hover {
            transform: translateY(-1px);
        }

        .ui-clickable:focus-visible,
        .ui-btn-primary:focus-visible,
        .ui-btn-secondary:focus-visible {
            outline: none;
            box-shadow: var(--ui-focus-ring);
        }

        .ui-stack-tight>*+* {
            margin-top: var(--ui-space-2);
        }

        .ui-app-shell table thead th {
            font-size: var(--ui-font-caption);
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .ui-app-shell table tbody td {
            font-size: 0.87rem;
            line-height: 1.4;
        }

        [x-cloak] {
            display: none !important;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }

        .dark ::-webkit-scrollbar-track {
            background: #1f2937;
        }

        .dark ::-webkit-scrollbar-thumb {
            background: #4b5563;
        }

        /* Animations */
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .animate-slide-in {
            animation: slideIn 0.3s ease-out;
        }

        .animate-fade-in {
            animation: fadeIn 0.2s ease-out;
        }

        .animate-pulse-slow {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        .animate-spin {
            animation: spin 1s linear infinite;
        }

        /* Drag & Drop */
        .drop-zone {
            transition: all 0.3s ease;
        }

        .drop-zone.drag-over {
            border-color: #e63946;
            background: rgba(230, 57, 70, 0.1);
            transform: scale(1.02);
        }

        /* Glass Effect */
        .glass {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.8);
        }

        .dark .glass {
            background: rgba(31, 41, 55, 0.8);
        }

        /* Gradient Text */
        .gradient-text {
            background: linear-gradient(135deg, #e63946, #ff6b35);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Mobile: leicht kompakter, aber lesbar */
        @media (max-width: 768px) {
            html {
                font-size: 92%;
            }
        }