/* === Unknown Data — Global theme === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --ud-primary: #2D5A3D;       /* Dark Forest Green */
  --ud-interactive: #4A7C59;   /* Medium Forest Green */
  --ud-accent: #1B365D;        /* Deep Navy */
  --ud-text: #1A202C;          /* Charcoal Blue */
  --ud-bg: #FFFFFF;            /* Pure White */
  --actions-height: 108px;
  --tier-bronze: #C28B5C;
  --tier-silver: #AEB6C1;
  --tier-gold: #B38A2E;

  --ud-border: #E6EAF0;
  --ud-muted: #6B7280;
  --ud-hover-bg: #F5F8FB;      /* subtle hover background */

  /* stronger nav vs. softer content shadows */
  --ud-shadow-strong: 0 4px 10px rgba(0,0,0,0.08);
  --ud-shadow-soft: 0 2px 6px rgba(27,54,93,0.05);

  /* backward compat */
  --ud-shadow: var(--ud-shadow-soft);

  --ud-radius: 12px;

  --tooltip-bg: #EFFAF1;
  --tooltip-text: #1A202C;
}

/* ------- Base ------- */
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  padding-bottom: 0;
  background: var(--ud-bg);
  color: var(--ud-text);
}
.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: opacity 0.18s ease;
  opacity: 1;
}
.page-shell.is-leaving {
  opacity: 0.4;
}
.page-content {
  flex: 1 0 auto;
  width: 100%;
  overflow: visible !important;
}

/* Headings */
h1, h2, h3 {
  color: var(--ud-accent);
  font-weight: 700;
  margin: 0 0 1rem;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

/* ------- Navbar ------- */
.nav-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main head";
  align-items: center;
  background-color: var(--ud-primary);
  padding: 1.2rem 2rem;                   /* balanced horizontal padding */
  color: #fff;
  box-shadow: var(--ud-shadow-strong);
  position: relative;
  z-index: 20000;
}

.nav-container--public {
  justify-content: flex-end;
}

.nav-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
  justify-self: end;
}

.nav-main {
  grid-area: main;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

/* Use gap for symmetric spacing between items */
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 25px;                               /* symmetric spacing; no per-item margins */
}

.nav-right {
  margin-left: 0;
}

.nav-toggle {
  display: none;
  margin-left: 0;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 8px;
  cursor: pointer;
  padding: 0.35rem 0.85rem;
}

.nav-toggle__text {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
}

.nav-toggle:hover,
.nav-toggle:focus {
  background: rgba(255, 255, 255, 0.26);
}

.nav-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.nav-container .brand {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .3px;
}

/* Nav links and dropdown titles */
.nav-left a,
.nav-right a,
.nav-right button,
.dropdown-title {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .2px;
  line-height: 1;                           /* normalize baseline */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0.6rem;                   /* balanced hover hit area */
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Generic disabled tooltip (data-disabled-reason) */
[data-disabled-reason] {
  position: relative;
  cursor: not-allowed;
  pointer-events: auto;
  z-index: 2;
}

[data-disabled-reason]:hover,
[data-disabled-reason]:focus {
  z-index: 5;
}

[data-disabled-reason]::after {
  content: attr(data-disabled-reason);
  visibility: hidden;
  position: absolute;
  min-width: 160px;
  max-width: 260px;
  background-color: var(--tooltip-bg);
  color: var(--tooltip-text);
  text-align: center;
  padding: 8px 10px;
  border-radius: 10px;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  line-height: 1.3;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  opacity: 1;
  transition: opacity 0.2s ease;
  white-space: normal;
}

[data-disabled-reason]::before {
  content: "";
  position: absolute;
  visibility: hidden;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent var(--tooltip-bg) transparent;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.2s ease;
}

 [data-disabled-reason]:hover::after,
 [data-disabled-reason]:focus::after,
 [data-disabled-reason]:hover::before,
 [data-disabled-reason]:focus::before {
  visibility: visible;
  opacity: 1;
}

/* Tooltip wrapper (hover + focus-within) */

/* Context pills (org + profile) */
.nav-context-pill {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  max-width: 240px;
  white-space: nowrap;
}

.nav-right .dropdown-title.nav-context-pill {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.nav-context-pill:hover,
.nav-right .dropdown-title.nav-context-pill:hover {
  background: rgba(255, 255, 255, 0.26);
}

.nav-context-pill:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

/* Organisation switcher */
.org-switcher {
  display: grid;
  gap: 8px;
}
.org-switcher__search input {
  width: 100%;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.9rem;
}
.org-switcher__list {
  max-height: 320px;
  overflow: auto;
  overflow-x: hidden;
  display: grid;
  gap: 8px;
  align-content: start;
}
.org-switcher__section {
  display: grid;
  gap: 6px;
}
.org-switcher__title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ud-muted);
  font-weight: 700;
}
.org-switcher__hint {
  font-size: 0.8rem;
  color: var(--ud-muted);
}
.org-switcher__hint.is-hidden {
  display: none;
}
.org-switcher__divider {
  height: 1px;
  background: var(--ud-border);
  margin: 4px 0;
}
.org-switcher__items {
  display: grid;
  gap: 6px;
  align-content: start;
}
.org-switcher__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ud-text);
  font-size: 0.92rem;
  border: 1px solid transparent;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.25;
}
.dropdown-content a.org-switcher__item {
  display: flex;
  padding: 10px 10px;
  line-height: 1.25;
}
.org-switcher__item.is-disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.org-switcher__item:hover {
  background: var(--ud-hover-bg);
  border-color: var(--ud-border);
}
.org-switcher__item.is-current {
  background: rgba(27, 54, 93, 0.08);
  border-color: rgba(27, 54, 93, 0.2);
  color: var(--ud-text);
  font-weight: 600;
  cursor: default;
}
.org-switcher__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.org-switcher__item .nav-badge {
  margin-left: auto;
  flex-shrink: 0;
}
.org-switcher__empty {
  display: none;
  color: var(--ud-muted);
  font-size: 0.85rem;
  padding: 4px 2px;
}
.org-switcher__empty.is-visible {
  display: block;
}
.org-switcher__item.is-hidden,
.org-switcher__section.is-hidden {
  display: none;
}
.org-switcher__items.is-hidden {
  display: none;
}
.dropdown-content a.org-switcher__item.is-hidden {
  display: none;
}
.org-switcher[data-org-pagination="true"] .org-switcher__list {
  min-height: calc(5 * var(--org-row-height, 44px) + 4 * 8px);
}
.org-switcher[data-org-pagination="true"] .org-switcher__item {
  min-height: var(--org-row-height, 44px);
}
.org-switcher__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.org-switcher__pagination--dropdown {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px;
}
.nav-right .org-switcher__pagination--dropdown .org-switcher__page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid #c6d1df;
  border-radius: 7px;
  background: #fff;
  color: var(--ud-accent);
  font-size: 0.8rem;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.06);
}
.nav-right .org-switcher__pagination--dropdown .org-switcher__page-btn:hover:not(:disabled),
.nav-right .org-switcher__pagination--dropdown .org-switcher__page-btn:focus-visible {
  border-color: var(--ud-accent);
  background: #eef3f8;
  color: var(--ud-accent);
}
.org-switcher__pagination.is-hidden {
  display: none;
}
.org-switcher__page-label {
  font-size: 0.85rem;
  color: var(--ud-muted);
}
.org-switcher__pagination--dropdown .org-switcher__page-label {
  justify-self: center;
  color: var(--ud-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
}
.org-switcher__page-btn[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
}

/* Organisation list page */
.org-list-page {
  display: grid;
  gap: 14px;
}
.org-list-header h1 {
  margin-bottom: 4px;
}
.org-list-search input {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
}
.org-list {
  display: grid;
  gap: 8px;
}
.org-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ud-border);
  text-decoration: none;
  color: var(--ud-text);
  background: #fff;
}
.org-list__item.is-disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.org-list__item:hover {
  background: var(--ud-hover-bg);
}
.org-list__name {
  font-weight: 600;
}
.org-list__empty {
  display: none;
  color: var(--ud-muted);
  font-size: 0.9rem;
  padding: 6px 2px;
}
.org-list__empty.is-visible {
  display: block;
}
.org-list__item.is-hidden {
  display: none;
}

.nav-context-text {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* Plan badge in org selector */
.nav-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #fff;
  margin-left: 0.35rem;
  border: 1px solid transparent;
}

.nav-badge--bronze {
  border-color: #b26a3c;
  color: #8a522d;
}

.nav-badge--silver {
  border-color: #9aa5b1;
  color: #5c6b7a;
}

.nav-badge--gold {
  border-color: #b08d00;
  color: #7a5f00;
}

/* Hover states: background highlight */
.nav-left a:hover,
.nav-right a:hover,
.nav-right button:hover,
.dropdown-title:hover {
  background-color: rgba(255, 255, 255, 0.15);
  text-decoration: none;
  color: #fff;
}

/* Disabled nav link (no access) */
.nav-link-disabled {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .2px;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  cursor: not-allowed;
  position: relative;
}

.dropdown-content .dropdown-item {
  display: block;
  padding: 0.5rem 0.85rem;
  color: #1f2a44;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  box-sizing: border-box;
}

.dropdown-content .dropdown-item.current {
  background: rgba(45, 90, 61, 0.14);
  color: #2d5a3d;
}

.dropdown-content .dropdown-item.disabled {
  color: #9aa5b1;
  cursor: not-allowed;
}

.dropdown-divider {
  height: 1px;
  margin: 0.45rem 0.6rem;
  background: rgba(0, 0, 0, 0.1);
}

.dropdown-form {
  margin: 0;
  display: contents;
}

.dropdown-link,
.dropdown-content a,
.dropdown-content button.dropdown-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.85rem;
  color: #1f2a44;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  font: inherit;
}

.dropdown-link:hover,
.dropdown-content a:hover,
.dropdown-content button.dropdown-link:hover,
.dropdown-content button.dropdown-link:focus {
  background: rgba(45, 90, 61, 0.16);
  color: #244a33;
}

/* Active state: underline bar */
.nav-left .active,
.nav-right .active {
  position: relative;
  font-weight: 700;
}
.nav-left .active::after,
.nav-right .active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
}

/* Welcome text aligned with links */
.nav-right .welcome {
  line-height: 1;
  margin: 0;                                /* gap handles spacing */
}

/* ------- Logout inline form ------- */
.logout-form {
  all: unset;
  display: inline-flex;                      /* behave like a nav item */
  align-items: center;
  margin: 0;
  padding: 0;
}

form.logout-form .logout-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.6rem;                    /* same as nav links */
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-top: 0 !important;                  /* ignore global submit margin */
}

form.logout-form .logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

/* ------- Dropdown ------- */
.dropdown { position: relative; display: inline-block; } /* nav uses gap */
.dropdown-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 320px;
  width: 320px;
  z-index: 30000;
  padding: 0.4rem;
  border-radius: 12px;
  border: 1px solid var(--ud-border);
  box-shadow: var(--ud-shadow-strong);
  overflow: visible;
}
.ai-menu-portal,
#ai-menu-portal {
  position: fixed;
  inset: 0;
  z-index: 65000;
  pointer-events: none;
}
.ai-menu-portal .ai-more__menu,
#ai-menu-portal .ai-more__menu {
  pointer-events: auto;
}
.nav-right .dropdown-content {
  right: 0;
  left: auto;
}
.dropdown-content a {
  display: block;
  color: var(--ud-text);
  padding: 0.4rem 0.75rem;
  transition: background-color 0.2s;
  border-radius: 8px;
}
.dropdown-content a:hover {
  background-color: rgba(45, 90, 61, 0.25);
  color: var(--ud-accent);
}
.dropdown:hover .dropdown-content { display: block; }

@media (max-width: 980px) {
  .nav-container {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    padding: 0.9rem 1rem;
    gap: 10px;
  }
  .nav-head {
    margin-left: 0;
    justify-content: space-between;
  }
  .nav-head .nav-right {
    width: auto;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .nav-toggle {
    display: inline-flex;
    margin-left: 0;
  }
  .nav-main {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .nav-container.is-open .nav-main {
    display: flex;
  }
  .nav-left {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .nav-left a,
  .nav-link-disabled {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: rgba(255, 255, 255, 0.08);
  }
  .nav-head .dropdown {
    width: auto;
    display: inline-block;
  }
  .nav-head .dropdown-title {
    width: auto;
    justify-content: flex-start;
    padding: 0.35rem 0.7rem;
  }
  .nav-container .dropdown:hover .dropdown-content {
    display: none;
  }
  .nav-container .dropdown.is-open .dropdown-content {
    display: block;
  }
  .nav-head .dropdown-content {
    position: absolute;
    right: 0;
    left: auto;
    width: min(92vw, 320px);
    min-width: 260px;
    margin-top: 8px;
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* ------- Footer ------- */
footer {
  position: static;
  padding: 1.1rem;
  text-align: center;
  background-color: #FAFBFC;
  font-size: 0.95em;
  border-top: 1px solid var(--ud-border);
  color: #556070;
}
.team-page {
  display: grid;
  gap: 20px;
}
.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.team-header__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.team-org-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.team-org-title h1 {
  margin: 0;
  line-height: 1.2;
}
.team-org-edit {
  border: 0;
  background: transparent;
  color: var(--ud-muted);
  cursor: pointer;
  padding: 4px;
}
.team-org-edit:hover {
  color: var(--ud-text);
}
.team-seat-summary {
  display: grid;
  gap: 6px;
  color: var(--ud-muted);
  text-align: right;
}
.status-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.team-seat-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.1);
  border: 1px solid rgba(27, 54, 93, 0.25);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ud-text);
}
.team-plan-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.06);
  border: 1px solid rgba(27, 54, 93, 0.14);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ud-muted);
}
.team-plan-chip--gold {
  border-color: #D4AF37;
  color: #B08600;
  background: transparent;
  font-weight: 500;
}
.team-plan-chip--gold:hover,
.team-plan-chip--gold:focus {
  background: rgba(212, 175, 55, 0.08);
}
.team-seat-summary__line {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.team-seat-label {
  font-weight: 600;
  color: var(--ud-text);
}
.team-seat-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  font-weight: 700;
  color: var(--ud-accent);
}
.team-seat-note {
  color: var(--ud-muted);
  font-size: 0.85rem;
}
.team-seat-summary__sub {
  color: var(--ud-muted);
  font-size: 0.9rem;
  justify-content: flex-end;
}
.team-seat-helper {
  color: var(--ud-muted);
  font-size: 0.85rem;
}
.team-seat-link {
  color: var(--ud-muted);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}
.team-seat-link:hover {
  color: var(--ud-accent);
  text-decoration: underline;
}
.team-seat-link:hover {
  text-decoration: underline;
}
.team-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid transparent;
  background: #fff;
}
.team-plan-badge--bronze {
  border-color: #b26a3c;
  color: #8a522d;
  background: rgba(194, 139, 92, 0.12);
}
.team-plan-badge--silver {
  border-color: #9aa5b1;
  color: #5c6b7a;
  background: rgba(174, 182, 193, 0.18);
}
.team-plan-badge--gold {
  border-color: #b08d00;
  color: #7a5f00;
  background: rgba(179, 138, 46, 0.18);
}
.team-card {
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 14px;
  padding: 20px;
}
.team-invite-form {
  display: grid;
  gap: 12px;
  max-width: 420px;
}
.team-invite-form.is-locked {
  opacity: 0.85;
}
.team-invite-form,
.team-action-form,
.team-actions__inline form {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  margin: 0;
  max-width: none;
}
.member-modal form {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  margin: 0;
}
.member-modal input,
.member-modal select {
  width: 100%;
  box-sizing: border-box;
}
.member-modal select + .team-role-helper {
  margin-top: 0.4rem;
}
.member-modal .member-edit-field {
  margin-bottom: 1.25rem;
}
.team-invite-form .form-row {
  display: grid;
  gap: 6px;
}
.team-invite-form input,
.team-invite-form select {
  padding: 8px 12px;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}
