<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Soul Scripture | Mood Verse Finder</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Add a custom font if desired, or rely on Tailwind defaults */
        /* @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Lato:wght@400;700&display=swap'); */
        body {
            /* font-family: 'Lato', sans-serif; */
        }
        h1 /* #app-title */ {
             /* font-family: 'Merriweather', serif; */
        }

        .fade-in { animation: fadeIn 0.5s ease-in-out; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Language Button Styling */
        .lang-btn {
            transition: all 0.2s ease;
            border: 2px solid transparent; /* Base border */
        }
        .lang-btn.inactive {
            border-color: #c4b5fd; /* purple-300 */
            background-color: white;
            color: #5b21b6; /* purple-800 */
        }
        .lang-btn.inactive:hover {
            border-color: #a78bfa; /* purple-400 */
            background-color: #f5f3ff; /* purple-50 */
        }
        .lang-btn.active {
            background-color: #7c3aed; /* purple-600 */
            border-color: #7c3aed; /* purple-600 */
            color: white;
        }
        .lang-btn.active .lang-name {
             color: #ddd6fe; /* purple-200 for lighter contrast */
        }
         .lang-btn.active .lang-version {
             color: white;
        }
        .lang-btn.inactive .lang-name {
             color: #6b7280; /* gray-500 */
        }
        .lang-btn.inactive .lang-version {
            color: #5b21b6; /* purple-800 */
        }

        /* Mood Button Styling */
        .mood-btn {
            transition: all 0.3s ease;
        }
        .mood-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        /* Focus Styles */
        button:focus, .lang-btn:focus, .mood-btn:focus {
            outline: 2px solid #a78bfa; /* lighter purple outline */
            outline-offset: 2px;
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3); /* Optional ring */
        }
         button:focus:not(:focus-visible) { /* Remove outline if not keyboard focus */
             outline: none;
             box-shadow: none;
         }

    </style>
</head>