@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

body {
font-family: 'Inter', sans-serif;

min-height: 100vh;

padding: 50px 25px;

background:
    radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.3), transparent 28%),
    radial-gradient(circle at 85% 85%, rgba(236, 72, 153, 0.25), transparent 28%),
    linear-gradient(135deg, #0f172a, #1e1b4b, #312e81);

color: white;

}

/* Main container */

.container {
width: 100%;
max-width: 1050px;

margin: auto;

}

/* Heading */

h1 {
text-align: center;

font-size: 38px;
font-weight: 800;

margin-bottom: 12px;

background: linear-gradient(
    90deg,
    #ffffff,
    #c7d2fe,
    #fbcfe8
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

/* Subtitle */

.container::before {

display: block;

text-align: center;

color: #a5b4fc;

font-size: 14px;

margin-bottom: 28px;

}

/* Back button */

.back-btn {

display: inline-flex;

align-items: center;

gap: 8px;

padding: 11px 18px;

margin-bottom: 30px;

border-radius: 12px;

color: #e0e7ff;

text-decoration: none;

background: rgba(255, 255, 255, 0.08);

border: 1px solid rgba(255, 255, 255, 0.15);

font-size: 14px;

font-weight: 600;

transition: 0.3s ease;

}

.back-btn {

background: rgba(255, 255, 255, 0.15);

transform: translateX(-4px);

}

/* Feedback Grid */

#feedbackList {

display: grid;

grid-template-columns:
    repeat(auto-fit, minmax(290px, 1fr));

gap: 22px;

}

/* Feedback Card */

.feedback-card {

position: relative;

padding: 26px;

border-radius: 20px;

background: rgba(255, 255, 255, 0.08);

border: 1px solid rgba(255, 255, 255, 0.15);

backdrop-filter: blur(15px);

box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.2);

transition: 0.35s ease;

animation: cardShow 0.5s ease;

}

@keyframes cardShow {

from {
    opacity: 0;
    transform: translateY(20px);
}

to {
    opacity: 1;
    transform: translateY(0);
}

}

.feedback-card {

transform: translateY(-7px);

background: rgba(255, 255, 255, 0.12);

box-shadow:
    0 22px 45px rgba(0, 0, 0, 0.3);

}

/* Top decoration */

.feedback-card::before {

content: "";

position: absolute;

top: 0;
left: 25px;

width: 45px;
height: 4px;

border-radius: 0 0 10px 10px;

}

/* Student name */

.feedback-card h2 {

font-size: 20px;

margin-bottom: 12px;

color: white;

}

/* Rating */

.rating {

display: inline-block;

padding: 7px 12px;

margin-bottom: 16px;

border-radius: 20px;

background: rgba(251, 191, 36, 0.12);

color: #fcd34d;

font-size: 13px;

font-weight: 700;

}

/* Comment */

.comment {

color: #cbd5e1;

font-size: 14px;

line-height: 1.7;

margin-bottom: 20px;

}

/* Date */

.date {

padding-top: 13px;

border-top: 1px solid rgba(255, 255, 255, 0.1);

color: #94a3b8;

font-size: 11px;

}

/* Empty / Error message */

#feedbackList > p {

grid-column: 1 / -1;

text-align: center;

padding: 40px;

border-radius: 18px;

background: rgba(255, 255, 255, 0.07);

color: #cbd5e1;

}

/* Mobile */

@media (max-width: 600px) {

body {
    padding: 30px 16px;
}

h1 {
    font-size: 28px;
}

#feedbackList {
    grid-template-columns: 1fr;
}

.feedback-card {
    padding: 22px;
}

}