:root {
  --ink: #0b1620;
  --muted: #6f7d88;
  --line: #9fb0bb;
  --school: #b4ae18;
  --accent: #0f8f54;
  --danger: #d71313;
  --paper: #edf5f8;
  --panel: #f7fbfd;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  min-width: 920px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
}

input,
select,
button {
  font: inherit;
}

.exam-clock {
  display: grid;
  grid-template-columns: 2fr 1fr;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.84), transparent 32%),
    linear-gradient(120deg, #e9f4f7 0%, #f9fdfe 47%, #eaf4f6 100%);
}

.display-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-height: 100vh;
  padding: clamp(28px, 4vw, 60px) clamp(40px, 6vw, 104px) clamp(40px, 5vw, 76px);
}

.school-header {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 76px;
}

.logo-picker {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid rgba(15, 74, 53, 0.28);
  border-radius: 50%;
  background: #e1efe6;
  color: #1f6a42;
  cursor: pointer;
}

.logo-picker img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-picker.has-image img {
  display: block;
}

.logo-picker.has-image span {
  display: none;
}

.logo-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

#logoFallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2c7b4c;
  color: #d8ef6f;
  font-size: 24px;
  font-weight: 700;
}

.school-name {
  width: min(760px, 100%);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--school);
  font-size: clamp(26px, 2.7vw, 44px);
  font-weight: 600;
  letter-spacing: 0;
}

.school-name:focus,
.slogan input:focus {
  outline: 2px solid rgba(15, 143, 84, 0.24);
  outline-offset: 4px;
}

.clock-wrap {
  align-self: center;
  justify-self: center;
  width: max-content;
  max-width: 100%;
}

.clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: #06121d;
  font-family: "DIN Alternate", "Arial Narrow", "Microsoft YaHei", sans-serif;
  font-size: clamp(120px, 15vw, 250px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: 0;
  white-space: nowrap;
}

.clock .seconds {
  color: rgba(6, 18, 29, 0.58);
  font-size: 0.48em;
  font-weight: 300;
}

.date-line {
  margin-top: clamp(20px, 2.8vw, 42px);
  color: #142838;
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 500;
  text-align: center;
}

.clock.warning,
.clock.warning .seconds,
.date-line.warning {
  color: var(--danger);
}

.exam-summary {
  min-height: 88px;
  margin-top: 8px;
  color: #243747;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1.55;
}

.summary-subject {
  font-weight: 700;
  text-align: center;
}

.summary-line,
.summary-teachers {
  color: #53606b;
}

.summary-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(42px, 5vw, 92px);
  row-gap: 8px;
  text-align: center;
}

.summary-line span,
.summary-teachers {
  white-space: normal;
}

.summary-teachers {
  margin-top: 4px;
  text-align: center;
}

html:fullscreen .exam-clock {
  grid-template-columns: 1fr;
}

html:-webkit-full-screen .exam-clock {
  grid-template-columns: 1fr;
}

html:fullscreen .control-panel {
  display: none;
}

html:-webkit-full-screen .control-panel {
  display: none;
}

html:fullscreen .display-panel {
  min-height: 100vh;
}

html:-webkit-full-screen .display-panel {
  min-height: 100vh;
}

html:fullscreen .exam-summary {
  width: 100%;
}

html:-webkit-full-screen .exam-summary {
  width: 100%;
}

.slogan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  justify-items: center;
  width: 100%;
  padding-top: 36px;
  text-align: center;
}

.slogan input {
  width: 7em;
  border: 0;
  outline: 0;
  background: transparent;
  color: #162635;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif;
  font-size: clamp(34px, 4vw, 62px);
  letter-spacing: 0;
  text-align: center;
}

.control-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px) clamp(30px, 4vw, 70px);
  background: rgba(247, 251, 253, 0.62);
}

.control-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin: 17px 0;
  color: #1c2d3c;
  font-size: clamp(22px, 1.65vw, 34px);
  font-weight: 700;
}

.control-row label {
  text-align: right;
}

.control-row input,
.control-row select {
  min-width: 0;
  height: 54px;
  border: 0;
  border-bottom: 2px solid var(--line);
  outline: 0;
  background: transparent;
  color: #1a2b39;
  font-weight: 500;
}

.control-row input::placeholder {
  color: #7a8a94;
}

.control-row select {
  cursor: pointer;
}

.custom-subject-row {
  display: none;
}

.custom-subject-row.is-visible {
  display: grid;
}

.time-range,
.pages-input,
.invigilators {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.time-range input {
  width: 126px;
  text-align: center;
}

.time-range span,
.pages-input span {
  color: #263948;
  white-space: nowrap;
}

.pages-input input {
  width: 132px;
  text-align: center;
}

.invigilators {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 8px 166px;
}

.button-row button {
  min-width: 122px;
  height: 54px;
  border: 0;
  border-radius: 8px;
  background: #0d1620;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.button-row button:hover {
  transform: translateY(-1px);
}

.button-row button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

#startButton.ready,
#startButton.running {
  background: var(--accent);
}

#resetButton {
  background: #526170;
}

#fullScreenButton {
  background: #1f4f75;
}

#syncTimeButton {
  background: #37634f;
}

.hint {
  min-height: 28px;
  margin: 0 0 0 166px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.5;
}

.time-sync-status {
  min-height: 24px;
  margin: 0 0 4px 166px;
  color: #4b6b5a;
  font-size: 17px;
  line-height: 1.45;
}

.end-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  padding: 40px;
  background: var(--danger);
  color: #fff;
  text-align: center;
}

.end-screen.is-visible {
  display: grid;
}

.end-message {
  font-size: clamp(54px, 8vw, 140px);
  font-weight: 800;
  line-height: 1.15;
}

.end-title {
  margin-top: 34px;
  font-size: clamp(44px, 6vw, 108px);
  font-weight: 800;
}

.end-subtitle {
  margin-top: 36px;
  font-size: clamp(20px, 2vw, 34px);
  opacity: 0.92;
}

.end-exit-button {
  justify-self: center;
  min-width: 180px;
  height: 62px;
  margin-top: 42px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  background: #fff;
  color: var(--danger);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 800;
  cursor: pointer;
}

.end-exit-button:hover {
  background: #fff3f3;
}

@media (max-width: 1100px) {
  body {
    min-width: 0;
  }

  .exam-clock {
    grid-template-columns: 1fr;
  }

  .display-panel,
  .control-panel {
    min-height: auto;
  }

  .control-panel {
    padding-top: 10px;
  }

  .control-row {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .button-row,
  .hint,
  .time-sync-status {
    margin-left: 148px;
  }
}

@media (max-width: 720px) {
  .display-panel {
    padding: 24px 20px 36px;
  }

  .school-header {
    align-items: flex-start;
    gap: 12px;
  }

  .logo-picker {
    width: 52px;
    height: 52px;
  }

  #logoFallback {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .clock {
    font-size: 84px;
  }

  .date-line {
    font-size: 30px;
  }

  .slogan {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .slogan input {
    font-size: 30px;
  }

  .control-panel {
    padding: 22px 20px 32px;
  }

  .control-row {
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 22px;
  }

  .control-row label {
    text-align: left;
  }

  .time-range {
    flex-wrap: wrap;
  }

  .button-row,
  .hint,
  .time-sync-status {
    margin-left: 0;
  }
}