.nav-link {
    @apply text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200;
}

.mobile-nav-link {
    @apply block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
}

.btn-primary {
    @apply inline-block bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-indigo-700 transition duration-300 transform hover:scale-105;
}

.btn-secondary {
    @apply inline-block bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold py-3 px-8 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105;
}

.theme-toggle-btn {
    @apply text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5;
}

.gradient-text {
    background: linear-gradient(to right, #4f46e5, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.dark .gradient-text {
    background: linear-gradient(to right, #818cf8, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* --- Homepage Specific --- */

.feature-card {
    @apply bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-indigo-500/20 hover:-translate-y-2 transition-all duration-300;
}

.feature-icon-wrapper {
    @apply bg-indigo-100 dark:bg-indigo-900/50 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-4;
}

.feature-link {
    @apply inline-block mt-4 text-indigo-600 dark:text-indigo-400 font-semibold hover:underline;
}

.tech-icon-card {
    @apply group block text-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg hover:-translate-y-1.5 transition-all duration-300;
}

.tech-icon-img {
    @apply h-16 w-16 mx-auto transition-transform duration-300 group-hover:scale-110;
}

.tech-icon-name {
    @apply mt-3 block font-semibold text-gray-700 dark:text-gray-200;
}

.testimonial-card {
    @apply bg-white dark:bg-gray-800 rounded-xl p-8 max-w-2xl mx-auto text-center;
}

.testimonial-img {
    @apply rounded-full h-24 w-24 mx-auto mb-4 border-4 border-indigo-200 dark:border-indigo-800;
}

.testimonial-text {
    @apply text-lg italic text-gray-700 dark:text-gray-300;
}

.testimonial-author {
    @apply mt-4 block font-semibold text-gray-600 dark:text-gray-400 not-italic;
}

.swiper-pagination-bullet {
    background-color: #a5b4fc;
    opacity: 0.8;
}

.swiper-pagination-bullet-active {
    background-color: #6366f1;
    opacity: 1;
}

.dark .swiper-pagination-bullet {
    background-color: #4338ca;
}

.dark .swiper-pagination-bullet-active {
    background-color: #818cf8;
}


/* --- Search Modal --- */

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}

.search-modal-content {
    width: 100%;
    max-width: 640px;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    padding: 1.5rem;
}

.dark .search-modal-content {
    background-color: #1f2937;
}

.search-modal-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.125rem;
    padding-left: 1rem;
    color: #111827;
}

.dark .search-modal-input {
    color: #f9fafb;
}

#close-search-modal {
    font-size: 2rem;
    line-height: 1;
    padding: 0 0.5rem;
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    text-decoration: none;
}

.dark .search-result-item {
    border-bottom-color: #374151;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: #f3f4f6;
}

.dark .search-result-item:hover {
    background-color: #374151;
}

.search-result-title {
    font-weight: 600;
    color: #1f2937;
}

.dark .search-result-title {
    color: #f9fafb;
}

.search-result-tag {
    font-size: 0.75rem;
    font-family: monospace;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
}

.tag-note {
    background-color: #e0f2fe;
    color: #0369a1;
}

.dark .tag-note {
    background-color: #0c4a6e;
    color: #7dd3fc;
}

.tag-blog {
    background-color: #fef3c7;
    color: #92400e;
}

.dark .tag-blog {
    background-color: #78350f;
    color: #fcd34d;
}


/* --- Notes & Blog Pages --- */

.toc-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    border-left: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

.toc-link::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: #9ca3af;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
}

.dark .toc-link {
    color: #d1d5db;
}

.toc-link:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.dark .toc-link:hover {
    background-color: #374151;
    color: #f9fafb;
}

.toc-link.active {
    color: #4f46e5;
    font-weight: 600;
    border-left-color: #4f46e5;
    background-color: #eef2ff;
}

.dark .toc-link.active {
    color: #a5b4fc;
    border-left-color: #a5b4fc;
    background-color: #3730a3;
}

.dark .toc-link::before {
    background-color: #6b7280;
}

.toc-link:hover::before {
    background-color: #4f46e5;
}

.dark .toc-link:hover::before {
    background-color: #818cf8;
}

.toc-link.active::before {
    background-color: #4f46e5;
}

.dark .toc-link.active::before {
    background-color: #a5b4fc;
}

.note-section {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

.dark .note-section {
    background-color: #1f2937;
    border-color: #374151;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
}

.pro-tip {
    background-color: #f0fdf4;
    border-left: 4px solid #22c55e;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
}

.dark .pro-tip {
    background-color: #162a19;
    border-left-color: #4ade80;
}

.pro-tip p {
    color: #15803d;
}

.dark .pro-tip p {
    color: #bbf7d0;
}

.pro-tip h4 {
    color: #166534;
}

.dark .pro-tip h4 {
    color: #f0fdf4;
}

.code-block-wrapper {
    position: relative;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    color: #e5e7eb;
    background-color: #4b5563;
    border: 1px solid #6b7280;
    border-radius: 0.375rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.code-block-wrapper:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background-color: #374151;
}

.copy-btn.copied {
    background-color: #16a34a;
    border-color: #15803d;
    color: white;
}

.nav-button {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    width: 48%;
    color: #4b5563;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.dark .nav-button {
    border-color: #374151;
    color: #d1d5db;
}

.nav-button:hover {
    border-color: #4f46e5;
    color: #4f46e5;
}

.dark .nav-button:hover {
    border-color: #818cf8;
    color: #818cf8;
}

.nav-button.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.blog-slider .swiper-button-next,
.blog-slider .swiper-button-prev {
    color: #ffffff;
    background-color: rgba(15, 23, 42, 0.5);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    transition: background-color 0.2s;
}

.blog-slider .swiper-button-next:hover,
.blog-slider .swiper-button-prev:hover {
    background-color: rgba(15, 23, 42, 0.8);
}

.blog-slider .swiper-button-next::after,
.blog-slider .swiper-button-prev::after {
    font-size: 1.25rem;
    font-weight: 800;
}

.blog-slider .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.7);
}

