:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #162032;
  --muted: #667189;
  --border: #d8deea;
  --primary: #132238;
  --primary-text: #ffffff;
  --danger: #aa2e2e;
  --success-bg: #e9f8ed;
  --success-text: #1f7a35;
  --error-bg: #fdecec;
  --error-text: #9c2f2f;
  --warning-bg: #fff4e5;
  --warning-text: #a24f00;
  --shadow: 0 8px 30px rgba(20,35,56,0.05);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); }
a { color: inherit; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.site-header { background: linear-gradient(135deg, #10233b, #1a3553); color: white; padding: 18px 0; box-shadow: 0 3px 14px rgba(0,0,0,0.12); }
.header-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand { display:flex; align-items:center; gap:18px; text-decoration:none; color:white; }
.brand-logo { height: 48px; width: auto; display:block; background:white; border-radius:12px; padding:6px 10px; }
.brand h1 { margin:0; font-size:30px; }
.top-nav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nav-link { color: rgba(255,255,255,0.82); text-decoration:none; padding:10px 12px; border-radius:10px; }
.nav-link-active { color:white; background: rgba(255,255,255,0.12); }
.user-chip { display:inline-flex; align-items:center; padding:9px 12px; border-radius:999px; background: rgba(255,255,255,0.12); font-size:13px; }
.main-content { padding: 28px 0 60px; }
.main-content-login { min-height: calc(100vh - 120px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow: var(--shadow); }
.login-card { width:min(520px,100%); }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:20px; }
.stat-card p { margin:0; color:var(--muted); }
.stat-card strong { display:block; margin-top:12px; font-size:34px; }
.intro-card, .table-card, .form-card { margin-bottom:20px; }
.intro-card h2, .table-card h2, .form-card h2, .login-card h2 { margin-top:0; }
.section-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }
.section-header-tight { margin-bottom:10px; }
.section-header p { margin:8px 0 0; color:var(--muted); }
.section-actions { display:flex; gap:10px; flex-wrap:wrap; }
.button { display:inline-block; background:var(--primary); color:var(--primary-text); text-decoration:none; border:none; border-radius:12px; padding:12px 16px; cursor:pointer; font-size:14px; }
.button-light { background:#edf2f8; color:var(--text); }
.button-danger { background:var(--danger); color:white; }
.button-small { padding:8px 10px; font-size:13px; }
.table-wrapper { overflow-x:auto; }
.table-card table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:14px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:0.03em; }
.muted { color:var(--muted); margin-top:4px; font-size:13px; }
.status-badge { display:inline-block; padding:7px 10px; border-radius:999px; background: color-mix(in srgb, var(--status-color) 15%, white); color: var(--status-color); font-size:13px; border:1px solid color-mix(in srgb, var(--status-color) 35%, white); }
.type-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; background: color-mix(in srgb, var(--badge-color) 12%, white); color: var(--badge-color); font-size:13px; border:1px solid color-mix(in srgb, var(--badge-color) 35%, white); }
.attention-badge { display:inline-block; padding:7px 10px; border-radius:999px; background:var(--warning-bg); color:var(--warning-text); font-size:13px; border:1px solid #f3d2a2; }
.badge-stack { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.event-inline-badge { margin-top:8px; }
.action-stack { display:flex; flex-wrap:wrap; gap:8px; }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.single-column { grid-template-columns:1fr; }
.form-grid label, .filter-grid label, .map-filter-grid label { display:flex; flex-direction:column; gap:8px; font-size:14px; }
.filter-grid { display:grid; grid-template-columns:2fr repeat(4, minmax(0, 1fr)) auto; gap:14px; margin-bottom:20px; align-items:end; }
.map-filter-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) auto; gap:14px; margin-bottom:20px; align-items:end; }
.filter-actions, .form-actions { display:flex; gap:12px; flex-wrap:wrap; }
.align-end { align-items:end; }
input, select, textarea { width:100%; border:1px solid var(--border); border-radius:12px; padding:12px 14px; font: inherit; background:white; color:var(--text); }
textarea { resize: vertical; }
.full-width { grid-column: 1 / -1; }
.flash-stack { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; width:100%; }
.flash-stack-auth { max-width:520px; }
.flash { padding:14px 16px; border-radius:14px; border:1px solid transparent; }
.flash-success { background:var(--success-bg); color:var(--success-text); border-color:#b8e3c0; }
.flash-error { background:var(--error-bg); color:var(--error-text); border-color:#f0b9b9; }
.empty-state { color:var(--muted); }
.empty-state-card { text-align:center; }
.nested-card { border:1px solid var(--border); border-radius:16px; padding:16px; background:#fbfcfe; }
.place-search-grid { display:grid; grid-template-columns:1fr auto; gap:12px; margin-bottom:12px; }
.search-results { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.search-result-item { width:100%; text-align:left; border:1px solid var(--border); background:white; border-radius:12px; padding:12px 14px; cursor:pointer; }
.search-result-item strong { display:block; margin-bottom:4px; }
.search-result-item span { color:var(--muted); font-size:13px; }
.mail-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mail-preview { white-space:pre-wrap; background:#f8fafc; border:1px solid var(--border); border-radius:14px; padding:14px; margin-top:10px; font-family:inherit; }
.variable-toolbar { display:flex; flex-direction:column; gap:10px; }
.variable-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.token-button { border:1px solid var(--border); background:#f8fafc; border-radius:999px; padding:8px 12px; cursor:pointer; }
.vocab-row-form { display:grid; grid-template-columns: minmax(180px, 1fr) 90px auto auto; gap:12px; align-items:center; }
.map-canvas { height: 560px; border-radius:16px; overflow:hidden; }
.guest-list { display:flex; flex-direction:column; gap:16px; }
.guest-event-card h3 { margin:0; }
.guest-event-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.guest-location { color:var(--muted); margin:10px 0 0; }
.template-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.template-card { border:1px solid var(--border); border-radius:16px; padding:18px; background:#fff; }
.template-card-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.template-preview { color:var(--muted); line-height:1.5; }
.multi-select-box { position:relative; display:flex; flex-direction:column; gap:12px; }
.multi-select-trigger { align-self:flex-start; }
.multi-select-panel { position:relative; border:1px solid var(--border); border-radius:16px; background:white; padding:14px; box-shadow: var(--shadow); }
.contact-search-input { margin-bottom:12px; }
.multi-select-options { display:flex; flex-direction:column; gap:10px; max-height:280px; overflow:auto; }
.contact-option { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--border); border-radius:14px; padding:12px; background:#fff; }
.contact-option input { width:auto; margin-top:3px; }
.contact-option strong { display:block; margin-bottom:4px; }
.contact-option small { color:var(--muted); display:block; line-height:1.4; }
.selected-contact-chips { display:flex; flex-wrap:wrap; gap:8px; min-height:24px; }
.contact-chip { display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:#edf2f8; font-size:13px; }
.agenda-hero { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; background:linear-gradient(135deg, #10233b, #21466d); color:white; }
.eyebrow { margin:0 0 8px; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:rgba(255,255,255,.72); }
.agenda-hero h2 { margin:0; font-size:34px; }
.agenda-hero p { margin:10px 0 0; max-width:760px; color:rgba(255,255,255,.86); }
.agenda-nav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.agenda-month-pill { display:inline-flex; align-items:center; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.14); }
.agenda-calendar-card { padding:18px; }
.agenda-grid-header, .agenda-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px; }
.agenda-grid-header { margin-bottom:10px; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.agenda-day { min-height:150px; border:1px solid var(--border); border-radius:16px; padding:12px; background:white; display:flex; flex-direction:column; gap:10px; }
.agenda-day-muted { background:#f8fafc; color:#8b95aa; }
.agenda-day-today { border-color:#1d4ed8; box-shadow:0 0 0 2px rgba(29,78,216,.12); }
.agenda-day-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.agenda-day-number { font-weight:bold; }
.today-pill { font-size:12px; padding:6px 10px; border-radius:999px; background:#dbeafe; color:#1d4ed8; }
.agenda-day-events { display:flex; flex-direction:column; gap:8px; }
.agenda-event-dot { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, var(--event-color) 11%, white); border:1px solid color-mix(in srgb, var(--event-color) 28%, white); }
.agenda-event-dot strong { font-size:13px; }
.agenda-event-dot span, .agenda-more { font-size:12px; color:var(--muted); }
.agenda-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.agenda-list { display:flex; flex-direction:column; gap:12px; }
.agenda-list-item { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; border:1px solid var(--border); border-radius:14px; padding:14px; text-decoration:none; background:#fff; }
.agenda-list-item strong { display:block; margin-bottom:6px; }
.agenda-list-item p { margin:0; color:var(--muted); }
.rights-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.permission-card { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--border); border-radius:16px; padding:14px; background:#fbfcfe; }
.permission-card input { width:auto; margin-top:3px; }
.permission-card strong { display:block; margin-bottom:4px; }
.permission-card small { color:var(--muted); line-height:1.45; }
@media (max-width: 960px) {
  .header-inner, .section-header, .guest-event-head, .agenda-hero { flex-direction:column; align-items:flex-start; }
  .filter-grid, .map-filter-grid, .form-grid, .mail-preview-grid, .vocab-row-form, .rights-grid, .agenda-columns, .agenda-grid, .agenda-grid-header { grid-template-columns:1fr; }
  .brand-logo { height:42px; }
  .agenda-day { min-height:auto; }
}


.auth-panel-card {
  margin-bottom: 1.25rem;
}

#auth-panel {
  scroll-margin-top: 5rem;
}


.table-title-link { color: var(--text); text-decoration: none; }
.table-title-link:hover { text-decoration: underline; }
.agenda-event-link { text-decoration: none; color: inherit; }
.detail-hero { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; background:linear-gradient(135deg, #0f2b4a, #1f5d8b); color:white; }
.detail-hero h2 { margin:10px 0 0; font-size:34px; }
.detail-subtitle, .detail-location { color: rgba(255,255,255,.86); margin:10px 0 0; }
.detail-meta-row { display:flex; flex-wrap:wrap; gap:8px; }
.detail-hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.detail-grid { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.detail-card h3 { margin-top:0; }
.detail-card-wide { grid-column: 1 / -1; }
.detail-list { display:grid; grid-template-columns: 1fr 1fr; gap:14px 18px; margin:0; }
.detail-list div { padding:14px; border:1px solid var(--border); border-radius:14px; background:#fbfcfe; }
.detail-list dt { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; }
.detail-list dd { margin:0; line-height:1.5; }
.detail-contact-list { display:flex; flex-direction:column; gap:12px; }
.detail-contact-item { padding:14px; border:1px solid var(--border); border-radius:14px; background:#fbfcfe; }
.detail-contact-item p { margin:6px 0 0; color:var(--muted); }
.detail-notes { white-space:pre-wrap; line-height:1.7; color:var(--text); background:#fbfcfe; border:1px solid var(--border); border-radius:14px; padding:18px; }
@media (max-width: 960px) {
  .detail-grid, .detail-list { grid-template-columns:1fr; }
}

.agenda-event-link { text-decoration:none; color:inherit; }
.agenda-event-link:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(15,23,42,.08); }
.detail-mail-card { margin-top:24px; }
.detail-mail-actions { display:flex; flex-wrap:wrap; gap:10px; }

.detail-public-id {
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;
}

.agenda-event-link {
  display:block;
  cursor:pointer;
  position:relative;
  z-index:2;
}

.agenda-list-item:hover,
.agenda-event-link:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}

.contact-identity-card {
  background:linear-gradient(135deg, #0f2b4a, #1f5d8b);
  color:white;
}

.contact-identity-layout {
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:24px;
  align-items:center;
}

.contact-avatar-shell {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.contact-avatar-placeholder {
  width:112px;
  height:112px;
  border-radius:28px;
  background:linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.24);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 16px 40px rgba(8,20,40,.18);
}

.contact-avatar-placeholder span {
  font-size:42px;
  font-weight:700;
  color:white;
}

.contact-avatar-caption {
  margin:0;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.contact-identity-main h2 {
  margin:12px 0 0;
  font-size:34px;
}

.contact-identity-quickfacts {
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.contact-identity-quickfacts div {
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.08);
  min-height:78px;
}

.contact-identity-quickfacts strong {
  display:block;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin-bottom:8px;
}

.contact-identity-quickfacts span {
  display:block;
  line-height:1.5;
}

.contact-actions {
  justify-content:flex-end;
}

.contact-detail-grid {
  margin-top:24px;
}

.contact-card-sheet,
.contact-notes-card {
  min-height:100%;
}

.detail-list-tight {
  grid-template-columns:1fr;
}

@media (max-width: 960px) {
  .contact-identity-layout,
  .contact-identity-quickfacts {
    grid-template-columns:1fr;
  }

  .contact-actions {
    justify-content:flex-start;
  }
}