/* Account-wide dashboard. Touch sizes are owned here, including hidden tabs. */
body.student-dashboard {
  background: #f1f5f9;
  color: #1e293b;
  color-scheme: light;
  --bg-primary: #f1f5f9;
  --bg-secondary: #fff;
  --bg-raised: #f8fafc;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border-light: #cbd5e1;
}
.student-dashboard .container { padding: 20px; }
.student-dashboard .header { background: #fff; gap: 20px; flex-wrap: wrap; }
.student-dashboard #appScreen .header .user-info { gap: 10px; }
.student-dashboard .header .avatar { flex: 0 0 50px; }
.student-dashboard .account-label { font-size: .85rem; color: #475569; }
.student-dashboard button,
.student-dashboard select,
.student-dashboard summary,
.student-dashboard .game-launch-btn { min-height: 44px; }
.student-dashboard button { font-family: inherit; }
.student-dashboard select { max-width: 100%; }
.student-dashboard .tabs { flex-wrap: wrap; gap: 8px; }
.student-dashboard #appScreen > .tabs .tab-btn {
  flex: 0 1 auto;
  padding: 10px 14px;
  font-size: .95rem;
  line-height: 1.3;
  background: #fff;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}
.student-dashboard #appScreen > .tabs .tab-btn.active {
  color: #fff;
  background: #1e40af;
  border-color: #1e40af;
}
.student-dashboard .hub-hero { background: #1e40af; padding: 20px; gap: 16px; }
.student-dashboard .hub-hero-main { flex-basis: 280px; }
.student-dashboard .hub-stat-badge { padding: 10px 16px; min-width: 100px; }
.student-dashboard .form-group select { width: 100%; padding: 10px; border: 1px solid #94a3b8; border-radius: 8px; background: #fff; color: #1e293b; font: inherit; }
.student-dashboard #quizEventStatus { font-size: .9rem; margin-top: 6px; }
.student-dashboard .shop-dialog h3 { margin-top: 16px; }
.student-dashboard .shop-dialog { color: #193d38; }
.student-dashboard :is(button, a, select, summary, input, textarea):focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.student-dashboard .hub-shortcut-card { min-width: 0; text-align: left; font-size: inherit; }
@media (max-width: 600px) {
  .student-dashboard .container { padding: 12px; }
  .student-dashboard .header { align-items: stretch; text-align: left; padding: 16px; gap: 14px; margin-bottom: 12px; }
  .student-dashboard #appScreen .header .user-info { flex-wrap: wrap; }
  .student-dashboard .logout-btn { margin-left: auto; padding: 8px 12px; }
  .student-dashboard .tabs { margin-bottom: 12px; }
  .student-dashboard #appScreen > .tabs .tab-btn { padding: 8px 12px; }
  .student-dashboard .hub-hero { padding: 16px; margin-bottom: 16px; }
  .student-dashboard .hub-hero-main { flex: 1 1 100%; }
  .student-dashboard .section-card { padding: 16px; }
  .student-dashboard .student-challenges { padding: 16px; }
  .student-dashboard .quiz-actions { flex-wrap: wrap; }
  .student-dashboard .shop-dialog { max-width: calc(100vw - 24px); }
}

.student-dashboard #quizEditorFields { border: 0; padding: 0; min-width: 0; }
.student-dashboard .correct-answer { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 60px; min-height: 44px; cursor: pointer; }
.student-dashboard .option-input input[type="text"] { min-width: 0; }

.student-dashboard .options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-dashboard .option-input { min-width: 0; }
.student-dashboard .option-input input[type="text"] { width: 0; }
.student-dashboard input::placeholder,
.student-dashboard textarea::placeholder { color: #64748b; opacity: 1; }
@media (max-width: 600px) {
  .student-dashboard .options-grid { grid-template-columns: minmax(0, 1fr); }
}