/* Base Styles & Dark Mode */
body {
    font-family: "Inter", sans-serif;
    /* A modern, clean font */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dark {
    color-scheme: dark;
}

/* Custom Colors & Shadows */
.bg-gradient-to-br.from-purple-50.to-pink-50 {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #fdf2f8;
    /* Light Pink */
    --tw-gradient-to: #fce7f3;
    /* Lighter Pink */
}

.dark .bg-gradient-to-br.from-gray-700.to-gray-800 {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: #374151;
    /* Dark Gray */
    --tw-gradient-to: #1f2937;
    /* Darker Gray */
}

.text-purple-600 {
    color: #9333ea;
}

/* Deep Purple */
.dark .text-purple-400 {
    color: #c084fc;
}

/* Lighter Purple for dark mode */
.bg-purple-500 {
    background-color: #a855f7;
}

/* Medium Purple */
.hover\:bg-purple-600:hover {
    background-color: #9333ea;
}

/* Darker Purple on hover */
.focus\:ring-purple-500:focus {
    --tw-ring-color: #a855f7;
}

.bg-pink-500 {
    background-color: #ec4899;
}

/* Vibrant Pink */
.hover\:bg-pink-600:hover {
    background-color: #db2777;
}

/* Darker Pink on hover */
.focus\:ring-pink-500:focus {
    --tw-ring-color: #ec4899;
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.12);
}

.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.12);
}

.dark .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

/* Card Styles */
.card {
    background-color: #ffffff;
    border-radius: 1.5rem;
    /* rounded-3xl */
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
    border: 1px solid #e5e7eb;
    /* border-gray-200 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark .card {
    background-color: #1f2937;
    /* gray-900 */
    border-color: #4b5563;
    /* gray-700 */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.06);
    /* shadow-xl on hover */
}

.platform-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    /* rounded-xl */
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    color: #4b5563;
    /* gray-600 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* shadow-sm */
    border: 1px solid #d1d5db;
    /* gray-300 */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.dark .platform-card {
    background-color: #374151;
    /* gray-700 */
    border-color: #4b5563;
    /* gray-600 */
    color: #d1d5db;
    /* gray-300 */
}

.platform-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* shadow-md on hover */
    background-color: #f3f4f6;
    /* gray-100 */
}

.dark .platform-card:hover {
    background-color: #4b5563;
    /* gray-600 */
}

/* FAQ Styles */
.faq-item {
    background-color: #ffffff;
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* shadow-sm */
    border: 1px solid #e5e7eb;
    /* border-gray-200 */
    overflow: hidden;
    transition: all 0.3s ease;
}

.dark .faq-item {
    background-color: #1f2937;
    /* gray-900 */
    border-color: #4b5563;
    /* gray-700 */
}

.faq-item summary {
    padding: 1rem 1.5rem;
    outline: none;
    user-select: none;
    transition: background-color 0.2s ease;
}

.faq-item summary:hover {
    background-color: #f3f4f6;
    /* gray-100 */
}

.dark .faq-item summary:hover {
    background-color: #374151;
    /* gray-700 */
}

.faq-item[open] summary {
    background-color: #f3f4f6;
    /* gray-100 */
    border-bottom: 1px solid #e5e7eb;
}

.dark .faq-item[open] summary {
    background-color: #374151;
    /* gray-700 */
    border-bottom-color: #4b5563;
}

.faq-item p {
    padding: 0 1.5rem 1.5rem;
    line-height: 1.6;
}

.faq-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(90deg);
}

.dark .faq-icon {
    filter: invert(1);
    /* Make icon white in dark mode */
}

/* Progress Bar */
.progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 0.5rem;
    overflow: hidden;
    height: 1.25rem;
    /* h-5 */
}

.dark .progress-bar-container {
    background-color: #4b5563;
    /* gray-600 */
}

.progress-bar {
    height: 100%;
    background-color: #22c55e;
    /* green-500 */
    /* width: 0%; Removed from CSS, now set in JS/HTML for initial state */
    transition: width 0.4s ease;
    /* Smooth transition for width changes */
    border-radius: 0.5rem;
    position: relative;
    /* Added for text overlay */
}

/* Spinner for loading states */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #a855f7;
    /* purple-500 */
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    animation: spin 1s linear infinite;
}

.dark .spinner {
    border-color: rgba(255, 255, 255, 0.2);
    border-left-color: #c084fc;
    /* purple-400 */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Video Info Card */
.video-card {
    display: flex;
    flex-direction: column;
    /* Default to column for mobile */
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    /* rounded-xl */
    background-color: #f9fafb;
    /* gray-50 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* shadow-sm */
}

.dark .video-card {
    background-color: #374151;
    /* gray-700 */
    border-color: #4b5563;
    /* gray-600 */
}

@media (min-width: 768px) {

    /* md breakpoint */
    .video-card {
        flex-direction: row;
        /* Row for larger screens */
    }
}

.video-thumbnail {
    width: 100%;
    /* Full width on mobile */
    height: 200px;
    object-fit: cover;
    border-radius: 0.75rem;
    /* rounded-lg */
    flex-shrink: 0;
    /* Prevent shrinking when in row layout */
}

@media (min-width: 768px) {
    .video-thumbnail {
        width: 160px;
        /* Fixed width on larger screens */
        height: 120px;
    }
}

/* Progress Item */
.progress-item {
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    /* rounded-xl */
    background-color: #f9fafb;
    /* gray-50 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* shadow-sm */
    margin-bottom: 1rem;
}

.dark .progress-item {
    background-color: #374151;
    /* gray-700 */
    border-color: #4b5563;
    /* gray-600 */
}

/* Status Indicators */
.status-downloading {
    color: #a855f7;
}

/* purple-500 */
.status-finished {
    color: #22c55e;
}

/* green-500 */
.status-error {
    color: #ef4444;
}

/* red-500 */

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    /* Start hidden */
}

