:root {
  --ea-primary: var(--ea-primary-l,#2563eb);
  --ea-accent: var(--ea-accent-l,#0ea5e9);
  --ea-surface: var(--ea-surface-l,#fff);
  --ea-bg: var(--ea-bg-l,#f6f8fc);
  --ea-text: var(--ea-text-l,#142033);
  --ea-muted: #6b778c;
  --ea-border: rgba(20,32,51,.10);
  --ea-soft: color-mix(in srgb,var(--ea-primary) 8%,var(--ea-surface));
  --ea-danger: #b42318;
  --ea-success: #067647;
  --ea-warning: #b54708;
  --ea-radius: 20px;
  --ea-radius-sm: 13px;
  --ea-shadow: 0 18px 50px rgba(26,39,61,.08);
  --ea-shadow-soft: 0 8px 28px rgba(26,39,61,.06);
  --ea-page: 1280px;
  --ea-header-h: 76px;
  --ea-control-h: 44px;
  font-family: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme: light;
}

html[data-color-mode="dark"] {
  --ea-primary: var(--ea-primary-d,#7cb7ff);
  --ea-accent: var(--ea-accent-d,#38bdf8);
  --ea-surface: var(--ea-surface-d,#121a28);
  --ea-bg: var(--ea-bg-d,#0a101b);
  --ea-text: var(--ea-text-d,#f4f7fb);
  --ea-muted: #9eabc0;
  --ea-border: rgba(255,255,255,.10);
  --ea-soft: color-mix(in srgb,var(--ea-primary) 10%,var(--ea-surface));
  --ea-shadow: 0 18px 50px rgba(0,0,0,.26);
  --ea-shadow-soft: 0 8px 28px rgba(0,0,0,.20);
  color-scheme: dark;
}

@media (prefers-color-scheme:dark) {
  html[data-color-mode="system"] {
    --ea-primary: var(--ea-primary-d,#7cb7ff);
    --ea-accent: var(--ea-accent-d,#38bdf8);
    --ea-surface: var(--ea-surface-d,#121a28);
    --ea-bg: var(--ea-bg-d,#0a101b);
    --ea-text: var(--ea-text-d,#f4f7fb);
    --ea-muted: #9eabc0;
    --ea-border: rgba(255,255,255,.10);
    --ea-soft: color-mix(in srgb,var(--ea-primary) 10%,var(--ea-surface));
    --ea-shadow: 0 18px 50px rgba(0,0,0,.26);
    --ea-shadow-soft: 0 8px 28px rgba(0,0,0,.20);
    color-scheme: dark;
  }

}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--ea-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ea-bg);
  color: var(--ea-text);
  font-size: 16px;
  line-height: 1.55;
  min-width: 320px;
  overflow-x: hidden;
}

body.font-small {
  font-size: 15px;
}

body.font-medium {
  font-size: 16px;
}

body.font-large {
  font-size: 17.5px;
}

body.density-compact {
  --ea-control-h: 40px;
  --ea-radius: 17px;
}

body.density-spacious {
  --ea-control-h: 48px;
  --ea-radius: 23px;
}

body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

body.high-contrast {
  --ea-border: color-mix(in srgb,var(--ea-text) 34%,transparent);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,input,textarea,select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

.muted,.muted-text {
  color: var(--ea-muted);
}

.small {
  font-size: .875em;
}

.xlarge {
  font-size: 1.5rem;
}

.compact {
  font-size: .9rem;
}

/* Shared buttons */
.btn-primary-ea,.btn-secondary-ea,.btn-danger-ea,.text-button,.table-action,.public-login {
  min-height: var(--ea-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 12px;
  padding: .67rem 1rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  transition: transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.btn-primary-ea {
  background: linear-gradient(135deg,var(--ea-primary),var(--ea-accent));
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb,var(--ea-primary) 24%,transparent);
}

.btn-primary-ea:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px color-mix(in srgb,var(--ea-primary) 30%,transparent);
  color: #fff;
}

.btn-secondary-ea,.public-login {
  background: var(--ea-surface);
  border-color: var(--ea-border);
  color: var(--ea-text);
}

.btn-secondary-ea:hover,.public-login:hover {
  border-color: color-mix(in srgb,var(--ea-primary) 36%,var(--ea-border));
  background: var(--ea-soft);
}

.btn-danger-ea {
  background: #fff1f0;
  color: var(--ea-danger);
  border-color: #fecdca;
}

html[data-color-mode="dark"] .btn-danger-ea {
  background: rgba(180,35,24,.18);
  border-color: rgba(254,205,202,.2);
}

.text-button,.table-action {
  padding: .45rem .7rem;
  min-height: 36px;
  background: transparent;
  border-color: transparent;
  color: var(--ea-primary);
}

.text-danger-btn {
  border: 0;
  background: transparent;
  color: var(--ea-danger);
  font-weight: 700;
  padding: .45rem .65rem;
  border-radius: 9px;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--ea-accent) 45%,transparent);
  outline-offset: 2px;
}

/* Forms */
input,select,textarea {
  width: 100%;
  border: 1px solid var(--ea-border);
  background: var(--ea-surface);
  border-radius: 12px;
  min-height: var(--ea-control-h);
  padding: .72rem .85rem;
  transition: border-color .18s,box-shadow .18s,background .18s;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,textarea:focus,select:focus {
  border-color: color-mix(in srgb,var(--ea-primary) 55%,var(--ea-border));
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--ea-primary) 10%,transparent);
  outline: 0;
}

label {
  display: grid;
  gap: .4rem;
  font-weight: 650;
  font-size: .95rem;
}

.validation,.field-validation-error {
  color: var(--ea-danger);
  font-size: .9rem;
}

.validation-summary-valid,.field-validation-valid {
  display: none;
}

.input-validation-error {
  border-color: #f04438;
}

.form-card,.panel-card,.status-card,.group-card,.next-card,.share-card,.action-card,.inline-admin-card,.responsive-table-card,.preferences-form,.profile-settings,.danger-zone {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius);
  box-shadow: var(--ea-shadow-soft);
}

.form-card,.preferences-form,.profile-settings,.danger-zone {
  padding: clamp(18px,2.4vw,32px);
  display: grid;
  gap: 1.1rem;
}

.wide-form {
  max-width: 980px;
}

.compact-form {
  display: flex;
  align-items: end;
  gap: .7rem;
  flex-wrap: wrap;
}

.compact-form>* {
  min-width: 160px;
  flex: 1;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
}

.form-actions,.page-actions,.dialog-actions,.notification-actions,.hero-actions,.public-actions,.share-buttons,.sticky-actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  align-items: center;
}

.form-actions {
  justify-content: flex-end;
  margin-top: .35rem;
}

.form-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.check-line,.check-grid label {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
}

.check-line input,.check-grid input {
  width: auto;
  min-height: auto;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .7rem;
}

.option-fieldset {
  border: 1px solid var(--ea-border);
  border-radius: 14px;
  padding: 1rem;
}

.option-fieldset legend {
  float: none;
  width: auto;
  padding: 0 .35rem;
  font-weight: 800;
  font-size: .95rem;
}

/* App shell */
.app-header {
  height: var(--ea-header-h);
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(12px,2vw,28px);
  padding: 0 max(18px,calc((100vw - var(--ea-page))/2));
  background: color-mix(in srgb,var(--ea-surface) 90%,transparent);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--ea-border);
}

.app-brand,.public-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.app-brand img,.public-brand img {
  height: 38px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg,var(--ea-primary),var(--ea-accent));
  color: #fff;
  font-weight: 900;
  letter-spacing: -.04em;
  box-shadow: 0 8px 20px color-mix(in srgb,var(--ea-primary) 25%,transparent);
  flex: 0 0 auto;
}

.brand-copy {
  display: grid;
  line-height: 1.05;
}

.brand-copy strong {
  font-size: 1rem;
}

.brand-copy small {
  font-size: .72rem;
  color: var(--ea-muted);
  margin-top: .2rem;
}

.app-nav {
  display: flex;
  justify-content: center;
  gap: .25rem;
  min-width: 0;
}

.app-nav>a {
  padding: .58rem .72rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: .91rem;
  white-space: nowrap;
}

.app-nav>a:hover {
  background: var(--ea-soft);
  color: var(--ea-primary);
}

.mobile-nav-top {
  display: none;
}

.app-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

.icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ea-border);
  border-radius: 12px;
  background: var(--ea-surface);
  position: relative;
}

.icon-button b {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #d92d20;
  color: #fff;
  font-size: .65rem;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  padding: 0 4px;
  border: 2px solid var(--ea-surface);
}

.account-menu {
  position: relative;
}

.account-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: 14px;
  padding: .35rem .45rem .35rem .35rem;
  cursor: pointer;
  min-width: 0;
}

.account-menu summary::-webkit-details-marker {
  display: none;
}

.account-menu[open] summary {
  background: var(--ea-soft);
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,color-mix(in srgb,var(--ea-primary) 16%,var(--ea-surface)),color-mix(in srgb,var(--ea-accent) 12%,var(--ea-surface)));
  border: 1px solid var(--ea-border);
  font-size: .78rem;
  font-weight: 900;
  overflow: hidden;
  flex: 0 0 auto;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.large {
  width: 50px;
  height: 50px;
}

.account-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
  font-size: .9rem;
}

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

.account-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(330px,calc(100vw - 24px));
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: 18px;
  padding: .55rem;
  box-shadow: var(--ea-shadow);
  z-index: 80;
}

.account-popover>a,.account-popover form button {
  width: 100%;
  display: flex;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: .72rem .8rem;
  font-weight: 650;
  color: var(--ea-text);
}

.account-popover>a:hover,.account-popover form button:hover {
  background: var(--ea-soft);
  color: var(--ea-primary);
}

.account-card {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .6rem .65rem .85rem;
}

.account-card>div {
  display: grid;
  min-width: 0;
}

.account-card small {
  color: var(--ea-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-separator {
  height: 1px;
  background: var(--ea-border);
  margin: .35rem;
}

.mobile-menu-button,.mobile-backdrop {
  display: none;
}

.app-main {
  width: min(var(--ea-page),calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(24px,3vw,44px) 0 64px;
  min-height: calc(100vh - var(--ea-header-h));
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.page-head h1 {
  font-size: clamp(1.65rem,3vw,2.45rem);
  letter-spacing: -.035em;
  margin: .2rem 0 0;
  line-height: 1.05;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 900;
  color: var(--ea-primary);
}

.flash {
  padding: .9rem 1rem;
  border-radius: 13px;
  margin-bottom: 1rem;
  border: 1px solid;
}

.flash.success {
  background: #ecfdf3;
  border-color: #abefc6;
  color: #067647;
}

.flash.error {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}

/* Dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(300px,.85fr);
  gap: 1.1rem;
}

.today-banner {
  padding: clamp(20px,3vw,34px);
  border-radius: var(--ea-radius);
  background: linear-gradient(135deg,color-mix(in srgb,var(--ea-primary) 12%,var(--ea-surface)),color-mix(in srgb,var(--ea-accent) 7%,var(--ea-surface)));
  border: 1px solid color-mix(in srgb,var(--ea-primary) 18%,var(--ea-border));
  min-width: 0;
}

.today-banner h2 {
  font-size: clamp(1.35rem,2.5vw,2.1rem);
  margin: .25rem 0 .75rem;
  letter-spacing: -.03em;
}

.today-events,.event-list,.notification-list,.pending-list,.member-list {
  display: grid;
  gap: .7rem;
}

.hero-event,.next-event,.notification-card,.member-list>*,.pending-list>* {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--ea-border);
  border-radius: 14px;
  background: var(--ea-surface);
  min-width: 0;
}

.hero-status,.status-pill,.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 99px;
  padding: .35rem .65rem;
  background: var(--ea-soft);
  color: var(--ea-primary);
  font-size: .78rem;
  font-weight: 800;
}

.next-card {
  padding: 1.25rem;
}

.next-card h3 {
  margin: .2rem 0 1rem;
}

.mini-date,.date-badge {
  width: 54px;
  min-width: 54px;
  padding: .5rem .3rem;
  border-radius: 13px;
  background: var(--ea-soft);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ea-primary);
  font-weight: 900;
  line-height: 1.1;
}

.date-badge small,.mini-date small {
  font-size: .65rem;
  text-transform: uppercase;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.stat-card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: var(--ea-shadow-soft);
}

.stat-card strong {
  display: block;
  font-size: 1.5rem;
  letter-spacing: -.04em;
}

.stat-card span {
  color: var(--ea-muted);
  font-size: .85rem;
}

/* Tables / cards */
.responsive-table-card {
  overflow: hidden;
}

.ea-table {
  width: 100%;
  border-collapse: collapse;
}

.ea-table th,.ea-table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--ea-border);
  vertical-align: middle;
  text-align: left;
}

.ea-table th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ea-muted);
  font-weight: 850;
  background: color-mix(in srgb,var(--ea-bg) 60%,var(--ea-surface));
}

.ea-table tr:last-child td {
  border-bottom: 0;
}

.table-title {
  font-weight: 800;
}

.table-action {
  white-space: nowrap;
}

.filter-bar {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.filter-bar>* {
  flex: 1 1 160px;
}

.filter-bar button {
  flex: 0 0 auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1rem;
}

.group-card,.action-card {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.group-card h3,.action-card h3 {
  margin: 0;
}

.group-icon,.action-icon,.status-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--ea-soft);
  color: var(--ea-primary);
}

.arrow-link {
  color: var(--ea-primary);
  font-weight: 800;
  margin-top: auto;
}

.empty-state {
  border: 1px dashed var(--ea-border);
  border-radius: var(--ea-radius);
  padding: clamp(28px,5vw,60px);
  text-align: center;
  background: color-mix(in srgb,var(--ea-surface) 70%,transparent);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr);
  gap: 1rem;
}

.detail-list {
  display: grid;
  gap: .8rem;
}

.panel-card {
  padding: 1.2rem;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.panel-head h2,.panel-head h3 {
  margin: 0;
}

.invite-banner {
  padding: 1rem;
  border-radius: 14px;
  background: var(--ea-soft);
  border: 1px solid color-mix(in srgb,var(--ea-primary) 16%,var(--ea-border));
  margin-bottom: 1rem;
}

.danger-zone {
  border-color: color-mix(in srgb,var(--ea-danger) 28%,var(--ea-border));
}

.danger-actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}

/* Preferences */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .7rem;
}

.theme-option {
  position: relative;
}

.theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-preview {
  border: 2px solid var(--ea-border);
  border-radius: 15px;
  padding: .75rem;
  min-height: 84px;
  display: grid;
  gap: .45rem;
  cursor: pointer;
  transition: .18s;
}

.theme-option input:checked+.theme-preview {
  border-color: var(--ea-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--ea-primary) 10%,transparent);
}

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-photo-row .avatar {
  width: 74px;
  height: 74px;
  font-size: 1.1rem;
}

/* Notifications */
.notification-card {
  align-items: flex-start;
}

.notification-card>div {
  min-width: 0;
}

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

.notification-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ea-primary);
  margin-top: .45rem;
  flex: 0 0 auto;
}

.notification-card.read .notification-dot {
  background: var(--ea-border);
}

/* Auth */
.auth-body {
  min-height: 100vh;
  background: var(--ea-bg);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(380px,1.25fr) minmax(430px,.75fr);
}

.auth-visual {
  position: relative;
  padding: clamp(28px,4vw,60px);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  overflow: hidden;
}

.auth-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg,rgba(8,20,44,.9),rgba(19,72,125,.65));
}

.auth-visual-fallback {
  background: radial-gradient(circle at 20% 20%,#2767d8 0,transparent 36%),radial-gradient(circle at 75% 25%,#11a7ca 0,transparent 35%),linear-gradient(135deg,#0d2447,#173f68 55%,#0e6478);
}

.auth-brand {
  display: flex;
  gap: .75rem;
  align-items: center;
  color: #fff;
}

.auth-brand>div {
  display: grid;
}

.auth-brand small {
  opacity: .75;
}

.auth-visual-copy {
  max-width: 680px;
  color: #fff;
}

.auth-visual-copy span {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  opacity: .8;
}

.auth-visual-copy h2 {
  font-size: clamp(2.3rem,5vw,5.5rem);
  line-height: .96;
  letter-spacing: -.055em;
  margin: .6rem 0 1rem;
}

.auth-visual-copy p {
  font-size: clamp(1rem,1.6vw,1.25rem);
  max-width: 560px;
  opacity: .86;
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: clamp(22px,4vw,60px);
  background: var(--ea-surface);
}

.auth-card {
  width: min(100%,460px);
  display: grid;
  gap: 1rem;
}

.auth-card h1 {
  font-size: clamp(1.8rem,3vw,2.4rem);
  letter-spacing: -.04em;
  margin: 0;
}

.auth-divider {
  height: 1px;
  background: var(--ea-border);
  margin: .3rem 0;
}

.form-foot {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .9rem;
}

.manual-key {
  display: block;
  padding: .8rem;
  background: var(--ea-bg);
  border-radius: 12px;
  word-break: break-all;
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
}

.qr-code {
  width: 210px;
  max-width: 100%;
  margin: auto;
  border-radius: 16px;
  background: #fff;
  padding: 10px;
}

/* Public website */
.public-body {
  background: #fff;
  color: #132035;
}

.public-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 78px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 1.4rem;
  padding: 0 max(20px,calc((100vw - 1200px)/2));
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(20,32,51,.08);
}

.public-header nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  min-width: 0;
}

.public-header nav a {
  font-weight: 700;
  color: #46536a;
  white-space: nowrap;
}

.public-header nav a:hover {
  color: #2563eb;
}

.public-main {
  min-height: 65vh;
}

.public-hero {
  width: min(1200px,calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(70px,10vw,140px) 0 clamp(56px,8vw,110px);
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr);
  gap: clamp(30px,6vw,80px);
  align-items: center;
}

.public-hero-copy h1,.landing-hero h1 {
  font-size: clamp(2.7rem,6vw,5.8rem);
  line-height: .95;
  letter-spacing: -.06em;
  margin: .65rem 0 1.2rem;
  max-width: 980px;
}

.public-hero-copy>p,.landing-hero>p {
  font-size: clamp(1.08rem,1.9vw,1.35rem);
  line-height: 1.6;
  color: #5c687d;
  max-width: 720px;
}