.team-note {
  color: var(--ud-muted);
}
.team-note--sub {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: #8a94a3;
}
.team-helper {
  margin: 0.4rem 0 0;
  color: var(--ud-muted);
  font-size: 0.9rem;
}
.team-helper--sub {
  margin-top: 0.2rem;
  font-size: 0.85rem;
}
.team-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F7FAFF;
  border: 1px solid #E3EAF4;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: var(--ud-text);
  margin-bottom: 0.6rem;
}
.team-banner__icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(27,54,93,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--ud-accent);
  background: #fff;
}
.team-banner__text {
  flex: 1;
}
.team-banner__link {
  color: var(--ud-accent);
  font-weight: 600;
  text-decoration: none;
}
.team-banner__link:hover {
  text-decoration: underline;
}
.team-banner + .team-banner {
  margin-top: 0.4rem;
}
.team-banner--warn {
  background: #FFF6F6;
  border-color: #F2C5C5;
  color: #7a1f1f;
}
.team-warning {
  margin: 0.3rem 0 0;
  color: #7a5f00;
  font-size: 0.85rem;
}
.team-role-helper {
  margin: 0;
  color: var(--ud-muted);
  font-size: 0.85rem;
}
.team-role-helper--box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.team-role-helper--icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 9px;
}
.team-role-helper--icon::before {
  content: "\f0eb";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #2D5A3D;
  font-size: 0.85rem;
}
.team-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.org-add-actions {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.org-add-actions .btn.primary {
  align-self: flex-end;
  margin-top: auto;
}
.team-invite-divider {
  border-top: 1px solid var(--ud-border);
  margin: 0.9rem 0 0.8rem;
}
.team-invite-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.team-invite-context {
  color: var(--ud-muted);
  font-size: 0.9rem;
}
.team-invite-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 720px) {
  .team-invite-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .team-invite-cta .btn {
    width: 100%;
  }
}
.team-role__cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.team-role__label {
  font-weight: 600;
}
.team-role__label--admin {
  color: #2d5a3d;
  font-weight: 700;
}
.team-help-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--ud-accent);
  background: #fff;
  color: var(--ud-accent);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(27,54,93,0.12);
}
.team-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--ud-accent);
  background: #fff;
  color: var(--ud-accent);
  font-size: 0.75rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.team-help-toggle:hover {
  background: var(--ud-accent);
  color: #fff;
}
.team-help-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 10000;
}
.team-help {
  display: none;
  background: #F7FAFF;
  border: 1px solid #E3EAF4;
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  color: var(--ud-muted);
  margin-top: 6px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  transform: none;
  min-width: 180px;
  max-width: 260px;
  z-index: 20000;
  box-shadow: 0 10px 24px rgba(27,54,93,0.12);
}
.team-help-portal {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  background: #F7FAFF;
  border: 1px solid #E3EAF4;
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  color: var(--ud-muted);
  max-width: 260px;
  z-index: 50000;
  box-shadow: 0 10px 24px rgba(27,54,93,0.12);
}
.team-help-portal.is-visible {
  display: block;
}
.team-help-wrap:hover .team-help,
.team-help-wrap:focus-within .team-help {
  display: none;
}
.team-actions__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.plan-modal__content input[type="number"] {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  font-size: 1rem;
  margin: 0.4rem 0 0.9rem;
  box-sizing: border-box;
}
.seat-checkout-summary {
  display: grid;
  gap: 10px;
  margin: 0.8rem 0 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--ud-border);
  background: #F7FAFF;
}
.seat-checkout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ud-muted);
  font-size: 0.95rem;
}
.seat-checkout-row strong {
  color: var(--ud-text);
  font-weight: 700;
}
.seat-checkout-total strong {
  color: var(--ud-accent);
}
.seat-checkout-after strong {
  color: var(--ud-text);
}
.team-table {
  display: grid;
  gap: 10px;
  padding: 0 20px;
}
.team-grid {
  display: grid;
  grid-template-columns: minmax(350px, 1fr) minmax(190px, 1fr) minmax(160px, 200px) 80px;
  align-items: center;
  gap: 12px;
}
.team-table__row.team-grid {
  align-items: stretch;
}
.team-table__row.team-grid .role-cell,
.team-table__row.team-grid .actions-cell {
  height: 100%;
  display: flex;
  align-items: center;
}
.team-table__row.team-grid .team-meta {
  height: 100%;
  display: flex;
  align-items: center;
}
.team-grid .role-cell {
  display: flex;
  align-items: center;
}
.team-grid .actions-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.team-table__head,
.team-table__row {
  gap: 12px;
}
.team-table__actions {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}
.team-table__head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ud-muted);
  font-weight: 700;
}
.team-table__row {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ud-border);
}
.team-table__row:last-child {
  border-bottom: 1px solid var(--ud-border);
}
.member-row {
  border-radius: 12px;
  padding: 10px 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.member-row:hover {
  background: var(--ud-hover-bg);
}
.member-row:focus-visible {
  outline: 2px solid rgba(27,54,93,0.2);
  outline-offset: 2px;
}
.role-cell .team-role__label {
  font-weight: 600;
  color: var(--ud-text);
}
.badge-primary {
  border-color: rgba(27,54,93,0.3);
  background: rgba(27,54,93,0.12);
  color: var(--ud-accent);
}
.badge-secondary {
  border-color: rgba(120,130,150,0.35);
  background: transparent;
  color: #5f6b7a;
}
.badge-secondary.is-external {
  border-color: rgba(120,85,38,0.35);
  color: #7a5f00;
}
.actions-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.actions-btn {
  min-width: 44px;
  min-height: 36px;
  margin: 0;
  opacity: 1;
  background: rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(27, 54, 93, 0.35);
  box-shadow: 0 4px 10px rgba(27, 54, 93, 0.12);
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) minmax(140px, 180px) 80px;
  }
}
.actions-btn[data-tooltip]::after {
  display: none;
}
.team-table__row.team-grid {
  padding: 14px 0;
  border-bottom: 1px solid var(--ud-border);
}
.team-table__row.team-grid:last-child {
  border-bottom: 1px solid var(--ud-border);
}
.team-table__row.team-grid > div {
  height: 100%;
  display: flex;
  align-items: center;
}
.team-table__row.team-grid .team-member,
.team-table__row.team-grid .team-meta {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.team-meta__sub {
  color: var(--ud-muted);
  font-size: 0.85rem;
  display: block;
}
.team-badge--pending {
  margin-top: 6px;
  border-color: rgba(120, 130, 150, 0.35);
  background: transparent;
  color: #5f6b7a;
}
.team-badge--member-type-outline {
  border-color: rgba(45, 90, 61, 0.35);
  background: transparent;
  color: #2d5a3d;
}
.team-badge--member-type-outline.is-external {
  border-color: rgba(120, 85, 38, 0.35);
  color: #7a5f00;
}
.invite-actions__menu {
  position: relative;
}
.invite-actions__menu summary::-webkit-details-marker {
  display: none;
}
.invite-actions__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  box-shadow: var(--ud-shadow-strong);
  padding: 0.4rem;
  z-index: 30000;
  pointer-events: auto;
}
.invite-actions__panel form {
  margin: 0;
}
.invite-actions__panel button {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.invite-actions__item {
  width: 100%;
  border: 0 !important;
  background: transparent;
  box-shadow: none !important;
  text-align: left;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  color: #1f2a44;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}
.dropdown--account .dropdown-content {
  min-width: 200px;
  width: 200px;
}
.invite-actions__item:hover,
.invite-actions__item:focus {
  background: rgba(45, 90, 61, 0.16);
  color: #244a33;
}
.invite-actions__divider {
  height: 1px;
  background: var(--ud-border);
  margin: 4px 0;
}
.invite-actions__item--danger {
  color: #7a1f1f;
}
.invite-actions__item.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.member-actions__menu {
  position: relative;
}
.member-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 60000;
}
.member-modal.is-visible {
  display: block;
}
.member-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
}
.member-modal__content {
  position: relative;
  max-width: 560px;
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  border: 0;
  box-shadow: 0 18px 44px rgba(27, 54, 93, 0.22);
}
.member-modal--danger .member-modal__content {
  border: 1px solid rgba(184, 55, 55, 0.35);
  background: #FFF7F7;
}
.member-modal__context {
  color: var(--ud-muted);
  margin: 0.2rem 0 1rem;
}
.member-modal__email {
  display: block;
  font-size: 0.9rem;
}
.member-type-options {
  display: flex;
  gap: 14px;
  margin: 0.4rem 0 0.2rem;
}
.member-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.member-modal__actions button[type="button"] {
  margin-top: 1rem;
}
.member-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ud-muted);
  cursor: pointer;
}
.member-modal__close:hover {
  color: var(--ud-text);
}
.modal-open .team-help-portal {
  display: none;
}
.invite-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 60000;
}
.invite-modal.is-visible {
  display: block;
}
.invite-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
}
.invite-modal__content {
  position: relative;
  max-width: 420px;
  margin: 12vh auto 0;
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  border: 1px solid var(--ud-border);
  box-shadow: 0 16px 40px rgba(27, 54, 93, 0.2);
}
.invite-modal__content form {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  margin: 0;
}
.invite-modal__actions button[type="button"] {
  margin-top: 1rem;
}
.invite-modal--danger .invite-modal__content {
  border: 1px solid rgba(184, 55, 55, 0.35);
  background: #FFF7F7;
}
.invite-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ud-muted);
  cursor: pointer;
}
.invite-modal__close:hover {
  color: var(--ud-text);
}
.invite-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.team-table__empty {
  color: var(--ud-muted);
  padding: 0.4rem 0;
}
.team-member__name {
  font-weight: 600;
}
.team-member__email {
  color: var(--ud-muted);
  font-size: 0.9rem;
}
.team-member__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.team-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid rgba(27, 54, 93, 0.2);
  color: var(--ud-accent);
  background: var(--ud-hover-bg);
}
.team-badge.badge-primary {
  border-color: rgba(27, 54, 93, 0.35);
  background: rgba(27, 54, 93, 0.12);
  color: var(--ud-accent);
  font-weight: 700;
}
.team-badge.badge-secondary {
  border-color: rgba(120, 130, 150, 0.35);
  background: transparent;
  color: #5f6b7a;
  font-weight: 600;
}
.team-badge.badge-secondary.is-external {
  border-color: rgba(120, 85, 38, 0.35);
  color: #7a5f00;
}
.team-badge--member-type {
  border-color: rgba(45, 90, 61, 0.35);
  background: rgba(45, 90, 61, 0.12);
  color: #2d5a3d;
}
.team-badge--member-type.is-external {
  border-color: rgba(120, 85, 38, 0.35);
  background: rgba(120, 85, 38, 0.12);
  color: #7a5f00;
}
.team-badge--admin {
  border-color: rgba(45, 90, 61, 0.35);
  background: rgba(45, 90, 61, 0.12);
  color: #2d5a3d;
}
.team-badge--member-type {
  border-color: rgba(58, 86, 120, 0.25);
  background: rgba(58, 86, 120, 0.08);
  color: #3a5678;
}
.team-badge--member-type.is-external {
  border-color: rgba(120, 85, 38, 0.35);
  background: rgba(120, 85, 38, 0.12);
  color: #7a5f00;
}
.team-badge--inactive {
  border-color: rgba(120, 130, 150, 0.4);
  background: rgba(120, 130, 150, 0.12);
  color: #5f6b7a;
}
.team-meta {
  color: var(--ud-muted);
  font-size: 0.9rem;
}
.team-actions {
  justify-self: end;
  position: relative;
}
.team-actions__menu {
  position: relative;
}
.team-actions__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--ud-border);
  background: #fff;
  font-weight: 700;
  color: var(--ud-accent);
  cursor: pointer;
}
.team-actions__toggle:hover {
  background: #fff;
  border-color: var(--ud-border);
}
.member-actions__menu[open] .team-actions__toggle,
.invite-actions__menu[open] .team-actions__toggle {
  background: var(--ud-hover-bg);
  border-color: rgba(27,54,93,0.25);
}
.team-actions__toggle.is-locked {
  opacity: 0.6;
  cursor: not-allowed;
}
.is-locked {
  cursor: not-allowed;
}
.team-actions__menu summary::-webkit-details-marker {
  display: none;
}
.team-actions__panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  box-shadow: var(--ud-shadow);
  padding: 12px;
  min-width: 220px;
  z-index: 10;
  gap: 10px;
}
.team-actions__menu[open] .team-actions__panel {
  display: grid;
}
.team-action-form {
  display: grid;
  gap: 6px;
}
.team-action-label {
  font-size: 0.8rem;
  color: var(--ud-muted);
  font-weight: 600;
}
.team-action-form select {
  padding: 6px 8px;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
}
.team-actions__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.team-actions__inline .btn.danger,
.team-action-form .btn.danger {
  margin-left: 0;
}
.team-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.team-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ud-border);
}
.team-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.team-role {
  color: var(--ud-muted);
  font-weight: 600;
}
.team-role .team-badge {
  margin-left: 6px;
  vertical-align: middle;
}
@media (max-width: 980px) {
  .team-header {
    align-items: flex-start;
  }
  .team-seat-summary {
    text-align: left;
    justify-items: start;
  }
  .team-seat-summary__line {
    justify-content: flex-start;
  }
  .status-pill-group {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .team-table__head {
    display: none;
  }
  .team-table__row,
  .team-table__row--invites {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 6px;
  }
  .team-actions,
  .team-table__actions {
    justify-self: start;
  }
  .team-actions__panel {
    right: auto;
    left: 0;
  }
}

/* ------- Layout ------- */
/* Center the content and keep symmetric side paddings */
.container {
  max-width: 80%;               /* adjust as needed */
  margin: 0 auto;               /* centers container */
  padding: 1.5rem;              /* equal all around for symmetry */
  overflow: visible !important;
}

/* Columns */
.ai-col { padding: 0 0; }
.ai-col--title { align-self: start; }
.ai-col--meta { align-self: start; }

/* Actions arranged vertically for clarity (wrap on small screens) */
.ai-action--primary .btn,
.ai-action--secondary .btn { min-width: 220px; }

/* Responsive: stack on narrow screens */
@media (max-width: 980px){
  .ai-action { flex-direction: row; flex-wrap: wrap; }
}

/* Title + badges */
.ai-title{ margin: 0; font-size: 1.3rem; color: var(--ud-accent); line-height: 1.1; font-weight: 800; }
.ai-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.ai-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;      /* avoids awkward vertical centering with different heights */
  margin: 0;
}

/* Let each badge wrap and shrink properly inside the flex row */
.ai-badges > .badge {
  min-width: 0;                 /* allow shrinking inside flex container */
}

/* Base badge: multiline pill */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .45rem .75rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal !important;      /* override any earlier nowrap */
  word-break: break-word;
  overflow-wrap: anywhere;             /* break long tokens/URLs/etc. */
  max-width: 100%;
}

/* Explicitly ensure use-case badge follows the same wrap behavior */
.badge--usecase {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}


.badge--risk{
  background: color-mix(in srgb, var(--risk-accent) 25%, #fff);
  color: var(--ud-text);
  border: 1px solid var(--risk-accent);
}
/* Meta key/value list */
.meta-kv{
  margin: 0;
  padding-left: 0;             /* remove default UL indent */
  list-style: none;
  display: grid;
  gap: 6px;
}
.meta-kv li strong{ color: var(--ud-text); font-weight: 700; }

/* Compact buttons inside AI rows */
.ai-card .btn { border-radius: 12px; box-shadow: 0 6px 12px rgba(45,90,61,.14); }
.ai-card .btn.secondary { box-shadow: none; }

/* ------- Buttons ------- */
.btn {
  background-color: var(--ud-primary);
  color: #fff;
  padding: 0 16px;
  text-decoration: none;
  border-radius: 10px;
  font-size: 0.9rem;
  border: 1px solid var(--ud-primary);
  font-weight: 600;
  box-shadow: 0 6px 12px rgba(45,90,61,.18);
  transition: background-color .2s, color .2s, border-color .2s, transform .04s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background-color: #264E35; border-color: #264E35; }

.btn.small {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  border-radius: 8px;
  display: inline-block;
  text-align: center;
}
.btn.small.disabled {
  background-color: #D6DDE4;
  color: #6B7280;
  cursor: not-allowed;
  border-color: #D6DDE4;
}

/* Secondary (outlined) */
.btn.secondary {
  background-color: #fff;
  color: var(--ud-accent);
  border-color: var(--ud-accent);
  box-shadow: none;
  height: 44px;
  padding: 0 16px;
  font-size: 0.9rem;
}
.btn.secondary:hover { background-color: var(--ud-hover-bg); }
button.btn { font: inherit; }

/* Danger button */
.btn.danger {
  background-color: #E74C3C;
  color: #fff;
  padding: 0.3rem 0.6rem;
  margin-left: 0;
  font-size: 0.85rem;
  border-radius: 8px;
  border: 1px solid #E74C3C;
}
.btn.danger:hover { background-color: #C0392B; }

/* ------- Forms ------- */
form {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--ud-radius);
  box-shadow: var(--ud-shadow);
  max-width: 600px;
  margin: 2rem auto;
}

.form-container form{
  max-width: none;
}
form h2 {
  margin-bottom: 1.5rem;
  color: var(--ud-accent);
  text-align: center;
  letter-spacing: -0.01em;
  font-weight: 700;
}
form p { margin-bottom: 1.2rem; }

form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ud-text);
}

form input[type="text"],
form input[type="email"],
form textarea,
form select {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  font-size: 1rem;
  background-color: #FDFDFD;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus,
form select:focus {
  outline: none;
  border-color: var(--ud-interactive);
  box-shadow: 0 0 0 3px rgba(74,124,89,0.18);
}

form button[type="submit"] {
  background-color: var(--ud-primary);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--ud-primary);
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
  font-weight: 600;
  box-shadow: 0 6px 12px rgba(45,90,61,.18);
}
form button[type="submit"]:hover { background-color: #264E35; border-color: #264E35; }

/* ------- Role summary / history ------- */
.role-summary {
  padding: 1.5rem;
  border-radius: var(--ud-radius);
  margin-top: 2rem;
  background: #fff;
  border: 1px solid var(--ud-border);
  box-shadow: var(--ud-shadow);
}
.role-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.role-left { display: flex; flex-direction: column; align-items: flex-start; }

.role-meta {
  font-size: 0.9rem;
  color: var(--ud-muted);
  margin: 0 0 0.5rem 0;
  font-weight: normal;
}
.role-meta strong { color: var(--ud-text); font-weight: 600; }

.role-header h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ud-accent);
  font-weight: 700;
}

.history-link {
  font-size: 0.9rem;
  color: var(--ud-accent);
  text-decoration: none;
  border: 1px solid var(--ud-accent);
  padding: 0.3rem 0.6rem;
  border-radius: 10px;
  transition: background-color 0.2s, color 0.2s;
  font-weight: 600;
}
.history-link:hover { background-color: var(--ud-hover-bg); color: var(--ud-accent); }

.role-list { list-style-type: disc; padding-left: 1.2rem; margin: 0; }
.no-roles { color: var(--ud-muted); font-style: italic; }

.assessment-history { list-style: none; padding-left: 0; margin-top: 2rem; }
.history-entry {
  border-radius: 10px;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--ud-border);
}

/* Toggle details */
.toggle-details {
  background-color: var(--ud-primary);
  color: #fff;
  border: 1px solid var(--ud-primary);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-weight: 600;
  box-shadow: 0 6px 12px rgba(45,90,61,.12);
}
.toggle-details:hover { background-color: #264E35; border-color: #264E35; }
.toggle-icon { font-size: 1rem; margin-left: auto; }

.log-details { margin-top: 1rem; padding-left: 0.5rem; }
.hidden { display: none; }

/* Form wrapper */
.form-wrapper {
  background-color: #fff;
  padding: 2rem;
  margin: 2rem auto;
  max-width: none;
  border-radius: var(--ud-radius);
  box-shadow: var(--ud-shadow);
}

/* New assessment CTA */
.new-assessment-action { text-align: center; margin-top: 2rem; }
.new-assessment-action .btn {
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  border-radius: 10px;
  background-color: #2D5A3D;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.new-assessment-action .btn:hover { background-color: #264E35; }

/* ------- Tables (Compliance actions) ------- */
table.compliance-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  box-shadow: var(--ud-shadow);
  border-radius: var(--ud-radius);
  overflow: hidden;
}
.compliance-table th,
.compliance-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ud-border);
  text-align: left;
}
.compliance-table th {
  background-color: var(--ud-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.compliance-table tr:nth-child(even) { background-color: #FAFCFB; }
.compliance-table tr:hover { background-color: #F0F6F3; }

/* ===== Compliance Action List (scoped) ===== */
.ca-scope-form {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.ca-scope-form label {
  margin: 0;
  font-weight: 600;
  color: var(--ud-accent);
}
.ca-scope-form select {
  min-width: 280px;
  margin: 0;
}

.ca-list-panel {
  margin-top: 15px;
  padding: 0;
  overflow: hidden;
}
.ca-filters {
  margin-top: 15px;
  padding: 12px 14px;
  background: #fbfcfe;
  border: 1px solid rgba(27, 54, 93, 0.10);
  box-shadow: none;
  gap: 10px;
}
.ca-filters .ai-filter label {
  color: var(--ud-text-muted, #64748b);
}
.ca-filters__main {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 260px);
  gap: 12px;
  align-items: end;
}
.ca-filters__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ca-filters__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.ca-filters__clear {
  color: var(--ud-text-muted, #64748b);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
}
.ca-filters__clear:hover {
  text-decoration: underline;
  color: var(--ud-accent);
}

.ca-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  table-layout: auto;
}
.ca-table th,
.ca-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ud-border);
  text-align: left;
  vertical-align: top;
}
.ca-table th {
  background: #f8fafc;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ud-muted);
}
.ca-sort {
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.ca-sort:hover,
.ca-sort:focus {
  text-decoration: underline;
}
.ca-sort.is-active {
  color: var(--ud-accent);
}
.ca-table tbody tr:hover {
  background: var(--ud-hover-bg);
}

/* 7-column layout rhythm */
.ca-table th:nth-child(1),
.ca-table td:nth-child(1) { width: 44%; }
.ca-table th:nth-child(2),
.ca-table td:nth-child(2) { width: 10%; }
.ca-table th:nth-child(3),
.ca-table td:nth-child(3) { width: 9%; }
.ca-table th:nth-child(4),
.ca-table td:nth-child(4) { width: 11%; }
.ca-table th:nth-child(5),
.ca-table td:nth-child(5) { width: 9%; }
.ca-table th:nth-child(6),
.ca-table td:nth-child(6) { width: 7%; }
.ca-table th:nth-child(7),
.ca-table td:nth-child(7) { width: 10%; }

.ca-table td:nth-child(2),
.ca-table td:nth-child(3),
.ca-table td:nth-child(5),
.ca-table td:nth-child(6) {
  white-space: nowrap;
}
.ca-row-click {
  cursor: pointer;
}
.ca-pagination {
  padding: 12px 14px 14px;
}

.ca-control-code {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ud-muted);
}
.ca-control-name {
  font-weight: 700;
  color: var(--ud-accent);
}
.ca-control-ref {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--ud-muted);
}

.ca-status {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ud-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #fff;
  color: var(--ud-accent);
}
.ca-status[data-status="completed"] {
  border-color: rgba(45, 90, 61, 0.35);
  color: #2d5a3d;
}
.ca-status[data-status="in_progress"] {
  border-color: rgba(27, 54, 93, 0.35);
  color: #1b365d;
}
.ca-status[data-status="not_started"] {
  border-color: rgba(107, 114, 128, 0.35);
  color: #4b5563;
}
.ca-status[data-status="not_applicable"] {
  border-color: rgba(176, 138, 46, 0.45);
  color: #8a6b21;
}

.ca-empty {
  margin: 0;
  padding: 18px 20px;
  color: var(--ud-muted);
}
.ca-evidence-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ud-accent);
  text-decoration: none;
}
.ca-evidence-text:hover,
.ca-evidence-text:focus {
  text-decoration: underline;
}
.ca-evidence-text.is-empty {
  color: var(--ud-muted);
  text-decoration: none;
  cursor: default;
}

