body {

    font-family: system-ui, sans-serif;
    background: #f7f7f7;
    color: #333;

    margin: 0;
    padding: 40px;
}

.container {

    max-width: 700px;
    margin: auto;

    background: white;
    padding: 40px;

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

h1 {

    text-align: center;
    margin-bottom: 40px;
}

.category {

    margin-bottom: 30px;
}

.category h2 {

    border-bottom: 2px solid #ddd;
    padding-bottom: 8px;
}

ul {

    padding-left: 20px;
}

button {

    margin-top: 20px;

    padding: 12px 20px;

    font-size: 16px;

    border: none;
    border-radius: 8px;

    cursor: pointer;

    background: #2b7cff;
    color: white;
}

button:hover {

    background: #175fd1;
}

#random-result {

    margin-top: 30px;

    font-size: 24px;

    text-align: center;

    font-weight: bold;
}


.meal-links{

    border: 1px solid #ddd;

    background: white;

    border-radius: 20px;

    padding: 6px 14px;

    cursor: pointer;

    font-size: 0.9rem;

    transition: background 0.15s, transform 0.15s;

}

.meal-links button{

    font-size:12px;

    padding:2px 8px;

    border-radius:999px;

    border:1px solid #ddd;

    background:#fafafa;

    color:#666;

    cursor:pointer;

}

.meal-links:hover {

    background: #f0f0f0;

    transform: translateY(-1px);

}

.meal-links button:hover{

    background:#eee;

}

.meal-name{

    cursor:pointer;

    font-weight:600;

}

.meal-name:hover{

    color:#2b7cff;

}

#random-button{

    display:block;

    margin:20px auto 40px auto;

    padding:14px 28px;

    font-size:18px;

    font-weight:bold;

    border:none;

    border-radius:999px;

    background:#2b7cff;

    color:white;

    cursor:pointer;

}
#recipe img {

    display: block;

    max-width: 100%;

    max-height: 700px;

    height: auto;

    width: auto;

    margin: 30px auto;

    border-radius: 10px;

    box-shadow: 0 8px 20px rgba(0,0,0,.15);

}
.recipe-photo{

    display:block;

    max-width:100%;

    max-height:700px;

    margin:25px auto;

    border-radius:10px;

}

.latest-message-card {
    display: block;
    margin: 20px 0 30px;
    padding: 16px 18px;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    background: #fafafa;
    color: inherit;
    text-decoration: none;
}

.latest-message-card:hover {
    background: #f3f3f3;
}

.latest-message-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #666;
}

#latest-message {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.latest-author {
    font-weight: 600;
    margin-bottom: 6px;
}

.latest-text {
    color: #444;
}

.home-card {

    display:block;

    margin:20px 0;

    padding:18px;

    border-radius:14px;

    border:1px solid #ddd;

    background:#fafafa;

    text-decoration:none;

    color:inherit;

    cursor:pointer;

    transition:.15s;

}

.home-card:hover{

    background:#f2f2f2;

}

.card-title{

    font-weight:600;

    margin-bottom:10px;

}

.card-footer{

    margin-top:12px;

    font-size:.9rem;

    color:#666;

}

.tonight {

    margin: 20px 0;

    padding: 18px;

    border: 1px solid #ddd;

    border-radius: 14px;

    background: #fafafa;

    text-align: center;

}

.tonight-label {

    font-size: 0.9rem;

    color: #666;

    margin-bottom: 10px;

}

.meal-choice {

    font-size: 1.6rem;

    font-weight: 600;

    margin-bottom: 18px;

    color: #222;

}

.surprise-links {

    display: flex;

    justify-content: center;

    gap: 10px;

}