.hero-product-card {
  min-height: 420px;
  border-radius: 32px;
  padding: 28px;
  background: linear-gradient(145deg,#0f2b55,#176d8d);
  box-shadow: 0 28px 70px rgba(20,61,105,.22);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.hero-product-card::before,.hero-product-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
}

.hero-product-card::before {
  width: 260px;
  height: 260px;
  background: rgba(70,165,255,.28);
  right: -50px;
  top: -40px;
}

.hero-product-card::after {
  width: 190px;
  height: 190px;
  background: rgba(49,214,198,.18);
  left: -40px;
  bottom: 80px;
}

.hero-product-card>* {
  position: relative;
}

.public-section {
  padding: clamp(58px,8vw,110px) max(20px,calc((100vw - 1200px)/2));
}

.public-section:nth-child(even) {
  background: #f7f9fc;
}

.public-section h2 {
  font-size: clamp(2rem,4vw,3.6rem);
  letter-spacing: -.05em;
  line-height: 1.05;
  max-width: 850px;
  margin: .5rem 0 1.2rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.feature-grid article {
  padding: clamp(20px,3vw,32px);
  border: 1px solid rgba(20,32,51,.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(25,42,70,.06);
}

.feature-grid h3 {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
}

.feature-grid p {
  margin: 0;
  color: #617086;
}

.public-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 45px max(20px,calc((100vw - 1200px)/2));
  background: #111b2d;
  color: #fff;
}

.public-footer p {
  color: #99a6ba;
}

.public-footer>div:last-child {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.public-cta {
  padding: clamp(26px,5vw,50px);
  border-radius: 30px;
  background: linear-gradient(135deg,#12284a,#1b6b87);
  color: #fff;
  margin: 2rem 0;
}

.public-cta h2 {
  margin: 0 0 .8rem;
}

.public-cta p {
  color: rgba(255,255,255,.82);
}

.landing-hero,.landing-article,.faq-section,.content-page,.narrow-public {
  width: min(920px,calc(100% - 40px));
  margin: 0 auto;
}

.landing-hero {
  padding: clamp(65px,9vw,120px) 0 35px;
}

.landing-article,.content-page,.narrow-public {
  padding: 20px 0 70px;
}

.public-richtext {
  font-size: 1.06rem;
  line-height: 1.8;
}

.public-richtext h2 {
  font-size: clamp(1.7rem,3.5vw,2.7rem);
  letter-spacing: -.04em;
  margin: 2.4rem 0 .8rem;
}

.public-richtext h3 {
  margin: 1.8rem 0 .55rem;
}

.public-richtext p,.public-richtext li {
  color: #4d5a6f;
}

.faq-section {
  padding: 10px 0 80px;
}

.faq-list {
  display: grid;
  gap: .7rem;
}

.faq-list details {
  border: 1px solid rgba(20,32,51,.1);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  background: #fff;
}

.faq-list summary {
  font-weight: 800;
  cursor: pointer;
}

.share-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 0;
}

.share-buttons a,.share-buttons button {
  border: 1px solid rgba(20,32,51,.1);
  border-radius: 12px;
  padding: .55rem .8rem;
  background: #fff;
  font-weight: 700;
}

.status-page {
  min-height: 55vh;
  display: grid;
  place-items: center;
  padding: 60px 20px;
}

.status-card {
  max-width: 620px;
  padding: clamp(24px,5vw,46px);
  text-align: center;
}

.status-icon {
  margin: 0 auto 1rem;
  font-size: 1.3rem;
}

.status-card h1 {
  font-size: clamp(1.8rem,4vw,3rem);
  letter-spacing: -.045em;
}

.status-card p {
  color: var(--ea-muted);
}

/* Admin */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1rem;
}

.admin-section {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

.metric {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: 16px;
  padding: 1rem;
}

.metric strong {
  display: block;
  font-size: 1.65rem;
}

.metric span {
  color: var(--ea-muted);
  font-size: .85rem;
}

.status-ok {
  color: var(--ea-success);
}

.status-warn {
  color: var(--ea-warning);
}

.status-danger {
  color: var(--ea-danger);
}

.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.flat {
  box-shadow: none;
}

.full {
  width: 100%;
}

/* Dialog / confirmation */
.ea-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(520px,calc(100vw - 28px));
  width: 100%;
}

.ea-dialog::backdrop {
  background: rgba(8,15,28,.54);
  backdrop-filter: blur(4px);
}

.dialog-card {
  background: var(--ea-surface);
  border: 1px solid var(--ea-border);
  border-radius: 22px;
  padding: 1.4rem;
  box-shadow: var(--ea-shadow);
  color: var(--ea-text);
}

.dialog-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff1f0;
  color: var(--ea-danger);
  font-weight: 900;
}

.dialog-card h3 {
  margin: .8rem 0 .35rem;
}

.dialog-card p {
  color: var(--ea-muted);
}

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

/* Responsive and zoom-safe */
@media (max-width:1120px) {
  .app-header {
    grid-template-columns: auto 1fr auto;
    padding: 0 18px;
  }

  .app-nav {
    justify-content: flex-start;
    overflow: auto;
    scrollbar-width: none;
  }

  .app-nav::-webkit-scrollbar {
    display: none;
  }

  .account-name {
    display: none;
  }

  .card-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .theme-picker {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .admin-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .public-header {
    padding: 0 20px;
  }

  .public-header nav {
    display: none;
  }

}

@media (max-width:860px) {
  .app-header {
    grid-template-columns: auto minmax(0,1fr) auto;
  }

  .app-brand {
    justify-self: start;
  }

  .brand-copy {
    display: none;
  }

  .mobile-menu-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 1px solid var(--ea-border);
    border-radius: 12px;
    background: var(--ea-surface);
  }

  .mobile-menu-button span {
    width: 18px;
    height: 2px;
    background: var(--ea-text);
    border-radius: 2px;
  }

  .app-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(86vw,330px);
    background: var(--ea-surface);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 14px;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: var(--ea-shadow);
    overflow-y: auto;
  }

  .app-nav.open {
    transform: translateX(0);
  }

  .app-nav>a {
    padding: .85rem .9rem;
  }

  .mobile-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .5rem 1rem;
  }

  .mobile-nav-top button {
    border: 0;
    background: transparent;
    font-size: 1.6rem;
  }

  .mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7,14,25,.4);
    z-index: 90;
  }

  .mobile-backdrop.open {
    display: block;
  }

  .app-main {
    width: min(100% - 28px,var(--ea-page));
    padding-top: 22px;
  }

  .dashboard-grid,.detail-grid,.public-hero {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .public-hero {
    padding-top: 70px;
  }

  .hero-product-card {
    min-height: 320px;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    display: none;
  }

  .auth-panel {
    min-height: 100vh;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width:620px) {
  :root {
    --ea-radius: 17px;
  }

  .app-header {
    height: 68px;
    padding: 0 12px;
    gap: 8px;
  }

  .app-brand .brand-mark {
    width: 36px;
    height: 36px;
  }

  .app-actions {
    gap: .3rem;
  }

  .icon-button {
    width: 44px;
    height: 44px;
  }

  .account-menu summary {
    padding: .1rem;
  }

  .chevron {
    display: none;
  }

  .app-main {
    width: calc(100% - 24px);
    padding-bottom: 42px;
  }

  .page-head {
    align-items: stretch;
  }

  .page-actions>* {
    flex: 1 1 auto;
  }

  .form-grid,.check-grid,.card-grid,.theme-picker,.admin-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .form-actions>* {
    flex: 1 1 140px;
  }

  .filter-bar>* {
    flex: 1 1 100%;
  }

  .filter-bar button {
    flex: 1 1 100%;
  }

  .responsive-table-card {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .ea-table,.ea-table thead,.ea-table tbody,.ea-table tr,.ea-table th,.ea-table td {
    display: block;
    width: 100%;
  }

  .ea-table thead {
    display: none;
  }

  .ea-table tr {
    background: var(--ea-surface);
    border: 1px solid var(--ea-border);
    border-radius: 15px;
    margin-bottom: .7rem;
    padding: .65rem;
    box-shadow: var(--ea-shadow-soft);
  }

  .ea-table td {
    border: 0;
    padding: .42rem .55rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
  }

  .ea-table td::before {
    content: attr(data-label);
    color: var(--ea-muted);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    max-width: 42%;
  }

  .ea-table td:empty {
    display: none;
  }

  .public-header {
    min-height: 68px;
    padding: 0 14px;
    gap: .6rem;
  }

  .public-brand strong {
    display: none;
  }

  .public-actions .public-login {
    display: none;
  }

  .public-actions .btn-primary-ea {
    padding: .55rem .75rem;
    min-height: 38px;
    font-size: .86rem;
  }

  .public-hero,.landing-hero,.landing-article,.faq-section,.content-page,.narrow-public {
    width: calc(100% - 28px);
  }

  .public-hero-copy h1,.landing-hero h1 {
    font-size: clamp(2.4rem,13vw,4rem);
  }

  .public-section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .public-footer {
    padding: 36px 18px;
  }

  .auth-panel {
    padding: 28px 18px;
  }

  .auth-card {
    width: 100%;
  }

  .hero-event,.next-event,.notification-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .profile-photo-row {
    align-items: flex-start;
  }

  .sticky-actions {
    position: sticky;
    bottom: 10px;
    background: color-mix(in srgb,var(--ea-surface) 94%,transparent);
    backdrop-filter: blur(12px);
    padding: .65rem;
    border: 1px solid var(--ea-border);
    border-radius: 14px;
    z-index: 20;
  }

  .sticky-actions>* {
    flex: 1 1 auto;
  }

}

@media (min-resolution:1.5dppx) {
  .app-header,.public-header {
    border-bottom-width: .5px;
  }

}

@media print {
  .app-header,.public-header,.public-footer,.page-actions,.form-actions,.share-strip,.mobile-menu-button,.icon-button,.account-menu {
    display: none !important;
  }

  .app-main,.public-main {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .panel-card,.form-card,.responsive-table-card {
    box-shadow: none;
    border-color: #ddd;
  }

  body {
    background: #fff;
    color: #000;
  }

}

/* Accessibility, reflow and browser-zoom hardening */
*,*::before,*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  overflow-wrap: anywhere;
}

img,svg,video,canvas {
  max-width: 100%;
  height: auto;
}

input,select,textarea,button {
  max-width: 100%;
  min-width: 0;
  font: inherit;
}

button,a,input,select,textarea,summary {
  touch-action: manipulation;
}

button,.btn-primary-ea,.btn-secondary-ea,.btn-danger-ea,.icon-button,.mobile-menu-button {
  min-height: 44px;
}

.app-header>* ,.app-actions,.app-nav,.page-head>* ,.panel-head>* ,.form-grid>* ,.card-grid>* ,.dashboard-grid>* ,.detail-grid>* ,.settings-grid>* {
  min-width: 0;
}

.page-actions,.form-actions,.dialog-actions,.filter-bar,.share-buttons,.app-actions,.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.page-actions>a,.page-actions>button,.form-actions>a,.form-actions>button,.share-buttons>a,.share-buttons>button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.ea-table td,.ea-table th {
  overflow-wrap: anywhere;
  word-break: normal;
}

.account-popover {
  max-width: min(360px,calc(100vw - 24px));
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 8px;
  z-index: 10000;
  transform: translateY(-180%);
  padding: .7rem 1rem;
  border-radius: 10px;
  background: var(--ea-text,#152033);
  color: var(--ea-surface,#fff);
  font-weight: 800;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--ea-accent,#0ea5e9);
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--ea-primary) 70%,#fff);
  outline-offset: 3px;
  border-radius: 6px;
}

[tabindex="-1"]:focus {
  outline: none;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  .reduce-motion *, .reduce-motion *::before,.reduce-motion *::after,* {
    scroll-behavior: auto;
  }

  .reduce-motion *,.reduce-motion *::before,.reduce-motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

}

@media (forced-colors:active) {
  .btn-primary-ea,.btn-secondary-ea,.btn-danger-ea,.panel-card,.form-card,.action-card,.metric,.account-popover {
    forced-color-adjust: auto;
    border: 1px solid ButtonText;
  }

  .brand-mark,.avatar {
    border: 1px solid ButtonText;
  }

}

@media (max-width:480px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .page-actions>* {
    flex: 1 1 100%;
  }

  .dialog-actions>* {
    flex: 1 1 100%;
  }

}

@media (max-width:360px) {
  .app-main {
    width: calc(100% - 16px);
  }

  .app-header {
    padding-inline: 8px;
  }

  .public-actions .btn-primary-ea {
    font-size: .78rem;
    padding-inline: .55rem;
  }

  .auth-panel {
    padding-inline: 12px;
  }

}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
}

.help-grid .panel-card {
  position: relative;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb,var(--ea-primary) 12%,var(--ea-surface));
  color: var(--ea-primary);
  font-weight: 900;
}

.onboarding-card {
  margin: 0 0 1.2rem;
  padding: clamp(20px,4vw,34px);
  border-radius: var(--ea-radius);
  border: 1px solid color-mix(in srgb,var(--ea-primary) 22%,var(--ea-border));
  background: linear-gradient(135deg,color-mix(in srgb,var(--ea-primary) 8%,var(--ea-surface)),var(--ea-surface));
  box-shadow: var(--ea-shadow-soft);
}

.onboarding-card h2 {
  margin: .4rem 0;
}

.onboarding-card p {
  max-width: 720px;
  color: var(--ea-muted);
}

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1rem;
}

.onboarding-actions form {
  margin: 0;
}

@media (max-width:720px) {
  .help-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-actions>* {
    flex: 1 1 100%;
  }

  .onboarding-actions form button {
    width: 100%;
  }

}

/* ===== Event Alert 2026 premium visual pass ===== */
:root {
  --ea-page: 1320px;
  --ea-radius: 22px;
  --ea-radius-sm: 14px;
  --ea-shadow: 0 24px 70px rgba(15,35,65,.10);
  --ea-shadow-soft: 0 10px 34px rgba(15,35,65,.055);
}

body {
  letter-spacing: -.006em;
}

.app-main {
  padding-top: 34px;
}

.page-head {
  margin-bottom: 24px;
  align-items: center;
}

.page-head>div:first-child {
  max-width: 820px;
}

.page-head h1 {
  font-size: clamp(1.9rem,3vw,2.75rem);
  font-weight: 800;
  letter-spacing: -.045em;
}

.page-head p {
  margin: .55rem 0 0;
  color: var(--ea-muted);
  max-width: 760px;
}

.eyebrow {
  letter-spacing: .14em;
  font-size: .7rem;
}

/* Buttons stay compact: no accidental full-width bars. */
.btn-primary-ea,.btn-secondary-ea,.btn-danger-ea,.public-login {
  width: auto;
  min-width: 0;
  min-height: 42px;
  padding: .68rem 1.05rem;
  border-radius: 11px;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: .92rem;
  font-weight: 750;
}

.btn-primary-ea {
  box-shadow: 0 8px 22px color-mix(in srgb,var(--ea-primary) 19%,transparent);
}

.page-actions,.form-actions,.dialog-actions,.share-buttons,.export-actions {
  gap: .55rem;
}

.page-actions>*,.form-actions>*,.dialog-actions>*,.share-buttons>*,.export-actions>* {
  flex: 0 0 auto !important;
  width: auto !important;
}

.form-actions {
  margin-top: .7rem;
}

/* Form hierarchy */
.form-card,.panel-card,.preferences-form,.profile-settings,.danger-zone {
  border-color: color-mix(in srgb,var(--ea-border) 82%,transparent);
  box-shadow: var(--ea-shadow-soft);
}

.wide-form {
  max-width: 1050px;
}

.event-editor,.person-editor {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.form-section {
  padding: 28px 30px;
  border-bottom: 1px solid var(--ea-border);
  display: grid;
  gap: 18px;
}

.form-section:last-of-type {
  border-bottom: 0;
}

.form-section-head {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 14px;
  align-items: start;
}

.form-section-number {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,color-mix(in srgb,var(--ea-primary) 12%,var(--ea-surface)),color-mix(in srgb,var(--ea-accent) 9%,var(--ea-surface)));
  border: 1px solid color-mix(in srgb,var(--ea-primary) 15%,var(--ea-border));
  color: var(--ea-primary);
  font-size: .72rem;
  font-weight: 900;
}

.form-section-head h2 {
  font-size: 1.28rem;
  letter-spacing: -.025em;
  margin: .1rem 0 .2rem;
}

.form-section-head p {
  margin: 0;
  color: var(--ea-muted);
  font-size: .92rem;
  max-width: 720px;
}

.section-kicker {
  display: block;
  color: var(--ea-primary);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.event-editor-actions {
  padding: 20px 30px;
  margin: 0;
  background: color-mix(in srgb,var(--ea-bg) 55%,var(--ea-surface));
  border-top: 1px solid var(--ea-border);
}

.field-help {
  display: block;
  color: var(--ea-muted);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.45;
  margin-top: .1rem;
}

.field-label {
  font-size: .95rem;
  font-weight: 650;
}

input,select,textarea {
  border-radius: 11px;
  border-color: color-mix(in srgb,var(--ea-border) 95%,transparent);
  background: color-mix(in srgb,var(--ea-surface) 98%,var(--ea-bg));
  box-shadow: 0 1px 1px rgba(15,23,42,.015);
}

input:hover,select:hover,textarea:hover {
  border-color: color-mix(in srgb,var(--ea-primary) 25%,var(--ea-border));
}

.date-context,.premium-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb,var(--ea-primary) 16%,var(--ea-border));
  border-radius: 14px;
  background: linear-gradient(135deg,color-mix(in srgb,var(--ea-primary) 6%,var(--ea-surface)),var(--ea-surface));
}

.date-context-icon,.info-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--ea-primary);
  color: #fff;
  font-weight: 900;
}

.date-context p {
  margin: .2rem 0 0;
  color: var(--ea-muted);
  font-size: .88rem;
}

.choice-card {
  padding: 12px 13px;
  border: 1px solid var(--ea-border);
  border-radius: 12px;
  background: var(--ea-surface);
  transition: .18s ease;
}

.choice-card:hover {
  border-color: color-mix(in srgb,var(--ea-primary) 28%,var(--ea-border));
  background: var(--ea-soft);
}

.choice-card span {
  display: grid;
  gap: 2px;
}

.choice-card small {
  color: var(--ea-muted);
  font-weight: 500;
}

.text-link {
  color: var(--ea-primary);
  font-weight: 750;
  font-size: .9rem;
}

/* Reminder input: user enters a normal number of days, never an ambiguous “0,7 days”. */
.reminder-control {
  display: grid;
  gap: .55rem;
}

.number-suffix-control {
  display: grid;
  grid-template-columns: minmax(110px,160px) auto;
  align-items: center;
  gap: 10px;
}

.number-suffix-control input {
  font-weight: 800;
  font-size: 1.02rem;
}

.number-suffix-control span {
  color: var(--ea-muted);
  font-size: .9rem;
  font-weight: 650;
}

.compact-check {
  margin-top: .2rem;
  font-size: .9rem;
}

.compact-check input {
  width: 18px;
  height: 18px;
}

/* Import/export */
.action-card-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.action-card {
  padding: 24px;
  align-items: flex-start;
  min-height: 220px;
}

.action-card h2 {
  font-size: 1.35rem;
  letter-spacing: -.025em;
  margin: .1rem 0 0;
}

.action-card p {
  color: var(--ea-muted);
  margin: 0;
  max-width: 620px;
}

.action-card .btn-primary-ea {
  margin-top: auto;
}

.action-card form {
  display: grid;
  gap: 12px;
  width: 100%;
  align-items: start;
}

.action-card input[type=file] {
  padding: .62rem;
  background: var(--ea-bg);
}

.export-filter {
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: end;
}

.export-actions {
  align-self: end;
  justify-content: flex-start;
  margin: 0;
}

.panel-card.admin-section {
  padding: 24px;
}

/* Account request/status */
.narrow-public {
  max-width: 760px;
  padding: 72px 0 92px;
}

.narrow-public>h1 {
  font-size: clamp(2.15rem,5vw,3.6rem);
  letter-spacing: -.055em;
  margin: .5rem 0 .7rem;
}

.narrow-public>p {
  font-size: 1.05rem;
  color: #64748b;
  max-width: 620px;
}

.premium-form {
  margin-top: 28px;
  display: grid;
  gap: 17px;
  padding: 28px;
  border: 1px solid rgba(20,32,51,.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(22,42,72,.08);
}

.premium-form .btn-primary-ea {
  justify-self: start;
}

.status-page {
  width: min(720px,calc(100% - 40px));
  min-height: 62vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.status-page .status-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #ecfdf3;
  color: #067647;
  display: grid;
  place-items: center;
  margin: 0 0 10px;
  font-weight: 900;
}

.status-page h1 {
  font-size: clamp(2rem,5vw,3.4rem);
  letter-spacing: -.05em;
  margin: 0;
}

.status-page p {
  max-width: 620px;
  color: #64748b;
  margin: 0 0 16px;
}

/* Premium public homepage */
.public-body {
  background: #fff;
  color: #111c2f;
}

.public-header {
  min-height: 74px;
  border-bottom-color: rgba(15,35,65,.065);
  box-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.premium-home-hero {
  position: relative;
  width: min(1260px,calc(100% - 48px));
  grid-template-columns: minmax(0,1.02fr) minmax(460px,.98fr);
  padding: clamp(78px,8vw,124px) 0 clamp(72px,8vw,112px);
  gap: clamp(42px,6vw,82px);
  isolation: isolate;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  z-index: -1;
  pointer-events: none;
}

.hero-glow-one {
  width: 520px;
  height: 520px;
  right: -200px;
  top: 20px;
  background: radial-gradient(circle,rgba(14,165,233,.105),rgba(14,165,233,0) 68%);
}

.hero-glow-two {
  width: 440px;
  height: 440px;
  left: -260px;
  top: 160px;
  background: radial-gradient(circle,rgba(37,99,235,.07),rgba(37,99,235,0) 70%);
}

.hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 999px;
  background: #f7faff;
  color: #496078;
  font-size: .78rem;
  font-weight: 750;
  margin-bottom: 18px;
}

.proof-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.public-hero-copy h1 {
  font-size: clamp(3.2rem,6vw,6rem);
  line-height: .92;
  letter-spacing: -.072em;
  margin: .6rem 0 1.35rem;
  font-weight: 825;
}

.hero-intro {
  font-size: clamp(1.05rem,1.5vw,1.25rem);
  line-height: 1.68;
  color: #5d6b80;
  max-width: 680px;
}

.hero-intro p {
  margin: 0;
}

.hero-actions {
  margin-top: 24px;
}

.hero-primary {
  padding: .78rem 1.2rem;
}

.hero-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 22px;
  color: #68758a;
  font-size: .79rem;
  font-weight: 650;
}

.hero-assurance span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-assurance b {
  color: #16a34a;
}

.hero-product-stage {
  position: relative;
  padding: 26px 18px 28px;
}

.premium-product-card {
  min-height: 0;
  padding: 0;
  border-radius: 28px;
  background: #fff;
  color: #162033;
  box-shadow: 0 38px 100px rgba(24,55,93,.18),0 0 0 1px rgba(29,61,101,.08);
  overflow: hidden;
}

.premium-product-card::before,.premium-product-card::after {
  display: none;
}

.product-window-bar {
  height: 52px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #edf1f6;
  background: #fbfcfe;
  color: #8a96a8;
  font-size: .72rem;
}

.product-window-bar>div {
  display: flex;
  gap: 6px;
}

.product-window-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dbe2eb;
}

.product-window-bar b {
  justify-self: end;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#2563eb,#0ea5e9);
  color: #fff;
  font-size: .65rem;
}

.product-screen {
  padding: 24px;
}

.product-screen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.product-screen-head>div {
  display: grid;
}

.product-screen-head small {
  color: #7b899d;
  font-size: .7rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.product-screen-head strong {
  font-size: 1.28rem;
  letter-spacing: -.025em;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #067647;
  font-size: .68rem;
  font-weight: 800;
}

.live-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

.hero-demo-content {
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg,#f4f8ff,#f8fbfd);
  border: 1px solid #e7edf5;
  color: #526177;
  font-size: .88rem;
}

.hero-demo-content p {
  margin: 0 0 12px;
}

.hero-demo-content p:last-child {
  margin: 0;
}

.hero-demo-content strong {
  color: #152238;
}

.product-mini-grid {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}

.product-mini-grid>div {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid #edf1f5;
  border-radius: 13px;
}

.product-mini-grid p {
  display: grid;
  margin: 0;
}

.product-mini-grid small {
  color: #8490a2;
  font-size: .65rem;
}

.product-mini-grid strong {
  font-size: .83rem;
}

.product-mini-grid>b {
  color: #a9b3c1;
}

.mini-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: .66rem;
  font-weight: 900;
  background: #eff6ff;
  color: #2563eb;
}

.mini-icon.ahead {
  background: #eefcf9;
  color: #0f8a71;
}

.mini-icon.private {
  background: #f4f1ff;
  color: #7657d3;
}

.floating-reminder-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(25,55,90,.08);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(22,48,82,.14);
  font-size: .72rem;
}

.floating-reminder-card>span {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 900;
}

.floating-reminder-card>div {
  display: grid;
}

.floating-reminder-card small {
  color: #8a96a8;
}

.floating-card-one {
  left: -12px;
  top: 86px;
}

.floating-card-two {
  right: -15px;
  bottom: 4px;
}

.premium-benefits {
  padding-top: 90px;
  padding-bottom: 96px;
  background: #f7f9fc !important;
}

.section-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
}

.section-heading-row>p {
  max-width: 450px;
  color: #66758a;
  margin: 0 0 1.2rem;
}

.premium-benefits .feature-grid article {
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(25,42,70,.045);
  transition: transform .2s ease,box-shadow .2s ease;
}

.premium-benefits .feature-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 46px rgba(25,42,70,.08);
}

.premium-story-band {
  width: min(1260px,calc(100% - 48px));
  margin: 0 auto;
  padding: 105px 0;
  display: grid;
  grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr);
  gap: 70px;
  align-items: start;
}