/* Compliance action detail */
.ca-detail-form {
  margin: 15px 0 0;
  max-width: none;
  padding: 18px 20px;
}
.ca-detail-readonly {
  margin: 0 0 12px;
}
.ca-detail-control {
  margin-bottom: 12px;
}
.ca-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-top: 10px;
}
.ca-detail-field {
  display: flex;
  flex-direction: column;
}
.ca-detail-field--full {
  grid-column: 1 / -1;
}
.ca-detail-field label {
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--ud-text);
}
.ca-detail-field select,
.ca-detail-field input[type="date"],
.ca-detail-field textarea {
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.ca-detail-field input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.6rem;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ud-text);
  background: #FDFDFD;
  box-sizing: border-box;
}
.ca-detail-field input[type="date"]::-webkit-datetime-edit,
.ca-detail-field input[type="date"]::-webkit-datetime-edit-year-field,
.ca-detail-field input[type="date"]::-webkit-datetime-edit-month-field,
.ca-detail-field input[type="date"]::-webkit-datetime-edit-day-field {
  font-family: inherit;
  color: var(--ud-text);
}
.ca-detail-field input[type="date"]:focus {
  outline: none;
  border-color: var(--ud-interactive);
  box-shadow: 0 0 0 3px rgba(74,124,89,0.18);
}
.ca-detail-field textarea {
  font-family: inherit;
  padding: 0;
  resize: vertical;
}
form .ca-detail-field textarea#explanation {
  padding: 0 !important;
}
.ca-detail-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 1rem;
}
.ca-evidence-preview {
  margin-top: 12px;
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.ca-evidence-preview__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ud-muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--ud-border);
}
.ca-evidence-preview__label::-webkit-details-marker {
  display: none;
}
.ca-evidence-preview__label::after {
  content: "▾";
  color: var(--ud-text);
  font-size: 0.8rem;
  transition: transform 0.18s ease;
}
.ca-evidence-preview[open] .ca-evidence-preview__label::after {
  transform: rotate(180deg);
}
.ca-evidence-preview:not([open]) .ca-evidence-preview__label {
  border-bottom: 0;
}
.ca-evidence-preview__frame {
  display: block;
  width: 100%;
  min-height: 540px;
  border: 0;
  background: #fff;
}
.ca-evidence-preview--document {
  background: #fff;
}
.ca-evidence-preview__document {
  max-height: 420px;
  overflow: auto;
  padding: 16px 18px;
  color: var(--ud-text);
  background: #fff;
}
.ca-evidence-preview__document p {
  margin: 0 0 0.75rem;
  line-height: 1.55;
}
.ca-evidence-preview__document p:last-child {
  margin-bottom: 0;
}
.ca-evidence-preview__empty {
  color: var(--ud-muted);
}
@media (max-width: 1024px) {
  .ca-table {
    font-size: 0.88rem;
  }
  .ca-table th,
  .ca-table td {
    padding: 10px 12px;
  }
  .ca-table td:nth-child(2),
  .ca-table td:nth-child(3),
  .ca-table td:nth-child(5),
  .ca-table td:nth-child(6) {
    white-space: normal;
  }
  .ca-detail-grid {
    grid-template-columns: 1fr;
  }
  .ca-evidence-preview__frame {
    min-height: 420px;
  }
}

/* ------- Inputs (auth, etc.) ------- */
input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: 1rem;
  background: #FDFDFD;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--ud-interactive);
  box-shadow: 0 0 0 3px rgba(74,124,89,0.18);
}

/* === Login page overrides === */
body.login { background:#F7FAF9; }
body.login .login-shell {
  min-height: 100vh;
  display: grid;
  align-items: start;
}

body.login #container {
  min-width:320px;
  max-width:520px;
  margin:6vh auto;
  padding:0;
  background:transparent;
  box-shadow:none;
  border:0;
  overflow-anchor: none;
}
body.login #content {
  background:#fff;
  border:1px solid var(--ud-border);
  border-radius:var(--ud-radius);
  box-shadow:var(--ud-shadow);
  padding:28px;
  overflow-anchor: none;
}
body.login .login-logo { text-align: center; margin-bottom: 1.2rem; }
body.login .login-logo img { max-width: 160px; height: auto; }

body.login h1 {
  color:var(--ud-accent);
  font-weight:700;
  font-size:1.4rem;
  letter-spacing:-.01em;
  margin:0 0 1rem 0;
  text-align:center;
}
body.login h1::after {
  content:"";
  display:block;
  width:56px;
  height:3px;
  background:var(--ud-primary);
  border-radius:999px;
  margin:10px auto 0;
  opacity:.9;
}
body.login .login-subtitle {
  text-align: center;
  margin: 0 0 10px;
  color: var(--ud-muted);
  font-size: 0.92rem;
}
body.login .login-methods {
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  background: #F8FBFA;
  padding: 12px;
  margin: 0 0 12px;
}
body.login .login-methods__title {
  margin: 0 0 10px;
  font-size: 0.92rem;
  text-align: center;
  color: var(--ud-accent);
}
body.login .login-methods__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
body.login .login-methods__btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  padding: .55rem .75rem;
}
body.login #email-login-panel {
  margin-top: 8px;
}
body.login .login-email-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px) scaleY(0.98);
  transform-origin: top center;
  transition:
    max-height 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.34s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: max-height, opacity, transform;
}
body.login .login-email-panel.is-open {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
body.login .login-form-title {
  margin: 6px 0 10px;
  font-size: 1rem;
  text-align: left;
  color: var(--ud-accent);
}
body.login .errornote {
  background:#FEF2F2;
  color:#7F1D1D;
  border:1px solid #FECACA;
  border-left:6px solid #EF4444;
  border-radius:10px;
  padding:.75rem 1rem;
  margin:0 0 1rem 0;
  box-shadow:0 2px 6px rgba(0,0,0,.03);
}
#login-form {
  margin-top:10px;
  padding:0;
  background:transparent;
  border-radius:0;
  max-width:none;
  box-shadow:none;
}
#login-form .form-row { margin:0 0 14px 0; }
#login-form label {
  display:block;
  font-weight:600;
  color:var(--ud-text);
  margin:0 0 6px 0;
}
#login-form input[type="text"],
#login-form input[type="email"],
#login-form input[type="password"] {
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--ud-border);
  border-radius:10px;
  padding:.6rem .7rem;
  font-size:1rem;
  background:#FDFDFD;
  color:var(--ud-text);
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
#login-form input[type="text"]:focus,
#login-form input[type="email"]:focus,
#login-form input[type="password"]:focus {
  border-color:var(--ud-interactive);
  box-shadow:0 0 0 3px rgba(74,124,89,.18);
}
#login-form .submit-row { margin-top:16px; text-align:center; }
#login-form .social-link-actions {
  display:flex;
  justify-content:center;
  gap:18px;
}
#login-form .social-link-actions .btn {
  min-width: 170px;
  justify-content: center;
}
#login-form .submit-row input[type="submit"] {
  appearance:none;
  -webkit-appearance:none;
  background: var(--ud-primary);
  color:#fff;
  border:1px solid var(--ud-primary);
  border-radius:10px;
  padding:.6rem 1.2rem;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 6px 12px rgba(45,90,61,.18);
  transition:background-color .2s, border-color .2s, transform .04s;
}
#login-form .submit-row input[type="submit"]:hover { background:#264E35; border-color:#264E35; }
body.login .login-divider {
  position: relative;
  margin: 14px 0 10px;
  text-align: center;
}
body.login .login-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--ud-border);
  transform: translateY(-50%);
}
body.login .login-divider span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 10px;
  background: #fff;
  color: var(--ud-muted);
  font-size: 0.82rem;
  font-weight: 600;
}
body.login .login-sso-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
body.login .login-sso-btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  border-color: rgba(27, 54, 93, 0.35);
}
body.login .login-sso-btn i {
  font-size: 0.92rem;
}
body.login .password-reset-link,
body.login .help-links a { color: var(--ud-interactive); text-decoration:none; font-weight:600; }
body.login .password-reset-link:hover,
body.login .help-links a:hover { text-decoration:underline; }
body.login .login-help-links { text-align:center; margin-top:12px; }
body.login .login-help-note {
  margin: 6px 0 0;
  text-align: center;
  color: var(--ud-muted);
  font-size: 0.82rem;
}
body.login .mfa-setup__intro {
  margin: 0 0 14px;
  text-align: center;
  color: var(--ud-muted);
  font-size: 0.98rem;
}
body.login .mfa-setup__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
body.login .mfa-setup__card {
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  background: #f8fbfa;
  padding: 12px;
}
body.login .mfa-setup__card--primary {
  background: #f5faf7;
  border-color: #d7e7dd;
}
body.login .mfa-setup__card--recovery {
  background: #f7f9fc;
}
body.login .mfa-setup__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
body.login .mfa-setup__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2d5a3d;
  background: rgba(45, 90, 61, 0.14);
  border: 1px solid rgba(45, 90, 61, 0.28);
}
body.login .mfa-setup__card-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--ud-accent);
}
body.login .mfa-setup__muted {
  margin: 0 0 8px;
  color: var(--ud-muted);
  font-size: 0.82rem;
}
body.login .mfa-setup__qr {
  display: flex;
  justify-content: center;
  padding: 6px;
}
body.login .mfa-setup__secret-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
body.login .mfa-setup__secret {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
  word-break: break-all;
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  padding: 8px;
}
body.login .mfa-setup__copy {
  min-width: 96px;
}
body.login .mfa-setup__advanced {
  margin: 0 0 12px;
}
body.login .mfa-setup__advanced summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ud-accent);
}
body.login .mfa-setup__advanced-body {
  margin-top: 8px;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  background: #f8fbfa;
  padding: 10px;
  display: grid;
  gap: 8px;
}
body.login .mfa-setup__uri {
  display: block;
  font-size: 0.76rem;
  line-height: 1.3;
  word-break: break-all;
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  padding: 8px;
}
body.login .mfa-setup__optional {
  margin: 0 0 10px;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  background: #f8fbfa;
  padding: 8px 10px;
}
body.login .mfa-setup__optional summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ud-accent);
}
body.login .mfa-setup__optional-body {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
body.login .mfa-setup__verify-title {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--ud-accent);
}
body.login .mfa-setup__muted--verify {
  margin-bottom: 8px;
}

body.login .mfa-code-field label {
  text-align: center;
  color: var(--ud-accent);
  font-weight: 700;
}

body.login .mfa-code-hidden {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0 !important;
}

body.login .mfa-code-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(42px, 1fr));
  gap: 8px;
  margin-top: 0.55rem;
}

body.login #login-form .mfa-code-boxes input[type="text"] {
  width: 100%;
  height: 54px;
  padding: 0;
  border: 1px solid #D8E0EA;
  border-radius: 10px;
  background: #F8FAFC;
  color: var(--ud-accent);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body.login #login-form .mfa-code-boxes input[type="text"]:focus {
    border-color: var(--ud-interactive);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(74,124,89,0.18);
  }

.account-mfa-modal__content {
  width: min(460px, 92vw);
}

.account-mfa-modal__form {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.account-mfa-code-field label {
  color: var(--ud-accent);
  font-weight: 700;
}

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

.account-mfa-code-field .mfa-code-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(42px, 1fr));
  gap: 8px;
  margin-top: 0.55rem;
}

.account-mfa-code-field .mfa-code-boxes input[type="text"] {
  width: 100%;
  height: 54px;
  padding: 0;
  border: 1px solid #D8E0EA;
  border-radius: 12px;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ud-text);
  background: #F8FAFC;
}

.account-mfa-code-field .mfa-code-boxes input[type="text"]:focus {
  border-color: var(--ud-interactive);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,124,89,0.18);
}

body.login .mfa-recovery-entry {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  background: #F8FAFC;
}

body.login .mfa-recovery-entry summary {
  cursor: pointer;
  color: var(--ud-accent);
  font-size: 0.88rem;
  font-weight: 700;
}

body.login #login-form .mfa-recovery-input {
  margin-top: 0.65rem;
}

body.login .message-wrapper {
  top: 18px;
}

@media (max-width: 640px) {
  body.login #container {
    width: calc(100% - 24px);
    min-width: 0;
    margin: 20px auto;
  }
  body.login #content {
    padding: 20px 16px;
  }
  body.login .login-methods__grid {
    grid-template-columns: 1fr;
  }
  body.login .mfa-setup__cards {
    grid-template-columns: 1fr;
  }
  body.login .mfa-setup__secret-row {
    grid-template-columns: 1fr;
  }
  body.login .mfa-setup__copy {
    width: 100%;
  }
  body.login .mfa-code-boxes {
    grid-template-columns: repeat(6, minmax(34px, 1fr));
    gap: 6px;
  }
  body.login #login-form .mfa-code-boxes input[type="text"] {
    height: 48px;
    font-size: 1.25rem;
  }
}

/* =========================
   AI Systems — scoped layout
   (safe: no global overrides)
   ========================= */

/* Filters */
.ai-filters {
  display: grid;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid #DCE3EC;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(27,54,93,0.08);
  max-width: none;
}
.ai-filters__row {
  display: grid;
  gap: 12px;
  align-items: start;
}
.ai-filters__row--primary {
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px);
}
.ai-filters__row--secondary {
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
  align-items: start;
}
.ai-filters__row--actions {
  grid-template-columns: 1fr;
  align-items: center;
}
.ai-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  align-self: start;
}
.ai-filter--risk {
  align-self: start;
}
.ai-filter--roles {
  align-self: start;
  position: relative;
}
.ai-filter__label-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-filter--search {
  min-width: 0;
}
.ai-filter--select {
  min-width: 0;
}
.ai-filter label,
.ai-filter__label {
  font-size: 0.85rem;
  color: var(--ud-muted);
  font-weight: 600;
}
.ai-filter input[type="search"],
.ai-filter select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  font-size: 0.95rem;
  background: #fff;
}
.ai-filter__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.ai-filter__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--ud-text);
}
.ai-filter__options--pills .ai-filter__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ai-filter__pill {
  position: relative;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.2);
  background: #ffffff;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.ai-filter__pill input:checked + span {
  color: var(--ud-accent);
}
.ai-filter__pill input:checked {
  outline: none;
}
.ai-filter__pill input:checked + span,
.ai-filter__pill input:checked ~ span {
  color: var(--ud-accent);
}
.ai-filter__pill:has(input:checked) {
  border-color: var(--ud-accent);
  background: rgba(27, 54, 93, 0.12);
  color: var(--ud-accent);
  box-shadow: 0 0 0 1px rgba(27, 54, 93, 0.3);
}
.ai-filter__pill:focus-within {
  box-shadow: 0 0 0 2px rgba(45, 90, 61, 0.2);
}
.ai-filter__pill--extra {
  display: none;
}
.ai-filter__pill--extra.is-visible {
  display: inline-flex;
}
.ai-filter__option input {
  accent-color: var(--ud-primary);
}
.ai-filter__empty {
  color: var(--ud-muted);
  font-size: 0.85rem;
}
.ai-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}
.ai-filters__clear {
  color: var(--ud-muted);
  font-weight: 600;
  text-decoration: none;
  padding-right: 20px;
}
.ai-filters__clear:hover {
  color: var(--ud-accent);
  text-decoration: underline;
}
.ai-filters__toggle,
.ai-filter__toggle {
  background: none;
  border: 0;
  color: var(--ud-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-decoration: none;
}
.ai-filters__toggle:hover,
.ai-filter__toggle:hover {
  color: var(--ud-accent);
}
.ai-filters__toggle:focus-visible,
.ai-filter__toggle:focus-visible {
  outline: none;
  color: var(--ud-accent);
}
@media (max-width: 900px) {
  .ai-filters__row--primary,
  .ai-filters__row--secondary,
  .ai-filters__row--actions {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .ai-filters__actions {
    justify-content: flex-start;
  }
}

.ai-filters button[type="submit"] {
  margin-top: 0;
}


.ai-active-filters {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(27,54,93,0.06);
  width: 100%;
  box-sizing: border-box;
}

.ai-results-header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin: 8px 0 14px;
}

.ai-results-header__count {
  color: var(--ud-text-muted, #6B7280);
  font-size: 0.85rem;
  font-weight: 600;
  padding-right: 10px;
  padding-left: 0;
}

.ai-active-filters__label {
  font-size: 0.85rem;
  color: var(--ud-muted);
  font-weight: 600;
}

.ai-active-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.2);
  background: #F8FAFB;
  color: var(--ud-text);
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.2;
}

.ai-filter-chip:hover,
.ai-filter-chip:focus {
  border-color: rgba(27, 54, 93, 0.3);
  background: #F1F4F7;
  color: var(--ud-text);
}

.ai-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.85rem;
  color: var(--ud-muted);
}

.ai-active-filters__clear {
  font-size: 0.85rem;
  color: var(--ud-text);
  text-decoration: none;
  font-weight: 600;
}

.ai-active-filters__clear:hover,
.ai-active-filters__clear:focus {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .ai-active-filters {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .ai-active-filters__clear {
    justify-self: flex-start;
  }
}

/* Page list spacing */
.ai-card-list{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:12px;
}

.ai-summary-card [hidden] {
  display: none !important;
}

.ai-actions-top {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}

/* Card */
.ai-card {
  position: relative;
  display: block;
  padding: 14px 18px 18px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(27,54,93,.06);
  border: 1px solid var(--ud-border);
  margin: 0;
  overflow: visible;
}
.ai-card.ai-card--menu-open {
  z-index: 99990;
}
.ai-card + .ai-card {
  margin-top: 12px;
}

.ai-card > *{ position:relative; z-index:auto; }

.ai-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 8px;
  width: calc(100% - 16px);
  margin: 0 auto;
}
.ai-row + .ai-row {
  border-top: 0;
}

.ai-row--meta {
  position: relative;
  margin-top: 12px;
  padding-top: 12px;
}

.ai-row--meta::before {
  content: "";
  display: block;
  height: 1px;
  width: 92%;
  margin: 0 auto 12px auto;
  background-color: rgba(0, 0, 0, 0.06);
}

.ai-row--header {
  gap: 6px;
  padding-bottom: 14px;
  position: relative;
  z-index: 5;
}

.ai-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ai-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: nowrap;
}

.ai-tools,
.ai-card__tools {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  pointer-events: auto;
}

.ai-row--roles {
  padding: 12px 0;
}

.ai-roles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-roles__label {
  color: #8A94A3;
  font-weight: 600;
  font-size: 0.85rem;
}

.ai-roles__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.ai-row--compliance {
  position: relative;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.ai-row--compliance::before {
  content: "";
  display: block;
  height: 1px;
  width: 92%;
  margin: 0 auto 20px auto;
  background-color: rgba(0, 0, 0, 0.06);
}

.ai-meta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 10px;
}

.ai-meta {
  position: relative;
  margin-top: 0;
  padding-top: 0;
  padding-left: 16px;
  min-width: 0;
}

.ai-meta__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ud-text);
  margin: 0 0 6px;
}

.ai-purpose {
  padding-top: 0;
  min-width: 0;
}

.ai-meta__row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: start;
  font-size: 0.8rem;
  color: var(--ud-text);
}

