:root {
            --bg-primary: #f0f2f5; --bg-secondary: #ffffff; --bg-tertiary: #f9fafb;
            --text-primary: #1a202c; --text-secondary: #4a5568; --text-link: #0ea5e9;
            --border-color: #e5e7eb;
            --header-scrolled-bg: rgba(255, 255, 255, 0.85); --header-scrolled-text: #374151;
        }
        html.dark {
            --bg-primary: #111827; --bg-secondary: #1f2937; --bg-tertiary: #374151;
            --text-primary: #f9fafb; --text-secondary: #d1d5db; --text-link: #38bdf8;
            --border-color: #374151;
            --header-scrolled-bg: rgba(31, 41, 55, 0.85); --header-scrolled-text: #d1d5db;
        }
        body { font-family: 'Inter', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); }

        #site-header { transition: transform 0.3s ease-in-out, background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; }
        #site-header.header-hidden { transform: translateY(-100%); }
        #site-header.header-scrolled {
            position: fixed;
            background-color: var(--header-scrolled-bg);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }
        #site-header.header-scrolled .header-logo-text { color: var(--header-scrolled-logo); text-shadow: none; }
        #site-header.header-scrolled .desktop-nav a { color: var(--header-scrolled-text); text-shadow: none; }
        #site-header.header-scrolled .desktop-nav a:hover { color: var(--text-link); }
        #site-header.header-scrolled .theme-toggle-btn { color: var(--text-secondary); }
        #site-header.header-scrolled .theme-toggle-btn:hover { color: var(--text-primary); }
        #site-header.header-scrolled .search-bar-wrapper { background-color: var(--bg-tertiary); border-color: var(--border-color); }
        #site-header.header-scrolled .search-bar-wrapper input { color: var(--text-primary); }
        #site-header.header-scrolled .search-bar-wrapper input::placeholder { color: var(--text-secondary); }
        #site-header.header-scrolled .search-bar-wrapper button { background-color: var(--bg-primary); color: var(--text-secondary); }
        #site-header.header-scrolled .search-bar-wrapper button:hover { background-color: var(--border-color); }
        
        .gallery-thumbnails { height: 5rem;  }
        .gallery-thumbnails .swiper-slide { opacity: 0.6; cursor: pointer; transition: opacity 0.3s ease; border: 2px solid transparent; border-radius: 0.5rem; overflow: hidden; width: 5rem; height: 5rem; }
        .gallery-thumbnails .swiper-slide-thumb-active { opacity: 1; border-color: var(--text-link); }
        .gallery-thumbnails .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

        .tab-button.active { color: var(--text-link); border-color: var(--text-link); }
        
        .tab-content { 
            opacity: 0;
            visibility: hidden;
            max-height: 0;
            overflow: hidden;
            transition: opacity 0.4s ease, max-height 0.4s ease-out, visibility 0.4s;
        }
        .tab-content.active {
            opacity: 1;
            visibility: visible;
            max-height: 1000px; /* Adjust if content is taller */
        }

        .avatar-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
        .pet-card { background-image: url('https://hoathinhgau.com/cdn/images/pet/bg/bg-pet.jpg'); background-size: cover; position: relative; }
        .pet-name-overlay { position: absolute; bottom: 6px; left: 0; right: 0; text-shadow: 0 0 8px rgba(139, 92, 246, 0.9); }
        .pet-level-overlay { position: absolute; top: 4px; right: 6px; text-shadow: 0 0 5px rgba(255, 255, 255, 0.7); }
        .dropdown-menu, #back-to-top { transition: opacity 0.3s, transform 0.3s; }

        .star-rating .fa-star { color: var(--border-color); cursor: pointer; transition: color 0.2s; }
        .star-rating .fa-star.rated,
        .star-rating:hover .fa-star { color: #facc15; /* yellow-400 */ }
        .star-rating:hover .fa-star:hover ~ .fa-star { color: var(--border-color); }
        
        #auth-modal.hidden { display: none; }
        .auth-tab.active { border-color: var(--text-link); color: var(--text-link); }