.story-copy h2,.privacy-copy h2 {
  font-size: clamp(2.3rem,4vw,4rem);
  line-height: 1;
  letter-spacing: -.055em;
  margin: .55rem 0 1.15rem;
}

.story-copy .public-richtext {
  color: #5c6b80;
}

.story-link {
  display: inline-flex;
  gap: 8px;
  margin-top: 18px;
  color: #2563eb;
  font-weight: 800;
}

.story-steps {
  display: grid;
  gap: 12px;
}

.story-steps article {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 16px;
  padding: 19px;
  border: 1px solid #e7edf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(18,42,70,.035);
}

.story-steps article>span {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 900;
}

.story-steps article>div {
  display: grid;
  gap: 3px;
}

.story-steps small {
  color: #8794a6;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}

.story-steps strong {
  font-size: 1rem;
}

.story-steps p {
  margin: .2rem 0 0;
  color: #68768a;
  font-size: .88rem;
}

.privacy-showcase {
  width: min(1260px,calc(100% - 48px));
  margin: 0 auto 90px;
  padding: clamp(40px,6vw,72px);
  border-radius: 34px;
  background: linear-gradient(135deg,#0e2342,#123f64 62%,#0d6174);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(320px,.85fr) minmax(0,1.15fr);
  gap: 70px;
  align-items: center;
  overflow: hidden;
}

.privacy-copy .eyebrow {
  color: #7dd3fc;
}

.privacy-copy .public-richtext,.privacy-copy .public-richtext p {
  color: rgba(255,255,255,.75);
}

.privacy-points {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.privacy-points span {
  display: flex;
  gap: 8px;
  color: rgba(255,255,255,.88);
  font-size: .88rem;
}

.privacy-points b {
  color: #7ee7cc;
}

.privacy-visual {
  min-height: 330px;
  position: relative;
  display: grid;
  place-items: center;
}

.privacy-shield {
  width: 120px;
  height: 120px;
  border-radius: 36px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 60px rgba(0,0,0,.15);
  backdrop-filter: blur(15px);
}

.privacy-shield span {
  width: 66px;
  height: 66px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #0f6d78;
  font-size: 1.5rem;
  font-weight: 900;
}

.privacy-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}

.orbit-one {
  width: 230px;
  height: 230px;
}

.orbit-two {
  width: 315px;
  height: 315px;
}

.privacy-chip {
  position: absolute;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(12px);
  font-size: .68rem;
  color: rgba(255,255,255,.9);
}

.chip-one {
  top: 28px;
  left: 8px;
}

.chip-two {
  right: 4px;
  top: 115px;
}

.chip-three {
  bottom: 28px;
  left: 30px;
}

.home-cta-wrap {
  padding: 0 max(24px,calc((100vw - 1260px)/2)) 56px;
}

.premium-public-cta {
  margin: 0;
  padding: clamp(34px,5vw,58px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-radius: 30px;
}

.premium-public-cta h2 {
  font-size: clamp(2rem,4vw,3.5rem);
  letter-spacing: -.05em;
}

.premium-public-cta>div:first-child {
  max-width: 760px;
}

.dark-secondary {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

.home-share-strip {
  width: min(1260px,calc(100% - 48px));
  margin: 0 auto;
  padding: 32px 0 70px;
}

.home-share-strip h2 {
  margin: .25rem 0;
  font-size: 1.45rem;
  letter-spacing: -.025em;
}

.home-share-strip p {
  margin: 0;
  color: #6d798a;
}

.home-share-strip .share-buttons a,.home-share-strip .share-buttons button {
  font-size: .85rem;
  padding: .55rem .8rem;
}

[data-reveal] {
  animation: ea-rise .48s ease both;
}

@keyframes ea-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }

}

@media (max-width:1000px) {
  .premium-home-hero {
    grid-template-columns: 1fr;
    padding-top: 68px;
  }

  .hero-product-stage {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
  }

  .premium-story-band {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .privacy-showcase {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .privacy-visual {
    min-height: 280px;
  }

  .section-heading-row {
    display: block;
  }

  .export-filter {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}

@media (max-width:720px) {
  .form-section {
    padding: 22px 18px;
  }

  .event-editor-actions {
    padding: 16px 18px;
  }

  .form-section-head {
    grid-template-columns: 34px minmax(0,1fr);
    gap: 11px;
  }

  .form-section-number {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .action-card-grid {
    grid-template-columns: 1fr;
  }

  .action-card {
    min-height: 0;
  }

  .export-filter {
    grid-template-columns: 1fr;
  }

  .premium-home-hero,.premium-story-band,.privacy-showcase,.home-share-strip {
    width: calc(100% - 28px);
  }

  .public-hero-copy h1 {
    font-size: clamp(2.85rem,14vw,4.4rem);
  }

  .hero-product-stage {
    padding: 10px 0;
  }

  .floating-reminder-card {
    display: none;
  }

  .premium-story-band {
    padding: 72px 0;
  }

  .privacy-showcase {
    padding: 30px 22px;
    border-radius: 26px;
  }

  .premium-public-cta {
    display: block;
  }

  .premium-public-cta .hero-actions {
    margin-top: 24px;
  }

  .premium-form {
    padding: 20px;
    border-radius: 20px;
  }

  .narrow-public {
    width: calc(100% - 28px);
    padding: 50px 0 70px;
  }

  .page-actions>*,.form-actions>*,.dialog-actions>*,.share-buttons>* {
    flex: 0 1 auto !important;
    width: auto !important;
  }

  .page-actions,.form-actions {
    justify-content: flex-start;
  }

  .event-editor-actions {
    justify-content: flex-end;
  }

  .number-suffix-control {
    grid-template-columns: 120px auto;
  }

}

@media (max-width:440px) {
  .btn-primary-ea,.btn-secondary-ea,.btn-danger-ea {
    font-size: .88rem;
    padding: .64rem .86rem;
  }

  .event-editor-actions {
    justify-content: stretch;
  }

  .event-editor-actions>* {
    flex: 1 1 0 !important;
  }

  .public-header .btn-primary-ea {
    font-size: .79rem;
  }

  .hero-assurance {
    display: grid;
  }

  .product-screen {
    padding: 17px;
  }

  .product-window-bar {
    padding: 0 12px;
  }

  .privacy-visual {
    display: none;
  }

}

/* ===== Final UI tightening: compact actions, cleaner forms and reminder rows ===== */
.page-actions form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  width: auto !important;
  flex: 0 0 auto !important;
}

.page-actions form>button,.form-actions>button,.form-actions>a {
  width: auto !important;
  min-width: 0;
  align-self: center;
}

.btn-compact {
  min-height: 38px !important;
  padding: .55rem .78rem !important;
  font-size: .86rem !important;
  border-radius: 10px !important;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.action-card>.btn-primary-ea,.action-card>.btn-secondary-ea {
  align-self: flex-start;
  margin-top: auto;
  width: auto !important;
}

.action-card form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
}

.action-card form>.btn-primary-ea,.action-card form>.btn-secondary-ea {
  align-self: flex-start;
  width: auto !important;
  margin-top: 0;
}

.action-card input[type=file] {
  width: min(100%,640px);
  min-height: 46px;
  padding: 6px 8px;
  border-radius: 11px;
  background: var(--ea-surface);
}

.action-card input[type=file]::file-selector-button {
  border: 1px solid var(--ea-border);
  background: var(--ea-soft);
  color: var(--ea-text);
  border-radius: 8px;
  padding: .55rem .75rem;
  margin-right: .7rem;
  font-weight: 750;
  cursor: pointer;
}

.reminder-days-list {
  display: grid;
  gap: 8px;
  max-width: 420px;
}

.reminder-day-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.reminder-day-row .number-suffix-control {
  flex: 1 1 auto;
  grid-template-columns: minmax(90px,140px) auto;
}

.reminder-remove {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ea-border);
  border-radius: 10px;
  background: var(--ea-surface);
  color: var(--ea-muted);
  font-size: 1.15rem;
  line-height: 1;
}

.reminder-remove:hover {
  color: var(--ea-danger);
  border-color: #fecdca;
  background: #fff7f6;
}

.reminder-add {
  justify-self: start;
  margin-top: 2px;
}

.reminder-control .compact-check {
  margin-top: 4px;
}

.form-card.wide-form {
  width: min(100%,1050px);
}

.panel-card,.form-card {
  overflow: hidden;
}

.form-grid>label,.form-grid>div {
  min-width: 0;
}

.form-section input,.form-section select,.form-section textarea {
  max-width: 100%;
}

.people-check-grid,.action-choice-grid {
  align-items: stretch;
}

.choice-card {
  min-height: 54px;
  align-content: center;
}

/* Admin backup screen: actions remain normal-sized and the form reads as one clean card. */
form[action="/AdminBackups/instellingen"] {
  max-width: 1050px;
}

form[action="/AdminBackups/instellingen"] .form-actions {
  justify-content: flex-end;
}

/* Public forms and login should feel deliberate, never stretched. */
.premium-form>button,.auth-card button[type=submit] {
  justify-self: start;
  width: auto !important;
  min-width: 150px;
}

@media (max-width:720px) {
  .action-card {
    padding: 20px;
    min-height: 0;
  }

  .action-card>.btn-primary-ea,.action-card>.btn-secondary-ea,.action-card form>.btn-primary-ea,.action-card form>.btn-secondary-ea {
    align-self: flex-start;
    width: auto !important;
  }

  .reminder-days-list {
    max-width: 100%;
  }

  .reminder-day-row .number-suffix-control {
    grid-template-columns: minmax(82px,120px) auto;
  }

  form[action="/AdminBackups/instellingen"] .form-actions {
    justify-content: flex-start;
  }

}

@media (max-width:440px) {
  .premium-form>button,.auth-card button[type=submit] {
    width: 100% !important;
    justify-self: stretch;
  }

  .reminder-day-row {
    align-items: stretch;
  }

  .reminder-remove {
    margin-top: 4px;
  }

}

/* ========================================================================== */
/* Event Alert — Premium UI pass v11 */
/* Homepage, public navigation, zoom/reflow, cards and compact action polish */
/* ========================================================================== */
:root {
  --ea-premium-ink: #071326;
  --ea-premium-ink-2: #0b1c36;
  --ea-premium-blue: #2575ff;
  --ea-premium-cyan: #12b8ed;
  --ea-premium-mint: #4ce4c1;
  --ea-premium-line: rgba(108,150,205,.18);
}

/* Never expose the raw mobile controls on desktop. This fixes the grey boxes
   that were visible in the public header at desktop/browser zoom levels. */
.public-mobile-nav-head, .public-menu-button, .public-mobile-backdrop {
  display: none;
}

/* ---------------------------- Shared polish ---------------------------- */
.btn-primary-ea, .btn-secondary-ea, .btn-danger-ea, .public-login {
  width: max-content;
  max-width: 100%;
  min-height: 40px;
  padding: .62rem .95rem;
  border-radius: 11px;
  white-space: nowrap;
  font-weight: 760;
  letter-spacing: -.01em;
}

.page-actions, .form-actions, .dialog-actions, .share-buttons, .public-actions {
  align-items: center;
}

.page-actions>* , .form-actions>* , .dialog-actions>* , .share-buttons>* {
  flex: 0 0 auto !important;
  width: auto !important;
}

.panel-card, .form-card, .action-card, .group-card, .next-card, .share-card, .status-card {
  border-color: rgba(25,47,77,.085);
  box-shadow: 0 12px 38px rgba(18,43,75,.055);
}

.panel-card {
  padding: clamp(20px,2.1vw,28px);
}

.panel-head {
  margin-bottom: 18px;
}

.panel-head h2, .panel-head h3 {
  letter-spacing: -.035em;
}

/* Group/event lists were technically present but visually unfinished. */
.member-list>* {
  justify-content: flex-start;
  gap: 14px;
  min-height: 68px;
  padding: 12px 14px;
  border-radius: 15px;
}

.member-list>* > div {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.member-list>* > div strong {
  line-height: 1.25;
}

.member-list>* > div small, .pending-list small {
  color: var(--ea-muted);
  font-size: .78rem;
}

.member-list form, .pending-list form {
  margin-left: auto;
}

.event-list {
  gap: 10px;
}

.event-list>a {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) 30px;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 11px 13px;
  border: 1px solid rgba(25,47,77,.08);
  border-radius: 16px;
  background: linear-gradient(180deg,#fff,#fcfdff);
  transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.event-list>a:hover {
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.20);
  background: #fff;
  box-shadow: 0 12px 30px rgba(22,52,91,.075);
}

.event-list>a>div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.event-list>a strong {
  font-size: .98rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.event-list>a small {
  color: var(--ea-muted);
  font-size: .8rem;
}

.event-list>a>span:last-child {
  justify-self: end;
  color: #8fa0b5;
  font-size: 1.35rem;
  line-height: 1;
}

.event-list .mini-date {
  width: 52px;
  min-width: 52px;
  min-height: 52px;
  padding: 7px 5px;
  border-radius: 14px;
  background: linear-gradient(145deg,#edf5ff,#f5fbff);
  border: 1px solid rgba(37,99,235,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---------------------------- Public header ---------------------------- */
.public-body {
  background: #fff;
  color: #101b2e;
}

.public-header {
  min-height: 82px;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: clamp(18px,2.4vw,42px);
  padding-inline: max(24px,calc((100vw - 1320px)/2));
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(15,35,65,.065);
  box-shadow: 0 1px 0 rgba(255,255,255,.9),0 9px 30px rgba(20,43,76,.025);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}

.public-brand {
  position: relative;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.public-brand .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(145deg,#2d72ff 0%,#159ee9 62%,#26c8de 100%);
  box-shadow: 0 10px 26px rgba(37,99,235,.25),inset 0 1px 0 rgba(255,255,255,.35);
}

.public-brand strong {
  font-size: .98rem;
}

.public-header nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.public-header nav>a {
  position: relative;
  padding: .62rem .76rem;
  border-radius: 10px;
  color: #44536a;
  font-size: .88rem;
  font-weight: 720;
  transition: color .18s ease,background .18s ease;
}

.public-header nav>a:hover {
  color: #155eef;
  background: rgba(37,99,235,.055);
}

.public-actions {
  justify-self: end;
  flex-wrap: nowrap;
  gap: 8px;
}

.public-header .public-login {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.public-header .btn-primary-ea {
  min-height: 42px;
  padding: .66rem 1rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg,#2868f4,#16a6e4);
  box-shadow: 0 10px 24px rgba(37,99,235,.22),inset 0 1px 0 rgba(255,255,255,.26);
}

/* -------------------------- Premium homepage -------------------------- */
.premium-home-hero {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: min(820px,calc(100vh - 82px));
  margin: 0;
  padding: clamp(88px,8vw,132px) max(24px,calc((100vw - 1320px)/2)) clamp(92px,8vw,128px);
  grid-template-columns: minmax(0,.96fr) minmax(470px,1.04fr);
  gap: clamp(50px,6vw,92px);
  align-items: center;
  color: #fff;
  background: radial-gradient(900px 540px at 80% 18%,rgba(21,184,237,.18),transparent 62%),
    radial-gradient(720px 520px at 12% 86%,rgba(56,111,255,.17),transparent 66%),
    linear-gradient(128deg,#061123 0%,#091a33 43%,#0a2442 72%,#08324b 100%);
  isolation: isolate;
  overflow: hidden;
}

.premium-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .36;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom,rgba(0,0,0,.75),transparent 94%);
}

.premium-home-hero::after {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  right: -260px;
  bottom: -390px;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(96,211,255,.14);
  box-shadow: 0 0 0 90px rgba(96,211,255,.025),0 0 0 180px rgba(96,211,255,.018);
  pointer-events: none;
}

.premium-home-hero .hero-glow {
  filter: blur(1px);
  opacity: 1;
}

.premium-home-hero .hero-glow-one {
  width: 700px;
  height: 700px;
  right: -130px;
  top: -220px;
  background: radial-gradient(circle,rgba(27,185,240,.18),rgba(27,185,240,0) 66%);
}

.premium-home-hero .hero-glow-two {
  width: 580px;
  height: 580px;
  left: -260px;
  top: 220px;
  background: radial-gradient(circle,rgba(72,111,255,.18),rgba(72,111,255,0) 68%);
}

.premium-home-hero .public-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 720px;
}

.premium-home-hero .hero-proof {
  margin-bottom: 22px;
  padding: 8px 12px;
  color: rgba(238,248,255,.82);
  border: 1px solid rgba(154,211,255,.16);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.premium-home-hero .proof-dot {
  background: #48dfb6;
  box-shadow: 0 0 0 5px rgba(72,223,182,.10),0 0 22px rgba(72,223,182,.38);
}

.premium-home-hero .eyebrow {
  color: #70d9ff;
  font-size: .7rem;
  font-weight: 860;
  letter-spacing: .18em;
  text-shadow: 0 0 20px rgba(49,198,255,.18);
}

.premium-home-hero .public-hero-copy h1 {
  max-width: 760px;
  margin: .65rem 0 1.35rem;
  font-size: clamp(4rem,6.35vw,6.85rem);
  line-height: .885;
  letter-spacing: -.075em;
  font-weight: 840;
  color: #fff;
  background: linear-gradient(180deg,#fff 0%,#f7fbff 56%,#b9d8f2 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}

.premium-home-hero .hero-intro, .premium-home-hero .hero-intro p {
  max-width: 680px;
  color: rgba(223,236,249,.75);
  font-size: clamp(1.05rem,1.35vw,1.22rem);
  line-height: 1.7;
}

.premium-home-hero .hero-actions {
  margin-top: 30px;
  gap: 10px;
}

.premium-home-hero .hero-primary {
  min-height: 48px;
  padding: .78rem 1.18rem;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg,#2e6cff 0%,#159fe6 72%,#1cc6da 100%);
  box-shadow: 0 16px 34px rgba(20,125,235,.32),inset 0 1px 0 rgba(255,255,255,.28);
}

.premium-home-hero .hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(20,125,235,.40),inset 0 1px 0 rgba(255,255,255,.28);
}

.premium-home-hero .hero-secondary {
  min-height: 48px;
  padding: .78rem 1.1rem;
  color: #edf7ff;
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}

.premium-home-hero .hero-secondary:hover {
  color: #fff;
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.09);
}

.premium-home-hero .hero-assurance {
  gap: 10px 20px;
  margin-top: 25px;
  color: rgba(218,231,244,.66);
  font-size: .78rem;
}

.premium-home-hero .hero-assurance b {
  color: #4ce4c1;
}

.hero-product-stage {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 650px;
  justify-self: end;
  padding: 30px 20px 34px;
  perspective: 1300px;
}

.premium-product-card {
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(248,252,255,.98);
  box-shadow: 0 48px 120px rgba(0,12,31,.42),
    0 10px 35px rgba(27,139,223,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform: rotateY(-3deg) rotateX(1deg);
  transform-origin: center;
  overflow: hidden;
}

.premium-product-card::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(125deg,rgba(255,255,255,.38),transparent 22%,transparent 72%,rgba(69,176,255,.08));
}

.product-window-bar {
  height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(31,59,91,.08);
  background: rgba(250,252,255,.88);
  backdrop-filter: blur(14px);
}

.product-window-bar i {
  width: 9px;
  height: 9px;
  background: #d4deea;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.75);
}

.product-window-bar b {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(37,99,235,.23);
}

.product-screen {
  padding: 26px;
  background: linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

.product-screen-head {
  margin-bottom: 20px;
}

.product-screen-head strong {
  font-size: 1.38rem;
  color: #0e1d33;
}

.live-pill {
  background: #e9fbf2;
  box-shadow: inset 0 0 0 1px rgba(6,118,71,.045);
}

.hero-demo-content {
  padding: 19px;
  border-radius: 18px;
  border-color: rgba(65,107,156,.10);
  background: linear-gradient(135deg,#f2f7ff 0%,#f7fbff 52%,#f4fcfb 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.product-mini-grid {
  gap: 10px;
  margin-top: 14px;
}

.product-mini-grid>div {
  min-height: 62px;
  padding: 11px 12px;
  border-color: rgba(31,59,91,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 5px 16px rgba(24,57,94,.025);
}

.floating-reminder-card {
  z-index: 4;
  padding: 12px 14px;
  border: 1px solid rgba(188,220,245,.34);
  border-radius: 16px;
  background: rgba(252,254,255,.92);
  box-shadow: 0 20px 55px rgba(0,20,48,.22);
  backdrop-filter: blur(20px) saturate(150%);
}

.floating-card-one {
  left: -10px;
  top: 92px;
  animation: ea-float-a 5.8s ease-in-out infinite;
}

.floating-card-two {
  right: -10px;
  bottom: 8px;
  animation: ea-float-b 6.4s ease-in-out infinite;
}

@keyframes ea-float-a {
  0%,100% {
    transform: translate3d(0,0,0);
  }

  50% {
    transform: translate3d(0,-7px,0);
  }

}

@keyframes ea-float-b {
  0%,100% {
    transform: translate3d(0,0,0);
  }

  50% {
    transform: translate3d(0,6px,0);
  }

}

/* Benefits */
.premium-benefits {
  position: relative;
  padding-top: 112px;
  padding-bottom: 116px;
  background: radial-gradient(620px 300px at 6% 0%,rgba(37,99,235,.05),transparent 72%),
    linear-gradient(180deg,#f7faff,#fff) !important;
}

.premium-benefits .section-heading-row {
  max-width: 1320px;
  margin: 0 auto;
}

.premium-benefits .section-heading-row h2 {
  max-width: 760px;
}

.premium-benefits .feature-grid {
  gap: 18px;
  max-width: 1320px;
  margin: 42px auto 0;
}

.premium-benefits .feature-grid article {
  position: relative;
  min-height: 235px;
  padding: 34px 30px 30px;
  border: 1px solid rgba(31,59,91,.08);
  border-radius: 26px;
  background: linear-gradient(160deg,rgba(255,255,255,.98),rgba(248,251,255,.92));
  box-shadow: 0 18px 54px rgba(22,50,84,.065),inset 0 1px 0 rgba(255,255,255,.8);
  overflow: hidden;
}

.premium-benefits .feature-grid article::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 34px;
  border-radius: 15px;
  background: linear-gradient(145deg,#edf5ff,#eafcff);
  border: 1px solid rgba(37,99,235,.08);
  box-shadow: 0 8px 20px rgba(37,99,235,.07);
}

.premium-benefits .feature-grid article::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  top: -82px;
  right: -58px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(52,140,255,.10),transparent 68%);
}

.premium-benefits .feature-grid article:hover {
  transform: translateY(-5px);
  border-color: rgba(37,99,235,.14);
  box-shadow: 0 24px 65px rgba(22,50,84,.095);
}

.premium-benefits .feature-grid h3 {
  font-size: 1.35rem;
  letter-spacing: -.035em;
}

.premium-benefits .feature-grid p {
  line-height: 1.7;
}

/* Story / process */
.premium-story-band {
  width: min(1320px,calc(100% - 48px));
  padding: 120px 0;
  gap: 86px;
}

.story-copy h2, .privacy-copy h2 {
  font-size: clamp(2.6rem,4.4vw,4.65rem);
  line-height: .98;
}

.story-copy .public-richtext {
  max-width: 590px;
}

.story-link {
  margin-top: 24px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(37,99,235,.20);
}

.story-steps {
  gap: 14px;
}

.story-steps article {
  position: relative;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 18px;
  padding: 22px 23px;
  border-color: rgba(31,59,91,.085);
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(18,42,70,.045);
  transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.story-steps article:hover {
  transform: translateX(4px);
  border-color: rgba(37,99,235,.16);
  box-shadow: 0 18px 42px rgba(18,42,70,.07);
}

.story-steps article>span {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg,#eff6ff,#eafcff);
}

.story-steps strong {
  font-size: 1.05rem;
}

/* Privacy showcase */
.privacy-showcase {
  position: relative;
  width: min(1320px,calc(100% - 48px));
  margin-bottom: 104px;
  padding: clamp(52px,6vw,78px);
  border-radius: 38px;
  background: radial-gradient(620px 430px at 8% 118%,rgba(44,211,193,.18),transparent 68%),
    radial-gradient(560px 400px at 93% -4%,rgba(64,142,255,.22),transparent 62%),
    linear-gradient(132deg,#07172d,#0c2845 54%,#0b4355);
  box-shadow: 0 38px 100px rgba(8,33,59,.17);
}

.privacy-showcase::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 37px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.07);
}

.privacy-visual {
  min-height: 360px;
}

.privacy-shield {
  width: 132px;
  height: 132px;
  border-radius: 40px;
  background: linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.075));
  box-shadow: 0 28px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
}

.privacy-shield span {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
}

.privacy-chip {
  padding: 9px 13px;
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.085);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* CTA / share */
.home-cta-wrap {
  padding-bottom: 66px;
}

.premium-public-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(44px,5.4vw,68px);
  border-radius: 34px;
  background: radial-gradient(500px 260px at 88% 0%,rgba(40,180,239,.25),transparent 66%),
    linear-gradient(128deg,#0b1d38,#123a60 64%,#0a6477);
  box-shadow: 0 32px 85px rgba(15,54,87,.18);
}

.premium-public-cta::after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  right: -120px;
  bottom: -190px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 65px rgba(255,255,255,.018),0 0 0 130px rgba(255,255,255,.012);
}

.premium-public-cta>* {
  position: relative;
  z-index: 2;
}

.home-share-strip {
  width: min(1320px,calc(100% - 48px));
  padding: 38px 0 80px;
}

.home-share-strip .share-buttons a, .home-share-strip .share-buttons button {
  border-color: rgba(31,59,91,.09);
  background: #fff;
  box-shadow: 0 7px 20px rgba(18,42,70,.04);
}

.public-footer {
  padding-top: 54px;
  padding-bottom: 54px;
  background: linear-gradient(135deg,#081426,#0b1d33);
  border-top: 1px solid rgba(255,255,255,.04);
}

/* ----------------------- Responsive public navigation ----------------------- */
@media (max-width:1120px) {
  .public-header {
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
    padding-inline: 20px;
  }

  .public-header nav[data-public-nav] {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 102;
    width: min(88vw,370px);
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 14px;
    color: #132035;
    background: rgba(255,255,255,.975);
    border-left: 1px solid rgba(31,59,91,.08);
    box-shadow: -30px 0 80px rgba(10,31,58,.18);
    transform: translateX(104%);
    transition: transform .23s ease;
    overflow-y: auto;
  }

  .public-header nav[data-public-nav].open {
    transform: translateX(0);
  }

  .public-header nav[data-public-nav]>a {
    padding: .86rem .9rem;
    border-radius: 12px;
    font-size: .96rem;
  }

  .public-mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 6px 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(31,59,91,.08);
  }

  .public-mobile-nav-head strong {
    font-size: 1rem;
    letter-spacing: -.02em;
  }

  .public-mobile-nav-head button {
    width: 40px;
    height: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(31,59,91,.10);
    border-radius: 12px;
    background: #f7f9fc;
    color: #24344b;
    font-size: 1.5rem;
    line-height: 1;
  }

  .public-menu-button {
    width: 42px;
    height: 42px;
    min-height: 42px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid rgba(31,59,91,.10);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(18,42,70,.045);
  }

  .public-menu-button span {
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: #142238;
  }

  .public-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 101;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(5,14,29,.46);
    backdrop-filter: blur(3px);
    transition: opacity .2s ease,visibility .2s ease;
  }

  .public-mobile-backdrop.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .premium-home-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 58px;
    padding-top: 86px;
    padding-bottom: 100px;
  }

  .premium-home-hero .public-hero-copy {
    max-width: 800px;
  }

  .hero-product-stage {
    max-width: 700px;
    justify-self: center;
    margin-inline: auto;
  }

  .premium-product-card {
    transform: none;
  }

}

@media (max-width:760px) {
  .public-header {
    min-height: 70px;
    padding-inline: 14px;
  }

  .public-actions {
    gap: 5px;
  }

  .public-header .public-login {
    display: none;
  }

  .public-header .btn-primary-ea {
    min-height: 38px;
    padding: .56rem .72rem;
    font-size: .78rem;
  }

  .public-menu-button {
    width: 40px;
    height: 40px;
  }

  .premium-home-hero {
    padding: 68px 16px 78px;
    gap: 42px;
  }

  .premium-home-hero .public-hero-copy h1 {
    font-size: clamp(3rem,13.5vw,4.9rem);
    line-height: .91;
    letter-spacing: -.068em;
  }

  .premium-home-hero .hero-intro, .premium-home-hero .hero-intro p {
    font-size: 1rem;
  }

  .premium-home-hero .hero-actions {
    align-items: flex-start;
  }

  .premium-home-hero .hero-primary, .premium-home-hero .hero-secondary {
    width: auto !important;
    min-height: 44px;
  }

  .hero-product-stage {
    padding: 10px 0 18px;
  }

  .product-screen {
    padding: 18px;
  }

  .premium-benefits {
    padding-top: 82px;
    padding-bottom: 84px;
  }

  .premium-benefits .feature-grid {
    margin-top: 30px;
  }

  .premium-benefits .feature-grid article {
    min-height: 0;
    padding: 26px 23px;
  }

  .premium-benefits .feature-grid article::before {
    margin-bottom: 22px;
  }

  .premium-story-band {
    width: calc(100% - 28px);
    padding: 82px 0;
  }

  .story-steps article:hover {
    transform: none;
  }

  .privacy-showcase {
    width: calc(100% - 28px);
    margin-bottom: 72px;
    padding: 34px 24px;
    border-radius: 28px;
  }

  .premium-public-cta {
    border-radius: 27px;
  }

  .home-share-strip {
    width: calc(100% - 28px);
  }

  .event-list>a {
    grid-template-columns: 50px minmax(0,1fr) 22px;
    gap: 11px;
    min-height: 66px;
  }

  .event-list .mini-date {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    border-radius: 12px;
  }

}

@media (max-width:480px) {
  .public-brand strong {
    display: none;
  }

  .public-header {
    grid-template-columns: auto 1fr auto auto;
  }

  .premium-home-hero .hero-proof {
    max-width: 100%;
    white-space: normal;
  }

  .premium-home-hero .hero-assurance {
    display: grid;
    gap: 8px;
  }

  .floating-reminder-card {
    display: none;
  }

  .product-screen-head {
    gap: 10px;
  }

  .product-screen-head strong {
    font-size: 1.18rem;
  }

  .live-pill {
    padding: 5px 7px;
  }

  .story-copy h2, .privacy-copy h2 {
    font-size: clamp(2.3rem,12vw,3.35rem);
  }

  .member-list>* {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .member-list form {
    width: 100%;
    margin-left: 54px;
  }

}

@media (prefers-reduced-motion:reduce) {
  .floating-card-one, .floating-card-two {
    animation: none !important;
  }

  .premium-benefits .feature-grid article:hover, .story-steps article:hover, .event-list>a:hover, .premium-home-hero .hero-primary:hover {
    transform: none;
  }

}

/* ========================================================================== 
   Event Alert v12 – premium internal UI, landing pages and mobile navigation
   ========================================================================== */
/* Mobile drawers live inside sticky headers. Keep the header stacking context
   above the backdrop so the opened drawer can never disappear behind blur. */
@media (max-width:1120px) {
  .public-header {
    z-index: 220;
  }

  .public-header nav[data-public-nav] {
    z-index: 240;
  }

  .public-mobile-backdrop {
    z-index: 210;
  }

}

@media (max-width:860px) {
  .app-header {
    z-index: 220;
  }

  .app-nav {
    z-index: 240;
  }

  .mobile-backdrop {
    z-index: 210;
  }

}

/* Internal shell */
body:not(.public-body) {
  background: radial-gradient(circle at 12% -8%,color-mix(in srgb,var(--ea-primary) 8%,transparent),transparent 28rem),
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--ea-accent) 7%,transparent),transparent 30rem),
    var(--ea-bg);
}

.app-main {
  padding-top: 42px;
  padding-bottom: 72px;
}

.page-head {
  padding: 0 4px 2px;
  margin-bottom: 28px;
  gap: 28px;
}

.page-head h1 {
  margin: .34rem 0 .45rem;
  font-size: clamp(2.15rem,3.5vw,3.35rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 850;
}

.page-head p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ea-muted);
}

.page-actions {
  align-items: center;
  justify-content: flex-end;
}

.page-actions .btn-primary-ea,.page-actions .btn-secondary-ea {
  box-shadow: 0 8px 24px color-mix(in srgb,var(--ea-primary) 10%,transparent);
}

.panel-card,.form-card,.responsive-table-card,.inline-admin-card,.danger-zone {
  border: 1px solid color-mix(in srgb,var(--ea-border) 84%,transparent);
  box-shadow: 0 18px 55px rgba(25,45,75,.065),0 2px 8px rgba(25,45,75,.035);
}

.panel-card,.form-card {
  border-radius: 24px;
}

.premium-panel {
  padding: clamp(22px,3vw,34px);
}

.panel-head {
  align-items: flex-start;
  margin-bottom: 20px;
}

.panel-head h2 {
  margin: .25rem 0 0;
  font-size: clamp(1.55rem,2.3vw,2.05rem);
  letter-spacing: -.04em;
}

/* Event details: make facts actual cards instead of concatenated text. */
.event-facts {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin: 0 0 22px;
}

.fact-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 132px;
  padding: 19px 20px;
  border: 1px solid color-mix(in srgb,var(--ea-border) 88%,transparent);
  border-radius: 20px;
  background: linear-gradient(180deg,color-mix(in srgb,var(--ea-surface) 98%,white),var(--ea-surface));
  box-shadow: 0 12px 34px rgba(25,45,75,.045);
}

.fact-card>span {
  font-size: .72rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .095em;
  font-weight: 850;
  color: var(--ea-muted);
}

.fact-card>strong {
  display: block;
  font-size: 1.04rem;
  line-height: 1.35;
  letter-spacing: -.018em;
  overflow-wrap: anywhere;
}

.fact-card>small {
  display: block;
  margin-top: auto;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--ea-muted);
}

.fact-card.accent {
  border-color: color-mix(in srgb,var(--ea-primary) 24%,var(--ea-border));
  background: linear-gradient(145deg,color-mix(in srgb,var(--ea-primary) 7%,var(--ea-surface)),var(--ea-surface));
}

.detail-grid {
  gap: 18px;
  align-items: start;
}

.embedded-form {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.number-suffix-control {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
}

.number-suffix-control input {
  width: 140px;
  flex: 0 0 140px;
}

.number-suffix-control span {
  font-size: .88rem;
  font-weight: 750;
  color: var(--ea-muted);
  white-space: nowrap;
}

.choice-card {
  min-height: 58px;
  padding: 13px 15px !important;
  border-radius: 15px !important;
  background: color-mix(in srgb,var(--ea-surface) 96%,var(--ea-bg)) !important;
}

.option-fieldset {
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
}

.option-fieldset legend {
  float: none;
  width: auto;
  margin: 0 0 10px;
  padding: 0 6px;
  font-weight: 850;
  font-size: .9rem;
}

.notes-panel p {
  line-height: 1.7;
  color: var(--ea-muted);
}

/* Events list */
.filter-bar {
  padding: 14px;
  border: 1px solid color-mix(in srgb,var(--ea-border) 82%,transparent);
  border-radius: 19px;
  background: color-mix(in srgb,var(--ea-surface) 94%,transparent);
  box-shadow: 0 12px 35px rgba(25,45,75,.04);
  margin-bottom: 12px;
}

.filter-bar input,.filter-bar select {
  min-height: 46px;
  background: var(--ea-surface);
}

.inline-admin-card {
  margin: 0 0 14px;
  overflow: hidden;
}

.inline-admin-card summary {
  padding: 11px 15px;
  cursor: pointer;
  font-weight: 750;
  color: var(--ea-muted);
}

.inline-admin-card[open] summary {
  border-bottom: 1px solid var(--ea-border);
  color: var(--ea-text);
}

.inline-admin-card .inline-form {
  padding: 14px;
}

.responsive-table-card {
  border-radius: 22px;
}

.ea-table th {
  padding: 14px 16px;
  background: color-mix(in srgb,var(--ea-bg) 72%,var(--ea-surface));
  font-size: .7rem;
}

.ea-table td {
  padding: 16px;
  line-height: 1.45;
}

.ea-table td strong+small {
  display: block;
  margin-top: 3px;
  color: var(--ea-muted);
  font-size: .76rem;
}

.table-title {
  font-size: .98rem;
  letter-spacing: -.015em;
}

.table-action {
  display: inline-flex;
  padding: .38rem .62rem;
  border-radius: 9px;
  color: var(--ea-primary);
  font-weight: 800;
}

.table-action:hover {
  background: var(--ea-soft);
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .3rem .68rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
}

/* People explanation */
.people-explainer {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 16px;
  align-items: start;
  margin: -6px 0 22px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb,var(--ea-primary) 16%,var(--ea-border));
  border-radius: 20px;
  background: linear-gradient(135deg,color-mix(in srgb,var(--ea-primary) 6%,var(--ea-surface)),var(--ea-surface));
  box-shadow: 0 12px 38px rgba(25,45,75,.04);
}

.people-explainer .explainer-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb,var(--ea-primary) 12%,var(--ea-surface));
  color: var(--ea-primary);
  font-weight: 900;
}

