body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .form-input,
        .form-select,
        .form-textarea {
            border-radius: 0.5rem;
            border: 1px solid #d1d5db;
            padding: 0.65rem 0.9rem;
            transition: all 0.2s ease-in-out;
            width: 100%;
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: #6772e5;
            box-shadow: 0 0 0 3px rgba(103, 114, 229, 0.3);
        }

        .btn {
            border-radius: 0.5rem;
            padding: 0.85rem 1.75rem;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid transparent;
        }

        .btn-primary {
            background: #6772e5;
            color: #fff;
            box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
        }

        .btn-primary:hover {
            background: #5469d4;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.12);
        }

        .btn-primary:disabled {
            background: #a5b4fc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .stepper-line {
            transition: all 0.4s ease-in-out;
        }

        /* --- Blue Theme Overrides --- */
        a.text-purple-700 {
            color: #6772e5 !important;
        }

        a.text-purple-700:hover {
            color: #5469d4 !important;
        }

        .text-purple-600,
        .form-radio:checked {
            color: #6772e5 !important;
        }

        .bg-purple-600 {
            background-color: #6772e5 !important;
        }

        .border-purple-600 {
            border-color: #6772e5 !important;
        }

        .has-\[:checked\]\:bg-purple-50:has(:checked) {
            background-color: #f0f2ff !important;
        }

        .form-radio {
            color: #6772e5;
        }

        .form-radio:checked {
            border-color: #6772e5;
            background-color: #6772e5;
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
        }

        /* --- End Blue Theme Overrides --- */

        /* Accordion styles */
        details.accordion {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            margin-bottom: 1rem;
        }

        details.accordion>summary {
            list-style: none;
            cursor: pointer;
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 500;
            color: #111827;
            background: #f9fafb;
            border-radius: 0.75rem;
        }

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

        details.accordion .accordion-body {
            padding: 1rem 1.25rem 1.25rem 1.25rem;
            border-top: 1px solid #e5e7eb;
        }

        details.accordion .chevron {
            transition: transform 0.2s ease;
            font-weight: 700;
            color: #6b7280;
        }

        details.accordion[open] .chevron {
            transform: rotate(180deg);
        }

        /* Locked (disabled) sections */
        details.accordion.locked>summary {
            opacity: 0.6;
            cursor: not-allowed;
            background: #f3f4f6;
        }

        details.accordion.locked>summary * {
            pointer-events: none;
        }

        details.accordion.locked .chevron {
            color: #cbd5e1;
        }

        /* Inline field error */
        .field-error {
            color: #b91c1c;
            font-size: 0.85rem;
            margin-top: 0.25rem;
        }

        .section-error {
            background: #fef2f2;
            border-left: 4px solid #f87171;
            color: #991b1b;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
        }

        /* Custom Tooltip Styles */
        label[data-tooltip] {
            cursor: default;
        }

        .custom-tooltip {
            position: absolute;
            display: none;
            padding: 16px 20px;
            background-color: #ffffff;
            color: #374151;
            border-radius: 12px;
            font-size: 0.95rem;
            line-height: 1.6;
            z-index: 1000;
            width: max-content;
            max-width: 400px;
            border: 1px solid rgba(229, 231, 235, 0.8);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
            opacity: 0;
            transform: translateY(8px) scale(0.97);
            transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .custom-tooltip ul {
            list-style: disc;
            padding-left: 1.25rem;
            margin: 0;
        }

        .custom-tooltip li {
            margin: 6px 0;
        }

        .custom-tooltip.visible {
            display: block;
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Tooltip arrow */
        .custom-tooltip::after {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            /* default: tooltip above target, arrow points down */
            border-top: 8px solid #ffffff;
            bottom: -8px;
        }

        .custom-tooltip.below::after {
            /* when tooltip is below target, arrow points up */
            border-top: none;
            border-bottom: 8px solid #ffffff;
            top: -8px;
            bottom: auto;
        }

        /* Inline info icon that triggers tooltip */
        .info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-left: 6px;
            border-radius: 9999px;
            background: #f3f4f6;
            color: #6b7280;
            font-family: ui-sans-serif, system-ui, sans-serif;
            font-size: 11px;
            font-weight: 700;
            font-style: italic;
            border: 1px solid #e5e7eb;
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
        }

        .info-icon:hover {
            background: #ffffff;
            border-color: #d1d5db;
            color: #111827;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        /* Custom Flatpickr Styles */
        .flatpickr-calendar {
            font-size: 72%;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .flatpickr-current-month {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 0.5rem;
            height: 38px;
            /* Give it a fixed height */
        }

        .flatpickr-current-month .flatpickr-monthDropdown-months,
        .flatpickr-year-select {
            font-weight: 600;
            color: #4b5563;
            background-color: transparent;
            border: 1px solid transparent;
            border-radius: 0.5rem;
            padding: 0.35rem 2.25rem 0.35rem 0.5rem;
            /* T, R, B, L */
            transition: all 0.2s ease;
            margin: 0 0.15rem;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.25em 1.25em;
        }

        .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
        .flatpickr-year-select:hover {
            background-color: #f0f2ff;
            border-color: #6772e5;
        }

        .flatpickr-monthDropdown-month {
            background: #fff;
            color: #374151;
        }

        .flatpickr-monthDropdown-month:hover {
            background: #f0f2ff;
            color: #5469d4;
        }

        .flatpickr-day {
            border-radius: 9999px;
            transition: all 0.1s ease;
        }

        .flatpickr-day.selected,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange {
            background: #6772e5;
            border-color: #6772e5;
        }

        .flatpickr-day:hover {
            background: #f0f2ff;
        }

        .flatpickr-day.today {
            border-color: #a5b4fc;
        }

        .flatpickr-day.today:hover {
            background: #a5b4fc;
            color: #fff;
        }

/* --- Completion View Animations --- */
                    /* Completion View Animations */
                    @keyframes popIn {
                        0% {
                            transform: scale(0.5);
                            opacity: 0;
                        }

                        70% {
                            transform: scale(1.1);
                        }

                        100% {
                            transform: scale(1);
                            opacity: 1;
                        }
                    }

                    .completion-icon {
                        opacity: 0;
                        animation: popIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
                    }

                    @keyframes fadeUp {
                        from {
                            opacity: 0;
                            transform: translateY(20px);
                        }

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

                    .fade-in-up {
                        animation: fadeUp 0.8s ease-out forwards;
                    }

                    @keyframes confettiFall {
                        0% {
                            transform: translateY(-50px) rotate(0deg);
                            opacity: 1;
                        }

                        100% {
                            transform: translateY(300px) rotate(360deg);
                            opacity: 0;
                        }
                    }

                    .confetti-piece {
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        background-color: #3b82f6;
                        opacity: 0;
                    }

                    .confetti-container.active .confetti-piece:nth-child(1) {
                        left: 10%;
                        animation: confettiFall 2.5s ease-out 0s infinite;
                    }

                    .confetti-container.active .confetti-piece:nth-child(2) {
                        left: 25%;
                        animation: confettiFall 2.2s ease-out 0.4s infinite;
                        background-color: #60a5fa;
                    }

                    .confetti-container.active .confetti-piece:nth-child(3) {
                        left: 40%;
                        animation: confettiFall 2.8s ease-out 0.2s infinite;
                        background-color: #2563eb;
                    }

                    .confetti-container.active .confetti-piece:nth-child(4) {
                        left: 60%;
                        animation: confettiFall 2.4s ease-out 0.6s infinite;
                        background-color: #93c5fd;
                    }

                    .confetti-container.active .confetti-piece:nth-child(5) {
                        left: 75%;
                        animation: confettiFall 2.6s ease-out 0.1s infinite;
                        background-color: #1d4ed8;
                    }

                    .confetti-container.active .confetti-piece:nth-child(6) {
                        left: 90%;
                        animation: confettiFall 2.3s ease-out 0.5s infinite;
                    }

                    .confetti-container.active .confetti-piece:nth-child(7) {
                        left: 50%;
                        animation: confettiFall 3s ease-out 0.3s infinite;
                        background-color: #dbeafe;
                    }