:root {
  --v153-timer: #ffff00;
  --v153-female-fill: #ffc0cb;
  --v153-female-border: #ff1493;
  --v153-male-fill: #add8e6;
  --v153-male-border: #1e90ff;
  font-size: 18px;
}

html, body, button, input, select, textarea, table {
  font-family: "Noto Sans", system-ui, sans-serif;
  font-weight: 700 !important;
}

body { font-size: 1rem; line-height: 1.45; }
h1, h2, h3, h4, strong, b, label, th { font-weight: 900 !important; }
button, input, select, textarea { font-size: 0.95rem !important; min-height: 42px; }
small, .muted, .eyebrow, .class-summary, .drag-hint { font-size: 0.78rem !important; }
.topbar { min-height: 72px; }
.active-label { font-size: 1rem !important; font-weight: 900 !important; }
.class-header h1, .class-compact-header h1, .section-title h1 { font-size: clamp(1.65rem, 3vw, 2.4rem) !important; }
.class-header p, .panel p, .v3-context-help { font-size: 0.9rem !important; }
.class-controlbar button, .class-quick button, .bottomnav button { font-size: 0.82rem !important; }
.face-caption strong, .quiz-name strong, .learning-student-copy h2 { font-size: 0.9rem !important; }
.face-caption small, .quiz-name small, .learning-student-copy p, .easy-pron { font-size: 0.72rem !important; }
.table td, .table th, .rota-table td, .rota-table th { font-size: 0.84rem !important; }
.v3-menu-copy b { font-size: 0.88rem !important; }
.v3-menu-copy small, .v3-option-card small { font-size: 0.72rem !important; }

#v153PageMeta {
  display: grid;
  gap: 1px;
  min-width: 190px;
  padding: 5px 10px;
  border-left: 3px solid var(--v3-class-accent, #20d6ae);
  color: #f7fbff;
}
#v153PageMeta strong { font-size: 0.86rem; line-height: 1.1; }
#v153PageMeta small { color: #cddbe8; font-size: 0.69rem !important; }

.rota-countdown,
.class-end-countdown strong,
.v3-rota-overlay strong,
#v3RotaOverlay strong,
.sprint-hud strong {
  color: var(--v153-timer) !important;
  text-shadow: 0 0 8px #ffff0088, 0 1px 2px #000 !important;
  font-weight: 900 !important;
}
.class-end-countdown {
  border: 3px solid var(--v153-timer) !important;
  background: #171700 !important;
}

.sex-f,
.sex-f.face-card,
.sex-f.student-card,
.sex-f.roster-student,
.sex-f.comment-record {
  border-color: var(--v153-female-border) !important;
  box-shadow: inset 0 0 0 2px #ff149355, 0 0 0 1px var(--v153-female-border) !important;
  background-image: linear-gradient(#ffc0cb22, #ffc0cb22) !important;
}
.sex-f .face-photo, .sex-f .student-photo, .sex-f .learning-face,
.sex-f .quiz-photo, .sex-f .popout-photo {
  border: 4px solid var(--v153-female-border) !important;
}
.sex-m,
.sex-m.face-card,
.sex-m.student-card,
.sex-m.roster-student,
.sex-m.comment-record {
  border-color: var(--v153-male-border) !important;
  box-shadow: inset 0 0 0 2px #1e90ff55, 0 0 0 1px var(--v153-male-border) !important;
  background-image: linear-gradient(#add8e622, #add8e622) !important;
}
.sex-m .face-photo, .sex-m .student-photo, .sex-m .learning-face,
.sex-m .quiz-photo, .sex-m .popout-photo {
  border: 4px solid var(--v153-male-border) !important;
}

.face-card.is-absent, .student-card.is-absent, .roster-student.is-absent {
  filter: grayscale(0.72);
  opacity: 0.58;
  outline: 3px dashed #fff !important;
}
.face-absent, .student-absent-badge {
  position: absolute;
  inset: auto 5px 5px auto;
  z-index: 5;
  padding: 3px 6px;
  border-radius: 5px;
  background: #111;
  color: #fff;
  border: 2px solid #fff;
  font-size: 0.65rem;
  font-weight: 900;
}
.tile-absent { background: #5c2230 !important; color: #fff !important; }
.tile-absent.present { background: #17613b !important; }

.v153-url-import { margin-left: 6px; }
select { contain: layout style; text-rendering: optimizeSpeed; }

@media (max-width: 760px) {
  :root { font-size: 16px; }
  .topbar { min-height: 62px; }
  #v153PageMeta { order: 4; width: 100%; border-left: 0; border-top: 2px solid var(--v3-class-accent, #20d6ae); }
  button, input, select, textarea { min-height: 40px; }
}