.people-explainer h2 {
  font-size: 1rem;
  margin: 0 0 5px;
}

.people-explainer p {
  margin: 0;
  color: var(--ea-muted);
  line-height: 1.6;
  font-size: .91rem;
}

/* Premium SEO / informational landing pages */
.public-body:has(.landing-hero) {
  background: #f7f9fc;
}

.landing-hero {
  width: min(1180px,calc(100% - 48px));
  margin: 34px auto 0;
  padding: clamp(56px,8vw,94px) clamp(28px,6vw,76px);
  border-radius: 34px;
  color: #fff;
  background: radial-gradient(circle at 88% 15%,rgba(73,193,255,.22),transparent 25rem),
    radial-gradient(circle at 12% 95%,rgba(58,225,193,.12),transparent 22rem),
    linear-gradient(135deg,#09182c 0%,#102e54 56%,#105d76 100%);
  box-shadow: 0 35px 90px rgba(13,35,67,.20);
  position: relative;
  overflow: hidden;
}

.landing-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 54px rgba(255,255,255,.025),0 0 0 108px rgba(255,255,255,.018);
}

.landing-hero>div {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.landing-hero .eyebrow {
  color: #72d6ff;
}

.landing-hero h1 {
  max-width: 900px;
  margin: .75rem 0 1.15rem;
  font-size: clamp(3rem,6vw,5.6rem);
  line-height: .96;
  letter-spacing: -.065em;
  color: #fff;
}

.landing-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.77);
  font-size: clamp(1.05rem,1.8vw,1.28rem);
  line-height: 1.65;
}

.landing-hero .hero-actions {
  margin-top: 28px;
}

.landing-hero .btn-primary-ea {
  background: linear-gradient(135deg,#2e7cf6,#20b7e5);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(30,145,232,.28);
}

.landing-hero .btn-secondary-ea {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(10px);
}

.landing-hero .btn-secondary-ea:hover {
  background: rgba(255,255,255,.14);
}

.landing-article {
  width: min(980px,calc(100% - 48px));
  margin: -22px auto 0;
  padding: clamp(30px,5vw,62px);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(26,52,82,.08);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(19,44,75,.085);
  font-size: 1.055rem;
  line-height: 1.78;
  color: #536176;
}

.landing-article>h2:first-child {
  margin-top: 0;
}

.landing-article h2 {
  margin: 2.8rem 0 .9rem;
  color: #10213b;
  font-size: clamp(1.8rem,3vw,2.55rem);
  line-height: 1.12;
  letter-spacing: -.045em;
}

.landing-article h3 {
  margin: 2rem 0 .65rem;
  color: #162945;
  font-size: 1.28rem;
  letter-spacing: -.025em;
}

.landing-article p {
  margin: .75rem 0 1.1rem;
  color: #5d6a7e;
}

.landing-article ul,.landing-article ol {
  margin: 1rem 0 1.5rem;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.landing-article li {
  position: relative;
  padding: 12px 14px 12px 42px;
  border: 1px solid #edf1f6;
  border-radius: 14px;
  background: #fafcff;
  color: #506078;
}

.landing-article li::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf8f4;
  color: #0c9a72;
  font-size: .72rem;
  font-weight: 900;
}

.landing-article strong {
  color: #20334e;
}

.landing-article a {
  color: #176ee8;
  font-weight: 750;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.landing-article blockquote {
  margin: 1.7rem 0;
  padding: 18px 20px;
  border-left: 4px solid #2d7df5;
  border-radius: 0 16px 16px 0;
  background: #f5f9ff;
  color: #33445d;
}

.faq-section,.related-pages,.share-strip.compact,.public-cta {
  width: min(980px,calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.faq-section {
  padding: 74px 0 36px;
}

.faq-section h2,.related-pages h2 {
  font-size: clamp(2rem,3.8vw,3rem);
  letter-spacing: -.05em;
  margin: .45rem 0 1.4rem;
}

.faq-list {
  gap: 10px;
}

.faq-list details {
  padding: 0;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(20,45,75,.035);
}

.faq-list summary {
  padding: 17px 19px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.faq-list summary::after {
  content: "+";
  font-size: 1.3rem;
  color: #176ee8;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  margin: 0;
  padding: 0 19px 18px;
  color: #607087;
  line-height: 1.65;
}

.related-pages {
  padding: 38px 0 30px;
}

.related-pages .card-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.related-pages .action-card {
  min-height: 190px;
  padding: 22px;
  border-radius: 20px;
  transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.related-pages .action-card:hover {
  transform: translateY(-3px);
  border-color: rgba(32,112,232,.18);
  box-shadow: 0 18px 46px rgba(20,45,75,.08);
}

.public-cta {
  margin-top: 42px;
  margin-bottom: 42px;
  padding: clamp(30px,5vw,52px);
  box-shadow: 0 25px 65px rgba(13,35,67,.18);
}

.share-strip.compact {
  padding: 16px 0 58px;
}

@media (max-width:980px) {
  .event-facts {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .related-pages .card-grid {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width:720px) {
  .app-main {
    padding-top: 26px;
  }

  .page-head {
    margin-bottom: 20px;
  }

  .page-head h1 {
    font-size: 2rem;
  }

  .event-facts {
    grid-template-columns: 1fr;
  }

  .fact-card {
    min-height: auto;
  }

  .filter-bar {
    padding: 10px;
  }

  .people-explainer {
    grid-template-columns: 1fr;
  }

  .people-explainer .explainer-icon {
    display: none;
  }

  .landing-hero {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding: 48px 22px;
    border-radius: 24px;
  }

  .landing-hero h1 {
    font-size: clamp(2.6rem,12vw,4rem);
  }

  .landing-article {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding: 26px 20px;
    border-radius: 22px;
  }

  .faq-section,.related-pages,.share-strip.compact,.public-cta {
    width: calc(100% - 24px);
  }

  .related-pages .card-grid {
    grid-template-columns: 1fr;
  }

}

/* v13 - gebruikersbeheer activatieacties */
.user-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  flex-wrap: wrap;
}

.user-row-actions form {
  margin: 0;
}

.table-action-button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  padding: 0;
  color: inherit;
}

.table-action-button:hover {
  text-decoration: underline;
}

.page-actions form {
  margin: 0;
}

@media (max-width:760px) {
  .user-row-actions {
    justify-content: flex-start;
  }

  .page-actions {
    align-items: stretch;
  }

  .page-actions form,.page-actions form button {
    width: 100%;
  }

}

/* ========================================================================== */
/* Event Alert v17 — definitive premium internal UI + mobile navigation */
/* ========================================================================== */
/* Theme previews use the per-theme CSS variables already emitted by Razor. */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.theme-option {
  position: relative;
  display: grid;
  gap: 9px;
  min-width: 0;
  cursor: pointer;
}

.theme-option > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-option > strong {
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ea-text);
}

.theme-option .theme-preview {
  position: relative;
  min-height: 104px;
  padding: 0;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--preview-primary) 18%, var(--ea-border));
  border-radius: 18px;
  cursor: pointer;
  background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--preview-primary) 22%, transparent), transparent 34%),
    linear-gradient(145deg, var(--preview-bg) 0%, var(--preview-surface) 100%);
  box-shadow: 0 10px 28px rgba(20, 42, 72, .06),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  transition: transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.theme-option .theme-preview::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 13px;
  right: 13px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--preview-primary) 18%, var(--preview-surface));
}