.ai-meta__label {
  color: var(--ud-text-muted, #6B7280);
  font-weight: 600;
  min-width: 0;
  font-size: inherit;
}

.ai-meta__value {
  color: var(--ud-text);
  font-size: inherit;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ai-compliance {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  align-items: center;
}

.ai-compliance__left {
  display: grid;
  gap: 4px;
  padding-left: 8px;
  max-width: calc(100% - 16px);
  padding-bottom: 12px;
}

.ai-compliance__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
  align-self: center;
}

.ai-compliance__link {
  display: block;
  text-decoration: none;
}
.ai-compliance__link:hover .ud-progress,
.ai-compliance__link:focus .ud-progress {
  border-color: #CFE0D3;
  box-shadow: 0 0 0 2px rgba(45,90,61,0.08);
}

.ai-action__primary-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.ai-card__tool-btn {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid #E6EAF0;
  background: transparent;
  color: var(--ud-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.ai-card__tool-btn:hover {
  background: var(--ud-hover-bg);
  color: var(--ud-accent);
}
.ai-card__tool-btn.is-danger {
  color: var(--ud-muted);
}
.ai-card__tool-btn.is-danger:hover {
  background: #fef3f2;
  border-color: #f4b4b0;
  color: #b42318;
}

.ai-action__primary-row {
  display: inline-flex;
  align-items: stretch;
  gap: 10px;
  white-space: nowrap;
}
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.ai-action__primary-row .btn {
  height: 40px;
  display: inline-flex;
  align-items: center;
}

.ai-action__primary-row .ai-more__btn {
  height: 40px;
  width: 40px;
}

/* Risk-level accent (subtle border + wash) */
.ai-summary-card{
  border-top: 4px solid var(--risk-accent, #1B365D);
  background: linear-gradient(180deg, rgba(var(--risk-accent-rgb,27,54,93),.06) 0%, #fff 45%);
}
.ai-summary-card.risk-unacceptable{
  border: 0.5px solid var(--risk-accent, #E74C3C);
  border-top: 4px solid #E74C3C;
  box-shadow: 0 12px 28px rgba(231,76,60,.15);
  background: rgba(231,76,60,.06);
}

/* Risk color mapping based on data attribute + risk-* class */
.ai-summary-card.risk-unacceptable,
.ai-card[data-risk="unacceptable"]{ --risk-accent: #E74C3C; --risk-accent-rgb: 231,76,60; --risk-tint: 0.03; }
.ai-summary-card.risk-high,
.ai-card[data-risk="high"]        { --risk-accent: #E6B78E; --risk-accent-rgb: 230,183,142; --risk-tint: 0.03; }
.ai-summary-card.risk-limited,
.ai-card[data-risk="limited"]     { --risk-accent: #EFE2A2; --risk-accent-rgb: 239,226,162; --risk-tint: 0.02; }
.ai-summary-card.risk-minimal,
.ai-card[data-risk="minimal"]     { --risk-accent: #BFD9C9; --risk-accent-rgb: 191,217,201; --risk-tint: 0.02; }
.ai-summary-card.risk-none,
.ai-card[data-risk="none"],
.ai-card[data-risk=""]            { --risk-accent: #1B365D; --risk-accent-rgb: 27,54,93; --risk-tint: 0.015; }

/* Left column: title + chips + roles (chips), tighten vertical whitespace */
.ai-title{
  margin:0;
  line-height:1.15;
}

.ai-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 0;
}

.ai-title {
  margin: 0;
  font-size: 1.2rem;
}

.ai-role-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ud-muted);
  font-size: 0.9rem;
  margin-top: 0;
}

.ai-role-summary__label {
  font-weight: 600;
  color: var(--ud-text);
}

.ai-role-summary__items {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-role-summary__item {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #D7DEE7;
  background: transparent;
  color: var(--ud-text);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.1;
}

.ai-role-summary__empty {
  color: var(--ud-muted);
  font-style: italic;
}

.ai-role-toggle {
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--ud-accent);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
}

.ai-role-toggle:hover {
  text-decoration: underline;
}

.ai-role-map {
  margin-top: 8px;
  background: #F7FAFF;
  border: 1px solid #E3EAF4;
  border-radius: 10px;
  padding: 10px 12px;
}

.ai-role-map__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  color: var(--ud-text);
  font-size: 0.88rem;
}

.ai-purpose {
  color: var(--ud-accent);
  font-size: 0.95rem;
  margin-bottom: 0;
  font-weight: 600;
  padding-left: 8px;
  max-width: calc(100% - 16px);
}
.ai-purpose__label{
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: 0;
  margin-right: 4px;
  width: 100%;
}
.ai-last-action {
  display: flex;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ud-muted);
  padding-left: 8px;
  max-width: calc(100% - 16px);
}
.ai-last-action__label {
  font-weight: 600;
}
.ai-last-action__value {
  color: var(--ud-text);
}
.ai-purpose__value {
  color: var(--ud-text);
  line-height: 1.4;
  font-weight: 400;
}

.ai-role-more {
  display: inline-flex;
  align-items: center;
  border: 1px solid #E1E7EE;
  background: #fff;
  color: var(--ud-muted);
  font-weight: 600;
  cursor: pointer;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.1;
}

.ai-role-more:hover {
  color: var(--ud-accent);
  border-color: var(--ud-accent);
}

/* Risk / Use-case chips (the “bubbles”) */
.ai-badges{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0;
}
.badge{
  display:inline-flex; align-items:center;
  padding:.28rem .6rem;
  font-weight:800; font-size:.82rem; line-height:1;
  border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.badge--risk{ background:#EAF3EE; color:var(--ud-primary); border-color:#DDE7E1; }
.badge--risk{ text-decoration: none; }
.badge--risk:hover,
.badge--risk:focus{
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(27,54,93,.08);
}
.badge--usecase{ background:#F1F5FA; color:var(--ud-accent); border-color:#E4ECF6; }

/* Actor Roles as chips (cleaner than bullets) */
.ai-roles{ margin-top:6px; }
.ai-roles__title{ margin:0 0 6px; font-weight:800; color:var(--ud-text); }
.ai-roles__list{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  margin:0; padding:0; list-style:none;
}
.ai-roles__list li{
  display:inline-flex; align-items:center;
  padding:.26rem .6rem;
  border-radius:999px;
  background:#F8FAFD; border:1px solid #E6EDF7;
  color:#1E2A3B; font-size:.82rem; font-weight:700;
}

/* Middle column - compliance (keep compact) */
.comp-label{ font-size:.95rem; color:var(--ud-accent); margin-bottom:2px; font-weight: 600; }
.comp-value{
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 4px;
  color: var(--ud-text);
  width: 100%;
}
.comp-unacceptable{
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.comp-next {
  margin-top: 0;
  font-size: 0.88rem;
  color: var(--ud-muted);
}
.ai-control-warning{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(27,54,93,0.10);
  border-radius: 10px;
  background: #fafbfd;
}
.ai-control-warning--warning{
  border-color: rgba(176, 138, 46, 0.35);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.92) 0%, rgba(255, 251, 235, 0.68) 100%);
}
.ai-control-warning--danger{
  border-color: rgba(176, 38, 38, 0.36);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 242, 242, 0.72) 100%);
}
.ai-control-warning__label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
  color: var(--ud-muted);
  white-space: nowrap;
}
.ai-control-warning--warning .ai-control-warning__label{
  color: #8a6b21;
}
.ai-control-warning--danger .ai-control-warning__label{
  color: #991b1b;
}
.ai-control-warning__chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.ai-control-warning__chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(27,54,93,0.25);
  color: var(--ud-accent);
  background: #fff;
}
.ai-control-warning__chip.is-warning{
  border-color: rgba(176,138,46,.45);
  color: #8a6b21;
  background: rgba(255,251,235,.65);
}
.ai-control-warning__chip.is-danger{
  border-color: rgba(176,38,38,.45);
  color: #991b1b;
  background: rgba(254,242,242,.75);
}
.ai-control-warning__chip:hover,
.ai-control-warning__chip:focus{
  text-decoration: underline;
}

/* Progress pill (uses your existing ud-progress markup if present) */
.ud-progress{
  width:100%;
  height:24px;
  border-radius:999px;
  background:#F1F6F2;
  border:1px solid #DDE7E1;
  position:relative;
  overflow:hidden;
}
.ud-progress__bar{
  height:100%; width:var(--value, 0%);
  background: #2F8F55;
  transition:width .35s ease;
  z-index: 1;
}
.ud-progress__label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:600; color:#4B5563;
  z-index: 2;
  pointer-events: none;
  background: #F1F6F2;
  max-width: 70px;
  margin: auto;
  height: 75%;
  border-radius: inherit;
}

.progress-bar-wrapper{ margin-top: 25px; }

.ai-action__menu {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.ai-more {
  position: relative;
  z-index: 1001;
}
.ai-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--ud-border);
  background: #fff;
  color: var(--ud-accent);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.ai-more__btn:hover {
  background: var(--ud-hover-bg);
}
.ai-more__btn:active {
  background: var(--ud-hover-bg);
  box-shadow: none;
  transform: none;
}
.ai-more__btn:focus-visible {
  outline: 2px solid rgba(27, 54, 93, 0.35);
  outline-offset: 2px;
}
.ai-more__menu {
  top: calc(100% + 6px);
  margin-top: 0;
  right: 0;
  left: auto;
  z-index: 99999;
  pointer-events: auto;
  transform: translateX(100px);
  max-height: 70vh;
  overflow-y: auto;
}

.ai-more.ai-more--up .ai-more__menu {
  top: auto;
  bottom: calc(100% + 6px);
}
.ai-more.is-open .ai-more__menu {
  display: block;
}
.dropdown-item-hint {
  display: block;
  padding: 0.35rem 0.85rem 0.6rem;
  font-size: 0.8rem;
  color: var(--ud-muted);
  border-left: 2px solid rgba(27,54,93,0.2);
  margin-left: 0.85rem;
  line-height: 1.4;
}
.ai-link {
  color: var(--ud-accent);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}
.ai-link:hover {
  text-decoration: underline;
}
.ai-link.is-disabled {
  color: var(--ud-muted);
  cursor: not-allowed;
  text-decoration: none;
}
.ai-audit {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--ud-border);
}
.ai-audit__reason {
  font-size: 0.8rem;
  color: var(--ud-muted);
}
.ai-audit__btn {
  opacity: 0.9;
}
.ai-card .btn{ border-radius:12px; }   /* only inside cards */

/* Hover elevation removed for calmer cards */

/* Responsive */
@media (max-width: 900px){
  .ai-compliance {
    grid-template-columns: 1fr;
  }
  .ai-compliance__right {
    justify-content: flex-start;
  }
  .ai-meta-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .ai-meta {
    padding-left: 0;
  }
  .ai-meta__rows.assessment-meta--accent {
    border-left-width: 0;
    border-top: 0.5px solid rgba(27, 54, 93, 0.35);
    padding-left: 0;
    padding-top: 10px;
  }
  .ai-meta__row {
    grid-template-columns: minmax(110px, 180px) minmax(0, 1fr);
  }
  .ai-identity {
    flex-wrap: wrap;
  }
  .ai-title,
  .ai-role-summary-inline {
    max-width: 100%;
  }
}


/* === Risk badge outline inside AI summary card === */
.ai-summary-card .badge--risk {
  background: transparent;
  color: var(--ud-accent);
  border: 1px solid var(--risk-accent, var(--ud-accent));
  font-weight: 700;
  text-transform: none;
  letter-spacing: .15px;
  font-size: 0.78rem;
}

/* ===== Risk Assessment Summary — scoped styles ===== */

/* Header */
.ra-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin:14px 0 18px;
}
.ra-header__left{ max-width: 880px; }
.ra-meta{
  font-size:.95rem; color:var(--ud-muted);
  margin-bottom:6px;
}
.ra-title{
  display:flex; align-items:center; gap:10px;
  margin: 2px 0 6px;
}
.ra-title__label{
  font-size:1.1rem; font-weight:800; color:var(--ud-accent);
}
.ra-title__badge{
  font-size:.85rem;
}

/* Risk badge styling on summary/history header to match AI systems */
.risk-summary-badges .badge--risk,
.ra-history-badges .badge--risk{
  background: transparent;
  color: var(--ud-accent);
  border: 1px solid var(--risk-accent, var(--ud-accent));
  font-weight: 700;
  text-transform: none;
  letter-spacing: .15px;
  font-size: 0.78rem;
}
.risk-summary-badges .badge--risk[data-risk],
.ra-history-badges .badge--risk[data-risk]{
  background: transparent;
  color: var(--ud-accent);
  border: 1px solid var(--risk-accent, var(--ud-accent));
  text-transform: none;
  letter-spacing: .15px;
}
.risk-summary-badges .badge--risk[data-risk="unacceptable"],
.ra-history-badges .badge--risk[data-risk="unacceptable"]{ --risk-accent: #E74C3C; }
.risk-summary-badges .badge--risk[data-risk="high"],
.ra-history-badges .badge--risk[data-risk="high"]{ --risk-accent: #E6B78E; }
.risk-summary-badges .badge--risk[data-risk="limited"],
.ra-history-badges .badge--risk[data-risk="limited"]{ --risk-accent: #EFE2A2; }
.risk-summary-badges .badge--risk[data-risk="minimal"],
.ra-history-badges .badge--risk[data-risk="minimal"]{ --risk-accent: #BFD9C9; }
.risk-summary-badges .badge--risk[data-risk="none"],
.ra-history-badges .badge--risk[data-risk="none"]{ --risk-accent: #1B365D; }

/* Role pills in history header (outline style) */
.ra-history-badges .badge--role{
  background: transparent;
  color: var(--ud-accent);
  border: 1px solid var(--ud-accent);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .15px;
  font-size: 0.78rem;
}

/* Reuse the risk accent colors on the badge */
.badge--risk[data-risk]{
  background: var(--risk-accent, rgba(27,54,93,.10));
  color:#fff;
  border:none;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  padding:.35rem .65rem;
}
/* Map codes -> accents (in case the page doesn’t inherit ai-card mapping) */
.badge--risk[data-risk="unacceptable"]{ --risk-accent: rgba(231,76,60,.85); }
.badge--risk[data-risk="high"]        { --risk-accent: rgba(230,183,142,.7); }
.badge--risk[data-risk="limited"]     { --risk-accent: rgba(239,226,162,.7); color:#1a1a1a; }
.badge--risk[data-risk="minimal"]     { --risk-accent: rgba(191,217,201,.7); }
.badge--risk[data-risk="none"]        { --risk-accent: rgba(27,54,93,.70); }

.ra-rationale{
  margin: 4px 0 0;
  font-style: italic;
  color: var(--ud-text);
  opacity: .9;
}

/* Risk assessment history */
.ra-history-list{
  display: grid;
  gap: 12px;
  margin-top: 15px;
}
.ra-history-card{
  padding: 0;
}
.ra-history-summary{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 600;
}
.ra-history-summary::-webkit-details-marker{
  display: none;
}
.ra-history-summary::marker{
  content: "";
}
.ra-history-date{
  font-weight: 700;
  color: var(--ud-accent);
}
.ra-history-user{
  color: var(--ud-text);
  font-weight: 600;
}
.ra-history-body{
  padding: 0 18px 16px;
  border-top: 1px solid var(--ud-border);
}

/* History button spacing */
.ra-history{ align-self:flex-start; }

/* Panel wrapper (uses your existing .panel tokens if present) */
.ra-summary.panel{
  border:1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  background:#fff;
  box-shadow: var(--ud-shadow);
  padding: 16px 18px;
  margin-top: 15px;
}

/* Q&A list as cards */
.qa-list{
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.qa-item{
  border:1px solid var(--ud-border);
  border-radius: 12px;
  padding: 12px 14px;
  background:#FAFCFB;
}
.qa-q{
  font-weight: 800;
  color: var(--ud-text);
  margin-bottom: 6px;
}
.qa-a{
  display: block;
  color: var(--ud-text);
}
.qa-rationale{
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--ud-muted);
}

/* Pill answers */
.qa-pills{
  display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 0; padding:0; list-style:none;
}
.qa-pill{
  display:inline-flex; align-items:center;
  padding:.28rem .6rem;
  border-radius:999px;
  background:#EEF2F7;
  border:1px solid #E1E8F0;
  color:#1E2A3B;
  font-weight:700; font-size:.82rem; line-height:1.2;
}

/* CTA area */
.ra-cta{
  display:flex; justify-content:flex-end; margin: 18px 0 10vh;
}
.ra-cta .btn.primary{
  min-width: 320px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(45,90,61,.18);
}

/* Optional: tighten default ul bullets in content blocks */
.assessment-summary ul{ padding-left: 1.2rem; }

/* Ensure header and buttons don't clash with generic form/button styles */
.ra-header .btn,
.ra-summary .btn { margin: 0; }

/* ===== Role Assessment page (scoped) ===== */

.roleass-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin:0;
}
.roleass-header__left{ max-width:none; }
.roleass-header__grid{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  flex:1 1 auto;
}
.roleass-header__intro .ai-onboarding-title{ margin:0; }
.roleass-header__subtitle{ padding-top: 6px; }
.roleass-header__progress{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.roleass-header__nav{
  margin-left:auto;
  align-self:flex-start;
  white-space:nowrap;
}
.roleass-meta{
  font-size:.95rem; color:var(--ud-muted);
  margin-bottom:6px;
}
.roleass-title{ display:flex; align-items:center; gap:10px; margin-bottom: 6px; }
.roleass-title__label{
  font-size:1.35rem; font-weight:800; color:var(--ud-accent);
}

.roleass-history{ align-self:flex-start; }

.assessment-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 0;
}
.assessment-meta--accent{
  border-left: 3px solid var(--ud-accent);
  padding-left: 12px;
}
.ai-meta__rows.assessment-meta--accent{
  border-left-width: 0.5px;
}
.assessment-meta__row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items: baseline;
}
.assessment-meta__label{
  font-weight:500;
  color: var(--ud-text-muted, #6B7280);
}
.assessment-meta__value{
  font-weight:600;
  color: var(--ud-text);
}
.assessment-meta__link{
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ud-accent);
  opacity: 0.9;
  text-decoration: none;
}
.assessment-meta__link:hover,
.assessment-meta__link:focus{
  opacity: 1;
  text-decoration: underline;
}
.assessment-roles{
  margin-top: 0;
}
.assessment-roles{
  font-size: 0.85rem;
}

@media (max-width: 860px){
  .roleass-header{
    flex-direction:column;
    align-items:stretch;
  }
  .roleass-header__grid{
    grid-template-columns: 1fr;
  }
  .roleass-header__nav{
    align-self:flex-start;
  }
}

/* Form card */
.roleass-form{
  border:1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  background:#fff;
  box-shadow: var(--ud-shadow);
  padding:18px 20px;
  max-width: none;
  margin: 15px 0 0;
}

/* Tighter question spacing for admin-generated p blocks */
.roleass-form p{
  margin: 0 0 14px 0;
}

/* Radios layout improvements without touching global form rules */
.roleass-form input[type="radio"]{
  transform: translateY(1px);
  margin-right: .4rem
}

/* Toast wrapper floats above content */
.message-wrapper{
  position: fixed;
  top: 76px;                /* just below the navbar */
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;     /* clicks pass through background */
}

/* Basis voor alle toasts (success + info) */
.message-wrapper .message-success,
.message-wrapper .message-info,
.message-wrapper .message-warning {
  position: relative;
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  background: #fff;
  color: var(--ud-text);
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(27,54,93,.12);
  padding: 12px 40px 12px 14px;   /* reserve space for close button */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, box-shadow .2s ease;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* In-animatie voor beide */
.message-wrapper .message-success.show,
.message-wrapper .message-info.show,
.message-wrapper .message-warning.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hover-shadow voor beide */
.message-wrapper .message-success:hover,
.message-wrapper .message-info:hover,
.message-wrapper .message-warning:hover {
  box-shadow: 0 12px 28px rgba(27,54,93,.16);
}

/* Iconen */
.message-wrapper .message-success::before,
.message-wrapper .message-info::before,
.message-wrapper .message-warning::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* Kleurspecifiek per type */
.message-wrapper .message-success {
  border-left: 6px solid var(--ud-interactive);
}
.message-wrapper .message-success::before {
  content: "\f00c";
  color: var(--ud-interactive);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.message-wrapper .message-info {
  border-left: 6px solid var(--ud-info, #3A7DCC);
}
.message-wrapper .message-info::before {
  content: "\f05a";
  color: var(--ud-info, #3A7DCC);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.message-wrapper .message-warning {
  border-left: 6px solid var(--ud-warning, #C98A00);
}
.message-wrapper .message-warning::before {
  content: "\f071";
  color: var(--ud-warning, #C98A00);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* Absolute close button */
.message-wrapper .message-close{
  position: absolute;
  top: 8px;
  right: 10px;
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; cursor: pointer;
  font-weight: 800; font-size: 1.1rem; line-height: 1;
  color: var(--ud-muted);
  padding: 2px 4px;
  border-radius: 6px;
}
.message-wrapper .message-close:hover{
  background: var(--ud-hover);
  color: var(--ud-accent);
}

/* ------ Error Message ------ */
.message-wrapper .message-error {
  position: relative;
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  background: #fff;
  color: var(--ud-text);
  border: 1px solid var(--ud-border);
  border-left: 6px solid var(--ud-danger, #C62828); /* fallback UD red */
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(27,54,93,.12);
  padding: 12px 40px 12px 14px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, box-shadow .2s ease;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* show animation */
.message-wrapper .message-error.show {
  opacity: 1;
  transform: translateY(0);
}

/* hover elevation */
.message-wrapper .message-error:hover {
  box-shadow: 0 12px 28px rgba(27,54,93,.16);
}

/* icon */
.message-wrapper .message-error::before {
  content: "!";
  color: var(--ud-danger, #C62828);
  border: 2px solid var(--ud-danger, #C62828);
  border-radius: 50%;
  display: inline-grid;
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  height: 1.05rem;
  line-height: 1;
  margin-right: 0.5rem;
  place-items: center;
  flex-shrink: 0;
  width: 1.05rem;
}

/* ===== Risk Assessment - unify sizes & keep everything inside form ===== */

/* Container + card */
.rs-wrap{
  max-width: none;
  width: 100%;
  margin: 12px 0 7vh;
}
.rs-form{
  border:1px solid var(--ud-border);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--ud-shadow);
  padding:20px 22px 18px;
  max-width: none;
  margin: 0;
}

/* Header inside the form */
.rs-head{ margin: 0 0 14px; }
.rs-head.in-form{ margin: 0 0 14px; }
.rs-title{
  margin:0 0 6px;
  color:var(--ud-accent);
  font-weight:800;
  font-size:1.35rem;        /* Title ≈ Question size */
  letter-spacing:.1px;
}
.rs-stepline{
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:10px;
}
.rs-step__label{ font-weight:800; color:var(--ud-text); font-size:1rem; }
.rs-step__count{
  background:#F1F5FA; color:var(--ud-accent); border:1px solid #E4ECF6;
  border-radius:999px; padding:.18rem .55rem; font-weight:800; font-size:.85rem;
}

/* Progress (thin) */
.ud-progress.ud-progress--thin{
  height:8px; border-radius:999px; overflow:hidden;
  background:#EAF3EE; border:1px solid #DDE7E1;
}
.ud-progress.ud-progress--thin .ud-progress__bar{
  height:100%; width:var(--value,0%); background:var(--ud-interactive);
  transition:width .3s ease;
}

/* QUESTION label: same optical size as section label */
.rs-form > p > label{
  display:block;
  margin:16px 2px 8px;
  padding:0; background:transparent; border:0; border-radius:0;
  cursor:default;
  font-weight:800;
  color:var(--ud-text);
  font-size:1rem;           /* ≈ rs-step__label */
  line-height:1.35;
}

/* OPTION labels: pills (unchanged behavior) */
.rs-form ul{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.rs-form ul > li > label{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px;
  border:1px solid var(--ud-border);
  border-radius:12px;
  background:#FAFCFB;
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.rs-form ul > li > label:hover{ background:#F4F9F6; border-color:#D4E4DA; }

/* Pretty checkbox */
.rs-form ul > li > label input[type="checkbox"]{
  flex:0 0 auto; width:18px; height:18px; margin-top:2px;
  appearance:none; -webkit-appearance:none;
  border:2px solid #9BB6A5; border-radius:4px; background:#fff;
  display:inline-grid; place-content:center;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.rs-form ul > li > label input[type="checkbox"]:focus{
  outline:none; box-shadow:0 0 0 3px rgba(74,124,89,.22);
  border-color:var(--ud-interactive);
}
.rs-form ul > li > label input[type="checkbox"]::after{
  content:""; width:10px; height:10px; transform:scale(0);
  transition:transform .12s ease-in-out;
  background:var(--ud-interactive); border-radius:2px;
}
.rs-form ul > li > label input[type="checkbox"]:checked{
  border-color:var(--ud-interactive); background:#fff;
}
.rs-form ul > li > label input[type="checkbox"]:checked::after{ transform:scale(1); }

/* Question + help blocks */
.rs-question{ margin-top:16px; }
.rs-question__header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.rs-question__label{
  margin:0;
  font-weight:800;
  color:var(--ud-text);
  font-size:1rem;
  line-height:1.35;
}
.rs-question__link{
  color: var(--ud-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.rs-question__link:hover,
.rs-question__link:focus{
  text-decoration: none;
  border-bottom-color: currentColor;
}
.rs-rationale{
  margin-top: 0.5rem;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.rs-rationale-toggle{
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ud-accent);
  cursor: pointer;
  text-align: left;
}
.rs-rationale-toggle:hover{
  text-decoration: underline;
}
.rs-rationale-body{
  display: none;
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  padding: 10px 12px;
  background:#FAFCFB;
  overflow: hidden;
}
.rs-rationale-body.is-open{
  display: block;
}
.rs-rationale-body textarea{
  width: 100%;
  min-height: 120px;
  overflow: auto;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.rs-help-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  border:none;
  background:#fff;
  color:var(--ud-accent);
  font-size:0.8rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 0 0 1px var(--ud-accent);
}
.rs-help-toggle:hover{
  background:var(--ud-accent);
  color:#fff;
}
.rs-help-toggle--sm{
  width:20px;
  height:20px;
  font-size:0.75rem;
  box-shadow:none;
}
.rs-help{
  display:none;
  background:#F7FAFF;
  border:1px solid #E3EAF4;
  border-radius:10px;
  padding:0.6rem 0.75rem;
  font-size:0.9rem;
  color:var(--ud-muted);
  margin:0 0 10px;
}
.rs-help.is-open{ display:block; }

/* Options with inline help */
.rs-options{ display:flex; flex-direction:column; gap:8px; }
.rs-option{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.rs-option__label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid var(--ud-border);
  border-radius:12px;
  background:#FAFCFB;
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
  flex:1;
}
.rs-option__label:hover{ background:#F4F9F6; border-color:#D4E4DA; }
.rs-option__label input[type="checkbox"]{
  flex:0 0 auto; width:18px; height:18px; margin-top:2px;
  appearance:none; -webkit-appearance:none;
  border:2px solid #9BB6A5; border-radius:4px; background:#fff;
  display:inline-grid; place-content:center;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.rs-option__label input[type="checkbox"]:focus{
  outline:none; box-shadow:0 0 0 3px rgba(74,124,89,.22);
  border-color:var(--ud-interactive);
}
.rs-option__label input[type="checkbox"]::after{
  content:""; width:10px; height:10px; transform:scale(0);
  transition:transform .12s ease-in-out;
  background:var(--ud-interactive); border-radius:2px;
}
.rs-option__label input[type="checkbox"]:checked{
  border-color:var(--ud-interactive); background:#fff;
}
.rs-option__label input[type="checkbox"]:checked::after{ transform:scale(1); }
.rs-option__label input[type="radio"]{
  margin-top:2px;
  accent-color:var(--ud-interactive);
}
.rs-option-help{
  display:none;
  background:#F7FAFF;
  border:1px dashed #D5E1F1;
  border-radius:10px;
  padding:0.45rem 0.7rem;
  font-size:0.85rem;
  color:var(--ud-muted);
  margin:-4px 0 6px 0;
}
.rs-option-help.is-open{ display:block; }
.rs-error{
  margin-top: 0.5rem;
  color: var(--ud-danger, #C0392B);
  font-weight: 600;
}

/* Actions */
.rs-actions{
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.rs-next{ min-width:120px; border-radius:12px; box-shadow:0 8px 18px rgba(45,90,61,.16); }
.rs-next:hover{ box-shadow:0 10px 22px rgba(45,90,61,.20); }

/* Small screens */
@media (max-width: 560px){
  .rs-wrap{ padding:0 10px; }
  .rs-form{ padding:16px; border-radius:14px; }
}


/* ====== DASHBOARD ====== */
/* === Compliance Dashboard – Polished === */

/* Branding */
:root{
  --brand-dark:#0D3B66;
  --brand-mid:#7F9DB1;
  --brand-light:#B4D6E3;
  --text:#0D3B66;
  --ok:#18a957;
  --warn:#f0a202;
  --bad:#e03a3a;

  --bg:#F6FAFD;            /* zachtere page bg */
  --card-bg:#ffffff;       /* cards wit voor beter contrast */
  --card-ring:#E7EEF4;     /* donut achterring */
  --muted:#5C6B7A;

  --radius:18px;
  --shadow:0 10px 30px rgba(13,59,102,0.08), 0 2px 10px rgba(13,59,102,0.06);
  --gap:18px;
}

/* pagina basis (optioneel, alleen als je body nog geen bg heeft) */
body { background: var(--bg); }

/* container */
.wrap{
  margin:28px auto 40px;
  padding:0 18px;
}
.wrap h1{
  font-size:26px;
  font-weight:800;
  color:var(--brand-dark);
  letter-spacing:.2px;
  margin:0 0 6px;
}
.wrap .desc{
  color:var(--muted);
  font-size:14px;
  margin:0 0 10px;
}

.dash-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem 1.25rem;
  color:var(--muted);
  font-size:0.88rem;
  margin:0 0 12px;
}

.dash-meta strong{
  color:var(--brand-dark);
  font-weight:700;
}

.dashboard-readiness{
  border:1px solid rgba(13,59,102,0.10);
  border-radius:12px;
  background: rgba(255,255,255,0.75);
  padding:0.65rem 0.8rem;
  margin:0 0 18px;
}
.dashboard-readiness--after-portfolio{
  margin: 16px 0 0;
}

.dashboard-readiness__text{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  margin-bottom:0.45rem;
}

.dashboard-readiness__label{
  color:var(--brand-dark);
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.dashboard-readiness__value{
  color:var(--muted);
  font-size:0.85rem;
}

.dashboard-readiness__bar{
  width:100%;
  height:6px;
  border-radius:999px;
  background:#E7EEF4;
  overflow:hidden;
}

.dashboard-readiness__fill{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #9BB6C8 0%, #7F9DB1 100%);
  transition:width .35s ease;
}

/* grid – betere responsiveness & gelijke hoogtes */
.grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items:stretch;
}

/* card */
.card{
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:20px 20px 18px;
  box-shadow:var(--shadow);
  border:1px solid rgba(13,59,102,0.06);
  display:flex;
  flex-direction:column;
  min-height:240px;
  position: relative;
}

.card--clickable{
  cursor:pointer;
}

.card--clickable:focus-visible{
  outline:2px solid rgba(13,59,102,0.45);
  outline-offset:2px;
}
.card h2{
  margin:4px 0 10px;
  font-size:18px;
  font-weight:700;
  color:var(--text);
}
.sub{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.big{
  font-size:52px;
  font-weight:800;
  line-height:1;
  margin:8px 0 6px;
}
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:var(--brand-mid);
  color:#fff;
  font-weight:600;
  font-size:12px;
}

/* KPI row onder donuts */
.row{
  display:flex; gap:10px; align-items:center; justify-content:center;
  margin-top:12px;
}
.kpi{
  background: var(--brand-light);
  color: var(--brand-dark);
  border-radius:12px;
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  border:1px solid rgba(13,59,102,0.1);
}

/* Donut – dikker, animatie, scherper contrast */
.donut-wrap{ position:relative; display:grid; place-items:center; margin-top:8px; }
.donut{
  --size:152px;
  --thickness:16px;
  --value:0;                      /* 0..100 */
  --color: var(--warn);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background: conic-gradient(var(--color) calc(var(--value)*1%), var(--card-ring) 0);
  display:grid; place-items:center;
  position:relative;
  transition: background 420ms ease;  /* smooth update */
}
.donut::before{
  content:"";
  width:calc(var(--size) - 2*var(--thickness));
  height:calc(var(--size) - 2*var(--thickness));
  background:var(--card-bg);
  border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(13,59,102,0.06);
}
.donut .center{
  position:absolute;
  text-align:center;
  font-weight:800;
  color:var(--text);
  font-size:18px;
}
.legend{
  margin-top:12px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

/* States / kleurgebruik */
.is-bad{ color:var(--bad); }
.is-warn{ color:var(--warn); }
.is-ok{ color:var(--ok); }

/* Unacceptable card accent (val op zonder te schreeuwen) */
/* Basis: unacceptable maar geen systemen → neutrale kaart */
#card-unacceptable .big{
  color: var(--muted);
}

#card-unacceptable .badge{
  background: #8A94A1;
  color: #fff;
}

/* Alert: er zijn unacceptable systemen → kaart moet 'aan' */
.card--alert{
  border: 1px solid rgba(220, 38, 38, 0.55);
  background: #FEF2F2;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.08),
    0 12px 28px rgba(220, 38, 38, 0.20);
}

.card--alert h2{
  color: #7F1D1D;
}

.card--alert .big{
  color: var(--bad);
}

.card--alert .badge{
  background: var(--bad);
  color: #FEE2E2;
}

.card--alert::after {
  content: "\1F6AB";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 22px;
  opacity: 0.85;
  pointer-events: auto;
}

/* Minimal kaart – subtiele highlight */
#minimal-count{ color: var(--ok); }

#minimal-badge{
  margin-top: 8px;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 12px;
  border: 1px solid rgba(13,59,102,0.12);
}

/* Hover micro-interaction (optioneel) */
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(13,59,102,0.10), 0 3px 12px rgba(13,59,102,0.08);
  transition: box-shadow .2s ease, transform .2s ease;
}

.footnote {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
  min-height: 28px; /* voorkomt springen */
}

.dashboard-portfolio-single{
  margin-top: 16px;
  display:block;
}

.dashboard-panel{
  background:var(--card-bg);
  border:1px solid rgba(13,59,102,0.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 14px 12px;
}

.dashboard-panel__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.dashboard-panel__head h3{
  margin:0;
  color:var(--brand-dark);
  font-size:1rem;
  font-weight:700;
}

.dashboard-panel__meta{
  font-size:0.82rem;
  color:var(--muted);
}

.dashboard-signals{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:10px;
}

.dashboard-signal{
  position: relative;
  border:1px solid rgba(13,59,102,0.10);
  border-radius:12px;
  padding:10px 10px 9px;
  background:#fff;
}

.dashboard-signal.is-linkable{
  cursor: pointer;
}

.dashboard-signal.is-linkable:hover{
  border-color: rgba(13,59,102,0.25);
  box-shadow: 0 6px 16px rgba(13,59,102,0.08);
}

.dashboard-signal.is-warning{
  border-color: rgba(176, 138, 46, 0.45);
  background: rgba(255, 251, 235, 0.58);
}

.dashboard-signal.is-danger{
  border-color: rgba(176, 38, 38, 0.50);
  background: rgba(254, 242, 242, 0.70);
}

.dashboard-signal.is-warning::after,
.dashboard-signal.is-danger::after{
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.95;
}

.dashboard-signal.is-warning::after{
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #8a6b21;
}

.dashboard-signal.is-danger::after{
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #991b1b;
}

.dashboard-signal__label{
  display:block;
  font-size:0.76rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
}

.dashboard-signal__value{
  display:block;
  margin-top:3px;
  color:var(--brand-dark);
  font-size:1.2rem;
  font-weight:800;
}

.dashboard-ops-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-list{
  display: grid;
  gap: 8px;
}

.dashboard-list__item{
  display: block;
  text-decoration: none;
  border: 1px solid rgba(13,59,102,0.10);
  border-radius: 10px;
  background: #fff;
  padding: 9px 10px;
  color: inherit;
}

.dashboard-list__item:hover{
  border-color: rgba(13,59,102,0.25);
  box-shadow: 0 6px 16px rgba(13,59,102,0.08);
}

.dashboard-list__title{
  font-weight: 700;
  color: var(--brand-dark);
  font-size: 0.95rem;
}

.dashboard-list__meta{
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
}

.dashboard-list__empty{
  color: var(--muted);
  font-size: 0.88rem;
  padding: 4px 2px;
}

.ca-inline-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 6px;
}
@media (max-width: 900px) {
  .ca-filters__main {
    grid-template-columns: 1fr;
  }
  .ca-filters__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 980px){
  .dashboard-signals{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dashboard-ops-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px){
  .dashboard-signals{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ====== EVIDENCE BOX ====== */
.evidence-group {
  margin-top: 1rem;
}

.evidence-current {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.evidence-icon {
  font-size: 1rem;
}

.evidence-current a {
  color: var(--ud-interactive);
  text-decoration: none;
  font-weight: 500;
}

.evidence-current a:hover {
  text-decoration: underline;
}

.evidence-help {
  font-size: 0.85rem;
  color: var(--ud-muted);
  margin: 0 0 0.35rem;
}

.evidence-restrictions {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--ud-muted);
  line-height: 1.35;
  padding-left: 2px;
}
.evidence-restrictions strong {
  color: var(--ud-primary);
}

/* Link-achtige button (in plaats van een harde rode knop) */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.btn-link.danger {
  color: #b3261e;
  margin-left: auto;
}

.btn-link.danger:hover {
  color: #8f1c16;
}

/* --- Modal backdrop --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35); /* semi-transparante overlay */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* sichtbar maken via JS */
.modal-backdrop.is-visible {
  display: flex;
}

/* --- Modal dialog --- */
.modal-dialog {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
}

.modal-dialog h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--ud-primary);
}

.modal-dialog p {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  color: var(--ud-text);
  line-height: 1.4;
}

/* --- Modal actions --- */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* optioneel, als je nog geen .btn.danger hebt */
.btn.danger {
  background: #C62828;
  color: #fff;
}
.btn.danger:hover {
  background: #A01F1F;
}

.ai-highlight {
  color: var(--ud-accent);
  font-weight: 700;
  text-decoration: none;
  background: none;
  padding: 0 0.05rem;
  border-radius: 2px;
  box-shadow: inset 0 -0.25em 0 rgba(45, 90, 61, 0.12);
}

.additional-info {
  background: var(--ud-hover, #F5F7FA);
  border-left: 2px solid var(--ud-muted, #94A3B8);
  border-right: 2px solid var(--ud-muted, #94A3B8);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 1.25rem 0;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ud-text-muted, #4B5563);
  line-height: 1.45;
}

.ai-qualification-options{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top: 0.5rem;
}
.ai-qualification-option{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ai-qualification-option__label{
  font-weight: 600;
  color: var(--ud-text);
}
.ai-qualification-option__microcopy{
  font-size: 0.78rem;
  color: var(--ud-text-muted, #6B7280);
  font-weight: 400;
}
.ai-qualification-option__hint{
  display: inline-block;
  margin-left: 6px;
  font-size: 0.85rem;
  color: var(--ud-text-muted, #6B7280);
}

.ai-add__subtitle{
  display: block;
  margin: 0.25rem 0 0.75rem;
}

.ai-onboarding-title{
  margin: 0 0 0.35rem;
}

.ai-onboarding-steps{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 0.5rem 0 1rem;
  color: var(--ud-text-muted, #6B7280);
  font-size: 0.85rem;
}
.ai-onboarding-arrow{
  display: inline-flex;
  align-items: center;
  color: var(--ud-text-muted, #6B7280);
  font-size: 0.85rem;
}

.rs-header{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:start;
  column-gap: 16px;
}

.rs-header__content{
  display:flex;
  flex-direction:column;
  gap: 0.35rem;
}

.rs-header__nav{
  justify-self:end;
  align-self:start;
  margin-top: 0.15rem;
  white-space: nowrap;
}
.ai-onboarding-step{
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--ud-border);
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}
.ai-onboarding-step:visited{
  color: inherit;
}
.ai-onboarding-step:hover{
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(27,54,93,.08);
}
.ai-onboarding-step:focus{
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(27,54,93,.08);
}
.ai-onboarding-step.is-locked{
  cursor: not-allowed;
}
.ai-onboarding-step.is-locked::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  background: #fff;
  color: var(--ud-text);
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(27,54,93,.12);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.ai-onboarding-step.is-locked:hover::after,
.ai-onboarding-step.is-locked:focus::after{
  opacity: 1;
}
.ai-onboarding-step.is-active{
  color: var(--ud-text);
  border-color: var(--ud-text);
  font-weight: 600;
}
.ai-onboarding-step.is-complete{
  color: var(--ud-text);
  border-color: var(--ud-border);
}

.ai-add__step{
  margin-top: 0;
}

.ai-add__step.is-hidden{
  display: none;
}

.ai-add__step:not(.is-hidden){
  animation: aiStepIn 260ms ease-out;
}
.roleass-form{
  animation: aiStepIn 260ms ease-out;
}
.rs-form{
  animation: aiStepIn 260ms ease-out;
}

@keyframes aiStepIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-add__step > p{
  margin-bottom: 0.75rem;
}

.ai-add p{
  margin: 0.45rem 0;
}

.ai-add form{
  margin-top: 0;
}

.ai-add .form-group{
  margin-bottom: 1.25rem;
}

.ai-add input[type="text"],
.ai-add select,
.ai-add textarea{
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}

.ai-add .textarea-wrapper textarea{
  resize: vertical;
  overflow-x: hidden;
}

.ai-add h1{
  margin: 0 0 0.25rem 0;
}

.ai-add h3{
  margin: 0.6rem 0 1rem 0;
}

.ai-add .helptext{
  background: transparent;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  margin: 0.6rem 0 0.9rem;
  color: var(--ud-text);
  font-size: 1.1rem;
}
.form-actions--split{
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 0;
}
.form-actions--split .btn{
  margin-top: 0;
}

.textarea-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: inherit;
}

.textarea-wrapper textarea {
  padding-bottom: 2.2rem !important; /* ruimte voor hint */
  font-family: inherit;
}

.textarea-hint {
  position: absolute;
  bottom: 0.45rem;
  left: 0.75rem;
  right: 0.75rem;
  font-size: 0.75rem;
  color: var(--ud-text-muted, #6B7280);
  pointer-events: none;
  opacity: 0.85;
}

.comp-label {
  margin-bottom: 0.25rem;
}

.comp-sub {
  font-size: 0.9rem;
  color: var(--ud-muted, #6B7280);
}

.comp-wrapper{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.button-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 9px;
  overflow: visible;
}

.comp-unacceptable__headline {
  margin: 0 0 0.25rem;
  font-weight: 800;
  color: #8A1E17;
  font-size: 1rem;
}

.comp-unacceptable__text {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #7A2A24;
}

/* Disabled buttons */
.btn-disabled,
.btn[aria-disabled="true"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  line-height: 1;
  box-sizing: border-box;
  cursor: not-allowed !important;
  filter: grayscale(45%);
  border-color: #b8b8b8 !important;
  color: #6b7280 !important;
  background-color: #E1E7EE !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.04) 0px,
    rgba(0,0,0,0.04) 6px,
    rgba(0,0,0,0.08) 6px,
    rgba(0,0,0,0.08) 12px
  );
  background-size: auto;
  box-shadow: none !important;
}
.btn-disabled.small,
.btn[aria-disabled="true"].small {
  height: auto;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  border-radius: 8px;
}

.btn-disabled[data-disabled-reason],
.btn[aria-disabled="true"][data-disabled-reason] {
  opacity: 1;
}


.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 2rem 0 1rem;
}

.pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination__page,
.pagination__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: auto;
  padding: 0 2px;
  border-radius: 0;
  border: 0;
  color: var(--ud-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
}

.pagination__page:hover,
.pagination__nav:hover {
  text-decoration: underline;
}

.pagination__page.is-active {
  color: var(--ud-primary);
  text-decoration: underline;
}

.pagination__nav.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination__ellipsis {
  color: var(--ud-muted);
  padding: 0 2px;
}

/* ===== Audit & Reporting ===== */
.audit-subnav {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

.audit-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--ud-border);
  color: var(--ud-accent);
  text-decoration: none;
  font-weight: 600;
  background: #fff;
}

.audit-tab.active {
  border-color: var(--ud-primary);
  color: var(--ud-primary);
  box-shadow: var(--ud-shadow-soft);
}

.audit-page {
  display: grid;
  gap: 0;
  padding: 1rem 1.2rem;
}

.audit-hero {
  display: block;
  padding: 0;
  margin: 0;
  max-width: none;
}

.audit-hero__text h2 {
  margin: 0;
  font-size: 1.35rem;
}

.audit-hero__subtitle {
  margin: 0.3rem 0 0;
  color: var(--ud-muted);
  font-size: 0.95rem;
}

.audit-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 1rem 1.2rem;
}

.audit-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: 0 2px 10px rgba(27, 54, 93, 0.05);
}

.audit-card--primary {
  border-color: var(--ud-border);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.audit-card--risk[data-risk="unacceptable"] {
  border-color: var(--ud-border);
}

.audit-card--risk[data-risk="high"] {
  border-color: var(--ud-border);
}

.audit-card--risk[data-risk="limited"] {
  border-color: var(--ud-border);
}

.audit-card--risk[data-risk="minimal"] {
  border-color: var(--ud-border);
}

.audit-card__label {
  font-size: 0.8rem;
  color: var(--ud-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.audit-card__value {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ud-accent);
  margin-top: 0.25rem;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  overflow: hidden;
}

.audit-table th,
.audit-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--ud-border);
  text-align: left;
  font-size: 0.95rem;
}

.audit-table th {
  background: #F3F7F5;
  color: var(--ud-accent);
  font-weight: 700;
}

.audit-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 0;
}

.audit-preview {
  margin: 0;
  max-width: none;
  padding: 1rem 1.2rem;
}

.audit-preview__header {
  margin-bottom: 0.9rem;
}

.audit-preview__header h3 {
  margin: 0;
}

.audit-preview__hint {
  margin: 0.25rem 0 0;
  color: var(--ud-muted);
  font-size: 0.9rem;
}

.audit-preview-card {
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(27, 54, 93, 0.05);
  padding: 0.75rem;
}

.audit-preview-label {
  font-size: 0.85rem;
  color: var(--ud-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.audit-preview-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--ud-border);
}

.audit-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1rem 1.2rem;
  padding: 1rem 1.2rem;
  max-width: none;
}

.audit-cta__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--ud-muted);
  font-size: 0.9rem;
}

.audit-cta__text strong {
  color: var(--ud-text);
  font-size: 0.95rem;
}

.audit-cta__action {
  display: inline-flex;
  justify-content: flex-end;
}

@media (max-width: 1080px) {
  .audit-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .audit-hero {
    display: block;
  }

  .audit-summary {
    grid-template-columns: 1fr;
  }

  .audit-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .audit-cta__action .btn {
    width: 100%;
  }
}

/* === 404 page === */

.error-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;      /* netjes gecentreerd zonder te botsen met navbar */
}

.error-card {
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem 3rem;
  max-width: 460px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--ud-border);
  box-shadow: var(--ud-shadow);
}

.error-card h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ud-primary);
}

.error-card p {
  margin-bottom: 1.4rem;
  font-size: 1rem;
  color: var(--ud-muted);
}

/* ===== Pricing / Registration ===== */
.pricing-hero {
  text-align: center;
  margin: 1.75rem auto 1.25rem;
  max-width: 680px;
}
.pricing-hero h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}
.pricing-hero p {
  color: var(--ud-muted);
  margin: 0;
}
.pricing-note {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ud-muted);
}
.pricing-current {
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--ud-accent);
}

.plans-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  margin: 1.25rem 0 1.75rem;
}
@media (max-width: 980px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--ud-border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  padding: 0;
  padding-bottom: 0.5rem;
  text-align: center;
  height: 100%;
  overflow: visible;
}
.plan-card--bronze { border-top: 3px solid var(--tier-bronze); }
.plan-card--silver { border-top: 3px solid var(--tier-silver); }
.plan-card--gold { border-top: 3px solid var(--tier-gold); }
.plan-card {
  display: block;
  height: 100%;
}
.pricing-container:not(.is-anon) .plan-card {
  display: grid;
  grid-template-rows: 1fr var(--actions-height);
}
.plan-card__content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 26px 28px;
}
.plan-card__content > * {
  margin-top: 0;
  margin-bottom: 8px;
}
.plan-card__content > *:last-child {
  margin-bottom: 0;
}
.plan-card__actions {
  display: grid;
  grid-template-rows: 48px auto;
  row-gap: 8px;
  padding: 16px 32px 16px 32px;
  align-content: start;
  overflow: visible;
}
.pricing-container.is-anon .plan-card__actions {
  display: none;
}
.actions__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
}
.actions__meta {
  min-height: 32px;
  line-height: 1.35;
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.actions__meta p {
  margin: 0;
}
.plan-card__cta .btn:disabled {
  opacity: 0.55;
  filter: grayscale(0.2);
  border-style: solid;
  background: rgba(0,0,0,0.04);
}
.plan-status-banner {
  margin: 0.5rem auto 1.25rem;
  max-width: 960px;
}
.plan-status-banner__form {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  max-width: none;
  margin: 0;
}
.plan-status-banner__content {
  background: linear-gradient(135deg, #F7FBF8 0%, #FFFFFF 100%);
  border: 1px solid var(--ud-border);
  border-radius: 16px;
  padding: 1.15rem 1.4rem;
  box-shadow: 0 8px 18px rgba(27,54,93,0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan-status-banner__content h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  color: var(--ud-accent);
}
.plan-status-banner__content p {
  margin: 0.2rem 0;
  color: var(--ud-muted);
  font-size: 0.95rem;
}
.plan-status-banner__cta {
  margin-top: 0.8rem;
  display: flex;
  justify-content: flex-end;
}
.pricing-cta-slot {
  margin-top: auto;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
}
.pricing-disabled-reason {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ud-muted);
}
.pricing-form {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  max-width: none;
  margin: auto 0 0;
  width: 100%;
}
.pricing-form .btn {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  box-sizing: border-box;
}
.pricing-form button {
  width: 100%;
}
.pricing-actions {
  display: grid;
  gap: 0.5rem;
}

.pricing-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
}
.pricing-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: var(--ud-accent);
}
.pricing-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ud-primary);
  margin: 0 0 0.6rem;
}
.pricing-year {
  margin: -0.2rem 0 0.6rem;
  color: var(--ud-muted);
  font-size: 0.95rem;
}

.pricing-desc {
  margin: 0;
  color: var(--ud-muted);
  font-size: 0.95rem;
}
.plan-tagline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pricing-container {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  padding: 0 clamp(12px, 2.2vw, 24px);
  box-sizing: border-box;
  overflow-x: clip;
}
.pricing-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.pricing-header__text h1 {
  margin-bottom: 0.4rem;
}
.pricing-header__text p {
  margin: 0;
  color: var(--ud-muted);
}
.pricing-trust {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--ud-muted);
}
.pricing-hero-cta {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}
.pricing-hero-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ud-muted);
}
.pricing-header__billing {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 0;
}
.pricing-header__billing label {
  margin: 0;
  font-weight: 600;
  opacity: 0.75;
}
.billing-toggle {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  background: #fff;
  padding: 6px;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.billing-toggle__btn {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  min-width: min(120px, 40vw);
  height: 42px;
  border-radius: 999px;
  font-weight: 600;
  color: #2c3e50;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.billing-toggle__btn.is-active {
  background: var(--ud-primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(45,90,61,0.18);
}
.billing-toggle__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ud-muted);
}
.billing-toggle__helper {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ud-muted);
}
.pricing-container.is-anon .billing-toggle {
  padding: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pricing-container.is-anon .billing-toggle__btn {
  min-width: 108px;
  height: 38px;
  font-size: 0.85rem;
}
.pricing-container.is-anon .pricing-header__billing {
  display: none;
}
.pricing-container.is-anon .plans-grid {
  display: grid;
}
.pricing-container.is-anon .pricing-card {
  margin-bottom: 0;
}
.pricing-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 14px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, #F7FBF8 0%, #FFFFFF 100%);
  border: 1px solid var(--ud-border);
  box-shadow: 0 8px 18px rgba(27,54,93,0.08);
  position: relative;
}
.manage-seats__summary {
  display: grid;
  gap: 10px;
  margin: 0.7rem 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ud-text);
}
.manage-seats__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  font-size: 0.95rem;
}
.manage-seats__row strong {
  text-align: right;
}
.manage-seats__note {
  font-size: 0.9rem;
  color: var(--ud-muted);
}
.manage-seats__control {
  display: grid;
  gap: 8px;
  margin-bottom: 1rem;
}
.manage-seats__helper {
  font-size: 0.9rem;
  color: var(--ud-muted);
}
.manage-seats__stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.manage-seats__stepper input {
  width: 96px;
  height: 40px;
  text-align: center;
  padding: 6px 10px;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
}
.manage-seats__disabled {
  font-size: 0.9rem;
  color: var(--ud-muted);
}
.manage-seats__warning {
  margin: 0.8rem 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7e6;
  border: 1px solid #f3d7a5;
  color: #7a4d00;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.manage-seats__undo {
  background: none;
  border: none;
  color: #7a4d00;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.manage-seats__error {
  color: #9b1c1c;
  font-size: 0.9rem;
}
.pricing-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: 4px 0 0 4px;
  opacity: 0.85;
  background: var(--tier-bronze);
}
.pricing-banner--bronze::before { background: var(--tier-bronze); }
.pricing-banner--silver::before { background: var(--tier-silver); }
.pricing-banner--gold::before { background: var(--tier-gold); }
.pricing-banner--bronze .pricing-banner__actions .btn.primary {
  margin-top: 0;
}
.pricing-banner__actions form button[type="submit"] {
  margin-top: 0;
}
.pricing-banner--anon::before {
  display: none;
}
.pricing-banner--anon {
  padding: 28px 32px;
  max-width: 1120px;
  margin: 0 auto 22px auto;
}
.pricing-banner--anon .pricing-banner__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}
.pricing-banner--anon .pricing-banner__text h2 {
  margin: 0 0 8px 0;
}
.pricing-banner--anon .pricing-banner__text p {
  margin: 0;
  max-width: 60ch;
}
.pricing-banner--anon .pricing-banner__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 220px;
}
.pricing-banner--anon .pricing-banner__cta .btn {
  width: 200px;
}
.pricing-banner--anon .pricing-banner__note {
  font-size: 0.95rem;
  opacity: 0.75;
  text-align: right;
  margin-top: 2px;
}
.pricing-banner__text h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  color: var(--ud-accent);
}
.pricing-banner__text p {
  margin: 0.2rem 0;
  color: var(--ud-muted);
  font-size: 0.95rem;
}
.pricing-banner__facts {
  display: grid;
  gap: 8px;
}
.pricing-banner__fact-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 0.95rem;
  color: var(--ud-text);
}
.pricing-banner__fact-label {
  color: var(--ud-muted);
  font-weight: 600;
  text-transform: none;
}
.pricing-banner__fact-value {
  color: var(--ud-text);
}
.pricing-banner__note-row {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ud-muted);
}
.pricing-banner__inline-link {
  color: var(--ud-accent);
  text-decoration: none;
  font-size: 0.9rem;
}
.pricing-banner__inline-link:hover {
  text-decoration: underline;
}
.ai-card .pricing-banner__inline-link{
  font-weight: 700;
  opacity: 1;
  text-decoration: none;
  border-bottom: 1px solid rgba(27,54,93,.35);
  padding-bottom: 1px;
}
.ai-card .pricing-banner__inline-link:hover,
.ai-card .pricing-banner__inline-link:focus{
  border-bottom-color: currentColor;
  text-decoration: none;
}
.pricing-banner__actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}
.pricing-banner__menu {
  position: relative;
}
.pricing-banner__menu summary::-webkit-details-marker {
  display: none;
}
.pricing-banner__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--ud-border);
  background: #fff;
  font-weight: 700;
  color: var(--ud-accent);
  cursor: pointer;
}
.pricing-banner__menu-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  box-shadow: var(--ud-shadow);
  padding: 12px;
  min-width: 200px;
  z-index: 10;
  gap: 8px;
}
.pricing-banner__menu[open] .pricing-banner__menu-panel {
  display: grid;
}
.pricing-banner__menu-item {
  background: none;
  border: 0;
  padding: 6px 8px;
  text-align: left;
  font-size: 0.9rem;
  color: var(--ud-accent);
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
}
.pricing-banner__menu-item:hover {
  background: var(--ud-hover-bg);
}
.pricing-banner__menu-form {
  margin: 0;
}
.pricing-banner__link {
  font-size: 0.9rem;
  color: var(--ud-accent);
  text-decoration: none;
  padding: 8px 6px;
  align-self: center;
}
.pricing-banner__link:hover {
  text-decoration: underline;
}
.pricing-banner__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}
.pricing-banner__note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ud-muted);
  width: 100%;
  text-align: right;
}
.pricing-banner__buttons .btn {
  width: 100%;
}
.pricing-banner__form {
  display: contents;
}
.pricing-banner {
  grid-template-columns: minmax(0, 30%) minmax(0, 40%) minmax(0, 30%);
  grid-template-areas: "details callout actions";
  column-gap: 0;
  row-gap: 0;
  min-height: 154px;
  width: 100%;
  padding: 24px 28px 24px 34px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(27, 54, 93, 0.08);
}
.pricing-banner::before {
  width: 6px;
  border-radius: 8px 0 0 8px;
  opacity: 1;
}
.pricing-banner__details {
  grid-area: details;
  min-width: 0;
  height: 100%;
  padding: 0 34px 0 10px;
  border-right: 1px solid #dbe3ec;
}
.pricing-banner__details h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--ud-accent);
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: 0;
}
.pricing-banner__facts {
  gap: 7px;
}
.pricing-banner__fact-row {
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.3;
}
.pricing-banner__fact-label {
  color: var(--ud-text);
  font-weight: 500;
}
.pricing-banner__fact-value {
  overflow-wrap: anywhere;
}
.pricing-banner__callout {
  grid-area: callout;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 96px;
  margin: 15px 30px 15px 34px;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ud-text);
  font: inherit;
  text-align: left;
}
button.pricing-banner__callout {
  margin: 0;
  cursor: pointer;
}
button.pricing-banner__callout:hover,
button.pricing-banner__callout:focus-visible {
  border-color: #9dbce3;
  box-shadow: 0 0 0 3px rgba(52, 112, 190, 0.1);
}

