:root {
  --bg: #0f0f14;
  --bg-elev: #181820;
  --fg: #f3f4f7;
  --fg-dim: #9aa0ac;
  --accent: #4ad8c7;
  --t-365: #4a9eff;
  --t-370: #4ad8c7;
  --t-380: #ffb347;
  --t-390: #ff7a45;
  --t-400: #ff4757;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0) 1rem env(safe-area-inset-bottom, 0);
}

#app {
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.brand {
  position: fixed;
  top: 1rem;
  left: 1rem;
  font-size: 0.9rem;
  color: var(--fg-dim);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.brand .logo {
  width: 1.4rem;
  height: 1.4rem;
  display: inline-block;
  vertical-align: middle;
  color: var(--accent);
}

h1 { font-size: 2rem; font-weight: 600; margin: 0 0 0.5rem; }
.sub { color: var(--fg-dim); margin: 0 0 2rem; }

.state { display: none; }
#app[data-state="waiting"]   .state[data-when="waiting"],
#app[data-state="checkin"]   .state[data-when="checkin"],
#app[data-state="submitted"] .state[data-when="submitted"],
#app[data-state="already"]   .state[data-when="already"],
#app[data-state="enroll"]    .state[data-when="enroll"],
#app[data-state="picker"]    .state[data-when="picker"] { display: block; }

.balloons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.balloons .balloon:last-child { grid-column: 1 / -1; }

.balloon {
  appearance: none;
  border: 0;
  background: var(--bg-elev);
  color: var(--fg);
  border-radius: 24px;
  padding: 1.25rem 1rem;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
  font: inherit;
}
.balloon .value { font-size: 1.5rem; font-weight: 700; }
.balloon .label { font-size: 0.85rem; color: var(--fg-dim); }
.balloon:active { transform: scale(0.97); }

.balloon.t-365 { box-shadow: inset 0 0 0 2px var(--t-365); }
.balloon.t-370 { box-shadow: inset 0 0 0 2px var(--t-370); }
.balloon.t-380 { box-shadow: inset 0 0 0 2px var(--t-380); }
.balloon.t-390 { box-shadow: inset 0 0 0 2px var(--t-390); }
.balloon.t-400 { box-shadow: inset 0 0 0 2px var(--t-400); }

.balloon[aria-checked="true"] {
  transform: scale(1.04);
}
.balloon.t-365[aria-checked="true"] { background: color-mix(in srgb, var(--t-365) 25%, var(--bg-elev)); }
.balloon.t-370[aria-checked="true"] { background: color-mix(in srgb, var(--t-370) 25%, var(--bg-elev)); }
.balloon.t-380[aria-checked="true"] { background: color-mix(in srgb, var(--t-380) 25%, var(--bg-elev)); }
.balloon.t-390[aria-checked="true"] { background: color-mix(in srgb, var(--t-390) 25%, var(--bg-elev)); }
.balloon.t-400[aria-checked="true"] { background: color-mix(in srgb, var(--t-400) 25%, var(--bg-elev)); }

.code-input {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.code-input input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: var(--bg-elev);
  color: var(--fg);
  font: inherit;
}
.code-input input::placeholder { color: var(--fg-dim); }
.primary-btn {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: #0a0a0e;
  border-radius: 14px;
  padding: 0.75rem 1.25rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.primary-btn:active { transform: scale(0.97); }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ios-banner {
  background: var(--bg-elev);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 1rem 0 2rem;
  text-align: left;
  font-size: 0.9rem;
}
.ios-banner strong { display: block; margin-bottom: 0.5rem; }
.ios-banner ol { margin: 0; padding-left: 1.1rem; color: var(--fg-dim); line-height: 1.5; }
.ios-banner em { color: var(--fg); font-style: normal; font-weight: 500; }
.ios-banner .ios-share { font-weight: 600; color: var(--accent); }

.ghost-btn {
  appearance: none;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  font: inherit;
  margin-top: 1.5rem;
  cursor: pointer;
}
.ghost-btn:active { transform: scale(0.97); }
.hint { color: var(--fg-dim); font-size: 0.85rem; margin-top: 1rem; }

.depts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.dept-btn {
  appearance: none;
  border: 0;
  background: var(--bg-elev);
  color: var(--fg);
  border-radius: 14px;
  padding: 1rem 1.5rem;
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.2s, background 0.2s;
}
.dept-btn:hover:not([disabled]) { background: color-mix(in srgb, var(--accent) 15%, var(--bg-elev)); }
.dept-btn:active { transform: scale(0.97); }
.dept-btn[disabled] { opacity: 0.4; cursor: not-allowed; }