.theme-option .theme-preview i {
  position: absolute;
  left: 13px;
  top: 35px;
  bottom: 13px;
  width: 38%;
  border-radius: 11px;
  background: var(--preview-surface);
  border: 1px solid color-mix(in srgb, var(--preview-primary) 14%, transparent);
  box-shadow: 0 7px 18px rgba(20, 42, 72, .07);
}

.theme-option .theme-preview b {
  position: absolute;
  left: calc(38% + 26px);
  right: 13px;
  top: 39px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--preview-primary),
    color-mix(in srgb, var(--preview-primary) 56%, white)
  );
  box-shadow: 0 5px 13px color-mix(in srgb, var(--preview-primary) 22%, transparent);
}

.theme-option .theme-preview em {
  position: absolute;
  left: calc(38% + 26px);
  right: 28%;
  top: 63px;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--preview-primary) 19%, var(--preview-surface));
  box-shadow: 74px 0 0 color-mix(in srgb, var(--preview-primary) 10%, var(--preview-surface)),
    0 18px 0 color-mix(in srgb, var(--preview-primary) 10%, var(--preview-surface));
}

.theme-option:hover .theme-preview {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--preview-primary) 42%, var(--ea-border));
  box-shadow: 0 16px 38px rgba(20, 42, 72, .10);
}

.theme-option input:checked + .theme-preview {
  transform: translateY(-2px);
  border-color: var(--preview-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--preview-primary) 12%, transparent),
    0 18px 42px color-mix(in srgb, var(--preview-primary) 15%, transparent);
}

.theme-option input:focus-visible + .theme-preview {
  outline: 3px solid color-mix(in srgb, var(--preview-primary) 34%, transparent);
  outline-offset: 3px;
}

/* Internal application becomes more deliberate and premium. */
body:not(.public-body) {
  background: radial-gradient(circle at 10% -12%, color-mix(in srgb, var(--ea-primary) 9%, transparent), transparent 34rem),
    radial-gradient(circle at 96% 2%, color-mix(in srgb, var(--ea-accent) 8%, transparent), transparent 36rem),
    linear-gradient(180deg, color-mix(in srgb, var(--ea-bg) 98%, white), var(--ea-bg));
}

.app-header {
  border-bottom: 1px solid color-mix(in srgb, var(--ea-border) 74%, transparent);
  box-shadow: 0 5px 24px rgba(18, 42, 70, .035);
}

.app-main {
  padding-top: 46px;
}

.page-head {
  margin-bottom: 30px;
}

.page-head h1 {
  font-size: clamp(2.2rem, 3.5vw, 3.55rem);
  font-weight: 850;
  line-height: .98;
  letter-spacing: -.058em;
}

.page-head p {
  color: color-mix(in srgb, var(--ea-muted) 92%, var(--ea-text));
  line-height: 1.68;
}

.eyebrow {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .17em;
}

.panel-card, .form-card, .preferences-form, .profile-settings, .responsive-table-card, .action-card, .group-card, .next-card, .inline-admin-card, .danger-zone {
  border: 1px solid color-mix(in srgb, var(--ea-border) 82%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ea-surface) 99%, white), var(--ea-surface));
  box-shadow: 0 20px 58px rgba(18, 42, 70, .065),
    0 2px 8px rgba(18, 42, 70, .025),
    inset 0 1px 0 color-mix(in srgb, white 78%, transparent);
}

.panel-card, .form-card, .preferences-form, .profile-settings, .danger-zone {
  border-radius: 25px;
}

.preferences-form {
  gap: 26px;
  padding: clamp(24px, 3vw, 36px);
}

.preferences-form > h2 {
  margin: 4px 0 -3px;
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 820;
  letter-spacing: -.035em;
}

.preferences-form > h2:not(:first-of-type) {
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--ea-border) 80%, transparent);
}

.profile-settings {
  padding: clamp(24px, 3vw, 34px);
}

.profile-settings h2, .panel-card h2 {
  letter-spacing: -.04em;
}

.profile-photo-row {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ea-border) 78%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ea-bg) 58%, var(--ea-surface));
}

.avatar.large {
  width: 72px;
  height: 72px;
  border: 3px solid var(--ea-surface);
  box-shadow: 0 10px 28px rgba(18, 42, 70, .12);
}

.btn-primary-ea {
  border: 0;
  background: linear-gradient(135deg, var(--ea-primary), var(--ea-accent));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ea-primary) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

.btn-secondary-ea {
  background: color-mix(in srgb, var(--ea-surface) 96%, var(--ea-bg));
  box-shadow: 0 4px 14px rgba(18, 42, 70, .035);
}

input, select, textarea {
  border-color: color-mix(in srgb, var(--ea-border) 92%, transparent);
  background: color-mix(in srgb, var(--ea-surface) 98%, var(--ea-bg));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--ea-primary) 58%, var(--ea-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ea-primary) 11%, transparent),
    0 8px 24px rgba(18, 42, 70, .045);
}

.metric, .stat-card {
  border-radius: 19px;
  background: linear-gradient(155deg, var(--ea-surface), color-mix(in srgb, var(--ea-bg) 55%, var(--ea-surface)));
  box-shadow: 0 13px 34px rgba(18, 42, 70, .045);
}

.today-banner {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--ea-accent) 15%, transparent), transparent 22rem),
    linear-gradient(135deg, color-mix(in srgb, var(--ea-primary) 10%, var(--ea-surface)), var(--ea-surface));
  box-shadow: 0 20px 58px rgba(18, 42, 70, .07);
}

.today-banner::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -120px;
  bottom: -140px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ea-primary) 14%, transparent);
  box-shadow: 0 0 0 42px color-mix(in srgb, var(--ea-primary) 3%, transparent),
    0 0 0 84px color-mix(in srgb, var(--ea-primary) 2%, transparent);
  pointer-events: none;
}

.ea-table tbody tr {
  transition: background .16s ease;
}

.ea-table tbody tr:hover {
  background: color-mix(in srgb, var(--ea-primary) 3%, var(--ea-surface));
}

.badge-soft, .status-pill, .hero-status {
  border: 1px solid color-mix(in srgb, var(--ea-primary) 10%, transparent);
}

/* Definitive logged-in mobile menu. */
/* backdrop-filter is disabled on the mobile header so fixed positioning */
/* remains viewport-based in Safari/Chrome. */
@media (max-width: 860px) {
  .app-header {
    height: 68px;
    position: sticky;
    top: 0;
    z-index: 1000;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0 12px;
    gap: 9px;
    overflow: visible;
    background: color-mix(in srgb, var(--ea-surface) 97%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .mobile-menu-button {
    display: grid;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 1px solid var(--ea-border);
    border-radius: 13px;
    background: var(--ea-surface);
    box-shadow: 0 7px 20px rgba(18, 42, 70, .055);
  }

  .mobile-menu-button span {
    width: 19px;
    height: 2px;
    border-radius: 99px;
    background: var(--ea-text);
  }

  .app-brand {
    justify-self: start;
  }

  .brand-copy {
    display: none;
  }

  .app-nav {
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(88vw, 360px) !important;
    height: calc(100dvh - 68px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px 14px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--ea-text) !important;
    background: color-mix(in srgb, var(--ea-surface) 99%, transparent) !important;
    border: 0 !important;
    border-right: 1px solid var(--ea-border) !important;
    border-radius: 0 20px 0 0 !important;
    box-shadow: 24px 24px 70px rgba(8, 24, 48, .18) !important;
    transform: translate3d(-104%, 0, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .22s cubic-bezier(.22, .8, .28, 1),
      opacity .18s ease,
      visibility .18s ease !important;
    z-index: 1200 !important;
    scrollbar-width: thin;
  }

  .app-nav.open {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-nav-top {
    position: sticky;
    top: -14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    margin: -14px -14px 8px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--ea-border);
    background: color-mix(in srgb, var(--ea-surface) 98%, transparent);
  }

  .mobile-nav-top strong {
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: -.025em;
  }

  .mobile-nav-top button {
    width: 40px;
    height: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ea-border);
    border-radius: 12px;
    background: var(--ea-bg);
    color: var(--ea-text);
    font-size: 1.55rem;
    line-height: 1;
  }

  .app-nav > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 13px !important;
    color: var(--ea-text) !important;
    background: transparent !important;
    font-size: .95rem !important;
    font-weight: 760 !important;
    white-space: normal !important;
  }

  .app-nav > a:hover, .app-nav > a:focus-visible {
    color: var(--ea-primary) !important;
    background: var(--ea-soft) !important;
  }

  .mobile-backdrop {
    position: fixed !important;
    top: 68px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(7, 18, 34, .44) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: opacity .18s ease, visibility .18s ease !important;
    z-index: 900 !important;
  }

  .mobile-backdrop.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .app-main {
    width: min(calc(100% - 24px), var(--ea-page));
    padding-top: 28px;
  }

  .dashboard-grid, .detail-grid, .settings-grid, .public-hero {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 760px) {
  .theme-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .theme-option .theme-preview {
    min-height: 94px;
  }

  .preferences-form {
    padding: 22px 18px;
    gap: 22px;
  }

  .page-head h1 {
    font-size: 2.15rem;
  }

}

@media (max-width: 430px) {
  .theme-picker {
    grid-template-columns: 1fr 1fr;
  }

  .theme-option > strong {
    font-size: .84rem;
  }

  .app-nav {
    width: min(92vw, 360px) !important;
  }

}

/* Event v18: meerdere groepen per gebeurtenis */
.event-groups-fieldset {
  margin: 0;
}

.group-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.group-choice-grid .choice-card {
  min-height: 64px;
}

.custom-type-manager {
  display: grid;
  gap: 12px;
}

.custom-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ea-border);
  border-radius: 14px;
  background: var(--ea-surface);
}

.custom-type-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.custom-type-row small {
  color: var(--ea-muted);
}

.custom-type-row form {
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .group-choice-grid {
    grid-template-columns: 1fr;
  }

  .custom-type-row {
    align-items: flex-start;
  }
}


/* Panel polish: touch targets and compact mobile actions */
.icon-button,.mobile-menu-button,.account-menu summary{min-width:44px;min-height:44px;}
.member-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-left:auto;}
@media(max-width:720px){.page-actions,.form-actions{gap:.55rem;flex-wrap:wrap}.page-actions>*,.form-actions>*{width:auto!important;flex:0 1 auto!important}.page-actions .btn-primary-ea,.page-actions .btn-secondary-ea,.form-actions .btn-primary-ea,.form-actions .btn-secondary-ea{min-height:44px}}