.pricing-banner__callout--available,
.pricing-banner__callout--scheduled {
  border-color: #cbdcf2;
  background: #f5f8fd;
}
.pricing-banner__callout--available {
  justify-self: center;
  width: 90%;
  margin-left: 0;
  margin-right: 0;
}
.pricing-banner__callout--success {
  border-color: #c9e6d4;
  background: #f3faf6;
}
.pricing-banner:not(.pricing-banner--bronze) .pricing-banner__callout {
  align-self: center;
  height: 80%;
  min-height: 0;
  box-sizing: border-box;
}
.pricing-banner__callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #14529a;
}
.pricing-banner__callout-icon svg {
  display: block;
  width: 34px;
  height: 34px;
}
.pricing-banner__callout--success .pricing-banner__callout-icon {
  color: #18834b;
}
.pricing-banner__callout-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.pricing-banner__callout-copy strong {
  color: var(--ud-accent);
  font-size: 0.96rem;
  line-height: 1.3;
}
.pricing-banner__callout--success .pricing-banner__callout-copy strong {
  color: #177245;
}
.pricing-banner__callout-copy span {
  color: var(--ud-text);
  font-size: 0.9rem;
  line-height: 1.4;
}
.pricing-banner__callout-arrow {
  flex: 0 0 auto;
  color: var(--ud-accent);
  font-size: 2.1rem;
  line-height: 1;
}
.pricing-banner__actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  justify-content: stretch;
  align-content: center;
  min-width: 0;
  padding-left: 10px;
}
.pricing-banner__actions .btn,
.pricing-banner__actions form button[type="submit"] {
  width: 100%;
  min-height: 48px;
  margin: 0;
  white-space: nowrap;
}
.pricing-banner--bronze .pricing-banner__callout {
  display: flex;
  margin-left: 34px;
  padding-left: 0;
  padding-right: 0;
}
.plan-price {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.plan-price__main {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ud-primary);
  line-height: 1.1;
}
.plan-price__alt {
  min-height: 22px;
  color: var(--ud-muted);
  font-size: 0.95rem;
}
.plan-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}
.plan-subtitle {
  display: grid;
  gap: 4px;
  margin: 0 0 6px;
}
.plan-subtitle__primary {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ud-text);
}
.plan-subtitle__secondary {
  font-size: 0.85rem;
  color: var(--ud-muted);
  line-height: 1.4;
  min-height: calc(1em * 1.4 * 2);
}
.plan-bestfor {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--ud-muted);
}
.plan-card__sections {
  display: grid;
  gap: 24px;
  text-align: left;
  margin-top: 12px;
}
.plan-card__section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ud-muted);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.plan-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}
.plan-card__row {
  display: grid;
  gap: 10px;
  align-items: center;
  font-size: 0.9rem;
  line-height: 1.25;
  min-height: 30px;
  color: var(--ud-text);
}
.plan-card__section--capacity .plan-card__row {
  grid-template-columns: 20px 1fr minmax(110px, 140px);
}
.plan-card__section--core_compliance .plan-card__row,
.plan-card__section--audit_reporting .plan-card__row {
  grid-template-columns: 20px 1fr;
}
.plan-card__section--capacity .plan-card__label {
  white-space: nowrap;
}
.plan-card__row--spacer {
  visibility: hidden;
  pointer-events: none;
}
.plan-card__status {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plan-card__status svg {
  width: 16px;
  height: 16px;
  fill: none;
}
.plan-card__status--included {
  color: #3f6f52;
}
.plan-card__status--limited {
  color: #b07a2c;
}
.plan-card__status--none {
  color: #9aa3af;
}
.plan-card__label {
  color: var(--ud-text);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plan-card__value {
  color: var(--ud-muted);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  text-align: right;
}
.plan-card__tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--ud-muted);
}
.plan-card__tooltip svg {
  width: 12px;
  height: 12px;
}
.plan-card__tooltip--inline {
  margin-left: 6px;
}
.plan-card__row[data-tooltip] {
  position: relative;
  cursor: help;
}
.plan-card__row[data-tooltip]::after {
  content: attr(data-tooltip);
  visibility: hidden;
  position: absolute;
  min-width: 180px;
  max-width: 260px;
  background-color: var(--tooltip-bg);
  color: var(--tooltip-text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  opacity: 1;
  transition: opacity 0.2s ease;
  white-space: normal;
}
.plan-card__row[data-tooltip]::before {
  content: "";
  position: absolute;
  visibility: hidden;
  top: calc(100% + 2px);
  left: 12px;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent var(--tooltip-bg) transparent;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.plan-card__row[data-tooltip]:hover::after,
.plan-card__row[data-tooltip]:focus-within::after,
.plan-card__row[data-tooltip]:hover::before,
.plan-card__row[data-tooltip]:focus-within::before {
  visibility: visible;
  opacity: 1;
}
.plan-card__cta .btn,
.plan-card__cta button {
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}
.plan-card__cta {
  width: 100%;
}
.plan-card__cta {
  height: 48px;
}
.plan-card__cta[disabled] {
  opacity: 0.6;
  pointer-events: none;
  height: 48px;
  cursor: not-allowed;
}
.plan-features {
  min-height: 96px;
  margin-top: 10px;
}
.plan-features li {
  margin: 6px 0;
}
.plan-feature {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1180px) {
  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plan-card__content {
    padding: 22px 20px;
  }
  .plan-card__actions {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 980px) {
  .pricing-header {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .pricing-header__billing {
    justify-content: flex-start;
    align-items: center;
  }
}
@media (max-width: 760px) {
  .plans-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .pricing-banner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "details"
      "callout"
      "actions";
    gap: 18px;
    min-height: 0;
    padding: 24px 26px 24px 32px;
  }
  .pricing-banner__details {
    padding: 0 0 20px;
    border-right: 0;
    border-bottom: 1px solid #dbe3ec;
  }
  .pricing-banner__callout {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    height: auto;
    min-height: 0;
    margin: 0;
  }
  .pricing-banner__callout--available {
    width: 100%;
  }
  .pricing-banner__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding-left: 0;
  }
  .pricing-header__billing {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }
  .billing-toggle {
    width: 100%;
    box-sizing: border-box;
  }
  .billing-toggle__btn {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (max-width: 820px) {
  .pricing-banner--anon .pricing-banner__body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pricing-banner--anon .pricing-banner__cta {
    align-items: stretch;
    min-width: 0;
  }
  .pricing-banner--anon .pricing-banner__cta .btn {
    width: 100%;
  }
  .pricing-banner--anon .pricing-banner__note {
    text-align: left;
  }
  .pricing-banner__actions {
    justify-content: flex-start;
  }
}
@media (max-width: 560px) {
  .pricing-header__billing {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .pricing-header__billing label {
    justify-self: start;
  }
  .pricing-banner {
    padding: 22px 20px 22px 26px;
  }
  .pricing-banner__fact-row {
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .pricing-banner__callout {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 18px;
  }
  .pricing-banner__callout-icon {
    width: 36px;
    height: 36px;
  }
  .pricing-banner__callout-icon svg {
    width: 32px;
    height: 32px;
  }
  .pricing-banner--bronze .pricing-banner__callout {
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .pricing-banner__actions {
    grid-template-columns: 1fr;
  }
  .plan-card__content {
    padding: 20px 16px;
  }
  .plan-card__actions {
    padding: 14px 16px;
  }
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--ud-text);
  font-size: 0.92rem;
  flex: 1 1 auto;
}

.pricing-features li {
  padding: 0.25rem 0;
  color: var(--ud-muted);
}

.pricing-cta {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  flex-wrap: wrap;
}

.register-form {
  margin: 0;
  max-width: none;
  width: 100%;
  align-self: stretch;
}

.register-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1fr);
  gap: 2rem;
  align-items: stretch;
  margin-bottom: 2rem;
}

.register-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--ud-border);
  padding: 1.2rem 1.3rem;
  box-shadow: 0 6px 16px rgba(27,54,93,0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 260px;
}
.org-add-panel {
  justify-content: flex-start;
}
.org-add-subtitle {
  margin: 0 0 1rem;
}
.org-add-panel--switch .org-switcher {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.org-add-panel--switch .org-switcher__list {
  flex: 1 1 auto;
}
.org-add-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.register-panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  color: var(--ud-accent);
}

.register-steps {
  margin: 0;
  padding: 0;
  color: var(--ud-muted);
  display: grid;
  gap: 0.6rem;
  list-style: none;
}
.register-steps li {
  position: relative;
  padding-left: 1.1rem;
}
.register-steps li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ud-primary);
  font-weight: 700;
}

.register-form h2 {
  text-align: left;
  margin-bottom: 1rem;
}

.register-form p {
  margin-bottom: 1rem;
}

.register-form label {
  margin-bottom: 0.35rem;
}
.register-form button {
  width: 100%;
}

@media (max-width: 860px) {
  .register-layout {
    grid-template-columns: 1fr;
  }
}

.register-page {
  display: grid;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
  max-width: 1180px;
  margin-inline: auto;
}

.register-hero {
  display: grid;
  gap: 0.4rem;
}

.register-hero__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.register-hero__title {
  margin: 0;
  line-height: 1.2;
  font-size: 1.9rem;
}

.register-hero__subtitle {
  margin: 0;
  color: var(--ud-muted);
  max-width: 860px;
}

.register-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(27, 54, 93, 0.22);
  background: rgba(27, 54, 93, 0.06);
  color: var(--ud-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.register-layout--v2 {
  align-items: start !important;
  gap: 1.15rem;
  grid-template-columns: minmax(460px, 1fr) auto;
}

.register-layout--v2 .register-form--v2 {
  order: 1;
}

.register-layout--v2 .register-panel--v2 {
  order: 2;
}

.register-panel--v2,
.register-form--v2 {
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.08);
  padding: 1.2rem 1.25rem;
}

.register-panel--v2 {
  min-height: auto;
  justify-content: flex-start;
  gap: 0.55rem;
  max-width: 430px;
  min-width: 360px;
  width: 100%;
  justify-self: end;
}

.register-panel__title {
  margin: 0 0 0.7rem;
  font-size: 1.08rem;
}

.register-steps--v2 {
  gap: 0.5rem;
  counter-reset: register-steps;
}

.register-steps--v2 li {
  counter-increment: register-steps;
  background: #f8fafc;
  border: 1px solid #e8edf4;
  border-radius: 10px;
  padding: 0.6rem 0.75rem 0.6rem 2rem;
  font-size: 0.96rem;
  line-height: 1.32;
  color: #4f647d;
}

.register-steps--v2 li::before {
  content: counter(register-steps);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--ud-interactive);
  left: 0.65rem;
  top: 0.62rem;
}

