:root {
  --color-bg: #f0f9ff;
  --color-surface: #ffffff;
  --color-ink: #0f172a;
  --color-muted: #64748b;
  --color-primary: #0284c7;
  --color-primary-dark: #075985;
  --color-primary-soft: #e0f2fe;
  --color-border: #bae6fd;
  --color-danger: #b91c1c;
  --color-danger-soft: #fee2e2;
  --color-mark: #f59e0b;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(2, 132, 199, 0.12);
  --font-main: 'Inter', system-ui, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.5;
}

a { color: var(--color-primary-dark); }

code {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---------- home (big center) ---------- */

.hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 4.5rem 1.25rem 3rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 0 0 0.5rem;
  letter-spacing: -0.03em;
}

.tagline {
  color: var(--color-muted);
  font-size: 1.15rem;
  margin: 0 0 3rem;
}

.home-cards {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}

.home-cards .card {
  width: 330px;
  text-align: left;
}

.card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
  color: var(--color-primary-dark);
}

.card p { margin: 0 0 1rem; color: var(--color-muted); }

.primary-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.primary-card:hover { transform: translateY(-3px); }

.primary-card .plus {
  display: inline-block;
  width: 1.55rem;
  color: var(--color-primary);
}

.link-cta { margin-top: auto; font-weight: 700; color: var(--color-primary); }

/* ---------- generic layout ---------- */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

.page.narrow { max-width: 560px; }

.back { margin: 0 0 1rem; }

.form-card h1 { margin-top: 0; color: var(--color-primary-dark); }

label {
  display: block;
  font-weight: 600;
  margin: 1.1rem 0 0.35rem;
}

input[type="text"],
input[type="date"] {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-ink);
}

input:focus {
  outline: 3px solid var(--color-primary-soft);
  border-color: var(--color-primary);
}

.hint { font-size: 0.85rem; color: var(--color-muted); margin: 0.3rem 0 0; }

button, .btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.15rem;
  display: inline-block;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn { background: var(--color-primary); color: #fff; }
.btn:hover { background: var(--color-primary-dark); }

.btn-ghost { background: #fff; color: var(--color-primary-dark); border: 1px solid var(--color-border); }
.btn-ghost:hover { background: var(--color-primary-soft); }

.btn-ghost.small, .linklike { padding: 0.3rem 0.65rem; font-size: 0.8rem; }

.linklike {
  background: none;
  border: none;
  color: var(--color-muted);
  text-decoration: underline;
}

.form-card form { margin-top: 0.5rem; }
.form-card .btn { margin-top: 1.5rem; width: 100%; }

.error {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  margin: 0 0 1rem;
}

ul.error { padding-left: 1.2rem; }

.hidden { display: none !important; }

/* ---------- event page ---------- */

.event-top h1 {
  margin: 0;
  font-size: 2rem;
  color: var(--color-primary-dark);
  letter-spacing: -0.02em;
}

.week-label { margin: 0.15rem 0 0.4rem; color: var(--color-muted); }

.code-row { margin: 0; font-size: 0.95rem; }

.code-row .btn-ghost { margin-left: 0.5rem; }

.gate { margin: 1.25rem 0; }

.gate label { margin-top: 0; }

.gate-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.gate-row input { flex: 1; min-width: 180px; width: auto; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 0.75rem;
}

.toolbar #whoAmI { font-weight: 700; color: var(--color-primary-dark); }

.toolbar #status { color: var(--color-muted); font-size: 0.9rem; margin-left: auto; }

.grid-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.grid-legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

.sw {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #dbeafe;
}

.sw.mine-demo { background: #fff; box-shadow: inset 0 0 0 2px var(--color-mark); }

.grid-scroll { overflow-x: auto; }

.grid-wrap {
  display: grid;
  grid-template-columns: 66px repeat(7, minmax(78px, 1fr));
  grid-template-rows: auto repeat(28, 22px);
  gap: 2px;
  min-width: 640px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.grid-head {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-align: center;
  padding: 0.35rem 0.1rem 0.5rem;
}

.time-label {
  font-size: 0.72rem;
  color: var(--color-muted);
  text-align: right;
  padding-right: 0.55rem;
  align-self: center;
  white-space: nowrap;
}

.time-label.half { opacity: 0.4; }

.cell {
  background: var(--cellbg, #f7fbff);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.07);
  cursor: pointer;
}

.cell.hour-start { box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.16); }

.cell.mine { box-shadow: inset 0 0 0 2px var(--color-mark); background: #fffbeb; }

/* ---------- people strips ---------- */

.people { margin-top: 1.75rem; }

.people h2 { color: var(--color-primary-dark); font-size: 1.2rem; }

.person {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.8rem;
}

.person h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 0.98rem;
}

.person .sub { color: var(--color-muted); font-weight: 400; font-size: 0.82rem; }

.dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: none; }

.pstrip {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 3px;
}

.pdaylabel { font-size: 0.68rem; font-weight: 700; color: var(--color-muted); }

.pcells { display: grid; grid-template-columns: repeat(28, 1fr); gap: 1px; }

.pcells i { display: block; height: 10px; border-radius: 2px; background: #eef6fc; }

.muted { color: var(--color-muted); }

.not-found { text-align: center; margin-top: 3rem; }

.not-found h1 { color: var(--color-primary-dark); }

.not-found .btn { margin-top: 1rem; background: var(--color-primary); color: #fff; }

@media (max-width: 560px) {
  .home-cards .card { width: 100%; }
  .toolbar #status { margin-left: 0; width: 100%; }
}