.main > h1, .main > h2 { text-align: center; }

.grades-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px auto 40px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.grades-form input {
  padding: 12px;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 200px;
}
.grades-form button {
  padding: 12px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Fredoka One', sans-serif;
  transition: all 0.2s ease;
}
.grades-form button:hover { transform: translateY(-2px); }
#addBtn { background-color: #00ff68; color: black; }
#resetBtn { background-color: #ff7c7c; color: white; }
#restoreDefaultsBtn { background-color: #4ecbff; color: black; }

.grades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
  margin-top: 20px;
}
.grade-card {
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  color: black;
  transition: all 0.2s ease;
}
.grade-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.grade-subject { font-weight: bold; font-size: 1.4rem; }
.grade-value { font-size: 1.1rem; margin-top: 5px; }

.grade-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto; 
}
.grade-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Fredoka One', sans-serif;
  font-size: 0.9rem;
}
.edit-subject-btn { background-color: #4ecbff; }
.edit-grade-btn { background-color: #ffd000; }
.delete-btn { background-color: #333; color: white; }

.warning-text, .slight-text { font-size: 0.9rem; margin-top: 8px; font-weight: bold; }
.warning-text { color: #d90429; }
.slight-text { color: #e85d04; }

body.dark .grades-form { background-color: #2a2a2a; }