:root {
            --gold-light: #FFD700;
            --gold-dark: #B8860B;
            --primary-blue: #1877f2;
            --background-light: #f0f2f5;
            --text-dark: #1c1e21;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--background-light);
            color: var(--text-dark);
            min-height: 100vh;
            overflow-x: hidden;
        }
        .fade-in { animation: fadeIn 0.5s ease-in; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .slide-up { animation: slideUp 0.5s ease-out; }
        @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .post-card {
            transition: all 0.3s ease;
            border-radius: 0.75rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
            background-color: #fff;
        }
        .post-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .comment-section {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
        }
        .comment-section.expanded { max-height: 1000px; }
        .like-button.liked { color: var(--primary-blue); }
        .dropdown-menu {
            display: none; position: absolute; background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 0.5rem; z-index: 100;
        }
        .dropdown-menu.show { display: block; animation: fadeIn 0.2s ease-out; }
        .modal {
            display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px);
            z-index: 1000; align-items: center; justify-content: center;
            opacity: 0; transition: opacity 0.3s ease;
        }
        .modal.show { display: flex; opacity: 1; }
        .modal-content {
            background-color: white; padding: 2rem; border-radius: 1rem;
            box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
            max-width: 90%; max-height: 90%; overflow-y: auto; width: 500px;
        }

        /* Full-page modal styles */
        .modal-content-full-page {
            background-color: white;
            border-radius: 0; /* No rounded corners for full page */
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            display: flex;
            flex-direction: column;
            /* Animation */
            transform: translateY(100%);
            transition: transform 0.3s ease-out;
        }
        .modal.show .modal-content-full-page {
            transform: translateY(0);
        }


        .verified-badge { color: var(--primary-blue); margin-left: 4px; font-size: 0.9em; }
        .monetization-icon { color: green; margin-left: 4px; font-size: 0.9em; } /* New style for monetization icon */
        .post-image, .story-image {
            max-height: 600px; width: 100%; object-fit: cover;
            border-radius: 0.75rem; margin: 1rem 0; display: block;
        }
        .profile-pic-upload { display: none; }
        .profile-pic-preview {
            width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
            cursor: pointer; border: 3px solid var(--primary-blue);
        }

        /* Header & Bottom Nav */
        .app-header {
            background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            position: sticky; top: 0; z-index: 50; padding: 0.75rem 1.5rem;
        }
        .app-header .logo-text { color: var(--text-dark); font-size: 1.75rem; font-weight: bold; }
        .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; background: white;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 40; padding: 0.5rem 0;
            display: flex; justify-content: space-around;
        }
        @media (min-width: 769px) { .bottom-nav { display: none; } }
        .bottom-nav .nav-item.active { color: var(--primary-blue); }

        /* General Button Styles */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.4rem;
            border-radius: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
        }
        .btn-primary-filled { background-color: var(--primary-blue); color: white; }
        .btn-primary-filled:hover { background-color: #166fe5; }
        .btn-outlined {
            background-color: transparent; border: 1px solid #dbdbdb; color: var(--text-dark);
        }
        .btn-outlined:hover { background-color: #f0f0f0; }
        .btn-danger-filled { background-color: #dc3545; color: white; }
        .btn-danger-filled:hover { background-color: #c82333; }


        /* Authentication Container - Responsive Adjustments */
        /* Removed old custom .auth-container media queries */

        /* Filter Buttons for Dashboard */
        .filter-button {
             flex: 1; padding: 0.75rem 1rem; border-radius: 0.5rem; text-align: center;
             font-weight: 600; transition: all 0.2s ease; cursor: pointer; color: #8e8e8e;
        }
        .filter-button.active { color: var(--text-dark); border-bottom: 2px solid var(--text-dark); }
        
        /* Settings Toggles */
        .toggle-switch {
            position: relative; display: inline-block; width: 50px; height: 28px;
        }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: #ccc; transition: .4s; border-radius: 34px;
        }
        .slider:before {
            position: absolute; content: ""; height: 20px; width: 20px;
            left: 4px; bottom: 4px; background-color: white;
            transition: .4s; border-radius: 50%;
        }
        input:checked + .slider { background-color: var(--primary-blue); }
        input:checked + .slider:before { transform: translateX(22px); }

        /* Global Loading Overlay */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8); /* Light transparent background */
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000; /* Ensure it's on top of other modals */
            transition: opacity 0.3s ease;
            opacity: 0;
            pointer-events: none; /* Allows clicks to pass through when hidden */
        }
        .loading-overlay.show {
            opacity: 1;
            pointer-events: all; /* Blocks clicks when visible */
        }
        
        /* Skeleton Loading Styles */
        .skeleton-container {
            position: relative;
            overflow: hidden;
            background-color: #f3f4f6; /* Base color for the container */
        }
        .skeleton-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: shimmer 1.5s infinite;
        }
        .skeleton-circle, .skeleton-line, .skeleton-box {
            background-color: #e5e7eb; /* Color for the actual skeleton shapes */
            border-radius: 0.25rem;
        }
        .skeleton-circle {
            border-radius: 50%;
        }
        /* No need for skeleton-box to be different color as shimmer is on container */

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        /* Spinner for buttons */
        .button-spinner {
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top: 2px solid #fff;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            animation: spin 1s linear infinite;
            margin-right: 8px; /* Space between spinner and text */
        }

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

        /* Reels specific CSS */
        #reelsContainer {
            height: calc(100vh - 64px - 64px); /* Full viewport height minus header and bottom nav heights */
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            -webkit-overflow-scrolling: touch; /* For smoother iOS scrolling */
            width: 100%;
            background-color: black; /* Reels background */
            scroll-behavior: smooth; /* Smooth scrolling for snapping */
        }

        .reel-item {
            width: 100%;
            height: 100%; /* Important for single-item snapping */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            scroll-snap-align: start;
            background-color: black;
        }

        .reel-item video {
            width: 100%;
            height: 100%;
            object-fit: contain; /* Ensure the video fits within the container without cropping */
        }

        .reel-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* Align content to bottom */
            padding: 1rem;
            background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 30%); /* Gradient fade from bottom */
            pointer-events: none; /* Allow clicks to pass through to the video element */
        }
        /* Re-enable pointer events for actual buttons within overlay */
        .reel-overlay > div {
            pointer-events: auto;
        }

        .reel-actions {
            position: absolute;
            right: 1rem;
            bottom: 6rem; /* Adjust based on bottom nav height */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            color: white;
            z-index: 10;
        }

        .reel-action-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 1.8rem;
            cursor: pointer;
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
            pointer-events: auto; /* Ensure buttons are clickable */
        }
        .reel-action-button span {
            font-size: 0.75rem;
            margin-top: 0.25rem;
        }
        .reel-action-button.liked {
            color: var(--primary-blue); /* Highlight liked state */
        }

        .play-pause-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 4rem;
            color: rgba(255, 255, 255, 0.7);
            text-shadow: 0 0 10px rgba(0,0,0,0.8);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 5;
            pointer-events: none; /* icon itself should not block clicks on video */
        }
        .play-pause-icon.show {
            opacity: 1;
        }

        /* New CSS for dashboard reel preview */
        .dashboard-reel-preview {
            width: 100%;
            height: 200px; /* Fixed height for dashboard preview */
            background-color: #333; /* Dark background */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border-radius: 0.75rem; /* Match post-card border-radius */
            overflow: hidden;
            cursor: pointer;
        }
        .dashboard-reel-preview i {
            font-size: 3rem;
            color: rgba(255,255,255,0.7);
        }
        /* Professional Checkbox Style */
        .form-checkbox {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            height: 20px;
            width: 20px;
            min-width: 20px; /* Ensure it doesn't shrink */
            border: 2px solid #D1D5DB; /* light gray border */
            border-radius: 6px; /* slightly rounded corners */
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: all 0.2s ease-in-out;
            margin-right: 0.5rem; /* Space between checkbox and text */
            flex-shrink: 0; /* Prevent checkbox from shrinking */
        }

        .form-checkbox:checked {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
        }

        .form-checkbox:checked::after {
            content: '\2713'; /* Checkmark character */
            font-size: 14px;
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .form-checkbox:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* blue focus ring */
        }
        .form-checkbox:hover {
            border-color: var(--primary-blue); /* Highlight border on hover */
        }
        /* Style for hobby labels to make them look like buttons */
        .hobby-label {
            display: flex;
            align-items: center;
            space-x-2;
            text-sm;
            cursor: pointer;
            select-none;
            px-3;
            py-2;
            border;
            rounded-lg;
            bg-gray-50;
            hover:bg-gray-100;
            transition-colors;
            duration-200;
        }
        .hobby-label.selected {
            background-color: #EBF8FF; /* Light blue background for selected */
            border-color: var(--primary-blue); /* Primary blue border for selected */
            font-weight: 500;
        }