.register-panel__divider {
  height: 1px;
  background: var(--ud-border);
  margin: 0.9rem 0;
}

.register-panel__note {
  margin: 0 0 0.9rem;
  color: var(--ud-muted);
  font-size: 0.92rem;
}

.register-sso-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 2px 0 0;
}

.register-sso-btn {
  width: 100%;
  justify-content: center;
  gap: 10px;
  font-size: 0.92rem;
}

.register-sso-btn i {
  font-size: 0.95rem;
}

.register-panel__login-link {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
  font-size: 0.95rem;
}

.register-form--v2 {
  margin: 0;
  max-width: 560px;
  width: 100%;
  justify-self: start;
  padding: 1.25rem 1.35rem;
}

.register-form__title {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  border-bottom: 1px solid var(--ud-border);
  padding-bottom: 0.55rem;
}

.register-form--v2 p {
  margin-bottom: 0.9rem;
}

.register-form--v2 label {
  font-weight: 600;
  color: var(--ud-text);
  display: inline-block;
  margin-bottom: 0.4rem;
}

.register-form--v2 input[type="text"],
.register-form--v2 input[type="email"],
.register-form--v2 input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #d8e0ea;
  background: #fff;
  min-height: 42px;
  padding: 0.52rem 0.72rem;
}

.register-form--v2 input[type="text"]:focus,
.register-form--v2 input[type="email"]:focus,
.register-form--v2 input[type="password"]:focus {
  border-color: #9fb2ca;
  box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.08);
  outline: none;
}

