body {
    margin: 5%; 
    text-align: center;
    background: #0f0f0f; /* Deep professional black */
    color: #efefef; 
    font-family: 'Segoe UI', Roboto, sans-serif;
}

h1 { font-weight: 300; letter-spacing: 1px; margin-bottom: 20px; }

.rate {
    display: inline-block;
    border: 0;
    position: relative;
}

.rate > input { display: none; }

/* The base star shape (empty) */
.rate > label {
    float: right;
    cursor: pointer;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2.5rem;
    color: #444; /* Unselected star color */
    margin: 0;
    padding: 0 2px;
    transition: color 0.2s ease;
}

.rate > label:before { content: "\f005"; } /* Full star icon */

/* Half star logic */
.rate > label.half { position: relative; width: 0.5em; overflow: hidden; margin-right: -0.5em; }
.rate > label.half:before { content: "\f089"; position: absolute; } 

/* Hover/Checked Colors */
.rate > input:checked ~ label,
.rate > label:hover,
.rate > label:hover ~ label { color: #FFD700 !important; } /* Gold color */

/* Meta Info Styling */
.rating-meta { margin-top: 10px; color: #888; font-size: 0.9rem; }
.value { font-weight: bold; color: #FFD700; font-size: 1.2rem; }