/* ========== GLOBAL RESET & BASE STYLES ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #dfe5ee 100%);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ========== FORM ELEMENTS ========== */
input[type="number"],
input[type="text"],
input[type="password"],
input[type="url"] {
  font-family: inherit;
  border-radius: 25px;
  padding: 10px 20px;
  border: 2px solid #ddd;
  margin: 8px 0;
  width: 150px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

input[type="number"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="url"]:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* ========== BUTTONS ========== */
button {
  font-family: inherit;
  border-radius: 30px;
  padding: 10px 25px;
  background: linear-gradient(135deg, #667eea 0%, #dfe5ee 100%);
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
  margin: 10px 5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

button:active {
  transform: scale(0.98);
}

/* ========== FEEDBACK & UTILITIES ========== */
.feedback {
  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
  border-radius: 25px;
  padding: 12px 20px;
  margin-top: 12px;
  font-weight: bold;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.back-home {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  border: none;
  padding: 12px 30px;
  border-radius: 40px;
  font-weight: bold;
  margin: 25px 30px;
  display: inline-block;
  cursor: pointer;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: transform 0.2s;
  text-decoration: none;
  color: white;
}

.back-home:hover {
  transform: scale(1.05);
  text-decoration: none;
  color: white;
}

/* ========== TABLES ========== */
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 24px;
  overflow: hidden;
  margin: 15px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0cf9c;
}

th {
  background: linear-gradient(135deg, #667eea 0%, #dfe5ee 100%);
  color: white;
  font-weight: bold;
}

tr:hover {
  background: #f8f9fa;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 800px) {
  .classroom { grid-template-columns: repeat(2,1fr); gap: 15px; padding: 20px; }
  .teacher-desk { grid-column: span 2; }
  .whiteboard { grid-column: span 2; }
}

@media (max-width: 768px) {
  /* Do NOT force a fixed height here. Overlays are positioned as percentages of
     this frame, so changing its shape on small screens slid every click spot off
     its object. Keeping the true 16:9 ratio is what keeps them lined up. */
  .slide-container iframe { aspect-ratio: 960/540; height: auto; }
  input[type="number"], input[type="text"] { width: 100%; }
}