.register-agreement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  margin: 0.8rem 0 1rem;
  padding: 0.9rem;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  background: #FAFCFB;
}

.register-agreement input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--ud-primary);
}

.register-agreement label {
  margin: 0;
  color: #334155;
  font-weight: 600;
  line-height: 1.45;
}

.register-agreement a,
.register-panel__note a {
  color: var(--ud-primary);
  font-weight: 800;
}

.register-agreement a:hover,
  .register-panel__note a:hover {
    text-decoration: none;
  }

  .legal-acceptance-page {
    width: min(760px, calc(100% - 2rem));
    margin: 2rem auto;
  }

  .legal-acceptance-panel {
    border: 1px solid var(--ud-border);
    border-radius: 8px;
    background: #fff;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  }

  .legal-acceptance-panel h1 {
    margin: 0 0 0.75rem;
    color: var(--ud-primary);
  }

  .legal-acceptance-panel p {
    margin: 0 0 1rem;
    color: #475569;
  }

  .agreement-document-preview {
    max-height: min(52vh, 620px);
    overflow: auto;
    margin: 1.25rem 0;
    padding: 1rem;
    border: 1px solid var(--ud-border);
    border-radius: 8px;
    background: #f8fafc;
  }

  .agreement-document-preview p {
    margin: 0 0 0.8rem;
    color: #1f2937;
    line-height: 1.55;
  }

  .agreement-document-preview h2,
  .agreement-document-preview h3,
  .agreement-document-preview h4 {
    margin: 1.1rem 0 0.55rem;
    color: #0f172a;
    line-height: 1.25;
  }

  .agreement-document-preview h2 {
    font-size: 1.25rem;
  }

  .agreement-document-preview h3 {
    font-size: 1.08rem;
  }

  .agreement-document-preview h4 {
    font-size: 1rem;
  }

  .agreement-document-preview p:last-child {
    margin-bottom: 0;
  }

  .agreement-document-preview__list-item {
    padding-left: 1.2rem;
    position: relative;
  }

  .agreement-document-preview__list-item::before {
    content: "";
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 999px;
    background: var(--ud-primary);
    position: absolute;
    left: 0.15rem;
    top: 0.65rem;
  }

  .docx-bold {
    font-weight: 800;
  }

  .docx-italic {
    font-style: italic;
  }

  .docx-underline {
    text-decoration: underline;
  }

  .agreement-scroll-hint {
    margin: -0.35rem 0 0.9rem;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 700;
  }

  .agreement-scroll-hint--complete {
    color: var(--ud-primary);
  }

  .register-agreement--disabled {
    opacity: 0.68;
  }

  .register-agreement--disabled label {
    cursor: not-allowed;
  }

  .legal-acceptance-form .register-form__actions {
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
  }

  .legal-acceptance-form .register-form__actions .btn {
    align-items: center;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    margin-top: 0;
    min-width: 220px;
    padding: 0 1.35rem;
  }

  .help-request-page {
    width: min(760px, calc(100% - 2rem));
    margin: 2rem auto;
  }

  .help-request-header {
    margin-bottom: 1rem;
  }

  .help-request-header h1 {
    margin: 0 0 0.4rem;
    color: var(--ud-primary);
  }

  .help-request-header p {
    margin: 0;
    color: #475569;
  }

  .help-request-page {
    width: min(1120px, calc(100% - 2rem));
    margin: 2.25rem auto 3rem;
  }

  .help-request-shell {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    gap: 1rem;
    align-items: stretch;
  }

  .help-request-panel,
  .help-request-form {
    border: 1px solid var(--ud-border);
    border-radius: 8px;
    background: #fff;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  }

  .help-request-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
      linear-gradient(135deg, rgba(45, 90, 61, 0.08), rgba(27, 54, 93, 0.04)),
      #fff;
  }

  .help-request-kicker {
    margin: 0 0 0.45rem;
    color: var(--ud-primary);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .help-request-panel h1 {
    margin: 0 0 0.75rem;
    color: var(--ud-primary);
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    line-height: 1.12;
  }

  .help-request-panel p {
    margin: 0;
    color: #334155;
    line-height: 1.65;
  }

  .help-request-panel a {
    color: var(--ud-accent);
    font-weight: 700;
  }

  .help-request-panel__meta {
    display: grid;
    gap: 0.75rem;
    margin-top: 2rem;
  }

  .help-request-panel__meta div {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(230, 234, 240, 0.9);
    border-radius: 8px;
    background: #FFFFFF;
  }

  .help-request-panel__meta span,
  .help-request-field label {
    display: block;
    color: var(--ud-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .help-request-panel__meta strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--ud-accent);
    line-height: 1.35;
  }

  .help-request-form {
    display: grid;
    gap: 1rem;
  }

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

  .help-request-field {
    display: grid;
    gap: 0.4rem;
  }

  .help-request-field label {
    margin: 0;
    color: var(--ud-accent);
    letter-spacing: 0;
  }

  .help-request-form input,
  .help-request-form textarea {
    min-height: 46px;
    border-radius: 8px;
    border-color: #D8E0EA;
    background: #FAFCFE;
  }

  .help-request-form textarea {
    min-height: 168px;
    resize: vertical;
  }

  .help-request-form input:focus,
  .help-request-form textarea:focus {
    background: #fff;
  }

  .help-request-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
  }

  .help-request-form__actions .btn {
    min-width: 150px;
  }

  .register-form__actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.register-form__actions .btn {
  min-width: 180px;
  height: 44px;
}

.form-error {
  border: 1px solid #f5c2c7;
  background: #fff5f5;
  color: #9f1239;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  margin: 0 0 0.9rem;
}

.field-error {
  display: block;
  color: #b42318;
  margin-top: 0.35rem;
  font-size: 0.83rem;
  font-weight: 600;
}

@media (max-width: 860px) {
  .help-request-page {
    width: min(100%, calc(100% - 1rem));
    margin-top: 1rem;
  }

  .help-request-shell,
  .help-request-form__grid {
    grid-template-columns: 1fr;
  }

  .help-request-form__actions {
    flex-direction: column-reverse;
  }

  .help-request-form__actions .btn {
    width: 100%;
  }

  .register-layout--v2 {
    grid-template-columns: 1fr;
  }

  .register-layout--v2 .register-form--v2,
  .register-layout--v2 .register-panel--v2 {
    order: initial;
  }

  .register-hero__title {
    font-size: 1.6rem;
  }

  .register-panel__login-link,
  .register-form__actions .btn {
    width: 100%;
  }
  .register-sso-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Account settings ===== */
.account-hero {
  text-align: left;
  margin: 0 0 1.25rem;
  max-width: 720px;
}

.account-hero h1 {
  font-size: 1.7rem;
  margin-bottom: 0.4rem;
}

.account-hero p {
  color: var(--ud-muted);
  margin: 0;
}

.account-stack {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.account-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--ud-border);
  padding: 20px;
  box-shadow: none;
}

.account-card h2 {
  margin: 0 0 0.9rem;
  font-size: 1.1rem;
  color: var(--ud-accent);
}

.account-form {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  max-width: none;
  margin: 0;
}

.account-form p {
  margin-bottom: 0.9rem;
}

.account-form input,
.account-form select,
.account-form textarea {
  width: 100%;
  box-sizing: border-box;
}
.account-form textarea {
  font-family: inherit;
}

.account-form.help-request-form {
  display: grid;
  gap: 1rem;
  max-width: none;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.account-form.help-request-form button[type="submit"] {
  margin-top: 0;
}

.account-form.help-request-form .help-request-form__actions .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.account-form .is-readonly {
  background: #f5f7fb;
  color: #556070;
  cursor: not-allowed;
}
.field-help {
  display: block;
  margin-top: 0.35rem;
  color: var(--ud-muted);
  font-size: 0.85rem;
}

.account-form--panel {
  background: #fff;
  border: 1px solid var(--ud-border);
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  box-shadow: 0 6px 16px rgba(27,54,93,0.08);
  max-width: 520px;
  margin: 0 auto;
}

.form-actions {
  display: flex;
  margin-top: 1rem;
}
.form-actions--end{
  justify-content: flex-end;
}
.account-card .form-actions{
  justify-content: flex-end;
}
.form-actions .btn {
  width: auto;
  max-width: none;
}

.account-card--info p {
  margin: 0 0 0.6rem;
}

.account-card--danger {
  border-color: #f5c2c7;
  background: #fff8f8;
}

.account-card--danger .btn.danger {
  width: 200px;
  max-width: 100%;
  font-size: 1rem;
}

.account-recovery-codes {
  margin-top: 0.8rem;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  background: #f8fafc;
}

.account-recovery-codes pre {
  margin: 0.6rem 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}





/* ===== Plan modal ===== */
.plan-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 70000;
}

.plan-modal.is-open {
  display: flex;
}

.plan-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.plan-modal__content {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem 1.7rem;
  width: min(550px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
  z-index: 1;
  text-align: left;
}
.plan-modal form {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  margin: 0;
}
.plan-modal--danger .plan-modal__content {
  border: 1px solid rgba(184, 55, 55, 0.35);
  background: #FFF7F7;
}
.plan-modal__content--wide {
  width: min(560px, 100%);
  text-align: left;
}
.plan-modal__content--scroll {
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
}
.plan-modal__header {
  padding-bottom: 0.35rem;
}
.plan-modal__body {
  overflow-y: auto;
  padding-right: 0.2rem;
}
.plan-modal__list--use-cases {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.plan-modal__list-item--use-case {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ud-border);
  border-radius: 14px;
  background: #fff;
}
.plan-modal__list-item--use-case .plan-modal__list-text {
  font-weight: 600;
  color: var(--ud-text);
  font-size: 1rem;
  line-height: 1.35;
  flex: 1 1 auto;
}
.btn--compact {
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
}
.plan-modal__actions--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 1.5rem;
}

.plan-modal__pagination {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.plan-modal__pagination[hidden] {
  display: none;
}
.plan-modal__pagination .pagination {
  margin: 0;
}
.pagination--compact {
  gap: 6px;
  font-size: 0.9rem;
}
.pagination--compact .pagination__page,
.pagination--compact .pagination__nav {
  padding: 0.25rem 0.6rem;
}
.plan-modal__footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-top: 0.6rem;
  margin-bottom: 0;
}

.plan-modal__close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: transparent;
  color: var(--ud-muted);
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
}
.plan-modal__close-btn:hover {
  color: var(--ud-text);
}

#seat-checkout-form {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  max-width: none;
  margin: 0;
}

body.modal-open .team-help-portal,
body.modal-open .team-help-wrap .team-help,
body.modal-open .team-help-icon,
body.modal-open .team-help-toggle {
  display: none !important;
}

.plan-modal__content h3 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.plan-modal__subtitle {
  margin: 0 0 1.2rem;
  color: var(--ud-muted);
}