.blog-slider .swiper-pagination-bullet-active {
    background-color: #ffffff;
}

/* --- Resume Builder --- */

.form-section {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
}

.dark .form-section {
    background-color: #1f2937;
    border-color: #374151;
}

.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #111827;
}

.dark .form-section-title {
    color: #f9fafb;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.dark .form-label {
    color: #d1d5db;
}

.form-input {
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    background-color: #f9fafb;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #111827;
}

.dark .form-input {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.form-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px #c7d2fe;
}

.dark .form-input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 2px #5850ce;
}

.btn-add-more {
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px dashed #9ca3af;
    color: #4b5563;
    font-weight: 500;
    transition: all 0.2s;
}

.dark .btn-add-more {
    border-color: #4b5563;
    color: #d1d5db;
}

.btn-add-more:hover {
    background-color: #f3f4f6;
    border-color: #4f46e5;
    color: #4f46e5;
}

.dark .btn-add-more:hover {
    background-color: #374151;
    border-color: #818cf8;
    color: #818cf8;
}

.btn-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: #fee2e2;
    color: #b91c1c;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.dark .btn-remove {
    background-color: #450a0a;
    color: #fca5a5;
}

.resume-section {
    margin-top: 1.5rem;
}

.resume-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    border-bottom: 2px solid #111827;
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dark .resume-section-title {
    color: #f9fafb;
    border-bottom-color: #f9fafb;
}

.resume-item {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.dark .resume-item {
    background-color: #1f2937;
    border-color: #374151;
}

@media screen and (max-width: 478px) {
    .yt-video .video-topic {
        height: 200px;
        border-radius: 10px;
    }
}

.rating-star {
    cursor: pointer;
    color: #d1d5db;
    /* gray-300 */
    transition: color 0.2s;
}

.dark .rating-star {
    color: #4b5563;
    /* dark:gray-600 */
}

.rating-star.hovered,
.rating-star.selected {
    color: #f59e0b;
    /* amber-500 */
}

/* --- NEW STYLES FOR RESPONSIVE TABLE --- */
.responsive-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border: 1px solid #e5e7eb;
    /* gray-200 */
    border-radius: 0.75rem;
    /* rounded-xl */
}

.dark .responsive-table-wrapper {
    border-color: #374151;
    /* dark:gray-700 */
}

.prose table {
    width: 100%;
    min-width: 600px;
    /* Ensures table has a minimum width before scrolling */
    border-collapse: collapse;
}

.prose th,
.prose td {
    border: 1px solid #e5e7eb;
    /* gray-200 */
    padding: 0.75rem 1rem;
    text-align: left;
}

.dark .prose th,
.dark .prose td {
    border-color: #374151;
    /* dark:gray-700 */
}

.prose thead {
    background-color: #f9fafb;
    /* gray-50 */
}

.dark .prose thead {
    background-color: #1f2937;
    /* dark:gray-800 */
}

.prose th {
    font-weight: 600;
}

.prose tbody tr:nth-child(even) {
    background-color: #f9fafb;
    /* gray-50 */
}

.dark .prose tbody tr:nth-child(even) {
    background-color: #1f2937;
    /* dark:gray-800 */
}

.pagination-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid #d1d5db;
    /* gray-300 */
    background-color: #ffffff;
    /* white */
    color: #374151;
    /* gray-700 */
}

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

.pagination-btn:not(.disabled):hover {
    background-color: #f3f4f6;
    /* hover:bg-gray-100 */
    border-color: #4f46e5;
    /* hover:border-indigo-600 */
    color: #4f46e5;
    /* hover:text-indigo-600 */
}

.dark .pagination-btn:not(.disabled):hover {
    background-color: #4b5563;
    /* dark:hover:bg-gray-600 */
    border-color: #818cf8;
    /* dark:hover:border-indigo-400 */
    color: #818cf8;
    /* dark:hover:text-indigo-400 */
}

.pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- NEW STYLES FOR DOWNLOADS PAGE --- */

.social-banner {
    display: flex;
    flex-direction: column;
    flex-direction: row;
    gap: 1rem;
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.dark .social-banner {
    background-color: #1f2937;
}

.social-btn {
    flex-grow: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.20rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
}
.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.social-btn.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.social-btn.youtube {
    background-color: #FF0000;
}

.download-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: all 0.3s;
}
.dark .download-card {
    background-color: #1f2937;
    border-color: #374151;
}
.download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    border-color: #4f46e5;
}
.dark .download-card:hover {
    border-color: #818cf8;
}

.download-icon {
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

.download-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: #111827;
}
.dark .download-title {
    color: #f9fafb;
}

.download-description {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280;
    margin-top: 0.25rem;
    margin-bottom: 1.5rem;
}
.dark .download-description {
    color: #9ca3af;
}

.download-btn {
    display: inline-block;
    width: 100%;
    background-color: #4f46e5;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    text-decoration: none;
}
.download-btn:hover {
    background-color: #4338ca;
}