:root {
            /* Page Specific Variables */
            --bg-page: #f9fafb;
            --bg-card: #ffffff;
            --border-color: #e5e7eb;
            --text-muted: #6b7280;
            --danger: #dc2626;
            --success: #16a34a;

            --font-display: 'Baloo Da 2', cursive;
            --font-body: 'Hind Siliguri', sans-serif;

            --radius-card: 1rem;
            --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
             /* --btn-secondary-color: #FFE082; */
             --tool-btn-color: #d4d3d2;
             --btn-secondary-color: #d4d3d2;
        }

        [data-theme="dark"] {
            --bg-page: #111827;
            --bg-card: #1f2937;
            --border-color: #374151;
            --text-muted: #9ca3af;
            --tool-btn-color: #FFE082;
             --btn-secondary-color: #3b3737;

        }


        main {
            flex: 1;
            position: relative;
        }

        /* Typography Overrides for Bengali */
        .bn {
            font-family: var(--font-display);
        }

        .bn-hs {
            font-family: var(--font-body);
        }


        [data-theme="dark"] .hero-section {
            background: linear-gradient(135deg, #1a1a1a, var(--primary-color));
        }

        .hero-title {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        /* Main App Card */
        .app-container {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            padding: 0 1rem;
            position: relative;
            z-index: 10;
        }

        /* .voice-card {
           
            border-radius: var(--radius-card);
            padding: 2rem;
            box-shadow: var(--shadow-card);
           
            margin-bottom: 2rem;
        } */

        /* Feature: Visualizer */
        .visualizer-box {
            height: 60px;
            
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        canvas#visualizer {
            width: 100%;
            height: 100%;
        }

        /* Feature: Toolbar */
        .toolbar {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .tool-btn {
            background: var(--primary-surface-bg);
            border: 1px solid var(--primary-surface-border);
            color: var(--primary-surface-text);
            padding: 0.15rem 0.75rem;
            border-radius: 0.25rem;
            cursor: pointer;
            font-family: var(--font-body);
            transition: all 0.2s;
        }

        .tool-btn:hover {
            border-color: var(--primary-surface-border);
            color: var(--primary-color);
        }



        /* Input Area */
        textarea#output {
            width: 100%;
            min-height: 250px;
            padding: 1rem;
            font-size: 1.25rem;
            line-height: 1.6;
            border: 1px solid var(--primary-surface-border);
            border-radius: 0.5rem;
            color: var(--color);
            outline: none;
            resize: vertical;
            font-family: var(--font-body);
            margin-bottom: 1.5rem;
        }

        textarea#output::placeholder {
            color: #757575;
            font-size: 1rem;
            font-weight: 300;
            opacity: 1;
        }

        textarea#output:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(61, 188, 238, 0.2);
        }



        /* Controls using site.css .btn */
        .controls-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 1rem;
        }

        .btn-custom {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            font-size: 1rem;
        }

        /* Status Bar */
        .status-bar {
            display: flex;
            justify-content: space-between;
            color: var(--text-muted);
            font-size: 0.9rem;
            margin-bottom: 1rem;
            padding: 0 0.5rem;
        }

        /* Instructions */
        .info-box {
            margin-top: 2rem;
            padding: 1rem;
            background-color: color-mix(in srgb, currentColor 1%, transparent);
            border-radius: 0.5rem;
            font-size: 0.95rem;
        }

        .info-box ul {
            list-style: disc inside;
            margin-top: 0.5rem;
            color: var(--secondary-surface-text);
            color: color-mix(in srgb, currentColor 60%, transparent);
        }

        /* Animations */
        @keyframes pulse-ring {
            0% {
                box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(22, 163, 74, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
            }
        }

        .mic-active {
            background-color: var(--success) !important;
            animation: pulse-ring 1.5s infinite;
        }

        .material-symbols-outlined {
            font-size: 1.25rem;
        }

        @media(max-width: 600px) {
            .hero-section {
                padding: 2rem 1rem 4rem;
            }

            .voice-card {
                padding: 1rem;
            }

            .btn-custom span:nth-child(2) {
                display: inline;
            }
        }

        .btn-secondary{
             color: var(--btn-secondary-color) !important;
             background: var(--secondary-color);
        }