:root {
  --ink: #25262d;
  --muted: #777985;
  --line: #e8e6e3;
  --paper: #fffdfa;
  --lavender: #ddd7f8;
  --purple: #6e5acb;
  --purple-dark: #504095;
  --coral: #ff7b66;
  --shadow: 0 18px 50px rgba(39, 32, 70, 0.08);
}

* { box-sizing: border-box; }
#appShell[hidden] { display: none; }
body {
  margin: 0;
  color: var(--ink);
  background: #f6f7fb;
  font-family: "DM Sans", sans-serif;
}
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.topbar-actions { align-items: center; display: flex; gap: 18px; }
.brand { color: var(--ink); display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; text-decoration: none; letter-spacing: -0.03em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: white; background: var(--purple); border-radius: 10px 10px 10px 3px; font-family: Georgia, serif; font-size: 20px; }
.privacy-note { color: #8d8d98; display: flex; align-items: center; gap: 7px; font-size: 12px; }
.privacy-note svg, .search-box svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.system-options { position: relative; }
.system-options summary {
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  list-style: none;
  padding: 9px 12px;
}
.system-options summary::-webkit-details-marker,
.system-options summary::marker { display: none; }
.system-options summary::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  display: inline-block;
  height: 7px;
  margin-top: -2px;
  transform: rotate(45deg);
  width: 7px;
}
.system-options[open] summary {
  border-color: var(--purple);
  color: var(--purple-dark);
}
.system-options[open] summary::after {
  margin-top: 3px;
  transform: rotate(225deg);
}
.system-menu { background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px; position: absolute; right: 0; top: calc(100% + 8px); width: 260px; z-index: 2; }
.system-menu .secondary-button { width: 100%; }
.system-menu .secondary-button + .secondary-button { margin-top: 8px; }
.system-menu-note { color: var(--muted); display: block; font-size: 11px; line-height: 1.4; margin: 10px 2px 2px; }
.hero { background: var(--lavender); border-radius: 26px; min-height: 250px; padding: 44px 54px; position: relative; overflow: hidden; display: flex; justify-content: space-between; }
.eyebrow { color: var(--purple-dark); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; margin: 0 0 15px; text-transform: uppercase; }
h1 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(40px, 5vw, 61px); letter-spacing: -0.055em; line-height: 0.98; margin: 0; }
h1 em { color: var(--purple); font-style: normal; }
.hero-copy { color: #6d668d; font-size: 15px; margin: 22px 0 0; }
.hero-decoration { width: 280px; position: relative; }
.sun { background: #bcb0ee; border-radius: 50%; display: block; height: 170px; position: absolute; right: 30px; top: 0; width: 170px; }
.scribble { color: var(--purple); font-family: Georgia, serif; position: absolute; }
.scribble-one { font-size: 50px; right: 1px; top: 70px; transform: rotate(12deg); }
.scribble-two { bottom: 8px; color: #9888df; font-size: 80px; left: 26px; transform: rotate(-18deg); }
.collection-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 8px; margin-top: 26px; }
.collection-tab { align-items: center; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); display: inline-flex; font-size: 14px; font-weight: 700; gap: 9px; margin-bottom: -1px; padding: 12px 15px; }
.collection-tab[aria-selected="true"] { border-bottom-color: var(--purple); color: var(--purple-dark); }
.collection-tab:focus-visible { border-radius: 5px 5px 0 0; outline: 2px solid var(--purple); outline-offset: -2px; }
.collection-tab .count-pill { height: 22px; min-width: 22px; }
.toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 38px 0 23px; }
.reminders-section { padding: 0 0 45px; }
.reminders-heading .section-label { margin: 0; }
.reminders-heading .primary-button { white-space: nowrap; }
.reminders-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); padding-top: 20px; }
.vacancies-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); padding: 20px 0 45px; }
.vacancy-card { display: flex; flex-direction: column; gap: 10px; }
.vacancy-card-heading { align-items: flex-start; display: flex; flex-direction: column; gap: 8px; }
.vacancy-card h3 { font-size: 16px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.vacancy-organization, .vacancy-explanation { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.vacancy-card-footer { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 13px; }
.vacancy-link { color: var(--purple-dark); font-size: 12px; font-weight: 700; text-decoration: none; }
.vacancy-link:hover { text-decoration: underline; }
.vacancy-link:focus-visible { border-radius: 3px; outline: 2px solid var(--purple); outline-offset: 3px; }
.vacancy-history-section { border-top: 1px solid var(--line); }
.vacancy-runs { display: grid; gap: 12px; padding-top: 18px; }
.vacancy-run { display: flex; flex-direction: column; gap: 12px; }
.vacancy-run-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.vacancy-run h3 { font-size: 14px; margin: 0; }
.vacancy-run-status { background: #ebe8fb; border-radius: 20px; color: var(--purple-dark); font-size: 11px; font-weight: 700; padding: 4px 9px; text-transform: capitalize; }
.vacancy-run-status-failed { background: #fce8e6; color: #a12622; }
.vacancy-run-status-running { background: #fff4d6; color: #7a5700; }
.vacancy-run-logs { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.vacancy-run-logs li { display: grid; font-size: 12px; gap: 10px; grid-template-columns: minmax(130px, auto) 1fr; line-height: 1.45; overflow-wrap: anywhere; }
.vacancy-run-logs time { color: var(--muted); }
.vacancy-run-log-error span { color: #a12622; }
.reminder-card { min-height: 104px; }
.reminder-card-content { display: flex; flex-direction: column; gap: 7px; padding-right: 100px; }
.reminder-card h3 { font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.reminder-date { color: var(--muted); font-size: 12px; }
.annual-tag { background: #ebe8fb; border-radius: 20px; color: var(--purple-dark); font-size: 10px; font-weight: 700; padding: 4px 8px; width: fit-content; }
.reminders-empty { color: var(--muted); font-size: 13px; margin: 20px 0 0; }
.people-summary, .toolbar-actions { align-items: center; display: flex; gap: 10px; }
.section-label { font-family: "Playfair Display", Georgia, serif; font-size: 28px; font-weight: 700; letter-spacing: -0.04em; }
.count-pill { align-items: center; background: #e6e2fb; border-radius: 50px; color: var(--purple-dark); display: inline-flex; font-size: 12px; font-weight: 700; height: 25px; justify-content: center; min-width: 25px; padding: 0 8px; }
.search-box { align-items: center; background: white; border: 1px solid var(--line); border-radius: 10px; color: #9a9aa5; display: flex; gap: 8px; padding: 0 12px; width: 200px; }
.search-box input { border: 0; color: var(--ink); outline: 0; padding: 10px 0; width: 100%; }
.search-box:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px #e9e5ff; }
.primary-button, .secondary-button { border: 0; border-radius: 9px; font-size: 13px; font-weight: 700; transition: transform .15s, background .15s; }
.primary-button { background: var(--purple); color: white; padding: 11px 16px; }
.primary-button:hover { background: var(--purple-dark); transform: translateY(-1px); }
.primary-button span { font-size: 18px; font-weight: 400; line-height: 0; vertical-align: -1px; }
.people-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); padding: 28px 0 60px; }
.person-card { background: var(--paper); border: 1px solid #eeece8; border-radius: 16px; box-shadow: 0 5px 18px rgba(50, 42, 73, .03); padding: 20px; position: relative; }
.card-top { align-items: center; display: flex; gap: 13px; }
.avatar { align-items: center; border-radius: 13px; color: var(--purple-dark); display: flex; flex: 0 0 47px; font-family: "Playfair Display", serif; font-size: 20px; height: 47px; justify-content: center; }
.avatar-0 { background: #fbded4; }.avatar-1 { background: #dcd5fa; }.avatar-2 { background: #cdebe1; }.avatar-3 { background: #f8e5b7; }.avatar-4 { background: #d6e8f8; }
.person-card h3 { font-size: 16px; letter-spacing: -0.02em; margin: 0 0 4px; }
.person-card .relation { color: var(--muted); font-size: 12px; }
.card-date { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; margin-top: 19px; padding-top: 14px; }
.card-date strong { color: var(--ink); font-size: 13px; font-weight: 600; }
.card-actions { display: flex; gap: 5px; opacity: 0; position: absolute; right: 13px; top: 13px; transition: opacity .15s; }
.person-card:hover .card-actions, .person-card:focus-within .card-actions { opacity: 1; }
.small-button { background: white; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 11px; padding: 5px 8px; }
.small-button:hover { border-color: var(--purple); color: var(--purple); }
.small-button.delete:hover { border-color: #efa39a; color: #d15747; }
.empty-state { padding: 65px 20px 90px; text-align: center; }
.empty-icon { align-items: center; background: #ebe8fb; border-radius: 50%; color: var(--purple); display: flex; font-size: 25px; height: 58px; justify-content: center; margin: 0 auto 17px; width: 58px; }
.empty-state h2 { font-family: "Playfair Display", serif; font-size: 26px; margin: 0 0 8px; }
.empty-state p { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.secondary-button { background: #ebe8fb; color: var(--purple-dark); padding: 11px 16px; }
.secondary-button:hover { background: #ded8fa; }
footer { border-top: 1px solid var(--line); color: #a0a0aa; display: flex; font-size: 11px; justify-content: space-between; padding: 18px 0 25px; }
.status-banner {
  background: #eaf4eb;
  border: 1px solid #b7d8ba;
  border-radius: 10px;
  color: #2d6a3f;
  font-size: 13px;
  font-weight: 600;
  margin: 18px 0 22px;
  padding: 11px 14px;
}
.status-banner.is-error {
  background: #fbeae8;
  border-color: #e7b8af;
  color: #b64034;
}
.person-dialog, .confirm-dialog { border: 0; border-radius: 18px; box-shadow: 0 20px 80px rgba(38, 29, 74, .2); padding: 0; width: min(440px, calc(100% - 32px)); }
.person-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(35, 29, 58, .32); backdrop-filter: blur(3px); }
.person-dialog form, .confirm-dialog form { padding: 30px; }
.dialog-header { align-items: flex-start; display: flex; justify-content: space-between; }
.dialog-header .eyebrow { margin-bottom: 8px; }
.dialog-header h2 { font-family: "Playfair Display", serif; font-size: 28px; letter-spacing: -.04em; margin: 0; }
.dialog-copy { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 10px 0 25px; }
.icon-button { background: transparent; border: 0; color: #96959e; font-size: 26px; line-height: 1; padding: 0; }
.icon-button:hover { color: var(--ink); }
.field-label { display: block; font-size: 12px; font-weight: 700; margin: 16px 0 7px; }
.annual-checkbox { align-items: center; color: var(--ink); display: flex; font-size: 13px; gap: 9px; margin-top: 17px; }
.annual-checkbox input { accent-color: var(--purple); height: 16px; width: 16px; }
.field-label span { color: var(--coral); }
.text-input { border: 1px solid var(--line); border-radius: 8px; display: block; outline: 0; padding: 11px 12px; width: 100%; }
.text-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #e9e5ff; }
.form-error { color: #c24c3f; font-size: 12px; margin: 9px 0 0; }
.dialog-actions { align-items: center; display: flex; justify-content: flex-end; gap: 16px; margin-top: 28px; }
.text-button { background: transparent; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.text-button:hover { color: var(--ink); }
.danger-button { background: #d55f52; }
.danger-button:hover { background: #bf4d40; }
.login-dialog h2 { font-family: "Playfair Display", serif; font-size: 28px; letter-spacing: -.04em; margin: 0; }
.login-dialog .dialog-copy { margin-bottom: 18px; }
.login-dialog .dialog-actions { margin-top: 20px; }
.login-dialog .primary-button { width: 100%; }
.sign-out-button { font-size: 12px; }
@media (max-width: 760px) {
  .app-shell { width: min(100% - 28px, 560px); }
  .topbar { height: 70px; }.privacy-note { display: none; }
  .hero { min-height: 235px; padding: 32px 28px; }.hero-decoration { opacity: .65; position: absolute; right: 0; top: 24px; width: 210px; }
  .collection-tabs { margin-top: 22px; }
  .collection-tab { flex: 1; justify-content: center; padding: 12px 8px; }
  .toolbar { align-items: stretch; flex-direction: column; gap: 18px; }.toolbar-actions { flex-wrap: wrap; }.search-box { flex: 1; width: auto; }
  .people-grid, .reminders-grid, .vacancies-grid { grid-template-columns: 1fr; }.card-actions { opacity: 1; }
  .reminder-card-content { padding-right: 100px; }
}