/* Delay for sequential animations */
.animate-fadeInUp[style*="animation-delay"] {
    /* Handled by inline style */
}

/* Re-applied Enhanced Prose Styling for Blog Content */
.prose {
    /* Base text styling */
    font-size: 1.125rem;
    /* text-lg */
    line-height: 1.75;
    /* leading-relaxed */
    color: #374151;
    /* gray-700 */
}

.dark .prose {
    color: #d1d5db;
    /* gray-300 */
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-weight: 700;
    /* font-bold */
    color: #1f2937;
    /* gray-900 */
    margin-top: 2.5em;
    /* More space above headings */
    margin-bottom: 0.75em;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
    color: #ffffff;
    /* white */
}

.prose h1 {
    font-size: 2.5rem;
    /* text-4xl */
    line-height: 1.2;
}

.prose h2 {
    font-size: 2rem;
    /* text-3xl */
    line-height: 1.3;
    border-bottom: 1px solid #e5e7eb;
    /* subtle separator */
    padding-bottom: 0.5em;
    margin-bottom: 1em;
}

.dark .prose h2 {
    border-bottom-color: #4b5563;
    /* gray-700 */
}

.prose h3 {
    font-size: 1.75rem;
    /* text-2xl */
    line-height: 1.4;
}

.prose p {
    margin-bottom: 1.5em;
    /* More space between paragraphs */
}

.prose a {
    color: #9333ea;
    /* purple-600 */
    text-decoration: none;
    transition: color 0.2s ease;
}

.dark .prose a {
    color: #c084fc;
    /* purple-400 */
}

.prose a:hover {
    color: #db2777;
    /* pink-600 */
}

.dark .prose a:hover {
    color: #ec4899;
    /* pink-500 */
}

/* Override for buttons within prose to keep text white */
.prose a.bg-pink-500,
.prose a.bg-pink-600 {
    /* Target the button links specifically */
    color: #ffffff !important;
    /* Force white text */
}

.prose ul,
.prose ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

.prose ul li {
    list-style-type: disc;
    margin-bottom: 0.5em;
}

.prose ol li {
    list-style-type: decimal;
    margin-bottom: 0.5em;
}

.prose strong {
    font-weight: 700;
    /* font-bold */
    color: #1f2937;
    /* gray-900 */
}

.dark .prose strong {
    color: #ffffff;
    /* white */
}

.prose blockquote {
    border-left: 4px solid #a855f7;
    /* purple-500 */
    padding-left: 1.5em;
    margin: 2em 0;
    font-style: italic;
    color: #4b5563;
    /* gray-600 */
    background-color: #f3f4f6;
    /* gray-100 */
    border-radius: 0.5rem;
    padding: 1.5em;
}

.dark .prose blockquote {
    border-left-color: #c084fc;
    /* purple-400 */
    background-color: #374151;
    /* gray-700 */
    color: #d1d5db;
    /* gray-300 */
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    /* rounded-lg */
    margin: 2em auto;
    /* Center images and add vertical space */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dark .prose img {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
}

/* Code blocks within prose */
.prose pre {
    background-color: #1f2937;
    /* gray-900 */
    color: #f9fafb;
    /* gray-50 */
    padding: 1em;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 2em 0;
}

.prose code {
    background-color: #e5e7eb;
    /* gray-200 */
    color: #1f2937;
    /* gray-900 */
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

.dark .prose code {
    background-color: #4b5563;
    /* gray-600 */
    color: #f9fafb;
    /* gray-50 */
}

/* Legal Page Links Styling */
/* This targets links within the main content of legal pages */
.legal-page-content a {
    color: #ec4899;
    /* pink-500 */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.dark .legal-page-content a {
    color: #f472b6;
    /* pink-400 for dark mode */
}

.legal-page-content a:hover {
    color: #db2777;
    /* darker pink on hover */
}

.dark .legal-page-content a:hover {
    color: #ec4899;
    /* pink-500 on hover in dark mode */
}
/* Notification Banner Styles */
.notice-banner {
    width: 100%;
    background-color: #fff7db;
    border-bottom: 1px solid #f0c36d;
    display: flex;
    justify-content: center;
    padding: 10px 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 40;
}

.notice-content {
    max-width: 1280px;
    width: 100%;
    text-align: center;
    position: relative;
    padding: 10px 30px 10px 30px;
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    line-height: 1.6;
}

.notice-content .close-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    padding: 0;
}

@media screen and (max-width: 600px) {
    .notice-content {
        font-size: 0.95rem;
        padding: 15px 40px 15px 15px;
    }

    .notice-content .close-btn {
        top: 10px;
        right: 12px;
    }
}

/* FAQ Section */
details.faq-item summary {
    list-style: none;
}

details.faq-item p {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s ease-in-out;
    opacity: 0;
}

details.faq-item[open] p {
    max-height: 500px;
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

#hero {
    box-shadow: -1px -2px 25px 8px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}