.design-create-grid,.design-list-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.design-create-card,.design-list-card{display:flex;flex-direction:column;gap:14px;padding:22px}.design-create-card h2,.design-list-card h3{margin:0}.storage-meter-card{margin:18px 0;padding:18px;display:grid;gap:10px}.storage-meter-card>div{display:flex;justify-content:space-between;gap:16px}.storage-meter-card progress{width:100%;height:10px}.design-thumb{aspect-ratio:16/9;border-radius:14px;background:linear-gradient(145deg,var(--ea-soft),var(--ea-surface));display:grid;place-items:center;font-weight:700}.design-editor-shell{position:relative}.design-export-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.design-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:10px 14px;background:color-mix(in srgb,var(--ea-surface) 94%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--ea-border)}.design-title-input{min-width:160px;flex:1;max-width:420px;font-size:1rem;font-weight:700;border:1px solid transparent;background:transparent;padding:9px 10px;border-radius:10px}.design-title-input:focus{border-color:var(--ea-primary);background:var(--ea-surface);outline:none}.design-save-state{font-size:.82rem;color:var(--ea-muted);min-width:90px}.design-conflict{margin:10px 14px;padding:12px 14px;border-radius:12px;background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}.design-workspace{display:grid;grid-template-columns:210px minmax(0,1fr) 290px;min-height:calc(100vh - 130px);background:var(--ea-bg)}.design-sidebar{padding:16px;border-right:1px solid var(--ea-border);background:var(--ea-surface);overflow:auto}.design-properties-panel{border-right:0;border-left:1px solid var(--ea-border)}.design-sidebar h2{font-size:.9rem;margin:0 0 10px}.design-page-tab,.design-layer{width:100%;min-height:44px;text-align:left;border:1px solid var(--ea-border);background:var(--ea-surface);border-radius:10px;padding:9px 10px;margin-bottom:8px;color:var(--ea-text)}.design-page-tab.active,.design-layer.active{border-color:var(--ea-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--ea-primary) 15%,transparent)}.design-center{min-width:0;display:flex;flex-direction:column}.design-toolbar{display:flex;gap:7px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--ea-border);background:var(--ea-surface)}.design-toolbar button,.design-upload-button,.design-zoom button,.design-property-actions button{min-height:44px;border:1px solid var(--ea-border);background:var(--ea-surface);color:var(--ea-text);border-radius:10px;padding:8px 12px;cursor:pointer}.design-upload-button{display:inline-flex;align-items:center}.design-canvas-stage{flex:1;overflow:auto;display:grid;place-items:start center;padding:34px;touch-action:none}.design-page-canvas,.design-preview-page{position:relative;width:min(72vw,720px);background:#fff;box-shadow:0 18px 50px rgba(15,23,42,.16);overflow:hidden}.design-page-canvas{touch-action:none;transition:transform .08s linear}.design-element{position:absolute;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:anywhere;user-select:none;touch-action:none}.design-element.selected{outline:2px solid #2563eb;outline-offset:2px}.design-element.locked{cursor:not-allowed}.design-resize-handle{position:absolute;width:18px;height:18px;right:-9px;bottom:-9px;border:2px solid #fff;border-radius:50%;background:#2563eb;box-shadow:0 1px 5px rgba(0,0,0,.25);touch-action:none}.design-image-placeholder{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:8px;background:#f1f5f9;color:#64748b;font-size:.75rem}.design-calendar-placeholder{display:grid;place-items:center;border:1px dashed #94a3b8;background:#f8fafc;color:#475569;text-align:center}.design-line{transform-origin:center}.design-zoom{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;background:var(--ea-surface);border-top:1px solid var(--ea-border)}.design-zoom button{width:44px;padding:0}.design-property-field{display:grid;gap:5px;margin-bottom:10px;font-size:.82rem}.design-property-field input,.design-property-field select,.design-property-field textarea{width:100%;min-height:42px;border:1px solid var(--ea-border);border-radius:9px;background:var(--ea-surface);color:var(--ea-text);padding:8px}.design-property-field textarea{resize:vertical}.design-property-actions{display:flex;gap:7px;flex-wrap:wrap}.storage-mini{display:flex;justify-content:space-between;gap:10px;font-size:.82rem}.design-mobile-bar,.design-mobile-sheet{display:none}.design-preview-overlay{position:fixed;inset:0;z-index:999;background:rgba(8,15,29,.92);overflow:auto;padding:60px 24px 40px}.design-preview-overlay[hidden]{display:none}.preview-close{position:fixed;top:14px;right:18px;width:48px;height:48px;border:0;border-radius:50%;font-size:26px;cursor:pointer}.design-preview-overlay [data-preview-pages]{display:grid;gap:28px;justify-items:center}.design-preview-page{width:min(86vw,760px);box-shadow:0 18px 60px rgba(0,0,0,.35)}.preflight-panel{max-width:760px;margin:30px auto;background:#fff;color:#111827;border-radius:16px;padding:20px}.preflight-error{color:#b91c1c}.preflight-warning{color:#92400e}.preflight-ok{color:#166534}.table-note{font-size:.78rem;color:var(--ea-muted);margin-top:4px}.import-summary{grid-template-columns:repeat(5,minmax(0,1fr))}.row-change{background:color-mix(in srgb,#2563eb 5%,transparent)}.row-success{background:color-mix(in srgb,#16a34a 4%,transparent)}
@media(max-width:1100px){.design-create-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-workspace{grid-template-columns:170px minmax(0,1fr) 250px}.design-page-canvas{width:min(65vw,620px)}}
@media(max-width:900px){.design-topbar{top:68px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;padding:8px 10px;gap:7px;background:color-mix(in srgb,var(--ea-surface) 98%,transparent)}.design-topbar>.icon-button{grid-column:1;grid-row:1;margin:0}.design-title-input{grid-column:2;grid-row:1;width:100%;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-save-state{grid-column:3;grid-row:1;min-width:0;max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.design-topbar>[data-action="undo"],.design-topbar>[data-action="redo"],.design-topbar>[data-action="preview"],.design-topbar>[data-action="fullscreen"]{display:none}.design-mode-switch{grid-column:1/-1;grid-row:2;display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;order:initial}.design-mode-switch .btn-secondary-ea{width:100%;min-width:0;min-height:44px;padding:8px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.design-export-actions{grid-column:1/-1;grid-row:3;width:100%;display:flex;gap:6px;overflow-x:auto;padding:1px 0 3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.design-export-actions::-webkit-scrollbar{display:none}.design-export-actions>*{flex:0 0 auto;min-height:42px;white-space:nowrap}.design-workspace{display:block;min-height:calc(100vh - 130px)}.design-sidebar{display:none}.design-toolbar{overflow-x:auto;flex-wrap:nowrap;padding:8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.design-toolbar>*{flex:0 0 auto;white-space:nowrap}.design-toolbar>[data-action]{display:none}.design-page-color{flex:0 0 auto;white-space:nowrap}.design-canvas-stage{padding:18px 14px 100px;min-height:70vh}.design-page-canvas{width:min(90vw,620px)}.design-mobile-bar{position:fixed;z-index:80;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:6px;border:1px solid var(--ea-border);border-radius:16px;background:color-mix(in srgb,var(--ea-surface) 96%,transparent);box-shadow:0 12px 34px rgba(15,23,42,.22)}.design-mobile-bar button,.design-mobile-bar label{min-width:0;min-height:48px;display:grid;place-items:center;border:0;background:transparent;color:var(--ea-text);font-size:.75rem;line-height:1.1;text-align:center;border-radius:10px}.design-mobile-sheet{display:block;position:fixed;z-index:90;left:0;right:0;bottom:0;max-height:66vh;overflow:auto;padding:22px 16px calc(90px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--ea-surface);box-shadow:0 -20px 50px rgba(15,23,42,.25)}.design-mobile-sheet[hidden]{display:none}.sheet-close{position:absolute;right:12px;top:10px;width:44px;height:44px;border:0;background:transparent;font-size:24px}.import-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.design-create-grid,.design-list-grid{grid-template-columns:1fr}.design-topbar{grid-template-columns:44px minmax(0,1fr) 72px}.design-topbar .btn-primary-ea{padding-inline:10px}.design-save-state{min-width:0;max-width:72px;font-size:.7rem}.design-mode-switch .btn-secondary-ea{font-size:.8rem}.design-export-actions>*{min-height:40px;padding:7px 11px}.design-preview-overlay{padding-inline:10px}}

.design-guide{position:absolute;pointer-events:none;z-index:9999;background:#2563eb;opacity:.65}.design-guide-x{top:0;bottom:0;width:1px}.design-guide-y{left:0;right:0;height:1px}.design-multi-choice{border:1px solid var(--border,#dbe3ee);border-radius:12px;padding:10px;display:grid;gap:7px}.design-multi-choice legend{font-weight:700;padding:0 5px}.design-multi-choice label{display:flex;gap:7px;align-items:center;font-size:.9rem}.design-align-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.design-replace-image{display:flex;justify-content:center;align-items:center;min-height:44px;cursor:pointer}.calendar-filter-details{margin:10px 0}.calendar-filter-details summary{cursor:pointer;font-weight:700}.design-template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.design-template-card{border:1px solid var(--border,#dbe3ee);border-radius:16px;padding:14px;display:grid;gap:8px}.design-template-card span{color:var(--muted,#64748b);font-size:.88rem}.duplicate-year-form{display:flex;gap:6px;align-items:center}.duplicate-year-form input{width:94px}.quick-calendar-card{margin-top:20px}.calendar-options .check-grid.compact{max-height:180px;overflow:auto}.design-preview-overlay:fullscreen{background:#f7f9fc;padding:20px;overflow:auto}
.dashboard-insights-grid,.dashboard-cta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.family-completeness-card{margin-top:18px}.family-completeness-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.family-completeness-grid a{display:grid;gap:4px;padding:14px;border:1px solid var(--border,#dbe3ee);border-radius:14px;text-decoration:none;color:inherit}.family-completeness-grid span,.family-completeness-grid small{color:var(--muted,#64748b)}@media(max-width:760px){.dashboard-insights-grid,.dashboard-cta-grid{grid-template-columns:1fr}}
.design-mobile-pages{display:none}@media(max-width:900px){.design-mobile-pages{display:flex;gap:7px;overflow-x:auto;padding:8px 10px;background:var(--ea-surface);border-bottom:1px solid var(--ea-border);scrollbar-width:thin}.design-mobile-pages .design-page-tab{flex:0 0 auto;width:auto;min-width:110px;margin:0;white-space:nowrap}}
@media(max-width:900px){.design-mobile-bar{grid-template-columns:repeat(6,1fr)}.design-resize-handle{width:44px;height:44px;right:-22px;bottom:-22px}.design-property-actions button,.design-mobile-sheet .btn-secondary-ea{min-height:44px}}
.design-page-color{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 10px;border:1px solid var(--ea-border);border-radius:10px}.design-page-color input{width:32px;height:30px;padding:0;border:0;background:none}

.design-asset-library{margin-top:18px;border-top:1px solid var(--border,#e5e7eb);padding-top:14px}.design-asset-library h2{margin:0 0 4px}.design-assets-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.design-asset-item{position:relative;aspect-ratio:1;border:1px solid var(--border,#e5e7eb);border-radius:10px;overflow:hidden;background:#f8fafc}.design-asset-use{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}.design-asset-use img{width:100%;height:100%;object-fit:cover;display:block}.design-asset-delete{position:absolute;right:3px;top:3px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(15,23,42,.78);color:#fff;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer}.design-asset-delete:focus-visible,.design-asset-use:focus-visible{outline:3px solid var(--focus,#60a5fa);outline-offset:2px}@media(max-width:900px){.design-assets-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.design-asset-delete{width:44px;height:44px}}

.design-mode-switch{display:flex;gap:6px;align-items:center}.design-mode-switch .active{border-color:var(--ea-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--ea-primary) 15%,transparent)}.design-editor-shell.simple-mode .advanced-only{display:none!important}.design-editor-shell.simple-mode .design-property-actions{display:none}.design-editor-shell.simple-mode .design-toolbar{gap:10px}.design-editor-shell.simple-mode .design-workspace{grid-template-columns:180px minmax(0,1fr) 270px}@media(max-width:900px){.design-mode-switch{order:20;width:100%;justify-content:center}.design-editor-shell.simple-mode .design-workspace{display:block}.design-editor-shell.simple-mode .design-property-actions{display:none}}

.usage-mini{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;min-width:165px;align-items:baseline}.usage-mini small{color:var(--ea-muted,#6b7280);font-size:.72rem}.usage-mini strong{font-size:.82rem;font-variant-numeric:tabular-nums;text-align:right}
.design-rotate-handle{position:absolute;left:50%;top:-50px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:var(--ea-surface);border:2px solid #2563eb;box-shadow:0 2px 8px rgba(15,23,42,.2);cursor:grab;touch-action:none;z-index:5}
.design-rotate-handle::after{content:'↻';display:grid;place-items:center;width:100%;height:100%;font-size:20px;color:#2563eb;font-weight:700}
.design-element.crop-mode{outline:3px solid #f59e0b;cursor:move}
.design-element.crop-mode::after{content:'';position:absolute;inset:5px;border:1px dashed rgba(255,255,255,.9);pointer-events:none;box-shadow:0 0 0 999px rgba(15,23,42,.08)}

.design-conflict p{margin:0}.design-conflict-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.design-conflict-actions button{min-height:44px}.design-assets-more{width:100%;margin-top:10px}
/* Design Studio mobile base layout. A final integration override is kept at the end of this file. */
@media (max-width: 900px) {
  .design-editor-shell {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .design-topbar {
    top: 68px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(62px, auto);
    grid-template-areas:
      "back title status"
      "modes modes modes"
      "exports exports exports";
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 8px 10px;
    overflow: hidden;
  }

  .design-topbar > .icon-button {
    grid-area: back;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
  }

  .design-title-input {
    grid-area: title;
    width: 100%;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .design-save-state {
    grid-area: status;
    min-width: 0;
    max-width: 86px;
    overflow: hidden;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    text-align: right;
    line-height: 1.2;
  }

  .design-topbar > [data-action="undo"],
  .design-topbar > [data-action="redo"],
  .design-topbar > [data-action="preview"],
  .design-topbar > [data-action="fullscreen"] {
    display: none;
  }

  .design-mode-switch {
    grid-area: modes;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
    order: initial;
  }

  .design-mode-switch .btn-secondary-ea {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .design-export-actions {
    grid-area: exports;
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .design-export-actions::-webkit-scrollbar {
    display: none;
  }

  .design-export-actions > * {
    flex: 0 0 auto;
    min-width: 52px;
    min-height: 42px;
    padding: 7px 11px;
    white-space: nowrap;
  }

  .design-workspace,
  .design-editor-shell.simple-mode .design-workspace {
    display: block;
    min-width: 0;
  }

  .design-center {
    width: 100%;
    min-width: 0;
  }

  .design-mobile-pages {
    width: 100%;
    min-width: 0;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .design-mobile-pages::-webkit-scrollbar {
    display: none;
  }

  .design-mobile-pages .design-page-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 104px;
    max-width: 72vw;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* In simple mode the fixed mobile bar already exposes text/photo/preview/page.
     Hiding the duplicate desktop toolbar creates substantially more canvas room. */
  .design-editor-shell.simple-mode .design-toolbar {
    display: none;
  }

  .design-editor-shell.free-mode .design-toolbar {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding: 8px 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .design-editor-shell.free-mode .design-toolbar::-webkit-scrollbar {
    display: none;
  }

  .design-editor-shell.free-mode .design-toolbar > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .design-page-color {
    min-width: 0;
    white-space: nowrap;
  }

  .design-page-color input {
    flex: 0 0 30px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    overflow: hidden;
  }

  .design-canvas-stage {
    width: 100%;
    min-width: 0;
    padding: 14px 12px calc(96px + env(safe-area-inset-bottom));
    overflow: auto;
    place-items: start center;
  }

  .design-page-canvas {
    width: min(100%, 620px);
    max-width: 620px;
    margin-inline: auto;
  }

  .design-zoom {
    width: 100%;
    min-width: 0;
  }

  .design-mobile-bar {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    overflow: hidden;
  }

  .design-mobile-bar button,
  .design-mobile-bar label {
    min-width: 0;
    min-height: 48px;
    padding: 4px 2px;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.05;
    text-align: center;
  }

  .design-mobile-sheet {
    width: 100%;
    max-width: 100vw;
    max-height: min(72vh, 720px);
    overscroll-behavior: contain;
  }

  .design-mobile-sheet .design-property-field,
  .design-mobile-sheet .design-property-actions,
  .design-mobile-sheet .design-multi-choice {
    min-width: 0;
  }

  .design-mobile-sheet input,
  .design-mobile-sheet select,
  .design-mobile-sheet textarea,
  .design-mobile-sheet button {
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .design-topbar {
    grid-template-columns: 44px minmax(0, 1fr) 72px;
    padding-inline: 8px;
  }

  .design-title-input {
    padding-inline: 7px;
    font-size: .95rem;
  }

  .design-save-state {
    max-width: 72px;
    font-size: .69rem;
  }

  .design-mode-switch .btn-secondary-ea {
    min-height: 42px;
    padding-inline: 7px;
    font-size: .77rem;
  }

  .design-export-actions > * {
    min-height: 40px;
    padding: 7px 10px;
  }

  .design-mobile-pages {
    padding-inline: 8px;
  }

  .design-mobile-pages .design-page-tab {
    min-width: 96px;
    min-height: 42px;
    padding: 7px 10px;
  }

  .design-canvas-stage {
    padding-inline: 8px;
  }

  .design-page-canvas {
    width: 100%;
    max-width: 620px;
  }

  .design-mobile-bar {
    left: 6px;
    right: 6px;
  }

  .design-mobile-bar button,
  .design-mobile-bar label {
    font-size: .69rem;
  }
}

@media (max-width: 390px) {
  .design-topbar {
    grid-template-columns: 44px minmax(0, 1fr) 62px;
    gap: 5px;
    padding-inline: 6px;
  }

  .design-save-state {
    max-width: 62px;
    font-size: .64rem;
  }

  .design-mode-switch .btn-secondary-ea {
    font-size: .72rem;
  }

  .design-mobile-bar button,
  .design-mobile-bar label {
    font-size: .64rem;
  }
}


/* ========================================================================== */
/* Final admin user overview — readable desktop grid and compact mobile cards */
/* ========================================================================== */
.admin-users-head{align-items:flex-end}.admin-users-page-actions{align-items:center}.admin-users-page-actions form{width:auto}.admin-users-page-actions form button{width:auto}
.admin-users-filter{display:grid;grid-template-columns:minmax(260px,1.3fr) minmax(220px,1fr) auto;gap:10px;align-items:center}.admin-users-filter>*{min-width:0}.admin-users-filter button{min-width:112px}
.admin-users-list{overflow:hidden;border:1px solid var(--ea-border);border-radius:24px;background:var(--ea-surface);box-shadow:0 22px 55px rgba(15,23,42,.08)}
.admin-users-list-head,.admin-user-row{display:grid;grid-template-columns:minmax(175px,1.25fr) minmax(120px,.72fr) minmax(225px,1.35fr) minmax(145px,.85fr) minmax(145px,.9fr) minmax(180px,1.08fr) minmax(155px,.9fr);gap:18px;align-items:center}
.admin-users-list-head{padding:16px 18px;border-bottom:1px solid var(--ea-border);background:color-mix(in srgb,var(--ea-bg) 66%,var(--ea-surface));color:var(--ea-muted);font-size:.72rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.admin-user-row{padding:18px;border-bottom:1px solid var(--ea-border);transition:background .16s ease,box-shadow .16s ease}.admin-user-row:last-of-type{border-bottom:0}.admin-user-row:hover{background:color-mix(in srgb,var(--ea-primary) 3.5%,var(--ea-surface))}
.admin-user-identity,.admin-user-cell,.admin-user-row-actions{min-width:0}.admin-user-identity{display:grid;gap:5px}.admin-user-name{color:var(--ea-text);font-weight:850;font-size:1rem;text-decoration:none;line-height:1.25}.admin-user-name:hover{color:var(--ea-primary)}.admin-user-email{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ea-muted);font-size:.84rem;text-decoration:none}.admin-user-email:hover{text-decoration:underline}
.admin-user-event-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.admin-user-event-stats>span,.admin-user-planning>span,.admin-user-activity>span{display:grid;gap:2px;min-width:0}.admin-user-event-stats>span{padding:8px 9px;border-radius:11px;background:color-mix(in srgb,var(--ea-bg) 72%,var(--ea-surface));text-align:center}.admin-user-event-stats small,.admin-user-planning small,.admin-user-activity small{color:var(--ea-muted);font-size:.68rem;line-height:1.2}.admin-user-event-stats strong{font-size:.9rem;font-variant-numeric:tabular-nums}.admin-user-event-stats .total{background:color-mix(in srgb,var(--ea-primary) 9%,var(--ea-surface))}
.admin-user-planning{display:grid;grid-template-columns:minmax(54px,.55fr) minmax(82px,1fr);gap:10px}.admin-user-planning strong,.admin-user-activity strong{font-size:.82rem;font-weight:780;font-variant-numeric:tabular-nums;line-height:1.3}.admin-user-activity{display:grid;gap:8px}
.admin-2fa-status{display:inline-flex;align-items:center;gap:7px;max-width:100%;font-size:.8rem;font-weight:760;line-height:1.25}.admin-2fa-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#94a3b8}.admin-2fa-status.is-on .admin-2fa-dot{background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.1)}.admin-2fa-status.is-pending .admin-2fa-dot{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.1)}
.admin-user-row-actions{display:grid;gap:8px;justify-items:stretch}.admin-user-row-actions form{margin:0}.admin-user-detail{width:100%;min-height:38px;padding:7px 12px;justify-content:center}.admin-user-mail-action{width:100%;border:0;background:transparent;color:var(--ea-primary);font:inherit;font-size:.78rem;font-weight:750;line-height:1.25;text-align:center;cursor:pointer;padding:3px}.admin-user-mail-action:hover{text-decoration:underline}.admin-users-empty{padding:40px 20px}
@media(max-width:1280px){.admin-users-list-head,.admin-user-row{grid-template-columns:minmax(170px,1.25fr) minmax(112px,.75fr) minmax(205px,1.35fr) minmax(128px,.82fr) minmax(132px,.85fr) minmax(165px,1fr) minmax(138px,.86fr);gap:12px;padding-left:14px;padding-right:14px}.admin-user-event-stats{gap:5px}.admin-user-event-stats>span{padding-inline:6px}.admin-user-row-actions .btn-secondary-ea{padding-inline:8px}}
@media(max-width:1050px){.admin-users-list-head{display:none}.admin-users-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;background:transparent;border:0;box-shadow:none;overflow:visible}.admin-user-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px;border:1px solid var(--ea-border);border-radius:18px;background:var(--ea-surface);box-shadow:0 14px 34px rgba(15,23,42,.06)}.admin-user-identity{grid-column:1/-1;padding-bottom:12px;border-bottom:1px solid var(--ea-border)}.admin-user-cell{display:grid;gap:6px;align-content:start}.admin-user-cell::before{content:attr(data-label);color:var(--ea-muted);font-size:.68rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.admin-user-event-stats{grid-column:1/-1}.admin-user-event-stats::before{grid-column:1/-1}.admin-user-activity{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.admin-user-activity::before{grid-column:1/-1}.admin-user-row-actions{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}.admin-user-row-actions>form:only-child,.admin-user-row-actions>.admin-user-detail:last-child{grid-column:1/-1}.admin-user-mail-action{text-align:left}.admin-users-empty{grid-column:1/-1}}
@media(max-width:720px){.admin-users-head{align-items:flex-start}.admin-users-page-actions{width:100%;display:grid;grid-template-columns:1fr;gap:8px}.admin-users-page-actions>a,.admin-users-page-actions form,.admin-users-page-actions form button{width:100%}.admin-users-filter{grid-template-columns:1fr}.admin-users-filter button{width:100%}.admin-users-list{grid-template-columns:1fr;padding:0;gap:10px}.admin-user-row{grid-template-columns:1fr 1fr;padding:16px}.admin-user-email{white-space:normal;overflow-wrap:anywhere}.admin-user-row-actions{grid-template-columns:1fr}.admin-user-row-actions>*{grid-column:1!important}.admin-user-mail-action{text-align:center;min-height:40px}.admin-user-event-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:420px){.admin-user-row{grid-template-columns:1fr}.admin-user-identity,.admin-user-event-stats,.admin-user-activity,.admin-user-row-actions{grid-column:1}.admin-user-event-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-user-planning{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-user-activity{grid-template-columns:1fr}}

/* Event overlap awareness */
.shared-overlap-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;min-width:0}.shared-overlap-badge{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 9px;border:1px solid color-mix(in srgb,var(--ea-primary) 22%,var(--ea-border));border-radius:999px;background:color-mix(in srgb,var(--ea-primary) 8%,var(--ea-surface));color:var(--ea-primary);font-size:.72rem;font-weight:800;line-height:1.2;white-space:normal;overflow-wrap:anywhere}.event-overlap-warning{display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;margin:0 0 18px;padding:15px 16px;border:1px solid color-mix(in srgb,#d97706 32%,var(--ea-border));border-radius:16px;background:color-mix(in srgb,#f59e0b 9%,var(--ea-surface));box-shadow:0 10px 28px rgba(120,53,15,.06)}.event-overlap-warning-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,#f59e0b 18%,var(--ea-surface));color:#a04a05;font-weight:900}.event-overlap-warning strong{display:block;margin-bottom:3px}.event-overlap-warning p{margin:0;color:var(--ea-text)}.event-overlap-warning small{display:block;margin-top:8px;color:var(--ea-muted);line-height:1.45}@media(max-width:520px){.event-overlap-warning{grid-template-columns:32px minmax(0,1fr);padding:13px}.event-overlap-warning-icon{width:30px;height:30px}.shared-overlap-badge{font-size:.69rem;padding:5px 8px}}

/* Communication campaign detail */
.campaign-summary-grid{display:grid;grid-template-columns:1.35fr repeat(4,minmax(120px,.7fr));gap:12px;margin:0 0 18px}.campaign-summary-card{display:grid;gap:5px;padding:16px 17px;border:1px solid var(--ea-border);border-radius:17px;background:var(--ea-surface);box-shadow:0 12px 30px rgba(15,23,42,.055)}.campaign-summary-card>span,.campaign-summary-card small{color:var(--ea-muted);font-size:.76rem;font-weight:700}.campaign-summary-card>strong{font-size:1.35rem;line-height:1.2}.campaign-summary-card:first-child>strong{font-size:1rem}.campaign-status{display:inline-flex;width:max-content;max-width:100%;padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--ea-primary) 9%,var(--ea-surface));color:var(--ea-primary)}.campaign-status.status-cancelled,.campaign-status.status-blocked{background:color-mix(in srgb,#dc2626 9%,var(--ea-surface));color:#b91c1c}.campaign-status.status-paused{background:color-mix(in srgb,#f59e0b 11%,var(--ea-surface));color:#9a4d00}.communication-detail-grid{grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr)}.campaign-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px}.campaign-meta>div{padding:12px;border-radius:13px;background:color-mix(in srgb,var(--ea-bg) 72%,var(--ea-surface))}.campaign-meta dt{color:var(--ea-muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.campaign-meta dd{margin:4px 0 0;overflow-wrap:anywhere}.campaign-body-preview{display:block;width:100%;height:420px;max-height:520px;border:1px solid var(--ea-border);border-radius:14px;background:#fff;color:#172033}.campaign-action-stack{display:grid;gap:9px}.campaign-action-stack form,.campaign-action-stack button{width:100%}.campaign-delete{min-height:42px;width:100%;text-align:center}.campaign-status-link{text-decoration:none}.campaign-status-link:hover .badge-soft{text-decoration:underline}@media(max-width:1050px){.campaign-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.campaign-summary-card:first-child{grid-column:span 2}.communication-detail-grid{grid-template-columns:1fr}}@media(max-width:650px){.campaign-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.campaign-summary-card:first-child{grid-column:1/-1}.campaign-meta{grid-template-columns:1fr}.communication-detail-head .page-actions{width:100%;display:grid;grid-template-columns:1fr}.communication-detail-head .page-actions a{width:100%}}

/* Audit: human-readable identity first, technical ids second */
.audit-human{display:block;max-width:260px;font-weight:750;overflow-wrap:anywhere}.audit-tech-id{display:block;margin-top:3px;color:var(--ea-muted);font-size:.68rem;font-weight:650}.audit-table-card .ea-table td{vertical-align:top}@media(max-width:760px){.audit-table-card .ea-table tr{padding-block:4px}.audit-human{max-width:none}.audit-tech-id{font-size:.66rem}}

/* Duplicate event diagnostics */
.duplicate-diagnostics{display:grid;gap:18px}.duplicate-cluster{background:var(--ea-surface);border:1px solid var(--ea-border);border-radius:22px;padding:20px;box-shadow:var(--ea-shadow-soft)}.duplicate-cluster-priority{border-color:color-mix(in srgb,var(--ea-accent) 34%,var(--ea-border));box-shadow:0 14px 34px rgba(15,39,66,.08)}.duplicate-cluster-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.duplicate-cluster-head h2{margin:2px 0 4px}.duplicate-cluster-head p{margin:0;color:var(--ea-muted)}.duplicate-records{display:grid;gap:10px}.duplicate-record{padding:14px 16px;border:1px solid var(--ea-border);border-radius:16px;background:var(--ea-soft)}.duplicate-record-main{display:flex;align-items:center;justify-content:space-between;gap:10px}.duplicate-meta,.duplicate-groups{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;color:var(--ea-muted);font-size:.88rem}.duplicate-meta span,.duplicate-groups span{padding:3px 8px;border-radius:999px;background:var(--ea-surface)}.duplicate-empty{max-width:760px}.duplicate-empty p{margin:.4rem 0 0}@media(max-width:640px){.duplicate-cluster{padding:15px;border-radius:18px}.duplicate-cluster-head,.duplicate-record-main{align-items:flex-start;flex-direction:column}.duplicate-record{padding:13px}.duplicate-meta,.duplicate-groups{gap:5px}}

/* Design Studio permanent library admin */
.library-admin-upload{margin-bottom:20px}.library-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}.library-admin-card{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:16px;border:1px solid var(--ea-border);border-radius:20px;background:var(--ea-surface);box-shadow:var(--ea-shadow-soft)}.library-admin-card.is-inactive{opacity:.66}.library-admin-preview{width:92px;height:92px;border-radius:16px;background:var(--ea-soft);display:grid;place-items:center;overflow:hidden}.library-admin-preview img{max-width:100%;max-height:100%;object-fit:contain}.library-admin-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.library-admin-form{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.library-admin-form input{min-width:0}.library-admin-form .check-row,.library-admin-form button{align-self:center}@media(max-width:600px){.library-admin-grid{grid-template-columns:1fr}.library-admin-card{grid-template-columns:74px 1fr;padding:13px}.library-admin-preview{width:74px;height:74px}.library-admin-form{grid-template-columns:1fr}}

/* Design Studio curated asset library */
.design-library-browser[hidden]{display:none!important}.design-library-browser{position:fixed;z-index:120;top:84px;right:18px;bottom:18px;width:min(440px,calc(100vw - 36px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ea-border);border-radius:22px;background:var(--ea-surface);box-shadow:0 28px 70px rgba(15,23,42,.24)}.design-library-header{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 62px 14px 18px;border-bottom:1px solid var(--ea-border)}.design-library-header>div{display:grid;gap:3px}.design-library-header strong{font-size:1rem}.design-library-header span{color:var(--ea-muted);font-size:.78rem;line-height:1.45}.design-library-controls{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px;padding:12px 14px 8px}.design-library-controls input,.design-library-controls select{width:100%;min-height:44px;border:1px solid var(--ea-border);border-radius:11px;background:var(--ea-surface);color:var(--ea-text);padding:8px 10px}.design-library-filters{display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px;scrollbar-width:none}.design-library-filters::-webkit-scrollbar{display:none}.design-library-filters button{flex:0 0 auto;min-height:38px;padding:6px 10px;border:1px solid var(--ea-border);border-radius:999px;background:var(--ea-surface);color:var(--ea-text);font-size:.75rem;font-weight:750;cursor:pointer}.design-library-filters button.active{border-color:color-mix(in srgb,var(--ea-primary) 38%,var(--ea-border));background:color-mix(in srgb,var(--ea-primary) 9%,var(--ea-surface));color:var(--ea-primary)}.design-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-content:start;overflow:auto;padding:4px 14px 18px}.design-library-item{position:relative;min-width:0;border:1px solid var(--ea-border);border-radius:14px;background:var(--ea-soft);overflow:hidden}.design-library-use{width:100%;min-height:128px;display:grid;grid-template-rows:96px auto;gap:5px;padding:7px;border:0;background:transparent;color:var(--ea-text);font:inherit;cursor:pointer}.design-library-use img{width:100%;height:96px;object-fit:contain;display:block}.design-library-use span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;font-weight:720}.design-library-favorite{position:absolute;right:6px;top:6px;width:36px;height:36px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--ea-border) 70%,transparent);border-radius:50%;background:color-mix(in srgb,var(--ea-surface) 92%,transparent);color:var(--ea-muted);font-size:20px;cursor:pointer;box-shadow:0 3px 10px rgba(15,23,42,.1)}.design-library-favorite.active{color:#b7791f}.design-library-use:focus-visible,.design-library-favorite:focus-visible,.design-library-controls input:focus-visible,.design-library-controls select:focus-visible,.design-library-filters button:focus-visible{outline:3px solid color-mix(in srgb,var(--ea-primary) 38%,transparent);outline-offset:2px}.design-library-empty{grid-column:1/-1;padding:24px 8px;text-align:center}.design-library-open{overflow:hidden}
@media(max-width:900px){.design-library-browser{top:auto;left:0;right:0;bottom:0;width:100%;max-height:min(78vh,720px);border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -24px 60px rgba(15,23,42,.26)}.design-library-header{padding:16px 62px 12px 16px}.design-library-controls{grid-template-columns:1fr;padding-inline:12px}.design-library-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding-inline:12px}.design-library-use{min-height:116px;grid-template-rows:84px auto}.design-library-use img{height:84px}.design-mobile-bar{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}.design-mobile-bar::-webkit-scrollbar{display:none}.design-mobile-bar button,.design-mobile-bar label{flex:0 0 64px;min-width:64px}}
@media(max-width:430px){.design-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-library-use{min-height:126px;grid-template-rows:94px auto}.design-library-use img{height:94px}}

/* ========================================================================== */
/* Event Alert — Dashboard refinement */
/* ========================================================================== */
.dashboard-page {
  display: grid;
  gap: 18px;
}
.dashboard-page > .page-head,
.dashboard-page > .stat-grid,
.dashboard-page > .dashboard-grid,
.dashboard-page > .dashboard-insights-grid,
.dashboard-page > .family-completeness-card,
.dashboard-page > .dashboard-cta-grid,
.dashboard-page > .dashboard-share-card,
.dashboard-page > .today-banner {
  margin-top: 0;
  margin-bottom: 0;
}
.dashboard-page > .page-head {
  padding: clamp(4px,1vw,10px) 0 2px;
}
.dashboard-page > .page-head h1 {
  letter-spacing: -.045em;
}
.dashboard-page .stat-grid {
  gap: 14px;
}
.dashboard-page .stat-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 18px;
  border-radius: 20px;
  border-color: color-mix(in srgb,var(--ea-primary) 10%,var(--ea-border));
  background: linear-gradient(155deg,var(--ea-surface),color-mix(in srgb,var(--ea-soft) 38%,var(--ea-surface)));
  box-shadow: 0 14px 36px rgba(20,43,78,.055);
}
.dashboard-page .stat-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -42px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: color-mix(in srgb,var(--ea-primary) 7%,transparent);
  pointer-events: none;
}
.dashboard-page .stat-card > * {
  position: relative;
  z-index: 1;
}
.dashboard-page .stat-card strong {
  display: block;
  margin: 8px 0 4px;
  font-size: clamp(1.8rem,3vw,2.45rem);
  line-height: 1;
  letter-spacing: -.055em;
}
.dashboard-page .stat-card span,
.dashboard-page .stat-card small {
  color: var(--ea-muted);
}
.dashboard-page .panel-card,
.dashboard-page .action-card,
.dashboard-page .family-completeness-card {
  border-radius: 22px;
  border-color: color-mix(in srgb,var(--ea-primary) 9%,var(--ea-border));
  box-shadow: 0 16px 44px rgba(20,43,78,.055);
}
.dashboard-page .today-banner {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--ea-accent) 16%,transparent),transparent 32%),
    linear-gradient(135deg,color-mix(in srgb,var(--ea-primary) 11%,var(--ea-surface)),color-mix(in srgb,var(--ea-accent) 5%,var(--ea-surface)));
}
.dashboard-page .today-events a,
.dashboard-page .event-list > a,
.dashboard-page .family-completeness-grid a {
  transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.dashboard-page .event-list > a:hover,
.dashboard-page .family-completeness-grid a:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb,var(--ea-primary) 24%,var(--ea-border));
  box-shadow: 0 10px 24px rgba(20,43,78,.055);
}
.dashboard-page .dashboard-cta-grid .action-card {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  padding: clamp(20px,2.6vw,28px);
  background: linear-gradient(150deg,var(--ea-surface),color-mix(in srgb,var(--ea-soft) 35%,var(--ea-surface)));
}
.dashboard-page .dashboard-cta-grid .action-card .action-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: color-mix(in srgb,var(--ea-primary) 10%,var(--ea-surface));
  color: var(--ea-primary);
  font-size: 1.15rem;
  font-weight: 900;
}
.dashboard-share-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(320px,.85fr);
  align-items: center;
  gap: clamp(20px,4vw,48px);
  padding: clamp(24px,4vw,40px);
  border-radius: 24px !important;
  border-color: color-mix(in srgb,var(--ea-primary) 16%,var(--ea-border)) !important;
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--ea-accent) 13%,transparent),transparent 36%),
    linear-gradient(135deg,color-mix(in srgb,var(--ea-primary) 8%,var(--ea-surface)),var(--ea-surface) 64%) !important;
}
.dashboard-share-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -70px;
  bottom: -90px;
  border-radius: 50%;
  border: 28px solid color-mix(in srgb,var(--ea-primary) 6%,transparent);
  pointer-events: none;
}
.dashboard-share-copy {
  min-width: 0;
}
.dashboard-share-copy h2 {
  margin: 6px 0 8px;
  max-width: 720px;
  font-size: clamp(1.35rem,2.3vw,2rem);
  line-height: 1.12;
  letter-spacing: -.04em;
}
.dashboard-share-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--ea-muted);
  line-height: 1.6;
}
.dashboard-share-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  min-width: 0;
}
.dashboard-share-actions > a,
.dashboard-share-actions > button {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100% !important;
  min-width: 0;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb,var(--ea-primary) 15%,var(--ea-border));
  border-radius: 14px;
  background: color-mix(in srgb,var(--ea-surface) 94%,var(--ea-soft));
  color: var(--ea-text);
  box-shadow: 0 8px 20px rgba(20,43,78,.04);
  font-weight: 780;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: transform .16s ease,border-color .16s ease,background .16s ease;
}
.dashboard-share-actions > a:hover,
.dashboard-share-actions > button:hover,
.dashboard-share-actions > a:focus-visible,
.dashboard-share-actions > button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb,var(--ea-primary) 34%,var(--ea-border));
  background: var(--ea-surface);
}
.dashboard-share-actions > * > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb,var(--ea-primary) 10%,var(--ea-surface));
  color: var(--ea-primary);
  font-size: .78rem;
  font-weight: 900;
}
@media (max-width: 980px) {
  .dashboard-share-card {
    grid-template-columns: 1fr;
  }
  .dashboard-share-actions {
    max-width: 620px;
  }
}
@media (max-width: 760px) {
  .dashboard-page {
    gap: 14px;
  }
  .dashboard-page .stat-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
  .dashboard-page .stat-card {
    min-height: 118px;
    padding: 15px;
    border-radius: 17px;
  }
  .dashboard-page .panel-card,
  .dashboard-page .action-card,
  .dashboard-page .family-completeness-card,
  .dashboard-share-card {
    border-radius: 19px !important;
  }
  .dashboard-share-card {
    padding: 20px;
  }
}
@media (max-width: 430px) {
  .dashboard-page .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-page .stat-card strong {
    font-size: 1.75rem;
  }
  .dashboard-share-actions {
    grid-template-columns: 1fr;
  }
  .dashboard-share-actions > a,
  .dashboard-share-actions > button {
    min-height: 48px;
  }
}
@media (max-width: 340px) {
  .dashboard-page .stat-grid {
    grid-template-columns: 1fr;
  }
}

/* Final Design Studio mobile integration override: keep this block last. */
@media (max-width: 900px) {
  .design-mobile-bar {
    display: flex !important;
    grid-template-columns: none !important;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    gap: 5px;
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .design-mobile-bar::-webkit-scrollbar {
    display: none;
  }

  .design-mobile-bar button,
  .design-mobile-bar label {
    flex: 0 0 68px;
    min-width: 68px;
    min-height: 48px;
    padding: 4px 5px;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    line-height: 1.05;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .design-mobile-bar {
    left: 6px;
    right: 6px;
  }

  .design-mobile-bar button,
  .design-mobile-bar label {
    flex-basis: 64px;
    min-width: 64px;
  }
}

/* ========================================================================== */
/* Event Alert Security V2 */
/* ========================================================================== */
.security-stat-grid{margin-bottom:10px}.security-last-seen{margin:-2px 0 18px;color:var(--ea-muted);font-size:.86rem}.security-last-seen strong{color:var(--ea-text)}.security-suspects-panel{margin-bottom:18px}.security-suspects-panel .ea-table small{display:block;margin-top:3px;max-width:420px;color:var(--ea-muted);overflow-wrap:anywhere}.security-blocked-badge{background:color-mix(in srgb,#dc2626 9%,var(--ea-surface));color:#b91c1c;border-color:color-mix(in srgb,#dc2626 20%,var(--ea-border))}.security-admin-grid{align-items:start;margin-bottom:18px}.security-manual-stack{display:grid;gap:18px}.security-manual-stack .form-card{width:100%}.security-admin-grid .check-line{align-self:end;min-height:44px}.security-admin-grid input[type=number]{font-variant-numeric:tabular-nums}@media(max-width:900px){.security-admin-grid{grid-template-columns:1fr}.security-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.security-stat-grid{grid-template-columns:1fr}.security-last-seen{font-size:.8rem}}

/* ========================================================================== */
/* Homepage hero descender fix — keep last so later responsive rules cannot   */
/* clip letters such as the g in "vergeten".                                 */
/* ========================================================================== */
.premium-home-hero .public-hero-copy h1 {
  line-height: .94 !important;
  padding-bottom: .16em !important;
  overflow: visible !important;
}


/* ========================================================================== */
/* Event Alert 2026-09-17 — responsive UX release                            */
/* Dedicated layouts avoid forcing data-heavy screens through generic tables. */
/* ========================================================================== */

/* Backup section headings do not use the numbered 42px column from the event editor. */
.backup-settings-form .form-section-head {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.backup-settings-form .form-section-head > div {
  min-width: 0;
  width: 100%;
}

.backup-settings-form .form-section-head h2,
.backup-settings-form .form-section-head .section-kicker {
  overflow-wrap: normal;
  word-break: normal;
}

/* SEO bulk controls get their own responsive layout instead of inheriting table pressure. */
.seo-bulk-actions {
  margin-bottom: .8rem;
}

@media (max-width: 760px) {
  .seo-filter-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 12px;
  }

  .seo-filter-bar > * {
    width: 100%;
    min-width: 0;
  }

  .seo-bulk-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .seo-bulk-actions > * {
    width: 100% !important;
    min-width: 0;
    max-width: none !important;
    min-height: 44px;
  }

  .seo-table-card {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .seo-pages-table,
  .seo-pages-table tbody,
  .seo-pages-table tr,
  .seo-pages-table td {
    display: block;
    width: 100%;
  }

  .seo-pages-table thead {
    display: none;
  }

  .seo-pages-table tr {
    position: relative;
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--ea-border);
    border-radius: 18px;
    background: var(--ea-surface);
    box-shadow: var(--ea-shadow-soft);
  }

  .seo-pages-table td {
    padding: 7px 0;
    border: 0;
    color: var(--ea-text);
    text-align: left;
    justify-content: flex-start;
    overflow-wrap: normal;
    word-break: normal;
  }

  .seo-pages-table td::before {
    content: attr(data-label);
    display: block;
    width: auto;
    max-width: none;
    margin: 0 0 3px;
    color: var(--ea-muted);
    font-size: .68rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .065em;
    text-transform: uppercase;
  }

  .seo-pages-table .seo-select-cell {
    position: absolute;
    top: 14px;
    right: 14px;
    width: auto;
    padding: 0;
  }

  .seo-pages-table .seo-select-cell::before,
  .seo-pages-table .seo-action-cell::before {
    display: none;
  }

  .seo-pages-table .seo-select-cell input {
    width: 22px;
    height: 22px;
    min-height: 0;
    margin: 0;
  }

  .seo-pages-table .seo-title-cell {
    padding-top: 0;
    padding-right: 42px;
  }

  .seo-pages-table .seo-title-cell .table-title {
    display: block;
    font-size: 1.04rem;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: break-word;
  }

  .seo-pages-table .seo-slug-cell {
    color: var(--ea-muted);
    overflow-wrap: anywhere;
  }

  .seo-pages-table .seo-status-cell .badge-soft {
    width: max-content;
    max-width: 100%;
  }

  .seo-pages-table .seo-action-cell {
    padding-top: 12px;
  }

  .seo-pages-table .seo-action-cell .table-action {
    min-height: 42px;
    padding: .58rem .8rem;
    border: 1px solid var(--ea-border);
    border-radius: 11px;
    background: var(--ea-soft);
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .seo-bulk-actions {
    grid-template-columns: 1fr;
  }
}

/* Events become purpose-built mobile cards: date at left, all descriptive text left aligned. */
@media (max-width: 620px) {
  .events-table-card {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .events-table,
  .events-table tbody,
  .events-table tr,
  .events-table td {
    width: 100%;
  }

  .events-table thead {
    display: none;
  }

  .events-table tr {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 7px 13px;
    margin: 0 0 11px;
    padding: 14px;
    border: 1px solid var(--ea-border);
    border-radius: 18px;
    background: var(--ea-surface);
    box-shadow: 0 10px 28px rgba(18,42,70,.055);
  }

  .events-table td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-wrap: normal;
    word-break: normal;
  }

  .events-table td::before {
    display: none;
  }

  .events-table .event-date-cell {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 66px;
    min-height: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 5px;
    border: 1px solid color-mix(in srgb,var(--ea-primary) 12%,var(--ea-border));
    border-radius: 14px;
    background: linear-gradient(145deg,var(--ea-soft),var(--ea-surface));
    text-align: center;
  }

  .events-table .event-date-cell strong {
    font-size: .93rem;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }

  .events-table .event-date-cell small {
    color: var(--ea-muted);
    font-size: .67rem;
    line-height: 1.15;
  }

  .events-table .event-title-cell,
  .events-table .event-type-cell,
  .events-table .event-group-cell,
  .events-table .event-action-cell {
    grid-column: 2;
  }

  .events-table .event-title-cell {
    grid-row: 1;
  }

  .events-table .event-title-cell .table-title {
    display: block;
    color: var(--ea-text);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.28;
    text-align: left;
    overflow-wrap: break-word;
  }

  .events-table .event-title-cell .shared-overlap-badges {
    justify-content: flex-start;
    margin-top: 6px;
  }

  .events-table .event-type-cell {
    grid-row: 2;
  }

  .events-table .event-type-cell .badge-soft {
    width: max-content;
    max-width: 100%;
  }

  .events-table .event-group-cell {
    grid-row: 3;
    color: var(--ea-muted);
    font-size: .82rem;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: break-word;
  }

  .events-table .event-group-cell::before {
    content: attr(data-label);
    display: inline;
    margin-right: 5px;
    color: var(--ea-muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  .events-table .event-action-cell {
    grid-row: 4;
    padding-top: 2px;
  }

  .events-table .event-action-cell .table-action {
    width: max-content;
    min-height: 38px;
    padding: .48rem .7rem;
    border: 1px solid var(--ea-border);
    border-radius: 10px;
    background: var(--ea-soft);
    text-align: left;
    justify-content: flex-start;
  }

  .events-table .event-empty-row {
    display: block;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .events-table .event-empty-row td {
    display: block;
  }
}

@media (max-width: 360px) {
  .events-table tr {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 7px 10px;
    padding: 12px;
  }

  .events-table .event-date-cell {
    width: 58px;
    min-height: 62px;
  }
}


/* 2026-09-21: notification settings and consistent mobile event-card alignment. */
.admin-notification-form .check-grid {
  gap: .65rem 1rem;
}
.admin-notification-form .check-line {
  min-width: 0;
  align-items: flex-start;
  padding: .65rem .75rem;
  border: 1px solid var(--ea-border);
  border-radius: 12px;
  background: var(--ea-surface);
  text-align: left;
}
.admin-notification-form .check-line input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin-top: .15rem;
  accent-color: var(--ea-primary);
}
.admin-notification-form .check-line span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.health-report-time,
#TwoFactorTrustHours {
  width: 100%;
  max-width: 17rem;
}
@media (max-width: 620px) {
  .events-table tr {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 8px;
    padding: 16px;
  }
  .events-table .event-date-cell,
  .events-table .event-title-cell,
  .events-table .event-type-cell,
  .events-table .event-group-cell,
  .events-table .event-action-cell {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .events-table .event-date-cell {
    min-height: 0;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .events-table .event-title-cell .table-title,
  .events-table .shared-overlap-badge,
  .events-table .badge-soft {
    overflow-wrap: anywhere;
    white-space: normal;
    max-width: 100%;
  }
  .events-table .event-group-cell::before {
    position: static;
    width: auto;
    padding: 0;
  }
  .events-table .event-action-cell .table-action {
    min-height: 40px;
  }
}


/* ========================================================================== */
/* Event Alert V8 — mobile public-header hardening                            */
/* Fixes Safari/bfcache backdrop blur, off-canvas nav leakage and logo fail.  */
/* Keep this block at the end of the stylesheet.                              */
/* ========================================================================== */
.public-brand-media {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
}
.public-brand-media > * {
  grid-area: 1 / 1;
}
.public-brand-media .public-brand-fallback {
  position: relative;
  z-index: 1;
}
.public-brand-media img {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #fff;
}
.public-brand-media.logo-failed img {
  display: none !important;
}
.public-mobile-backdrop[hidden] {
  display: none !important;
}

@media (max-width:760px) {
  .public-header {
    grid-template-columns: 44px minmax(0,1fr) 40px !important;
    min-height: 70px !important;
    gap: 8px !important;
    padding-inline: 12px !important;
    overflow: visible !important;
  }

  .public-brand {
    grid-column: 1 !important;
    justify-self: start !important;
    min-width: 0 !important;
  }

  .public-brand strong {
    display: none !important;
  }

  .public-actions {
    grid-column: 2 !important;
    justify-self: end !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: visible !important;
  }

  .public-header .public-login {
    display: none !important;
  }

  .public-header .btn-primary-ea {
    min-height: 40px !important;
    width: auto !important;
    max-width: 100% !important;
    padding: .58rem .74rem !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg,#2868f4,#159fe6) !important;
    color: #fff !important;
    opacity: 1 !important;
    box-shadow: 0 8px 22px rgba(37,99,235,.24) !important;
    font-size: .78rem !important;
    font-weight: 780 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .public-menu-button {
    grid-column: 3 !important;
    justify-self: end !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid rgba(31,59,91,.12) !important;
  }

  .public-header nav[data-public-nav] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(88vw,360px) !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow-y: auto !important;
    background: #fff !important;
    color: #132035 !important;
    transform: translate3d(105%,0,0) !important;
    transition: transform .22s ease !important;
    pointer-events: none !important;
    box-shadow: -24px 0 70px rgba(10,31,58,.20) !important;
    z-index: 260 !important;
  }

  .public-header nav[data-public-nav].open {
    transform: translate3d(0,0,0) !important;
    pointer-events: auto !important;
  }

  .public-header nav[data-public-nav] > a {
    display: block !important;
    width: 100% !important;
    padding: .9rem .92rem !important;
  }

  .public-mobile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 240 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: rgba(5,14,29,.48) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: opacity .18s ease,visibility .18s ease !important;
  }

  .public-mobile-backdrop.open:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .premium-home-hero {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

@media (max-width:390px) {
  .public-header {
    grid-template-columns: 42px minmax(0,1fr) 38px !important;
    padding-inline: 10px !important;
    gap: 6px !important;
  }
  .public-header .btn-primary-ea {
    padding-inline: .62rem !important;
    font-size: .74rem !important;
  }
  .public-menu-button {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }
}

/* ========================================================================== 
   Event Alert V9 – premium benefit icons, social share controls & mobile CTA
   ========================================================================== */

/* Homepage CTA must use the same visual width as the surrounding homepage
   sections. The generic .public-cta rule otherwise constrains it a second time. */
.home-cta-wrap .premium-public-cta {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Benefit cards: replace the empty decorative square with a purposeful,
   premium icon badge. These are benefits, not sequential steps, so no numbers. */
.premium-benefits .feature-grid article::before {
  width: 54px;
  height: 54px;
  margin-bottom: 30px;
  border-radius: 17px;
  border: 1px solid rgba(44,132,238,.16);
  box-shadow:
    0 13px 30px rgba(36,116,219,.12),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -8px 18px rgba(72,180,239,.06);
  background-color: #edf7ff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px 25px, 100% 100%;
}

.premium-benefits .feature-grid article:nth-child(1)::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231765d1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.25'/%3E%3Cpath d='M5.8 19c.8-3.5 3-5.3 6.2-5.3s5.4 1.8 6.2 5.3'/%3E%3C/svg%3E"),
    linear-gradient(145deg,#f7fbff 0%,#e8f6ff 58%,#eefcff 100%);
}

.premium-benefits .feature-grid article:nth-child(2)::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231765d1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.2' cy='8.2' r='2.7'/%3E%3Ccircle cx='16.5' cy='9.4' r='2.2'/%3E%3Cpath d='M3.8 18.4c.6-3.1 2.5-4.7 5.3-4.7 2.7 0 4.6 1.5 5.2 4.7M14.1 14.2c2.8-.4 4.8.9 5.6 3.7'/%3E%3C/svg%3E"),
    linear-gradient(145deg,#f7fbff 0%,#e8f6ff 58%,#eefcff 100%);
}

.premium-benefits .feature-grid article:nth-child(3)::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231765d1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10.2' width='13' height='9.2' rx='2.2'/%3E%3Cpath d='M8.4 10.2V7.7a3.6 3.6 0 0 1 7.2 0v2.5M12 14v1.8'/%3E%3C/svg%3E"),
    linear-gradient(145deg,#f7fbff 0%,#e8f6ff 58%,#eefcff 100%);
}

.premium-benefits .feature-grid article {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* One central premium share treatment. Every share control that uses
   data-share-channel inherits it on public pages and inside the dashboard. */
.share-buttons {
  gap: 10px !important;
}

.share-buttons > a[data-share-channel],
.share-buttons > button[data-share-channel] {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 15px 8px 9px !important;
  border: 1px solid rgba(26,56,91,.10) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,254,.96)) !important;
  color: #1c2f48 !important;
  font-size: .91rem;
  font-weight: 760 !important;
  line-height: 1.1;
  text-decoration: none !important;
  box-shadow:
    0 9px 24px rgba(18,48,82,.075),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease, background .17s ease;
  cursor: pointer;
}

.share-buttons > a[data-share-channel] > span[aria-hidden="true"],
.share-buttons > button[data-share-channel] > span[aria-hidden="true"] {
  display: none !important;
}

.share-buttons > [data-share-channel]::before {
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 17px 17px, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46);
}

.share-buttons > [data-share-channel="whatsapp"]::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 11.6a8.1 8.1 0 0 1-11.9 7.1L4 19.8l1.1-4.1A8.1 8.1 0 1 1 20.2 11.6Z'/%3E%3Cpath d='M9 8.2c.4 2.5 2.3 4.5 4.8 5.1l1.3-1.2 2 .9c-.1 1.1-.8 2-2 2.2-3.8-.1-7.3-3.3-7.7-7.1.1-1.1.8-1.9 1.8-2.1l1.1 1.9L9 8.2Z'/%3E%3C/svg%3E"),
    linear-gradient(145deg,#2fd66f,#20b85b);
}

.share-buttons > [data-share-channel="facebook"]::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M13.7 20v-7h2.4l.4-2.8h-2.8V8.4c0-.8.2-1.4 1.4-1.4h1.5V4.5c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2.1H8.2V13h2.5v7h3Z'/%3E%3C/svg%3E"),
    linear-gradient(145deg,#3d7df1,#2362d7);
}

.share-buttons > [data-share-channel="email"]::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6.2' width='16' height='11.6' rx='2.1'/%3E%3Cpath d='m5.3 8 6.7 5 6.7-5'/%3E%3C/svg%3E"),
    linear-gradient(145deg,#3ca7f4,#2478df);
}

.share-buttons > [data-share-channel="copy"]::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='10' height='10' rx='2'/%3E%3Cpath d='M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E"),
    linear-gradient(145deg,#64758b,#40536b);
}

@media (hover:hover) {
  .share-buttons > a[data-share-channel]:hover,
  .share-buttons > button[data-share-channel]:hover {
    transform: translateY(-2px);
    border-color: rgba(35,112,220,.18) !important;
    box-shadow:
      0 14px 32px rgba(18,48,82,.12),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }
}

.share-buttons > a[data-share-channel]:active,
.share-buttons > button[data-share-channel]:active {
  transform: translateY(0) scale(.985);
}

@media (max-width:760px) {
  .home-cta-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .home-cta-wrap .premium-public-cta {
    width: 100% !important;
    padding: 34px 26px !important;
    border-radius: 28px !important;
  }

  .premium-benefits .feature-grid article::before {
    width: 52px;
    height: 52px;
    margin-bottom: 28px;
  }

  .share-buttons {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    width: 100%;
    gap: 9px !important;
  }

  .share-buttons > a[data-share-channel],
  .share-buttons > button[data-share-channel] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px;
    justify-content: flex-start;
    padding-right: 12px !important;
    font-size: .88rem;
  }
}

@media (max-width:390px) {
  .share-buttons {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== 
   Event Alert V10 – calm mobile header + login at bottom of mobile menu
   ========================================================================== */
.public-header nav[data-public-nav] > a.public-mobile-login {
  display: none;
}

@media (max-width:760px) {
  /* Mobile header: intentionally only brand + menu. The account-request CTA
     remains available in page content, where it has enough visual space. */
  .public-header {
    grid-template-columns: 44px minmax(0,1fr) 40px !important;
  }

  .public-header .public-actions {
    display: none !important;
  }

  .public-menu-button {
    grid-column: 3 !important;
  }

  .public-header nav[data-public-nav] > a.public-mobile-login {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: auto !important;
    padding: .86rem 1rem !important;
    border: 1px solid rgba(26,75,132,.14) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg,#f8fbff,#edf5ff) !important;
    color: #12345a !important;
    box-shadow: 0 10px 26px rgba(23,72,126,.09), inset 0 1px 0 rgba(255,255,255,.96) !important;
    font-weight: 760 !important;
    text-align: center;
    text-decoration: none !important;
  }

  .public-mobile-login::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 9px;
    flex: 0 0 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.1 13.9a1 1 0 0 0 1.4 1.4l2.3-2.3H4a1 1 0 1 0 0 2h9.8l-2.3 2.3a1 1 0 1 0 1.4 1.4l4-4a1 1 0 0 0 0-1.4l-4-4a1 1 0 0 0-1.4 1.4l2.3 2.3H4a1 1 0 1 0 0 2h6.1ZM19 3h-6a1 1 0 1 0 0 2h6v14h-6a1 1 0 1 0 0 2h6a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.1 13.9a1 1 0 0 0 1.4 1.4l2.3-2.3H4a1 1 0 1 0 0 2h9.8l-2.3 2.3a1 1 0 1 0 1.4 1.4l4-4a1 1 0 0 0 0-1.4l-4-4a1 1 0 0 0-1.4 1.4l2.3 2.3H4a1 1 0 1 0 0 2h6.1ZM19 3h-6a1 1 0 1 0 0 2h6v14h-6a1 1 0 1 0 0 2h6a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  .public-mobile-login:active {
    transform: translateY(1px);
  }
}

@media (max-width:390px) {
  .public-header {
    grid-template-columns: 42px minmax(0,1fr) 38px !important;
  }
}


/* ========================================================================== 
   Event Alert V11 – premium full-screen mobile navigation
   ========================================================================== */
@media (max-width:760px) {
  /* The menu itself occupies the whole viewport. No translucent layer sits
     above it, which avoids the grey veil seen in Safari/Chrome mobile. */
  .public-header {
    z-index: 420 !important;
  }

  .public-mobile-backdrop,
  .public-mobile-backdrop.open:not([hidden]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .public-header nav[data-public-nav] {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding:
      max(18px, env(safe-area-inset-top))
      18px
      max(22px, env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
    background:
      radial-gradient(520px 300px at 100% 0%, rgba(53,166,239,.13), transparent 64%),
      radial-gradient(420px 280px at 0% 100%, rgba(37,99,235,.07), transparent 68%),
      linear-gradient(180deg,#fbfdff 0%,#f5f8fc 100%) !important;
    color: #10223a !important;
    box-shadow: none !important;
    transform: translate3d(102%,0,0) !important;
    transition: transform .26s cubic-bezier(.22,.72,.25,1) !important;
    z-index: 460 !important;
    overscroll-behavior: contain;
  }

  .public-header nav[data-public-nav].open {
    transform: translate3d(0,0,0) !important;
  }

  .public-mobile-nav-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 64px;
    margin: 0 0 28px !important;
    padding: 0 0 19px !important;
    border-bottom: 1px solid rgba(27,58,93,.08) !important;
  }

  .public-mobile-nav-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0;
    color: #11243d !important;
    text-decoration: none !important;
  }

  .public-mobile-nav-brand .brand-mark {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 15px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(145deg,#2d67f4,#18a8e4) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.35) !important;
    font-size: .82rem !important;
    font-weight: 820 !important;
    letter-spacing: -.02em;
  }

  .public-mobile-nav-brand-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .public-mobile-nav-brand-copy strong {
    display: block !important;
    color: #11243d !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    letter-spacing: -.025em;
  }

  .public-mobile-nav-brand-copy small {
    color: #78879a;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .public-mobile-nav-head button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(26,56,91,.10) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.92) !important;
    color: #203750 !important;
    box-shadow: 0 9px 24px rgba(23,54,90,.075), inset 0 1px 0 rgba(255,255,255,.98) !important;
    font-size: 1.62rem !important;
    line-height: 1 !important;
  }

  .public-mobile-nav-head button span {
    transform: translateY(-1px);
  }

  .public-mobile-nav-links {
    display: grid;
    gap: 11px;
  }

  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link {
    position: relative;
    width: 100% !important;
    min-height: 68px;
    display: grid !important;
    grid-template-columns: 44px minmax(0,1fr) 20px;
    align-items: center;
    gap: 13px;
    margin: 0 !important;
    padding: 10px 15px 10px 10px !important;
    border: 1px solid rgba(25,58,96,.085) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.86) !important;
    color: #132942 !important;
    box-shadow: 0 12px 32px rgba(17,49,84,.055), inset 0 1px 0 rgba(255,255,255,.98) !important;
    font-size: 1rem !important;
    font-weight: 770 !important;
    letter-spacing: -.015em;
    text-decoration: none !important;
  }

  .public-mobile-nav-link::before {
    content: "";
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: block;
    background-color: #eaf3ff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 21px 21px, 100% 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 8px 20px rgba(37,99,235,.08);
  }

  .public-mobile-nav-link::after {
    content: "";
    width: 16px;
    height: 16px;
    justify-self: end;
    background: #738398;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.3 5.3 1.4-1.4 8.1 8.1-8.1 8.1-1.4-1.4 6.7-6.7-6.7-6.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.3 5.3 1.4-1.4 8.1 8.1-8.1 8.1-1.4-1.4 6.7-6.7-6.7-6.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  .public-mobile-nav-link.nav-how::before {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b67d7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='3'/%3E%3Cpath d='M8 3.8v3.4M16 3.8v3.4M4 9.2h16M8.3 13.4l2.1 2.1 5-5'/%3E%3C/svg%3E"),
      linear-gradient(145deg,#f4f9ff,#e5f1ff);
  }

  .public-mobile-nav-link.nav-privacy::before {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b8f83' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 19 6v5.1c0 4.4-2.7 7.6-7 9.4-4.3-1.8-7-5-7-9.4V6l7-2.5Z'/%3E%3Cpath d='m8.8 12 2.1 2.1 4.5-4.5'/%3E%3C/svg%3E"),
      linear-gradient(145deg,#f2fffd,#e4f8f5);
  }

  .public-mobile-nav-link.nav-contact::before {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23714fd6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.8' y='5.5' width='16.4' height='13' rx='2.6'/%3E%3Cpath d='m5.3 7.4 6.7 5 6.7-5'/%3E%3C/svg%3E"),
      linear-gradient(145deg,#faf7ff,#eee9ff);
  }

  .public-header nav[data-public-nav] > a.public-mobile-login {
    min-height: 58px !important;
    margin: auto 0 0 !important;
    padding: .92rem 1.15rem !important;
    border: 0 !important;
    border-radius: 19px !important;
    background: linear-gradient(135deg,#102b50 0%,#154c74 58%,#0b7486 100%) !important;
    color: #fff !important;
    box-shadow: 0 18px 42px rgba(14,45,78,.19), inset 0 1px 0 rgba(255,255,255,.16) !important;
    font-size: 1rem !important;
    font-weight: 790 !important;
    letter-spacing: -.01em;
  }

  .public-mobile-login::before {
    background: #fff !important;
    opacity: .92;
  }

  .public-header nav[data-public-nav] > a.public-mobile-login::after {
    content: "";
    width: 17px;
    height: 17px;
    margin-left: auto;
    background: rgba(255,255,255,.88);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.3 5.3 1.4-1.4 8.1 8.1-8.1 8.1-1.4-1.4 6.7-6.7-6.7-6.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.3 5.3 1.4-1.4 8.1 8.1-8.1 8.1-1.4-1.4 6.7-6.7-6.7-6.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  .public-header nav[data-public-nav] > a.public-mobile-login:active,
  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link:active {
    transform: scale(.985);
  }
}

@media (max-width:390px) {
  .public-header nav[data-public-nav] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link {
    min-height: 64px;
    border-radius: 18px !important;
  }
}

/* ========================================================================== */
/* Event Alert – premium desktop public navigation                           */
/* Desktop only. V11 mobile navigation remains untouched.                    */
/* ========================================================================== */
@media (min-width: 1121px) {
  .public-header {
    min-height: 88px !important;
    grid-template-columns: minmax(230px, 1fr) auto minmax(310px, 1fr) !important;
    gap: clamp(34px, 4.2vw, 78px) !important;
    padding-inline: max(32px, calc((100vw - 1320px) / 2)) !important;
    background: rgba(255, 255, 255, .95) !important;
    border-bottom: 1px solid rgba(20, 48, 83, .065) !important;
    box-shadow: 0 10px 34px rgba(18, 42, 70, .04) !important;
    backdrop-filter: blur(20px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  }

  .public-header .public-brand {
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  .public-header .public-brand-media {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    box-shadow: 0 11px 26px rgba(37, 99, 235, .17), inset 0 1px 0 rgba(255,255,255,.48) !important;
  }

  .public-header .public-brand-media img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    object-fit: contain !important;
  }

  .public-header .public-brand strong {
    display: block !important;
    color: #122238 !important;
    font-size: 1rem !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
  }

  /* Desktop navigation: three clearly separated links, no shared pill. */
  .public-header nav[data-public-nav] {
    position: static !important;
    justify-self: center !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .public-header nav[data-public-nav] > .public-mobile-nav-head,
  .public-header nav[data-public-nav] > a.public-mobile-login {
    display: none !important;
  }

  .public-header nav[data-public-nav] > .public-mobile-nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(26px, 2.4vw, 42px) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: .72rem .15rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #3b4e68 !important;
    box-shadow: none !important;
    font-size: .92rem !important;
    font-weight: 740 !important;
    line-height: 1 !important;
    letter-spacing: -.012em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color .18s ease, transform .18s ease !important;
  }

  /* Remove the mobile icon / arrow decorations on desktop. */
  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 5px !important;
    width: 0 !important;
    height: 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #2b6df4, #16a7e7) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    transition: width .2s ease, opacity .2s ease !important;
  }

  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link::after {
    display: none !important;
    content: none !important;
  }

  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link:hover,
  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link:focus-visible {
    color: #155bc8 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
    outline: none !important;
  }

  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link:hover::before,
  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link:focus-visible::before {
    width: 28px !important;
    opacity: 1 !important;
  }

  /* Right side: distinct, balanced actions. */
  .public-header .public-actions {
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: auto !important;
  }

  .public-header .public-login {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: .72rem 1.08rem !important;
    border: 1px solid rgba(37, 99, 235, .22) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .9) !important;
    color: #1c4f96 !important;
    box-shadow: 0 7px 20px rgba(25, 73, 129, .055), inset 0 1px 0 rgba(255,255,255,.95) !important;
    font-size: .89rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease !important;
  }

  .public-header .public-login::before {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    flex: 0 0 16px !important;
    opacity: .78 !important;
  }

  .public-header .public-login:hover,
  .public-header .public-login:focus-visible {
    color: #155bc8 !important;
    border-color: rgba(37, 99, 235, .36) !important;
    background: #f7fbff !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .09), inset 0 1px 0 #fff !important;
    transform: translateY(-1px) !important;
    outline: none !important;
  }

  .public-header .btn-primary-ea {
    min-height: 46px !important;
    padding: .74rem 1.3rem !important;
    border: 1px solid rgba(21, 114, 221, .12) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #2869f4 0%, #1a8de9 58%, #18a9df 100%) !important;
    color: #fff !important;
    box-shadow: 0 12px 27px rgba(37, 99, 235, .22), inset 0 1px 0 rgba(255,255,255,.3) !important;
    font-size: .89rem !important;
    font-weight: 790 !important;
    line-height: 1 !important;
    letter-spacing: -.012em !important;
    white-space: nowrap !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  }

  .public-header .btn-primary-ea:hover,
  .public-header .btn-primary-ea:focus-visible {
    transform: translateY(-2px) !important;
    filter: saturate(1.03) brightness(1.02) !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, .28), inset 0 1px 0 rgba(255,255,255,.34) !important;
    outline: none !important;
  }

  .public-header .public-menu-button {
    display: none !important;
  }
}

/* Compact desktop/laptop: keep distinct spacing without collisions. */
@media (min-width: 1121px) and (max-width: 1320px) {
  .public-header {
    grid-template-columns: minmax(190px, 1fr) auto minmax(280px, 1fr) !important;
    gap: 24px !important;
    padding-inline: 24px !important;
  }

  .public-header nav[data-public-nav] > .public-mobile-nav-links {
    gap: 22px !important;
  }

  .public-header nav[data-public-nav] > .public-mobile-nav-links > a.public-mobile-nav-link {
    font-size: .87rem !important;
  }

  .public-header .public-actions {
    gap: 10px !important;
  }

  .public-header .public-login {
    padding-inline: .9rem !important;
  }

  .public-header .btn-primary-ea {
    padding-inline: 1.06rem !important;
  }
}

/* ========================================================================== 
   Event Alert – compacte dropdowns in gebeurtenis-editor
   Voorkomt dat selects verticaal meestrekken met een hoge kolom ernaast.
   ========================================================================== */
.event-editor .form-grid {
  align-items: start !important;
}

.event-editor .form-grid > label {
  align-self: start !important;
  align-content: start !important;
  height: auto !important;
  min-height: 0 !important;
}

.event-editor .form-grid > label > select {
  display: block !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 42px 0 14px !important;
  line-height: 44px !important;
  align-self: start !important;
}

@media (max-width: 760px) {
  .event-editor .form-grid > label > select {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    line-height: 42px !important;
  }
}

/* ========================================================================== */
/* Event Alert — public footer brand hardening                                */
/* Keeps branding clean when a configured logo file is missing/broken.       */
/* ========================================================================== */
.public-footer {
  align-items: center;
}

.public-footer-brand-block {
  display: grid;
  gap: 12px;
}

.public-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: fit-content;
  color: #fff;
  text-decoration: none;
}

.public-footer .footer-brand strong {
  display: block !important;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.public-footer .footer-brand-media,
.public-footer .footer-brand .public-brand-media {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,120,212,.22);
}

.public-footer .footer-brand .public-brand-media img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}

.public-footer .footer-brand .brand-mark {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
}

.public-footer .footer-brand .public-brand-media.logo-failed img {
  display: none !important;
}

.public-footer .footer-brand .public-brand-media.logo-failed .public-brand-fallback {
  display: grid !important;
}

.public-footer-brand-block > p {
  margin: 0;
  color: #9dabc0;
}

.public-footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}

.public-footer-links a {
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-weight: 650;
  transition: color .18s ease, opacity .18s ease;
}

.public-footer-links a:hover {
  color: #fff;
}

@media (max-width:760px) {
  .public-footer {
    align-items: flex-start;
  }

  .public-footer .footer-brand strong {
    display: block !important;
  }

  .public-footer-links {
    justify-content: flex-start;
    gap: 14px 20px;
  }
}

/* ========================================================================== */
/* Event Alert V13 — branding reliability + branding management               */
/* ========================================================================== */
.app-brand-media,
.auth-brand-media {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
}

.app-brand-media > *,
.auth-brand-media > * {
  grid-area: 1 / 1;
}

.app-brand-media .brand-mark,
.auth-brand-media .brand-mark {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
}

.app-brand-logo,
.auth-brand-media img {
  position: relative;
  z-index: 2;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  object-fit: contain;
  border-radius: 11px;
  background: #fff;
}

.app-brand .brand-logo-dark { display: none; }
html[data-color-mode="dark"] .app-brand .brand-logo-light { display: none; }
html[data-color-mode="dark"] .app-brand .brand-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html[data-color-mode="system"] .app-brand .brand-logo-light:has(+ .brand-logo-dark) { display: none; }
  html[data-color-mode="system"] .app-brand .brand-logo-dark { display: block; }
}

/* A configured logo is never allowed to stretch the internal navigation. */
.app-brand {
  min-width: 190px;
}
.app-brand .brand-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.app-brand .brand-copy strong,
.app-brand .brand-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Branding management: previews make it immediately obvious which asset is live. */
.branding-overview {
  margin-bottom: 24px;
}
.branding-preview-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}
.branding-logo-preview {
  min-height: 108px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--ea-border);
  border-radius: 20px;
  background: #fff;
}
.branding-logo-preview.dark-preview {
  color: #fff;
  background: linear-gradient(135deg,#08172a,#123658);
  border-color: rgba(255,255,255,.08);
}
.branding-logo-preview img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 4px;
}
.branding-logo-preview .brand-mark {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 14px;
}
.branding-logo-preview div {
  display: grid;
  gap: 3px;
}
.branding-logo-preview strong { font-size: 1.05rem; }
.branding-logo-preview small { opacity: .72; }

.branding-warning {
  margin-top: 16px;
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid rgba(185,72,49,.25);
  border-radius: 14px;
  background: rgba(255,239,234,.78);
  color: #7b2d1c;
}

.branding-form h2 {
  margin-top: 26px;
  margin-bottom: 8px;
}
.branding-upload-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}
.branding-upload-card {
  position: relative;
  min-height: 190px;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start;
  gap: 10px !important;
  padding: 16px !important;
  border: 1px solid var(--ea-border) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb,var(--ea-surface) 96%,var(--ea-bg)) !important;
  box-shadow: 0 12px 30px rgba(18,42,70,.04);
}
.branding-upload-card.wide { grid-column: span 2; }
.branding-upload-card.dark-card {
  background: linear-gradient(135deg,#0a1628,#133754) !important;
  color: #fff;
}
.branding-upload-card.asset-missing {
  border-color: rgba(185,72,49,.45) !important;
  box-shadow: 0 0 0 3px rgba(185,72,49,.06);
}
.branding-upload-title {
  font-weight: 800;
  line-height: 1.2;
}
.branding-upload-status {
  font-size: .78rem;
  color: var(--ea-muted);
}
.branding-upload-card.dark-card .branding-upload-status { color: rgba(255,255,255,.66); }
.branding-upload-card > img,
.branding-upload-fallback {
  width: 62px;
  height: 62px;
  min-width: 62px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
}
.branding-upload-card > img { padding: 4px; }
.branding-upload-card > img.small-preview { width: 48px; height: 48px; }
.branding-upload-card > img.landscape-preview {
  width: 100%;
  height: 90px;
  border-radius: 12px;
  object-fit: cover;
  padding: 0;
}
.branding-upload-card input[type="file"] {
  width: 100%;
  margin-top: auto;
  padding: 8px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: .78rem;
}
.branding-remove-zone p { margin-top: -8px; color: var(--ea-muted); }

@media (max-width: 1000px) {
  .branding-upload-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .branding-upload-card.wide { grid-column: span 2; }
}
@media (max-width: 700px) {
  .app-brand { min-width: 0; }
  .branding-preview-row,
  .branding-upload-grid { grid-template-columns: 1fr; }
  .branding-upload-card.wide { grid-column: auto; }
}