body{
    font-family: Arial, sans-serif;
    background: #f0f2f5;
    margin:0;
    padding:0;
}
header{
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding:10px 20px;
    background:#4b79a1;
    color:white;
}
header .logo h1{
    margin:0;
}
#switchBtn{
    padding:8px 16px;
    border:none;
    border-radius:20px;
    cursor:pointer;
}
.search-section{
    display:flex;
    justify-content:center;
    margin:20px;
}
#searchInput{
    padding:8px;
    width:50%;
    border-radius:5px;
    border:1px solid #ccc;
}
#searchBtn{
    padding:8px 12px;
    margin-left:10px;
    cursor:pointer;
}
.icons-section{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin:20px;
}
.icon-card{
    background:white;
    padding:15px 25px;
    border-radius:10px;
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
    cursor:pointer;
    text-align:center;
    min-width:100px;
}
.unlock-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:100px;
}
.unlock-container input{
    padding:10px;
    margin:10px 0;
}
.unlock-container button{
    padding:10px 20px;
    cursor:pointer;
}
#toast{
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #4caf50;
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    opacity: 0;
    z-index: 9999;
}
.search-section input:focus {
    outline:none;
    box-shadow: 0 0 8px #4caf50;
}