:root {
            --primary-color: #4A90E2; /* Softer Blue */
            --secondary-color: #50E3C2; /* Teal/Turquoise Accent */
            --accent-color: #F5A623; /* Warm Orange */
            --text-color: #4A4A4A; /* Dark Gray for text */
            --heading-color: #333;
            --light-gray: #f9f9f9; /* Lighter background */
            --medium-gray: #e0e0e0;
            --dark-gray: #888;
            --white: #fff;
            --border-color: #dee2e6;
            --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            --box-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.12);
            --transition: all 0.3s ease-in-out;
            --border-radius: 8px; /* Consistent border radius */
        }

        body {
            font-family: 'Poppins', sans-serif; /* Modern font */
            color: var(--text-color);
            background-color: var(--white); /* Cleaner white background */
            line-height: 1.7;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        h1, h2, h3, h4, h5, h6 {
            color: var(--heading-color);
            font-weight: 600; /* Slightly bolder headings */
        }

        a {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }
        a:hover {
            color: darken(var(--primary-color), 10%);
            text-decoration: underline;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            font-weight: 500;
            padding: 0.6rem 1.5rem;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }
        .btn-primary:hover {
            background-color: darken(var(--primary-color), 10%);
            border-color: darken(var(--primary-color), 10%);
            transform: translateY(-2px);
            box-shadow: var(--box-shadow-hover);
        }
         .btn-outline-primary {
             border-color: var(--primary-color);
             color: var(--primary-color);
             font-weight: 500;
             padding: 0.5rem 1.2rem;
             border-radius: var(--border-radius);
             transition: var(--transition);
         }
         .btn-outline-primary:hover {
             background-color: var(--primary-color);
             color: var(--white);
             transform: translateY(-2px);
             box-shadow: var(--box-shadow);
         }


        /* --- Header --- */
        .site-header {
            padding: 1rem 0;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--white);
        }
        .site-header .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--heading-color);
            text-decoration: none;
        }
        .site-header .logo .emoji {
            font-size: 1.5rem; /* Slightly smaller emoji */
            margin-right: 0.3rem;
        }
        .site-header .nav-link {
            color: var(--text-color);
            font-weight: 500;
            margin-left: 1rem;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
        }
        .site-header .nav-link:hover {
            background-color: var(--light-gray);
            color: var(--primary-color);
            text-decoration: none;
        }

        /* --- Hero Section --- */
        .hero-section {
            background-color: var(--light-gray);
            padding: 4rem 0; /* More padding */
            text-align: center;
        }
        .hero-section h1 {
            font-size: 2.8rem; /* Larger headline */
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .hero-section .tagline {
            font-size: 1.2rem;
            color: var(--dark-gray);
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- Search Area --- */
        .search-area {
            max-width: 700px; /* Slightly wider */
            margin: 0 auto;
        }
        .search-area .input-group {
            border-radius: var(--border-radius); /* Consistent radius */
            box-shadow: var(--box-shadow);
            overflow: hidden; /* Clip button corners */
            border: 1px solid var(--border-color); /* Subtle border */
        }
        .search-area .tagify { /* Style Tagify input */
            border: none !important;
            border-radius: 0 !important; /* Handled by parent */
            padding: 0.75rem 1rem;
            font-size: 1rem;
             flex-grow: 1; /* Allow input to take available space */
        }
         .search-area .tagify.tagify--focus {
            box-shadow: none !important;
         }
         .search-area .tagify__input { /* Style the actual input field inside tagify */
             font-size: 1rem;
             padding: 0;
         }
        .search-area .btn-search {
            background-color: var(--primary-color);
            color: var(--white);
            border: none;
            font-weight: 600;
            padding: 0.75rem 1.75rem;
            border-radius: 0; /* Let parent handle rounding */
            transition: var(--transition);
            font-size: 1rem;
        }
        .search-area .btn-search:hover {
            background-color: darken(var(--primary-color), 10%);
        }

        /* Tagify Dropdown Styling */
        .tags-look .tagify__dropdown__item{
            display: inline-block;
            vertical-align: middle;
            border-radius: 4px; /* Slightly rounded */
            padding: .4em .7em; /* More padding */
            border: 1px solid var(--medium-gray);
            background: var(--white);
            margin: .3em;
            font-size: .9em;
            color: var(--text-color);
            transition: 0s;
          }
        .tags-look .tagify__dropdown__item--active{
            border-color: var(--primary-color); /* Use primary color for active */
            background-color: lighten(var(--primary-color), 45%);
          }
        .tags-look .tagify__dropdown__item:hover{
            background: var(--light-gray);
            border-color: var(--dark-gray);
          }
        .tags-look .tagify__dropdown__item--hidden { /* Keep original hidden style */
              max-width: 0;
              max-height: initial;
              padding: .3em 0;
              margin: .2em 0;
              white-space: nowrap;
              text-indent: -20px;
              border: 0;
          }

        /* Tagify Tag Styling */
          .tagify__tag {
             background-color: var(--primary-color);
             color: var(--white);
             padding: 0.3em 0.8em;
             border-radius: var(--border-radius);
             margin: 4px;
          }
          .tagify__tag > div::before {
              box-shadow: none; /* Remove default inner shadow */
          }
          .tagify__tag__removeBtn { /* Style remove button */
              color: var(--white);
              opacity: 0.7;
          }
          .tagify__tag__removeBtn:hover {
              color: var(--white);
              opacity: 1;
              background-color: darken(var(--primary-color), 15%);
          }

        /* Books/Movies Toggle */
        .type-toggle {
            margin-top: 1.5rem;
        }
        .type-toggle .nav-pills .nav-link {
            background-color: var(--white);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            margin: 0 0.3rem;
            border-radius: var(--border-radius);
            font-weight: 500;
            padding: 0.5rem 1.5rem;
        }
         .type-toggle .nav-pills .nav-link.active {
             background-color: var(--primary-color);
             color: var(--white);
             border-color: var(--primary-color);
             box-shadow: var(--box-shadow);
         }
          .type-toggle .nav-pills .nav-link:not(.active):hover {
              background-color: var(--light-gray);
          }


        /* --- Trending Section --- */
        .trending-section {
            padding: 4rem 0; /* Consistent padding */
        }
        .trending-section h2 {
            text-align: center;
            margin-bottom: 2.5rem; /* More space below heading */
            font-size: 2rem;
        }
        .list-card {
            border: none; /* Remove default border */
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            transition: var(--transition);
            background-color: var(--white);
            display: flex; /* Use flexbox for layout */
            flex-direction: column;
            height: 100%; /* Ensure cards in a row have same height */
        }
        .list-card:hover {
            box-shadow: var(--box-shadow-hover);
            transform: translateY(-5px); /* More pronounced lift */
        }
        .list-card .card-img-placeholder { /* Placeholder for image */
            height: 150px; /* Adjust height as needed */
            background-color: var(--light-gray);
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--medium-gray);
             /* Add a subtle pattern or icon */
             background-image: linear-gradient(45deg, #e9ecef 25%, transparent 25%), linear-gradient(-45deg, #e9ecef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9ecef 75%), linear-gradient(-45deg, transparent 75%, #e9ecef 75%);
             background-size: 20px 20px;
             background-position: center;
        }
         .list-card .card-img-placeholder i { /* Style for an optional icon */
             font-size: 3rem;
         }
        .list-card .card-body {
            padding: 1.5rem;
            text-align: center;
             flex-grow: 1; /* Allow body to grow */
             display: flex; /* Flex column for content alignment */
             flex-direction: column;
        }
        .list-card .card-title {
            font-size: 1.1rem; /* Slightly larger title */
            font-weight: 600;
            color: var(--heading-color);
            margin-bottom: 1rem;
             min-height: 3.3em; /* ~2 lines of text */
             flex-grow: 1; /* Push button to bottom */
        }
        .list-card .btn {
            margin-top: auto; /* Aligns button to bottom */
            width: fit-content; /* Button width fits content */
            align-self: center; /* Center button horizontally */
        }

        /* --- Popular Tags Section --- */
        .popular-tags-section {
            padding: 2rem 0 4rem; /* Padding adjusted */
            background-color: var(--light-gray);
        }
        .popular-tags-section h3 {
            text-align: center;
            margin-bottom: 2rem;
            font-size: 1.6rem;
        }
        .tag-pills {
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }
        .tag-pill {
            display: inline-block;
            background-color: var(--white);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-radius: 20px; /* Pill shape */
            padding: 0.5rem 1.2rem;
            margin: 0.4rem;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
            text-decoration: none;
        }
        .tag-pill:hover {
            background-color: var(--primary-color);
            color: var(--white);
            border-color: var(--primary-color);
            text-decoration: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transform: translateY(-1px);
        }
        .tag-pill strong { /* Style the emphasized tag differently if needed */
            font-weight: 700;
            /* Example: color: var(--accent-color); */
        }

        /* --- Footer --- */
        .site-footer {
            background-color: #333; /* Darker footer */
            color: var(--light-gray);
            padding: 2rem 0;
            margin-top: auto; /* Pushes footer to bottom */
            font-size: 0.9rem;
        }
        .site-footer .footer-content {
             display: flex;
             flex-direction: column;
             align-items: center;
             text-align: center;
        }
        .site-footer .footer-links a {
            color: var(--medium-gray);
            text-decoration: none;
            margin: 0 0.75rem;
            display: inline-block; /* Ensure spacing works */
            padding: 0.2rem 0;
        }
        .site-footer .footer-links a:hover {
            color: var(--white);
            text-decoration: underline;
        }
        .site-footer .copyright {
            margin-top: 1rem;
            color: var(--dark-gray);
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .hero-section h1 {
                font-size: 2.2rem;
            }
            .hero-section .tagline {
                font-size: 1rem;
            }
            .site-header .navbar-nav {
                margin-top: 0.5rem; /* Space below logo if nav wraps */
            }
            .trending-section h2 {
                font-size: 1.8rem;
            }
             .popular-tags-section h3 {
                 font-size: 1.4rem;
             }
             .search-area .input-group { /* Stack button below input on small screens */
                 flex-direction: column;
                 border-radius: var(--border-radius); /* Apply radius here now */
             }
             .search-area .tagify {
                 border-bottom: 1px solid var(--border-color); /* Add separator */
                 border-radius: var(--border-radius) var(--border-radius) 0 0; /* Adjust radius */
             }
             .search-area .btn-search {
                  width: 100%;
                  border-radius: 0 0 var(--border-radius) var(--border-radius); /* Adjust radius */
                  margin-top: -1px; /* Overlap border slightly */
             }
             .list-card .card-title {
                  min-height: auto; /* Allow height to adjust */
                  margin-bottom: 1rem;
             }
        }
         @media (max-width: 576px) {
             .hero-section {
                 padding: 3rem 0;
             }
             .type-toggle .nav-pills {
                 flex-wrap: nowrap; /* Prevent wrapping if possible */
                 overflow-x: auto; /* Allow horizontal scroll if needed */
                 padding-bottom: 0.5rem; /* Space for scrollbar */
                 justify-content: center;
             }
             .type-toggle .nav-pills .nav-link {
                  white-space: nowrap; /* Prevent text wrap */
             }
         }