:root {
     --primary: #e6007e;
     --secondary: #b100c9;
     --accent: #ffcc00;
     --background: #f8f8f8;
     --text-dark: #333;
     --text-light: #888;
     --white: #fff;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     font-family: 'Inter', sans-serif;
     background: var(--background);
     color: var(--text-dark);
     line-height: 1.6;
 }

 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem 2rem;
     background: linear-gradient(to right, var(--secondary), var(--primary));
     color: var(--white);
     position: relative;
     top: 0;
     left: 0;
     right: 0;
     z-index: 10;
 }

 .logo {
     width:150px;
 }

 .nav-links {
     display: flex;
     gap: 1.2rem;
     font-size: 0.8rem;
 }

 .nav-links a {
     color: var(--white);
     text-decoration: none;
     position: relative;
     padding-bottom: 4px;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: var(--accent);
     transform: scaleX(0);
     transform-origin: right;
     transition: transform 0.3s ease;
 }

 .nav-links a:hover::after,
 .nav-links a:focus::after,
 .nav-links a:active::after {
     transform: scaleX(1);
     transform-origin: left;
 }

 .sidebar {
     position: fixed;
     top: 0;
     right: -300px;
     height: 100vh;
     width: 300px;
     background: var(--white);
     box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
     z-index: 999;
     padding: 2rem 1rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     transition: right 0.3s ease;
 }

 .sidebar.open {
     right: 0;
 }

 .sidebar .logo {
     font-size: 2rem;
     text-align: center;
     margin-bottom: 2rem;
 }

 .sidebar .menu-item {
     display: flex;
     align-items: center;
     font-size: 1rem;
     margin: 1rem 0;
     color: var(--text-dark);
     text-decoration: none;
     transition: color 0.3s ease;
     cursor: pointer;
 }

 .sidebar .menu-item:hover {
     color: var(--primary);
 }

 .sidebar .menu-item:hover svg {
     color: var(--primary);
     stroke: var(--primary);
 }

 .sidebar .menu-item svg {
     margin-right: 0.5rem;
     width: 20px;
     height: 20px;
     color: var(--primary);
     background: none;
     fill: none;
     stroke: currentColor;
 }

 footer {
     background: #222;
     color: var(--white);
     padding: 2rem;
     text-align: center;
 }

 @media (max-width: 768px) {
     .hero h1 {
         font-size: 1.8rem;
     }

     .search-bar input {
         font-size: 0.9rem;
     }
 }

 .message-label {
    display: block;
    margin: 0.75rem 0;
    font-weight: 600;
    color: #004085;
    background: #cce5ff;
    padding: 0.75rem 1rem;
    border: 1px solid #b8daff;
    border-radius: 0.5rem;
}