/* Force Light Mode CSS */
        :root {
            color-scheme: light;
            --primary-blue: #00799f;
            --primary-orange: #ffc574;
        }
        body { font-family: 'Inter', sans-serif; }
        .arabic { font-family: 'Amiri', serif; direction: rtl; line-height: 2.2; }
        
        .mushaf-card { 
            background: #FFFEFA; 
            border: 1px solid #ffc57440; 
            box-shadow: inset 0 0 30px rgba(255, 197, 116, 0.1); 
        }
        
        .pulse-mic { animation: pulse-blue 1.5s infinite; }
        .pulse-warning { animation: pulse-orange 1.5s infinite; }
        
        @keyframes pulse-blue {
            0% { box-shadow: 0 0 0 0 rgba(0, 121, 159, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(0, 121, 159, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 121, 159, 0); }
        }
        
        @keyframes pulse-orange {
            0% { box-shadow: 0 0 0 0 rgba(255, 197, 116, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(255, 197, 116, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 197, 116, 0); }
        }
        
        .logo-box { background: #FFFFFF; }
        
        .fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes scaleUp {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        .animate-scale-up { animation: scaleUp 0.2s ease-out forwards; }
        
        .custom-scroll::-webkit-scrollbar { width: 0px; background: transparent; }
        .custom-scroll { -ms-overflow-style: none; scrollbar-width: none; }

        .force-scroll {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
        }
        
        .modal-overlay {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(8px);
        }
        
        select {
            -webkit-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 1em;
        }

        /* Toggle Switch Style */
        .toggle-checkbox:checked {
            right: 0;
            border-color: #00799f;
        }
        .toggle-checkbox:checked + .toggle-label {
            background-color: #00799f;
        }

        /* Highlight Ayat in Hafalan Mode */
        .active-ayat {
            background-color: rgba(255, 197, 116, 0.2);
            border-color: #ffc574;
            transform: scale(1.02);
            transition: all 0.3s ease;
        }
        
        /* Optical Center for Play Icon */
        .play-icon-fix {
            margin-left: 2px; /* Slight nudge to center visually */
        }

/* Portal helpers */
        .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
        .cal-cell { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
        .ring-rotate { transform: rotate(-90deg); transform-origin: 50% 50%; }

/* Grid Layout for Portal Container */
#portal-container.is-visible {
    display: grid !important;
    grid-template-rows: auto 1fr auto;
}

#portal-container.is-visible main {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Flex Layout for App Container */
#app-container.is-visible {
    display: flex !important;
}

/* Mutual Exclusion Safety Net */
body:has(#portal-container.is-visible) #app-container {
    display: none !important;
}

body:has(#app-container.is-visible) #portal-container {
    display: none !important;
}

/* ===== Enhanced Plan Card Styling (UI/UX Optimization) ===== */
.plan-card-primary {
    box-shadow: 0 4px 20px rgba(0, 121, 159, 0.15);
}

.plan-card-primary:hover {
    box-shadow: 0 8px 30px rgba(0, 121, 159, 0.25);
}

/* Fade-in animation for trial banner */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

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

/* Pulse animation for trial countdown (subtle) */
@keyframes pulse-subtle {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.8; 
    }
}

.pulse-countdown {
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* ===== Word-by-Word Karaoke Styles ===== */
.word-token {
    display: inline;
    cursor: default;
    transition: color 0.2s ease;
}

/* Dikonfirmasi benar — hitam normal */
.word-correct {
    color: #374151;
    margin: 0 3px;
}

/* Ambigu — oranye */
.word-uncertain {
    color: #d97706;
    border-bottom: 2px dotted #fbbf24;
    padding-bottom: 1px;
    margin: 0 3px;
}

/* Card aktif selama user membaca */
.active-reading-card {
    border: 1.5px solid rgba(255, 197, 116, 0.5) !important;
    background: linear-gradient(135deg, #ffffff, #fffef8) !important;
}

/* Fix layout teks Arab agar tidak overflow ke luar card */
.wbw-text-wrap {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow: hidden !important;
    max-width: 100% !important;
}