.plan-downgrade__body {
  margin-bottom: 1.2rem;
}
.plan-downgrade__alert {
  background: #fff7e1;
  border: 1px solid #f3d39b;
  color: #5b4a1b;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
}
.plan-downgrade__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.plan-downgrade__stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  line-height: 1.2;
}
.plan-downgrade__stat span {
  display: block;
  font-size: 0.82rem;
  color: var(--ud-muted);
}
.plan-downgrade__stat strong {
  display: block;
  font-size: 1rem;
  margin: 0.1rem 0 0.15rem;
}
.plan-downgrade__stat small {
  color: var(--ud-muted);
  font-size: 0.78rem;
}
.plan-downgrade__systems-title,
.plan-downgrade__impact-title,
.plan-downgrade__choice-title {
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.plan-downgrade__systems-list,
.plan-downgrade__impact ul {
  margin: 0 0 0.4rem;
  padding-left: 1.1rem;
}
.plan-downgrade__impact-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  margin: 0.8rem 0;
}
.plan-downgrade__impact-title {
  margin-bottom: 0.2rem;
}
.plan-downgrade__impact-summary p {
  margin: 0;
  color: var(--ud-muted);
}
.plan-downgrade__block {
  margin: 0.7rem 0;
  padding-left: 0.75rem;
  border-left: 2px solid #e2e8f0;
}
.plan-downgrade__capacity {
  display: grid;
  gap: 0.2rem;
  color: var(--ud-text);
}

.plan-downgrade__capacity-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-cycle__summary {
  display: grid;
  gap: 10px;
}
.plan-cycle__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.95rem;
}
.plan-cycle__row span {
  color: var(--ud-muted);
}
.plan-downgrade__lost {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0.4rem;
}
.plan-downgrade__lost li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ud-text);
  margin: 0.2rem 0;
}
.plan-downgrade__lost.is-columns {
  column-count: 2;
  column-gap: 1.2rem;
}
.plan-downgrade__lost.is-columns li {
  break-inside: avoid;
}
.plan-downgrade__lost li::before {
  content: "−";
  position: absolute;
  left: 0;
  top: 0;
  color: #6b7280;
  font-weight: 700;
}
.plan-downgrade__systems-more {
  color: var(--ud-muted);
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}
.plan-downgrade__impact {
  margin: 0.8rem 0;
}
.plan-downgrade__choice p {
  margin: 0;
  color: var(--ud-muted);
}
.plan-downgrade__choice label {
  display: block;
  font-weight: 600;
  margin: 0.2rem 0 0.4rem;
}
.plan-downgrade__choice input[type="number"] {
  width: 100%;
  height: 42px;
  padding: 0 0.8rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-bottom: 0.4rem;
}
.plan-downgrade__choice {
  margin-top: 0.7rem;
}
.plan-downgrade__seat-toggle {
  display: inline-flex;
  gap: 8px;
}
.plan-downgrade__seat-option {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--ud-text);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}
.plan-downgrade__seat-option.is-selected {
  background: #eef2f7;
  border-color: #cbd5e1;
}
.plan-downgrade__seat-hint {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--ud-muted);
  margin-left: 0.1rem;
}
.plan-modal__field {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.plan-modal__field--collapsible {
  gap: 0.35rem;
}
.plan-modal__field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: var(--ud-text);
}
.plan-modal__field-toggle {
  border: 0;
  background: transparent;
  color: var(--ud-accent);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.plan-modal__field-body {
  display: grid;
  gap: 0.4rem;
}
.plan-modal__field-body[hidden] {
  display: none !important;
}
.plan-modal__field label {
  font-weight: 600;
  color: var(--ud-text);
}
.plan-modal__field select,
.plan-modal__field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ud-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  box-sizing: border-box;
}
.plan-modal__field textarea {
  resize: vertical;
  min-height: 80px;
}

.plan-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 0.8rem;
}

.plan-modal__actions .btn {
  width: 100%;
  height: 44px;
  padding: 0.6rem 1.2rem;
  line-height: 1;
}

.plan-modal__actions .btn.secondary {
  background-color: #fff;
  color: var(--ud-accent);
  border-color: var(--ud-accent);
}

.plan-modal__actions .btn.primary {
  background-color: var(--ud-primary);
  color: #fff;
  border-color: var(--ud-primary);
  box-shadow: 0 6px 12px rgba(45,90,61,.18);
}
.plan-modal__actions .btn.primary:hover {
  background-color: #264E35;
  border-color: #264E35;
}





.plan-modal__close {
  background: none;
  border: 0;
  color: var(--ud-muted);
  cursor: pointer;
  display: block;
  margin: 0.2rem auto 0;
}


.pricing-year {
  margin: -0.2rem 0 0.6rem;
  color: var(--ud-muted);
  font-size: 0.95rem;
}

.pricing-actions {
  display: grid;
  gap: 0.5rem;
}



.plan-modal__actions form {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  margin: 0;
  width: 100%;
  display: block;
}
.plan-upgrade-form {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  margin: 0;
}
.plan-modal__actions > * {
  width: 100%;
}
.plan-modal__actions button {
  margin: 0;
}
.plan-modal__actions > button {
  margin-top: 0;
}
.plan-modal__actions form .btn {
  width: 100%;
}

.plan-modal__content form button[type="submit"] {
  margin-top: 0;
}



.plan-modal__close {
  background: none;
  border: 0;
  color: var(--ud-muted);
  cursor: pointer;
  display: block;
  margin: 0.2rem auto 0;
}







/* ===== Compliance guidance block ===== */
.guidance-block {
  background: linear-gradient(180deg, #F7FAFF 0%, #F3F7FB 100%);
  border: 1px solid #E3EAF4;
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  margin: 0.9rem 0 1.4rem;
  box-shadow: 0 10px 26px rgba(27,54,93,0.08);
}

.guidance-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 0.75rem;
  font-weight: 700;
  color: var(--ud-accent);
  margin-bottom: 0.7rem;
  font-size: 1.05rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.guidance-toggle::before {
  content: "\f0eb";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #2D5A3D;
}

.guidance-toggle__icon {
  margin-left: auto;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ud-accent);
  transition: transform 0.2s ease;
}

.guidance-toggle.is-open .guidance-toggle__icon {
  transform: rotate(180deg);
}

.guidance-body {
  display: none;
}

.guidance-body.is-open {
  display: block;
}

.guidance-section {
  margin: 0.6rem 0 0.9rem;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid #E6EDF7;
  border-radius: 12px;
}

.guidance-section:last-child {
  margin-bottom: 0;
}

.guidance-title {
  font-weight: 700;
  color: #1B365D;
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.guidance-content {
  color: #4B5563;
  font-size: 0.95rem;
  line-height: 1.55;
}


.guidance-content ul,
.guidance-content ol {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}

.guidance-content li {
  margin-bottom: 0.35rem;
}

/* ===== Role assessment contextual help ===== */
.roleass-question {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ud-border);
}

.roleass-question:last-child {
  border-bottom: 0;
}

.roleass-question__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.roleass-question__label {
  font-weight: 600;
  color: var(--ud-text);
}

.roleass-help-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--ud-border);
  background: #fff;
  color: var(--ud-accent);
  font-size: 0.7rem;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ud-border);
  cursor: pointer;
}

.roleass-help {
  display: none;
  background: #F7FAFF;
  border: 1px solid #E3EAF4;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  color: var(--ud-muted);
  margin-bottom: 0.5rem;
}

.roleass-help.is-open {
  display: block;
}

.roleass-options {
  margin-left: 0.1rem;
}

.roleass-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.roleass-actions--solo {
  justify-content: flex-end;
}
.roleass-actions__right{
  display:flex;
  justify-content:flex-end;
  gap:0.75rem;
}
.roleass-actions .btn,
.roleass-actions .btn-disabled,
.roleass-actions .btn[aria-disabled="true"] {
  margin-top: 1rem;
}

.roleass-question__header {
  align-items: baseline;
}

.assessment-question{
  padding: 20px 0;
  position: relative;
  border-bottom: 0;
  padding-left: 12px;
  position: relative;
}
.assessment-question::after{
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 1px;
  background: rgba(0,0,0,0.06);
}
.assessment-question:last-child{
  border-bottom: 0;
}
.assessment-question:hover{
  background: transparent;
}

.ra-history-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.ra-history-title{
  margin:0 0 4px 0;
  font-size:1.35rem;
  font-weight:800;
  color:var(--ud-accent);
}
.ra-history-subtitle{
  color:var(--ud-text-muted, #6B7280);
  font-size:0.95rem;
}
.ra-history-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ra-history-item{
  background:#fff;
  border:1px solid var(--ud-border);
  border-radius:12px;
  box-shadow: var(--ud-shadow);
  overflow:hidden;
}
.ra-history-toggle{
  width:100%;
  background:transparent;
  border:0;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  text-align:left;
}
.ra-history-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ra-history-meta__date{
  font-weight:700;
  color:var(--ud-text);
}
.ra-history-meta__by{
  font-size:0.9rem;
  color:var(--ud-text-muted, #6B7280);
}
.ra-history-toggle__icon{
  font-size:1.1rem;
  color:var(--ud-text-muted, #6B7280);
}
.ra-history-details{
  border-top:1px solid var(--ud-border);
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ra-history-details[hidden]{
  display:block;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 0;
}
.ra-history-section__label{
  font-size:0.85rem;
  font-weight:600;
  color:var(--ud-text-muted, #6B7280);
  margin-bottom:6px;
}
.ra-history-roles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ra-history-role{
  display:inline-flex;
  align-items:center;
  padding:.32rem .7rem;
  border-radius:999px;
  background:#F8FAFD;
  border:1px solid #E6EDF7;
  color:#1E2A3B;
  font-size:.82rem;
  font-weight:700;
  line-height:1.2;
}
.ra-history-answers{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ra-history-answers li{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.ra-history-answers li:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.ra-history-question{
  color:var(--ud-text);
  font-weight:600;
  flex:1 1 auto;
}
.ra-history-answer{
  color:var(--ud-text-muted, #6B7280);
  font-weight:600;
  flex:0 0 auto;
}
.ra-history-empty{
  padding:14px 16px;
  border-radius:12px;
  background:#fff;
  color:var(--ud-text-muted, #6B7280);
}


.assessment-question.is-changed{
  background: transparent;
  border-left: 0;
}
.assessment-question.is-changed::before{
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 2px;
  background: var(--ud-accent);
  border-radius: 2px;
}

.roleass-help-toggle {
  width: 24px;
  height: 24px;
  margin-left: 0.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-color: var(--ud-accent);
  color: var(--ud-accent);
  box-shadow: 0 4px 10px rgba(27,54,93,0.15);
}

.roleass-help-toggle:hover {
  background: var(--ud-accent);
  color: #fff;
}

/* Control helper info (compliance action detail) */
.control-line{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.control-help-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--ud-accent);
  background:#fff;
  color:var(--ud-accent);
  font-size:0.8rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(27,54,93,0.12);
}
.control-help-toggle:hover{
  background:var(--ud-accent);
  color:#fff;
}
.control-helper{
  display:none;
  background:#F7FAFF;
  border:1px solid #E3EAF4;
  border-radius:10px;
  padding:0.55rem 0.75rem;
  font-size:0.9rem;
  color:var(--ud-muted);
  margin:0.25rem 0 0.5rem;
}
.control-helper.is-open{ display:block; }

.plan-status-banner__content .btn {
  align-self: flex-end;
  margin-top: auto;
}


.ai-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1000;
}

.ai-inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  color: #8A94A3;
  text-decoration: none;
  border-radius: 6px;
}
.ai-inline-link:hover,
.ai-inline-link:focus {
  color: var(--ud-accent);
  background: var(--ud-hover-bg);
}

.ai-role-summary-inline {
  color: var(--ud-muted);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
  flex-shrink: 1;
  position: relative;
  padding-right: 16px;
  text-decoration: none;
}

.ai-role-summary-inline.is-empty {
  display: none;
}

.ai-role-summary-inline::after {
  content: "↗";
  position: absolute;
  right: 0;
  top: 0;
  color: #8A94A3;
  font-size: 0.8rem;
}

.ai-role-summary-inline:hover,
.ai-role-summary-inline:focus {
  color: var(--ud-accent);
}
.ai-role-summary-inline:hover::after,
.ai-role-summary-inline:focus::after {
  color: var(--ud-accent);
}

.ai-role-summary-hidden {
  display: none;
}

.dropdown-link.dropdown-link--danger {
  color: #b42318 !important;
}
.dropdown-link.dropdown-link--danger:hover,
.dropdown-link.dropdown-link--danger:focus {
  background: #fef3f2;
  color: #b42318 !important;
}
.ai-more__menu--meta .dropdown-item,
.ai-more__menu--meta .dropdown-link {
  font-weight: 500;
}

/* === Services page === */
.service-page {
  padding: 2.4rem 1.25rem 3.4rem;
}

.service-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
  align-items: stretch;
  padding: 2.2rem;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(45, 90, 61, 0.08), rgba(27, 54, 93, 0.04)),
    #fff;
  box-shadow: 0 18px 42px rgba(27, 54, 93, 0.08);
  overflow: hidden;
}

.service-hero h1 {
  max-width: 820px;
  margin-bottom: 0.75rem;
  font-size: 2rem;
  line-height: 1.15;
}

.service-hero p {
  max-width: 820px;
  margin: 0;
  color: #334155;
  line-height: 1.65;
}

.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.service-hero__panel {
  display: grid;
  gap: 0.85rem;
  align-content: center;
}

.service-hero__metric {
  padding: 1rem;
  border: 1px solid rgba(230, 234, 240, 0.9);
  border-radius: 8px;
  background: #F8FAFC;
  box-shadow: var(--ud-shadow-soft);
}

.service-hero__metric strong {
  display: block;
  color: var(--ud-accent);
  font-size: 1.15rem;
  line-height: 1.2;
}

.service-hero__metric span {
  display: block;
  margin-top: 0.2rem;
  color: var(--ud-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.service-kicker {
  margin: 0 0 0.5rem;
  color: var(--ud-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.service-section {
  margin-top: 2rem;
}

.service-section__head {
  max-width: 820px;
  margin-bottom: 1rem;
}

.service-section__head h2 {
  margin-bottom: 0.4rem;
}

.service-section__head p:not(.service-kicker) {
  margin: 0.35rem 0 0;
  color: #475569;
  line-height: 1.6;
}

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

.service-tier {
  padding: 1.25rem;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  background: #F8FAFC;
  box-shadow: 0 10px 24px rgba(27, 54, 93, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.service-tier:hover {
  transform: translateY(-2px);
  border-color: #D7DEE8;
  box-shadow: 0 16px 34px rgba(27, 54, 93, 0.1);
}

.service-tier--bronze { border-top: 3px solid var(--tier-bronze); }
.service-tier--silver { border-top: 3px solid var(--tier-silver); }
.service-tier--gold { border-top: 3px solid var(--tier-gold); }

.service-tier__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.8rem;
}

.service-tier__head h3 {
  margin-bottom: 0.15rem;
}

.service-tier__head span {
  color: var(--ud-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.service-tier__price {
  flex: 0 0 auto;
  padding: 0.4rem 0.55rem;
  border-radius: 999px;
  background: #F5F8FB;
  color: var(--ud-accent);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.service-tier p {
  margin: 0 0 0.9rem;
  color: #475569;
  line-height: 1.55;
}

.service-tier ul,
.service-steps {
  margin: 0;
  padding-left: 1.2rem;
}

.service-tier li,
.service-steps li {
  margin: 0.45rem 0;
  color: #334155;
  line-height: 1.5;
}

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

.service-card,
.service-policy {
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  background: #F8FAFC;
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.055);
}

.service-card {
  padding: 1.25rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(27, 54, 93, 0.09);
}

.service-card__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #EAF4ED, #F3F7FB);
  color: var(--ud-primary);
  font-size: 1rem;
}

.service-card h3,
.service-policy h3 {
  margin-bottom: 0.45rem;
  color: var(--ud-accent);
}

.service-card p,
.service-policy p {
  margin: 0;
  color: #475569;
  line-height: 1.55;
}

.service-card__tiers {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ud-border);
  color: var(--ud-accent);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.45;
}

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

.service-policy {
  padding: 1rem 1.15rem;
  position: relative;
}

.service-policy::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
  background: var(--ud-primary);
  opacity: 0.75;
}

.service-steps {
  padding: 1.15rem 1.35rem 1.15rem 2.35rem;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  background: #F8FAFC;
  box-shadow: 0 10px 24px rgba(27, 54, 93, 0.06);
}

@media (max-width: 980px) {
  .service-hero {
    grid-template-columns: 1fr;
  }

  .service-grid,
  .service-tier-grid,
  .service-policy-list {
    grid-template-columns: 1fr;
  }

  .service-hero {
    padding: 1.5rem;
  }

  .service-hero h1 {
    font-size: 1.65rem;
  }

  .service-hero__panel {
    grid-template-columns: 1fr;
  }
}

/* === Privacy policy page === */
.policy-page {
  padding: 2.4rem 1.25rem 3.4rem;
}

.policy-hero {
  padding: 2rem;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(45, 90, 61, 0.08), rgba(27, 54, 93, 0.04)),
    #fff;
  box-shadow: 0 18px 42px rgba(27, 54, 93, 0.08);
}

.policy-hero h1 {
  margin-bottom: 0.75rem;
  font-size: 2rem;
  line-height: 1.15;
}

.policy-hero p {
  max-width: 900px;
  margin: 0;
  color: #334155;
  line-height: 1.65;
}

.policy-updated {
  margin-top: 0.9rem !important;
  color: var(--ud-muted) !important;
  font-size: 0.9rem;
  font-weight: 700;
}

.policy-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1.5rem;
}

.policy-layout--single {
  grid-template-columns: 1fr;
}

.policy-summary,
.policy-content {
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(27, 54, 93, 0.055);
}

.policy-summary {
  position: sticky;
  top: 1rem;
  padding: 1.2rem;
}

.policy-summary h2,
.policy-section h2 {
  margin-bottom: 0.7rem;
}

.policy-summary ul,
.policy-section ul {
  margin: 0;
  padding-left: 1.2rem;
}

.policy-summary li,
.policy-section li {
  margin: 0.45rem 0;
  color: #334155;
  line-height: 1.5;
}

.policy-content {
  display: grid;
  gap: 0;
  padding: 0.35rem 1.25rem;
}

.policy-section {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--ud-border);
}

.policy-section:last-child {
  border-bottom: 0;
}

.policy-section p {
  margin: 0;
  color: #475569;
  line-height: 1.65;
}

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

.policy-grid article {
  padding: 1rem;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  background: #F8FAFC;
}

.policy-grid h3 {
  margin-bottom: 0.35rem;
  color: var(--ud-accent);
}

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

.cookie-category-list article {
  padding: 1rem;
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  background: #F8FAFC;
}

.cookie-category-list h3 {
  margin-bottom: 0.35rem;
}

.cookie-note {
  margin-top: 1rem !important;
}

footer a {
  color: inherit;
  font-weight: 700;
}

footer a:hover,
footer a:focus {
  text-decoration: none;
}

@media (max-width: 980px) {
  .policy-layout,
  .policy-grid,
  .cookie-category-list {
    grid-template-columns: 1fr;
  }

  .policy-summary {
    position: static;
  }

  .policy-hero {
    padding: 1.5rem;
  }

  .policy-hero h1 {
    font-size: 1.65rem;
  }
}

.register-form__actions.social-agreement-actions {
  align-items: center !important;
  display: flex !important;
  gap: 1rem;
  justify-content: space-between !important;
  width: 100%;
}

.register-form__actions.social-agreement-actions > .btn,
.register-form__actions.social-agreement-actions > button[type="submit"].btn {
  margin-top: 0 !important;
  width: auto;
}

.account-mfa-modal .account-mfa-modal__close,
.account-mfa-modal .account-mfa-modal__close:hover,
.account-mfa-modal .account-mfa-modal__close:focus {
  text-decoration: none !important;
}

.account-mfa-modal .account-mfa-code-field .mfa-code-boxes {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
}

.account-mfa-modal .account-mfa-code-field .mfa-code-boxes input[type="text"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  padding: 0 !important;
  text-align: center !important;
}