:root{
    --bg:#0e1116;
    --card:#12161b;
    --card-2:#161b22;
    --border:#1f2630;
    --text:#e6edf3;
    --text-light:#9aa4b2;
    --accent:#4c8bf5;
    --accent-hover:#3e7bf0;
    --ring:rgba(76,139,245,.30);
    --radius-lg:16px;
    --radius-md:12px;
    --radius-sm:10px;
    --transition:.2s;
}

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

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

.feedback-container{
    max-width:640px;
    margin:64px auto;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:40px 32px;
    box-shadow:0 10px 28px rgba(0,0,0,.45);
    transition:border-color var(--transition),box-shadow var(--transition);
}

.feedback-container h2{
    text-align:center;
    margin-bottom:24px;
    font-size:1.75rem;
    font-weight:700;
    letter-spacing:.2px;
    color:#fff;
}

.rating-label{
    display:block;
    margin-bottom:10px;
    font-weight:700;
    color:var(--text);
    font-size:1rem;
}

.stars{
    display:flex;
    flex-direction:row-reverse;
    justify-content:center;
    gap:8px;
    margin-bottom:22px;
}

.stars input{
    display:none;
}

.stars label{
    font-size:2.2rem;
    cursor:pointer;
    position:relative;
    line-height:1;
    transition:transform .15s ease;
}

.stars label::before{
    content:'★';
    color:#5c6370;
    text-shadow:0 1px 0 rgba(0,0,0,.35);
    transition:color var(--transition),text-shadow var(--transition);
}

.stars label:hover{
    transform:translateY(-1px) scale(1.03);
}

.stars label:hover::before,
.stars label:hover~label::before,
.stars input:checked~label::before{
    color:#ffd36a;
    text-shadow:0 0 16px rgba(255,211,106,.35);
}

textarea{
    width:100%;
    min-height:180px;
    max-height:280px;
    padding:14px 16px;
    font-size:1rem;
    color:var(--text);
    background:var(--card-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    resize:vertical;
    outline:none;
    transition:border-color var(--transition),background var(--transition),box-shadow var(--transition);
}

textarea::placeholder{
    color:var(--text-light);
}

textarea:hover{
    border-color:var(--accent-hover);
}

textarea:focus,
textarea:focus-visible{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--ring);
    background:#181d25;
}

button{
    display:block;
    width:100%;
    margin-top:18px;
    padding:14px 0;
    font-size:1.05rem;
    font-weight:700;
    color:#fff;
    background:var(--accent);
    border:1px solid var(--accent);
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:background var(--transition),border-color var(--transition),box-shadow var(--transition),transform .15s ease;
    box-shadow:0 4px 14px rgba(76,139,245,.18);
}

button:hover{
    background:var(--accent-hover);
    border-color:var(--accent-hover);
    box-shadow:0 0 0 3px var(--ring);
}

button:active{
    transform:translateY(1px);
}

button:disabled{
    opacity:.6;
    cursor:not-allowed;
    box-shadow:none;
}

@media (max-width:560px){
    .feedback-container{
        margin:36px 12px;
        padding:28px 20px;
    }
    .stars{
        gap:6px;
    }
    .stars label{
        font-size:2rem;
    }
    textarea{
        min-height:160px;
    }
}