:root {
  --bg: #f5f7fb;
  --surface: rgba(255,255,255,.92);
  --surface-strong: #ffffff;
  --text: #1e2433;
  --muted: #727b8f;
  --border: #e7eaf1;
  --primary: #6658d3;
  --primary-dark: #4e43b8;
  --primary-soft: #efedff;
  --green: #38a675;
  --green-soft: #eaf8f1;
  --blue: #3f85d7;
  --blue-soft: #eaf3ff;
  --orange: #e99a45;
  --orange-soft: #fff4e8;
  --danger: #d65c67;
  --danger-soft: #fff0f2;
  --shadow: 0 20px 50px rgba(48, 54, 77, .08);
  --shadow-soft: 0 10px 30px rgba(48, 54, 77, .06);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  background:
    radial-gradient(circle at top right, rgba(102,88,211,.08), transparent 28%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 28px 22px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(24px);
  border-right: 1px solid rgba(224,227,236,.85); display: flex; flex-direction: column; z-index: 40;
}
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 34px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: white; background: linear-gradient(145deg, #786be0, #5548c3); box-shadow: 0 12px 25px rgba(102,88,211,.25); }
.brand-mark svg { width: 25px; height: 25px; stroke: none; }
.brand strong { display: block; font-family: Manrope, sans-serif; font-size: 16px; }
.brand-eyebrow { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 2px; }
.nav { display: grid; gap: 7px; }
.nav-item { border: 0; background: transparent; color: #687086; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; text-align: left; font-weight: 600; transition: .22s ease; }
.nav-item:hover { background: #f5f4ff; color: var(--primary); transform: translateX(2px); }
.nav-item.active { color: var(--primary); background: var(--primary-soft); }
.nav-item svg { width: 19px; height: 19px; stroke: none; fill: currentColor; }
.event-card { margin-top: auto; padding: 18px; border: 1px solid #e6e2ff; border-radius: 19px; background: linear-gradient(155deg, #faf9ff, #f1efff); }
.event-pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: white; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.event-card h3 { font-family: Manrope, sans-serif; font-size: 15px; margin: 12px 0 4px; line-height: 1.4; }
.event-card p { margin: 0; font-size: 12px; color: var(--muted); }
.event-meta { margin-top: 15px; font-size: 11px; color: #5d6578; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.status-dot.success { background: #4fb184; box-shadow: 0 0 0 4px rgba(79,177,132,.12); }
.sidebar-footer { display: flex; gap: 11px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.avatar { width: 38px; height: 38px; border-radius: 12px; background: #252a38; color: white; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.sidebar-footer strong { display: block; font-size: 13px; }
.sidebar-footer span { color: var(--muted); font-size: 11px; }

.main-content { min-width: 0; padding: 0 34px 48px; }
.topbar { height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow, .panel-kicker { margin: 0 0 5px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
h1, h2, h3 { font-family: Manrope, sans-serif; }
h1 { margin: 0; font-size: 25px; letter-spacing: -.02em; }
.topbar-actions { display: flex; gap: 10px; }
.primary-btn, .secondary-btn { border: 0; border-radius: 12px; min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; transition: .2s ease; }
.primary-btn { color: white; background: linear-gradient(145deg, var(--primary), var(--primary-dark)); box-shadow: 0 10px 24px rgba(102,88,211,.2); }
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(102,88,211,.25); }
.secondary-btn { color: #545d72; background: white; border: 1px solid var(--border); }
.secondary-btn:hover { border-color: #d6d1ff; color: var(--primary); }
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; background: white; display: grid; place-items: center; color: #5c6477; }
.mobile-only { display: none; }

.page-section { display: none; animation: fadeIn .25s ease; }
.page-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero-panel { position: relative; overflow: hidden; padding: 28px 30px; border-radius: var(--radius-xl); color: white; background: linear-gradient(120deg, #403875 0%, #6458cd 55%, #7c6fe0 100%); box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.7fr); gap: 40px; align-items: center; }
.hero-panel::after { content:""; position:absolute; width:320px; height:320px; right:-80px; top:-170px; border-radius:50%; border:40px solid rgba(255,255,255,.07); }
.hero-panel::before { content:""; position:absolute; width:180px; height:180px; right:90px; bottom:-110px; border-radius:50%; background:rgba(255,255,255,.06); }
.hero-panel > * { position: relative; z-index: 1; }
.hero-kicker { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.72); margin-bottom: 9px; }
.hero-panel h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; max-width: 700px; margin: 0 0 10px; }
.hero-panel p { max-width: 720px; margin: 0; color: rgba(255,255,255,.72); line-height: 1.6; font-size: 14px; }
.hero-progress-wrap { padding: 18px; border-radius: 17px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.hero-progress-label { display: flex; justify-content: space-between; align-items: end; margin-bottom: 10px; }
.hero-progress-label span { font-size: 12px; color: rgba(255,255,255,.7); }
.hero-progress-label strong { font-size: 27px; }
.progress-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.progress-bar { height: 100%; width: 0; border-radius: inherit; background: white; transition: width .35s ease; }
.hero-progress-wrap > span { display: block; margin-top: 9px; font-size: 11px; color: rgba(255,255,255,.67); }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 20px 0; }
.stat-card { padding: 18px; background: var(--surface); border: 1px solid rgba(231,234,241,.9); border-radius: var(--radius-lg); display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow-soft); }
.stat-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.stat-icon svg { stroke: none; fill: currentColor; width: 21px; height: 21px; }
.stat-icon.purple { background: var(--primary-soft); color: var(--primary); }
.stat-icon.green { background: var(--green-soft); color: var(--green); }
.stat-icon.blue { background: var(--blue-soft); color: var(--blue); }
.stat-icon.orange { background: var(--orange-soft); color: var(--orange); }
.stat-card span, .stat-card small { display: block; }
.stat-card span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.stat-card strong { display: inline-block; margin: 2px 0; font-family: Manrope, sans-serif; font-size: 25px; }
.stat-card small { color: #9aa1b0; font-size: 11px; }

.content-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(290px,.8fr); gap: 20px; }
.panel { background: var(--surface); border: 1px solid rgba(231,234,241,.9); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.panel-header { padding: 20px 22px 16px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.panel-header h3 { margin: 0; font-size: 17px; }
.text-btn { border: 0; background: transparent; color: var(--primary); font-weight: 700; font-size: 12px; }
.text-btn:hover span { transform: translateX(3px); display: inline-block; }
.mini-badge { padding: 5px 9px; border-radius: 999px; background: var(--orange-soft); color: #b66f25; font-size: 10px; font-weight: 700; }
.group-overview { padding: 0 22px 20px; display: grid; gap: 10px; }
.group-row { display: grid; grid-template-columns: 110px minmax(0,1fr) 30px; gap: 12px; align-items: center; }
.group-name { font-size: 12px; font-weight: 700; color: #4d566b; }
.group-bar { height: 8px; border-radius: 999px; background: #f0f1f5; overflow: hidden; }
.group-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7669dc, #9c92ef); }
.group-count { color: var(--muted); font-size: 11px; text-align: right; }
.attention-list { padding: 0 14px 14px; display: grid; gap: 8px; }
.attention-item { display: flex; gap: 11px; padding: 12px; border-radius: 13px; background: #fafbfe; }
.attention-icon { width: 31px; height: 31px; border-radius: 10px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); flex: 0 0 auto; }
.attention-icon svg { width: 16px; height: 16px; }
.attention-item strong { display: block; font-size: 12px; margin-bottom: 3px; }
.attention-item p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.empty-state { padding: 24px; color: var(--muted); text-align: center; font-size: 12px; }

.toolbar { padding: 12px; display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.search-box { flex: 1; min-width: 220px; position: relative; }
.search-box svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8a92a4; width: 18px; }
.search-box input, .select-control, .form-grid input, .form-grid select { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfe; color: var(--text); outline: none; }
.search-box input { height: 42px; padding: 0 14px 0 42px; }
.search-box input:focus, .select-control:focus, .form-grid input:focus, .form-grid select:focus { border-color: #bfb8f2; box-shadow: 0 0 0 4px rgba(102,88,211,.08); background: white; }
.select-control { height: 42px; padding: 0 35px 0 13px; max-width: 190px; }
.view-switch { display: flex; padding: 4px; background: #f1f3f7; border-radius: 11px; }
.view-switch button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #8b93a5; display: grid; place-items: center; }
.view-switch button.active { background: white; color: var(--primary); box-shadow: 0 3px 12px rgba(46,52,73,.08); }
.view-switch svg { width: 17px; }

.board-view { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-items: start; }
.participant-column { background: rgba(255,255,255,.58); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; min-height: 520px; }
.column-header { padding: 18px; display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.65); }
.column-header > div { display: flex; gap: 11px; align-items: center; }
.column-header span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.column-header h3 { margin: 2px 0 0; font-size: 17px; }
.column-header h3 b { margin-left: 5px; font-size: 10px; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 4px 7px; vertical-align: middle; }
.column-header small { align-self: center; color: #99a0af; font-size: 10px; max-width: 130px; text-align: right; }
.mode-icon { width: 38px; height: 38px; border-radius: 12px; display: grid !important; place-items: center; }
.mode-icon.presentiel { background: var(--green-soft); color: var(--green); }
.mode-icon.online { background: var(--blue-soft); color: var(--blue); }
.mode-icon svg { width: 19px; height: 19px; stroke: none; fill: currentColor; }
.participant-list { padding: 12px; display: grid; gap: 9px; min-height: 440px; transition: .2s ease; }
.participant-list.drag-over { background: rgba(102,88,211,.06); outline: 2px dashed rgba(102,88,211,.35); outline-offset: -8px; }
.participant-card { position: relative; padding: 14px; background: white; border: 1px solid var(--border); border-radius: 15px; box-shadow: 0 8px 22px rgba(48,54,77,.05); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; cursor: grab; }
.participant-card:hover { transform: translateY(-2px); border-color: #d9d4ff; box-shadow: 0 13px 26px rgba(48,54,77,.08); }
.participant-card.dragging { opacity: .45; transform: rotate(1deg) scale(.98); }
.card-top { display: flex; align-items: center; gap: 11px; }
.person-avatar { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; color: #5b50bd; background: linear-gradient(145deg, #f2f0ff, #e5e1ff); font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.person-info { min-width: 0; flex: 1; }
.person-info strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-info span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; margin-top: 3px; }
.person-info span svg { width: 12px; height: 12px; }
.status-badge { padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.status-badge.confirmé { color: #287a56; background: var(--green-soft); }
.status-badge.en-attente { color: #aa6a25; background: var(--orange-soft); }
.status-badge.à-contacter { color: #6e7483; background: #eef0f4; }
.card-bottom { margin-top: 12px; padding-top: 11px; border-top: 1px solid #f0f1f4; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.contact-state { display: flex; gap: 6px; }
.contact-chip { width: 27px; height: 27px; border-radius: 9px; background: #f6f7fa; color: #a0a6b4; display: grid; place-items: center; }
.contact-chip.active { color: var(--primary); background: var(--primary-soft); }
.contact-chip svg { width: 13px; height: 13px; }
.card-actions { display: flex; gap: 3px; }
.card-actions button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #8a92a3; display: grid; place-items: center; }
.card-actions button:hover { background: #f1f0ff; color: var(--primary); }
.card-actions .delete-btn:hover { background: var(--danger-soft); color: var(--danger); }
.card-actions svg { width: 14px; height: 14px; }
.drop-hint { height: 90px; border: 1.5px dashed #d6dae5; border-radius: 14px; display: grid; place-items: center; color: #a3a9b7; font-size: 11px; }

.table-wrapper { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th, td { padding: 15px 18px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
td { font-size: 12px; }
.table-person { display: flex; align-items: center; gap: 10px; }
.table-person .person-avatar { width: 34px; height: 34px; }
.mode-badge { padding: 5px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.mode-badge.presentiel { background: var(--green-soft); color: var(--green); }
.mode-badge.online { background: var(--blue-soft); color: var(--blue); }
.table-actions { display: flex; justify-content: flex-end; gap: 5px; }
.table-actions button { border: 0; background: transparent; color: #8b93a3; }
.hidden { display: none !important; }

.logistics-grid { grid-template-columns: 1.1fr .9fr; }
.timeline { padding: 0 22px 22px; }
.timeline-item { display: grid; grid-template-columns: 90px 1fr; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-item > span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.timeline-item strong { font-size: 13px; }
.timeline-item p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.timeline-item.warning > span { color: var(--orange); }
.logistics-cards { padding: 0 20px 20px; display: grid; gap: 12px; }
.log-card { padding: 18px; border-radius: 15px; background: #fafbfe; border: 1px solid var(--border); }
.log-card span, .log-card small { display: block; }
.log-card span { color: var(--muted); font-size: 11px; }
.log-card strong { display: block; font-family: Manrope, sans-serif; font-size: 28px; margin: 4px 0; }
.log-card small { color: #a2a8b5; font-size: 10px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(25,28,38,.45); backdrop-filter: blur(7px); display: none; place-items: center; padding: 20px; }
.modal-backdrop.open { display: grid; }
.modal { width: min(690px, 100%); border-radius: 24px; background: white; box-shadow: 0 30px 80px rgba(20,23,35,.24); animation: modalIn .22s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-header { padding: 24px 26px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 21px; }
#participantForm { padding: 22px 26px 26px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-grid label { color: #596176; font-size: 11px; font-weight: 700; }
.form-grid input, .form-grid select { height: 43px; padding: 0 12px; margin-top: 7px; }
.toggle-row { display: flex; flex-wrap: wrap; gap: 22px; margin: 22px 0 6px; padding-top: 18px; border-top: 1px solid var(--border); }
.check-control { display: inline-flex; align-items: center; gap: 9px; color: #596176; font-size: 12px; cursor: pointer; }
.check-control input { display: none; }
.check-control span { width: 34px; height: 20px; border-radius: 999px; background: #dfe3eb; position: relative; transition: .2s; }
.check-control span::after { content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:white; left:3px; top:3px; box-shadow:0 2px 5px rgba(0,0,0,.15); transition:.2s; }
.check-control input:checked + span { background: var(--primary); }
.check-control input:checked + span::after { transform: translateX(14px); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 140; min-width: 320px; max-width: calc(100vw - 48px); padding: 13px 14px; border-radius: 16px; background: #242936; color: white; display: flex; align-items: center; gap: 11px; box-shadow: 0 18px 50px rgba(20,24,34,.24); transform: translateY(30px); opacity: 0; pointer-events: none; transition: .25s ease; }
.toast.show { transform: none; opacity: 1; pointer-events: auto; }
.toast-icon { width: 31px; height: 31px; border-radius: 10px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 13px; }
.toast strong, .toast span { display: block; }
.toast strong { font-size: 12px; }
.toast span { color: rgba(255,255,255,.62); font-size: 10px; margin-top: 2px; }
.toast-undo { margin-left: auto; border: 0; background: rgba(255,255,255,.12); color: white; padding: 7px 9px; border-radius: 8px; font-size: 10px; font-weight: 700; }

@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .logistics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 270px; transition: .25s ease; box-shadow: 20px 0 60px rgba(25,29,41,.15); }
  .sidebar.open { transform: none; }
  .main-content { padding: 0 18px 36px; }
  .mobile-only { display: grid; }
  .topbar { height: 86px; }
  .topbar > div:first-of-type { flex: 1; }
  .topbar .eyebrow { display: none; }
  .topbar-actions .secondary-btn { display: none; }
  .hero-panel { grid-template-columns: 1fr; gap: 22px; }
  .board-view { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .main-content { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 20px; }
  .primary-btn, .secondary-btn { padding: 0 12px; }
  .topbar-actions .primary-btn { font-size: 0; width: 42px; padding: 0; }
  .topbar-actions .primary-btn svg { width: 19px; }
  .hero-panel { padding: 23px 20px; border-radius: 20px; }
  .hero-panel h2 { font-size: 25px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 13px; align-items: flex-start; }
  .stat-icon { width: 36px; height: 36px; border-radius: 10px; }
  .stat-card strong { font-size: 21px; }
  .toolbar { flex-wrap: wrap; }
  .search-box { flex-basis: 100%; }
  .select-control { flex: 1; max-width: none; }
  .column-header small { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .modal { max-height: calc(100vh - 20px); overflow: auto; border-radius: 20px; }
  .modal-header, #participantForm { padding-left: 18px; padding-right: 18px; }
  .group-row { grid-template-columns: 90px minmax(0,1fr) 26px; }
  .toast { left: 12px; right: 12px; bottom: 12px; min-width: 0; max-width: none; }
}

/* Confirmation & absence extension */
button, input, select, textarea { font: inherit; }
textarea { resize: vertical; }
.stats-grid-six { grid-template-columns: repeat(6, minmax(0,1fr)); }
.stat-icon.mint { background: #e9f8f4; color: #278d73; }
.stat-icon.red { background: var(--danger-soft); color: var(--danger); }
.board-view-three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mode-icon.absent { background: var(--danger-soft); color: var(--danger); }
.absent-column { background: rgba(255,248,249,.72); }
.participant-card.is-absent { border-color: #f3d9dd; background: linear-gradient(180deg, #fff, #fffafb); }
.status-badge.absent { color: #b64653; background: var(--danger-soft); }
.absence-snippet { margin: 11px 0 0; padding: 9px 10px; border-radius: 10px; background: var(--danger-soft); color: #8e4b54; font-size: 10px; line-height: 1.45; }
.response-overview { padding: 0 22px 22px; display: grid; gap: 14px; }
.response-row { display: grid; grid-template-columns: 150px minmax(0,1fr) 28px; gap: 12px; align-items: center; }
.response-label { display: flex; gap: 8px; align-items: center; }
.response-label strong { font-size: 12px; color: #50596c; }
.response-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.response-dot.green { background: var(--green); }.response-dot.blue { background: var(--blue); }.response-dot.red { background: var(--danger); }.response-dot.orange { background: var(--orange); }.response-dot.grey { background: #9da4b2; }
.group-bar span.bar-green { background: linear-gradient(90deg, #42ad7d, #7fd0ad); }
.group-bar span.bar-blue { background: linear-gradient(90deg, #4d8dd8, #8ab8ed); }
.group-bar span.bar-red { background: linear-gradient(90deg, #d65c67, #ef9ca4); }
.group-bar span.bar-orange { background: linear-gradient(90deg, #e99a45, #f4c07f); }
.group-bar span.bar-grey { background: linear-gradient(90deg, #8f97a7, #c7cbd3); }
.response-row > b { font-size: 12px; color: var(--muted); text-align: right; }
.table-person small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
.reason-cell { max-width: 260px; color: #6f5860; line-height: 1.45; }
.text-action { width: auto !important; height: auto !important; padding: 6px 8px !important; font-size: 10px; }
.invitation-intro { padding: 25px 27px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.invitation-intro h2 { margin: 4px 0 8px; font-size: 23px; }
.invitation-intro p { margin: 0; max-width: 720px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.link-btn { text-decoration: none; white-space: nowrap; }
.invitation-toolbar { margin-bottom: 18px; }
.invitation-table-wrap table { min-width: 760px; }
.link-actions { display: flex; align-items: center; gap: 7px; }
.compact-btn { min-height: 34px; padding: 0 11px; font-size: 10px; }
.icon-link { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); color: var(--primary); }
.icon-link svg { width: 15px; height: 15px; }
.full-field { grid-column: 1 / -1; }
.form-grid textarea, .reason-label textarea { width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfe; color: var(--text); outline: none; }
.form-grid textarea:focus, .reason-label textarea:focus { border-color: #bfb8f2; box-shadow: 0 0 0 4px rgba(102,88,211,.08); background: white; }
.conditional-field small { display: block; margin-top: 6px; color: var(--danger); font-size: 10px; }
.modal-small { width: min(520px, 100%); }
#absenceForm { padding: 22px 26px 26px; }
.reason-label { display: block; color: #596176; font-size: 11px; font-weight: 700; }
.danger-btn { border: 0; min-height: 42px; padding: 0 16px; border-radius: 12px; color: white; background: linear-gradient(145deg, #dc6671, #bd4653); font-weight: 700; }

/* Participant confirmation page */
.confirmation-body { background: radial-gradient(circle at 10% 0, rgba(102,88,211,.13), transparent 32%), radial-gradient(circle at 100% 100%, rgba(56,166,117,.1), transparent 28%), #f6f7fb; }
.confirmation-shell { min-height: 100vh; padding: 28px; display: grid; place-items: center; }
.confirmation-layout { width: min(1120px, 100%); display: grid; grid-template-columns: .82fr 1.18fr; border-radius: 30px; overflow: hidden; background: rgba(255,255,255,.92); border: 1px solid rgba(229,232,240,.9); box-shadow: 0 35px 90px rgba(47,52,75,.13); }
.confirmation-aside { position: relative; padding: 48px 42px; color: white; background: linear-gradient(155deg, #6658d3, #4c42ad 65%, #352d82); overflow: hidden; }
.confirmation-aside::before, .confirmation-aside::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.08); }
.confirmation-aside::before { width: 290px; height: 290px; top: -120px; right: -120px; }
.confirmation-aside::after { width: 210px; height: 210px; bottom: -90px; left: -80px; }
.confirmation-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.confirmation-brand .brand-mark { background: rgba(255,255,255,.16); box-shadow: none; border: 1px solid rgba(255,255,255,.18); }
.confirmation-brand span, .confirmation-brand strong { display: block; }
.confirmation-brand span { font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .12em; }
.confirmation-copy { position: relative; z-index: 1; margin-top: 92px; }
.confirmation-copy .event-pill { color: white; background: rgba(255,255,255,.13); }
.confirmation-copy h1 { margin: 18px 0 14px; max-width: 420px; font-size: 39px; line-height: 1.12; }
.confirmation-copy p { max-width: 440px; color: rgba(255,255,255,.72); line-height: 1.7; font-size: 13px; }
.event-facts { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: 42px; }
.event-fact { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.82); font-size: 12px; }
.event-fact svg { width: 18px; height: 18px; }
.confirmation-main { padding: 46px; }
.confirmation-main h2 { margin: 5px 0 8px; font-size: 27px; }
.confirmation-main > p { margin: 0 0 25px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.participant-welcome { margin-bottom: 22px; padding: 15px; display: flex; align-items: center; gap: 12px; border: 1px solid #e9e6ff; border-radius: 16px; background: #faf9ff; }
.participant-welcome .person-avatar { width: 45px; height: 45px; }
.participant-welcome strong, .participant-welcome span { display: block; }
.participant-welcome strong { font-size: 14px; }.participant-welcome span { color: var(--muted); font-size: 11px; margin-top: 3px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.response-choice { position: relative; cursor: pointer; }
.response-choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card { min-height: 112px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--border); border-radius: 15px; background: #fbfcfe; transition: .2s ease; }
.choice-card svg { width: 22px; height: 22px; color: var(--primary); }
.choice-card strong { font-size: 12px; }.choice-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.response-choice input:checked + .choice-card { border-color: #a99ff0; background: var(--primary-soft); box-shadow: 0 0 0 4px rgba(102,88,211,.08); transform: translateY(-2px); }
.response-choice.absent-choice input:checked + .choice-card { border-color: #e9a6ad; background: var(--danger-soft); box-shadow: 0 0 0 4px rgba(214,92,103,.08); }
.response-choice.absent-choice .choice-card svg { color: var(--danger); }
.confirmation-form { display: grid; gap: 19px; }
.confirmation-form .form-grid { gap: 13px; }
.confirmation-form label { color: #596176; font-size: 11px; font-weight: 700; }
.confirmation-form input[type="text"], .confirmation-form input[type="tel"], .confirmation-form input[type="email"], .confirmation-form textarea { width: 100%; margin-top: 7px; padding: 0 12px; height: 43px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfe; outline: none; }
.confirmation-form textarea { height: auto; padding: 12px; }
.confirmation-form input:focus, .confirmation-form textarea:focus { border-color: #bfb8f2; box-shadow: 0 0 0 4px rgba(102,88,211,.08); background: white; }
.confirmation-actions { display: flex; justify-content: flex-end; padding-top: 5px; }
.confirmation-submit { min-width: 190px; }
.confirmation-message { padding: 38px 24px; text-align: center; border-radius: 20px; background: #f7fbf9; border: 1px solid #dcefe6; }
.confirmation-message .success-ring { width: 64px; height: 64px; margin: 0 auto 17px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); }
.confirmation-message .success-ring svg { width: 30px; height: 30px; }
.confirmation-message h2 { margin: 0 0 8px; }.confirmation-message p { margin: 0; color: var(--muted); line-height: 1.6; }
.invalid-link { text-align: center; padding: 50px 20px; }.invalid-link h2 { margin-bottom: 8px; }.invalid-link p { color: var(--muted); line-height: 1.6; }
.demo-selector { margin-bottom: 22px; padding: 13px; border-radius: 14px; background: #fff8eb; border: 1px solid #f5e2bc; }
.demo-selector label { color: #8b692c; font-size: 10px; font-weight: 700; }.demo-selector select { width: 100%; height: 39px; margin-top: 7px; padding: 0 10px; border: 1px solid #e8d4aa; border-radius: 10px; background: white; }
.sync-note { margin-top: 18px; padding: 11px 13px; border-radius: 12px; background: #f7f8fb; color: var(--muted); font-size: 10px; line-height: 1.55; }

@media (max-width: 1320px) {
  .stats-grid-six { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .board-view-three { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .absent-column { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .confirmation-shell { padding: 14px; }
  .confirmation-layout { grid-template-columns: 1fr; }
  .confirmation-aside { padding: 30px; }
  .confirmation-copy { margin-top: 45px; }
  .confirmation-copy h1 { font-size: 32px; }
  .event-facts { margin-top: 28px; }
  .confirmation-main { padding: 32px 28px; }
  .invitation-intro { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
  .stats-grid-six { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .board-view-three { grid-template-columns: 1fr; }
  .absent-column { grid-column: auto; }
  .response-row { grid-template-columns: 120px minmax(0,1fr) 24px; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-card { min-height: 78px; flex-direction: row; align-items: center; }
  .confirmation-main { padding: 28px 20px; }
  .confirmation-aside { padding: 26px 22px; }
  .confirmation-copy h1 { font-size: 28px; }
}

/* Public participant directory */
.public-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 5% 5%, rgba(102,88,211,.14), transparent 28%),
    radial-gradient(circle at 95% 85%, rgba(56,166,117,.1), transparent 28%),
    #f5f6fa;
}
.public-shell {
  width: min(1220px, calc(100% - 36px));
  min-height: calc(100vh - 36px);
  margin: 18px auto;
  display: grid;
  grid-template-columns: minmax(330px,.82fr) minmax(500px,1.18fr);
  overflow: hidden;
  border: 1px solid rgba(228,231,239,.94);
  border-radius: 32px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 35px 100px rgba(47,52,75,.13);
}
.public-hero {
  position: relative;
  padding: 46px 42px;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(155deg, #6658d3 0%, #4b42aa 58%, #322b79 100%);
}
.public-hero::before,
.public-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.public-hero::before { width: 330px; height: 330px; top: -150px; right: -135px; }
.public-hero::after { width: 250px; height: 250px; bottom: -120px; left: -105px; }
.public-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.public-brand .brand-mark { color: #fff; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.17); box-shadow: none; }
.public-brand span, .public-brand strong { display: block; }
.public-brand span { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; opacity: .7; }
.public-brand strong { margin-top: 2px; font-family: Manrope, sans-serif; font-size: 15px; }
.public-hero-copy { position: relative; z-index: 1; margin-top: 96px; }
.public-hero-copy .event-pill { color: #fff; background: rgba(255,255,255,.13); }
.public-hero-copy h1 { max-width: 470px; margin: 18px 0 16px; font-size: clamp(34px,4vw,48px); line-height: 1.06; letter-spacing: -.035em; }
.public-hero-copy p { max-width: 470px; margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.75; }
.public-event-facts { position: relative; z-index: 1; display: grid; gap: 13px; margin-top: auto; padding-top: 60px; }
.public-event-facts > div { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.public-event-facts svg { width: 19px; height: 19px; flex: 0 0 auto; }
.public-event-facts strong, .public-event-facts small { display: block; }
.public-event-facts strong { font-size: 11px; }
.public-event-facts small { margin-top: 3px; color: rgba(255,255,255,.62); font-size: 9px; }
.public-directory { padding: 46px 48px 38px; overflow: auto; }
.directory-heading h2 { margin: 5px 0 8px; font-size: 28px; letter-spacing: -.025em; }
.directory-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.public-search-wrap { margin-top: 28px; }
.public-search-box { position: relative; }
.public-search-box > svg { position: absolute; top: 50%; left: 16px; width: 19px; height: 19px; color: #8d94a5; transform: translateY(-50%); }
.public-search-box input { width: 100%; height: 56px; padding: 0 48px 0 48px; border: 1px solid #dfe2eb; border-radius: 17px; background: #fafbfe; color: var(--text); font: 600 13px 'DM Sans', sans-serif; outline: none; transition: .2s ease; }
.public-search-box input::placeholder { color: #a1a7b4; font-weight: 500; }
.public-search-box input:focus { border-color: #a9a0ec; background: #fff; box-shadow: 0 0 0 5px rgba(102,88,211,.08); }
.clear-search { position: absolute; top: 50%; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 10px; color: #777f91; background: #eef0f5; font-size: 20px; transform: translateY(-50%); cursor: pointer; }
.group-filter-block { margin-top: 25px; }
.filter-label { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.filter-label span { color: #596176; font-size: 11px; font-weight: 700; }
.filter-label small { color: var(--muted); font-size: 10px; }
.group-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.group-chip { min-height: 36px; padding: 0 11px 0 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e2e4ec; border-radius: 999px; color: #61697b; background: #fff; font: 700 10px 'DM Sans', sans-serif; cursor: pointer; transition: .18s ease; }
.group-chip b { min-width: 21px; height: 21px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; color: #7b8292; background: #f0f1f5; font-size: 9px; }
.group-chip:hover { border-color: #bdb6ee; transform: translateY(-1px); }
.group-chip.active { color: #5548bd; border-color: #b7afee; background: #f2f0ff; box-shadow: 0 4px 15px rgba(102,88,211,.1); }
.group-chip.active b { color: #fff; background: var(--primary); }
.public-results { margin-top: 22px; }
.public-person-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.public-person-card { position: relative; min-height: 84px; padding: 13px 42px 13px 13px; display: flex; align-items: center; gap: 12px; border: 1px solid #e8e9ef; border-radius: 17px; color: inherit; background: #fff; text-decoration: none; transition: .2s ease; }
.public-person-card:hover { border-color: #bdb5ef; box-shadow: 0 12px 26px rgba(65,62,102,.09); transform: translateY(-2px); }
.public-person-card:focus-visible { outline: none; border-color: #9b90e5; box-shadow: 0 0 0 4px rgba(102,88,211,.1); }
.public-avatar { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; color: #5548bd; background: linear-gradient(145deg,#f0eeff,#e5e1ff); font-size: 11px; font-weight: 800; }
.public-person-copy { min-width: 0; }
.public-person-copy strong, .public-person-copy span { display: block; }
.public-person-copy strong { overflow: hidden; color: #33394a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.public-person-copy span { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.public-answer-state { position: absolute; right: 13px; bottom: 10px; color: var(--green); font-size: 8px; font-weight: 800; }
.public-card-arrow { position: absolute; top: 15px; right: 15px; color: #8b82cf; font-size: 17px; transition: .18s ease; }
.public-person-card:hover .public-card-arrow { transform: translateX(3px); }
.public-empty-state { padding: 42px 20px; text-align: center; border: 1px dashed #dfe2ea; border-radius: 20px; background: #fafbfe; }
.public-empty-state .empty-icon { width: 48px; height: 48px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; color: #675bd0; background: #efedff; font-weight: 800; }
.public-empty-state h3 { margin: 0 0 7px; font-size: 16px; }
.public-empty-state p { margin: 0 auto 17px; max-width: 360px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.public-help { margin-top: 22px; padding: 14px 15px; display: flex; gap: 11px; border-radius: 15px; color: #626a7b; background: #f6f7fa; }
.public-help svg { width: 18px; height: 18px; flex: 0 0 auto; color: #7d73cc; }
.public-help p { margin: 0; font-size: 10px; line-height: 1.55; }
.success-actions { margin-top: 20px; display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.public-link-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.public-link-intro { align-items: center; }

@media (max-width: 960px) {
  .public-shell { grid-template-columns: 1fr; }
  .public-hero { min-height: auto; padding: 32px; }
  .public-hero-copy { margin-top: 55px; }
  .public-event-facts { padding-top: 38px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .public-directory { padding: 34px 32px; }
}

@media (max-width: 640px) {
  .public-shell { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
  .public-hero { padding: 25px 20px 27px; }
  .public-hero-copy { margin-top: 38px; }
  .public-hero-copy h1 { font-size: 31px; }
  .public-hero-copy p { font-size: 12px; }
  .public-event-facts { grid-template-columns: 1fr; padding-top: 28px; }
  .public-directory { padding: 28px 18px 34px; }
  .directory-heading h2 { font-size: 24px; }
  .filter-label { align-items: flex-start; flex-direction: column; gap: 4px; }
  .group-chips { flex-wrap: nowrap; margin-inline: -18px; padding: 0 18px 5px; overflow-x: auto; scrollbar-width: none; }
  .group-chips::-webkit-scrollbar { display: none; }
  .group-chip { flex: 0 0 auto; }
  .public-person-grid { grid-template-columns: 1fr; }
  .public-person-card { min-height: 76px; }
  .public-link-actions { width: 100%; justify-content: stretch; }
  .public-link-actions > * { flex: 1 1 210px; justify-content: center; }
}