.ui-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    stroke: currentColor;
}

.ui-icon--sm {
    width: 0.875rem;
    height: 0.875rem;
}

.ui-icon--lg {
    width: 1.375rem;
    height: 1.375rem;
}

.ui-page-header {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-10);
    margin: var(--space-1) 0 0;
    padding: 0 var(--space-2);
}

.ui-page-header__main {
    min-width: 0;
}

.ui-page-header__eyebrow {
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.ui-page-title {
    color: var(--color-text);
    font-size: clamp(2.25rem, 3.2vw, var(--font-size-display));
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-display);
    line-height: var(--line-height-display);
}

.ui-page-description {
    max-width: 46rem;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.ui-record-meta {
    display: grid;
    min-width: 39.9375rem;
    padding: 0 var(--space-2) var(--space-1) 0;
    align-items: end;
    grid-template-columns: 5.625rem 11.5625rem 5.625rem 11.875rem;
    gap: var(--space-7);
}

.ui-record-meta__item,
.ui-record-meta__owner-copy {
    min-width: 0;
}

.ui-record-meta__label {
    display: block;
    color: var(--color-text-faint);
    font-size: 0.625rem;
    line-height: 1.2;
}

.ui-record-meta__value {
    display: block;
    margin-top: var(--space-1);
    overflow: hidden;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-record-meta__owner {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.ui-breadcrumbs {
    margin-bottom: var(--space-3);
}

.ui-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    list-style: none;
}

.ui-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-breadcrumbs__item:not(:last-child)::after {
    color: var(--color-text-faint);
    content: "/";
}

.ui-breadcrumbs__link:hover {
    color: var(--color-primary);
}

.ui-section {
    min-width: 0;
    margin-top: var(--space-4);
    padding: 0 var(--space-2);
}

.ui-section:first-child {
    margin-top: 0;
}

.ui-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.ui-section__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.ui-section__description {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-grid {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

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

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

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

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

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

.ui-grid--sidebar {
    grid-template-columns: minmax(19rem, 27.5rem) minmax(0, 1fr);
}

.ui-grid--insights {
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.95fr);
    gap: var(--space-3);
}

.ui-card,
.ui-glass-card,
.ui-metric-card {
    min-width: 0;
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 8% -12%, var(--color-card-glass-highlight), transparent 44%),
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    background-clip: padding-box;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.ui-card--subtle {
    background: linear-gradient(145deg, var(--color-layer-strong), var(--color-layer-soft));
}

.ui-card--interactive {
    transition: transform var(--transition-base) var(--ease-standard), box-shadow var(--transition-base) var(--ease-standard);
}

.ui-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.ui-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) 0;
}

.ui-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.ui-card__title-meta {
    color: var(--color-text-faint);
    font-weight: var(--font-weight-regular);
}

.ui-card--title-sm .ui-card__title {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
}

.ui-card__subtitle {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-card__body {
    padding: var(--space-4) var(--space-5);
}

.ui-card__header + .ui-card__body {
    padding-top: var(--space-4);
}

.ui-card__footer {
    padding: 0 var(--space-5) var(--space-5);
}

.ui-card--compact .ui-card__header {
    padding: var(--space-3) var(--space-5) 0;
}

.ui-card--compact .ui-card__body {
    padding: var(--space-3) var(--space-5);
}

.ui-card--compact .ui-card__footer {
    padding: 0 var(--space-4) var(--space-4);
}

.ui-metric-card {
    display: flex;
    min-height: 6rem;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-4) var(--space-7);
}

.ui-metric-card__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.ui-metric-card__value {
    margin-top: var(--space-2);
    font-size: 1.9375rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.ui-metric-card__suffix {
    margin-left: var(--space-1);
    font-size: var(--font-size-lg);
}

.ui-metric-card__suffix.is-attached {
    margin-left: 0;
}

.ui-metric-card__suffix.is-inherit {
    font-size: inherit;
}

.ui-metric-card__trend {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.ui-metric-card__trend-value.is-success {
    color: var(--color-success);
}

.ui-metric-card__trend-value.is-warning {
    color: var(--color-warning);
}

.ui-metric-card__trend-value.is-danger {
    color: var(--color-danger);
}

.ui-badge,
.ui-status-badge {
    display: inline-flex;
    min-height: 1.625rem;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.ui-badge--neutral,
.ui-status-badge--neutral {
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
    color: var(--color-text-soft);
}

.ui-badge--primary,
.ui-status-badge--primary {
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.ui-badge--success,
.ui-status-badge--success {
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.ui-badge--warning,
.ui-status-badge--warning {
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.ui-badge--danger,
.ui-status-badge--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.ui-badge--info,
.ui-status-badge--info {
    background: var(--color-info-soft);
    color: var(--color-info-strong);
}

.ui-status-badge__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.ui-avatar {
    position: relative;
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    overflow: visible;
    border: 3px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-xs);
}

.ui-avatar--sm {
    width: 2rem;
    height: 2rem;
    font-size: var(--font-size-2xs);
}

.ui-avatar--lg {
    width: 3rem;
    height: 3rem;
    font-size: var(--font-size-sm);
}

.ui-avatar__image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.ui-avatar__status {
    position: absolute;
    right: -0.0625rem;
    bottom: -0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-success);
}

.ui-avatar__status.is-primary {
    background: var(--color-primary);
}

.ui-avatar__status.is-warning {
    background: var(--color-warning);
}

.ui-avatar__status.is-danger {
    background: var(--color-danger);
}

.ui-record-meta .ui-avatar {
    border-width: 2px;
}

.ui-avatar-group {
    display: flex;
    align-items: center;
}

.ui-avatar-group > * + * {
    margin-left: -0.625rem;
}

.ui-button,
.ui-icon-button {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    transition: background-color var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}

.ui-button {
    padding: 0 var(--space-5);
}

.ui-button:hover:not(:disabled),
.ui-icon-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.ui-button:focus-visible,
.ui-icon-button:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.ui-button:disabled,
.ui-icon-button:disabled,
.ui-button[aria-disabled="true"],
.ui-icon-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.ui-button--primary,
.ui-icon-button--primary {
    background: var(--color-action);
    color: var(--color-action-contrast);
}

.ui-button--primary:hover:not(:disabled),
.ui-icon-button--primary:hover:not(:disabled) {
    background: var(--color-action-hover);
}

.ui-button--primary:active:not(:disabled),
.ui-icon-button--primary:active:not(:disabled) {
    background: var(--color-action-active);
}

.ui-button--dark,
.ui-icon-button--dark {
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
}

.ui-button--secondary,
.ui-icon-button--secondary {
    border-color: var(--color-border);
    background: var(--color-glass-control);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

.ui-button--secondary:hover:not(:disabled),
.ui-icon-button--secondary:hover:not(:disabled) {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
}

.ui-button--ghost,
.ui-icon-button--ghost {
    background: transparent;
    color: var(--color-text-soft);
}

.ui-button--ghost:hover:not(:disabled),
.ui-icon-button--ghost:hover:not(:disabled) {
    background: var(--color-control-hover);
    color: var(--color-text);
}

.ui-button--danger,
.ui-icon-button--danger {
    background: var(--color-danger);
    color: var(--color-primary-contrast);
}

.ui-button--command,
.ui-icon-button--command {
    min-height: 2.625rem;
    border-color: var(--color-inverse-border);
    background: var(--color-inverse-control);
    color: var(--color-primary-contrast);
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-regular);
}

.ui-button--command:hover:not(:disabled),
.ui-icon-button--command:hover:not(:disabled) {
    background: var(--color-inverse-hover);
}

.ui-button--command-active {
    min-height: 2.75rem;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
}

.ui-button--sm,
.ui-icon-button--sm {
    min-height: var(--control-height-sm);
    font-size: var(--font-size-xs);
}

.ui-button--sm {
    padding: 0 var(--space-4);
}

/* Passwordless authentication */
.app-auth-card {
    overflow: hidden;
}

.app-auth-card__body {
    padding: var(--space-7);
}

.app-auth-card__header {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    text-align: center;
}

.app-auth-card__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-primary-active);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.app-auth-card__title {
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.app-auth-card__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-auth-card__description strong {
    color: var(--color-text-soft);
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}

.app-auth-form,
.app-auth-oauth {
    display: grid;
    gap: var(--space-3);
}

.app-auth-form .form-group + .form-group {
    margin-top: 0;
}

.app-auth-form .form-control {
    font-size: var(--font-size-base);
}

.app-auth-form__submit,
.app-auth-oauth__button {
    width: 100%;
}

.app-auth-oauth__button {
    position: relative;
}

.app-auth-oauth__button .ui-icon {
    position: absolute;
    left: var(--space-4);
}

.app-auth-divider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    color: var(--color-text-faint);
    font-size: var(--font-size-xs);
}

.app-auth-divider::before,
.app-auth-divider::after {
    height: 1px;
    background: var(--color-border);
    content: "";
}

.app-auth-card__footer {
    margin-top: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

.app-auth-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-primary-active);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition: color var(--transition-fast) var(--ease-standard), text-decoration-color var(--transition-fast) var(--ease-standard);
}

.app-auth-link:hover {
    color: var(--color-primary-hover);
    text-decoration-color: currentColor;
}

.app-auth-otp-input {
    font-family: var(--font-mono);
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.42em;
    text-align: center;
}

.app-auth-resend {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3);
}

.app-auth__inline-alert {
    margin-top: var(--space-4);
}

.ui-button.is-loading,
.ui-icon-button.is-loading {
    pointer-events: none;
}

.ui-button.is-loading::before,
.ui-icon-button.is-loading::before {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-pill);
    content: "";
    opacity: 0.72;
    animation: auth-button-spin 700ms linear infinite;
}

@keyframes auth-button-spin {
    to { transform: rotate(360deg); }
}

.ui-button--lg,
.ui-icon-button--lg {
    min-height: var(--control-height-lg);
}

.ui-icon-button {
    position: relative;
    width: var(--control-height);
    flex: 0 0 auto;
    padding: 0;
}

.ui-icon-button__indicator {
    position: absolute;
    top: 0.4375rem;
    right: 0.3125rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.ui-icon-button--sm {
    width: var(--control-height-sm);
}

.ui-icon-button--lg {
    width: var(--control-height-lg);
}

.ui-action-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.ui-action-toolbar__primary,
.ui-action-toolbar__secondary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-action-toolbar__overflow {
    display: none;
}

.ui-action-toolbar--command {
    height: 3.625rem;
    padding: var(--space-2);
    gap: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-command);
    box-shadow: var(--shadow-command);
    color: var(--color-primary-contrast);
    white-space: nowrap;
}

.ui-action-toolbar--command .ui-button--command {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
}

.ui-action-toolbar--command .ui-button--command-active {
    padding-right: var(--space-5);
    padding-left: var(--space-5);
}

.ui-action-toolbar--command .ui-icon-button--command {
    width: 2.625rem;
}

.ui-action-toolbar--command .ui-icon {
    width: 1rem;
    height: 1rem;
}

.ui-action-toolbar--command .ui-action-toolbar__primary,
.ui-action-toolbar--command .ui-action-toolbar__secondary {
    gap: 0.375rem;
}

.ui-action-toolbar--command .ui-action-toolbar__overflow {
    display: block;
}

.ui-divider {
    width: 100%;
    height: 1px;
    margin: var(--space-5) 0;
    border: 0;
    background: var(--color-border);
}

.ui-divider--vertical {
    width: 1px;
    height: 1.5rem;
    margin: 0 var(--space-2);
}

.ui-tooltip {
    position: relative;
    display: inline-flex;
}

.ui-tooltip::after {
    position: absolute;
    z-index: var(--z-tooltip);
    right: 50%;
    bottom: calc(100% + var(--space-2));
    width: max-content;
    max-width: 14rem;
    padding: var(--space-2) var(--space-3);
    transform: translate(50%, var(--space-1));
    border-radius: var(--radius-sm);
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
    content: attr(data-tooltip);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.ui-tooltip:hover::after,
.ui-tooltip:focus-within::after {
    transform: translate(50%, 0);
    opacity: 1;
}

.ui-progress {
    display: grid;
    gap: var(--space-2);
}

.ui-progress__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-progress__bar {
    width: 100%;
    height: 0.625rem;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    appearance: none;
}

.ui-progress__bar::-webkit-progress-bar {
    border-radius: inherit;
    background: var(--color-surface-muted);
}

.ui-progress__bar::-webkit-progress-value {
    border-radius: inherit;
    background: var(--progress-color, var(--color-primary));
}

.ui-progress__bar::-moz-progress-bar {
    border-radius: inherit;
    background: var(--progress-color, var(--color-primary));
}

.ui-progress--success {
    --progress-color: var(--color-success);
}

.ui-progress--warning {
    --progress-color: var(--color-warning);
}

.ui-progress--danger {
    --progress-color: var(--color-danger);
}

.ui-progress--info {
    --progress-color: var(--color-info);
}

.ui-progress--segmented {
    gap: var(--space-2);
}

.ui-progress--segmented .ui-progress__header {
    align-items: center;
}

.ui-progress__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    list-style: none;
}

.ui-progress__legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.ui-progress__legend-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.ui-progress__segments {
    display: block;
    width: 100%;
    height: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.ui-progress__segment.is-primary,
.ui-progress__legend-dot.is-primary {
    fill: var(--color-primary);
    background: var(--color-primary);
}

.ui-progress__segment.is-success,
.ui-progress__legend-dot.is-success {
    fill: var(--color-success);
    background: var(--color-success);
}

.ui-progress__segment.is-warning,
.ui-progress__legend-dot.is-warning {
    fill: var(--color-warning);
    background: var(--color-warning);
}

.ui-progress__segment.is-danger,
.ui-progress__legend-dot.is-danger {
    fill: var(--color-danger);
    background: var(--color-danger);
}

.ui-progress__segment.is-info,
.ui-progress__legend-dot.is-info {
    fill: var(--color-info);
    background: var(--color-info);
}

.ui-progress__segment.is-neutral,
.ui-progress__legend-dot.is-neutral {
    fill: var(--color-neutral);
    background: var(--color-neutral);
}

.ui-progress__scale {
    display: flex;
    justify-content: space-between;
    margin-top: calc(var(--space-1) * -1);
    color: var(--color-text-faint);
    font-size: 0.5625rem;
}

.ui-empty-state {
    display: grid;
    min-height: 15rem;
    place-items: center;
    padding: var(--space-8);
    text-align: center;
}

.ui-empty-state__icon {
    display: inline-grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-4);
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.ui-empty-state__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.ui-empty-state__description {
    max-width: 30rem;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-empty-state__action {
    margin-top: var(--space-5);
}

.ui-skeleton {
    display: grid;
    gap: var(--space-3);
}

.ui-skeleton__line {
    height: 0.75rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-surface) 50%, var(--color-surface-muted) 75%);
    background-size: 200% 100%;
    animation: ui-skeleton-loading 1.4s infinite;
}

.ui-skeleton__line:nth-child(2n) {
    width: 82%;
}

.ui-skeleton__line:nth-child(3n) {
    width: 62%;
}

@keyframes ui-skeleton-loading {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.ui-preview-stage {
    min-width: 0;
    overflow: hidden;
    height: 20.625rem;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.24), transparent 26%),
        linear-gradient(112deg, var(--color-preview-start) 0%, var(--color-preview-mid) 43%, var(--color-preview-end) 100%);
    box-shadow: var(--shadow-card);
    color: var(--color-primary-contrast);
}

.ui-preview-stage__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.ui-preview-stage__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.ui-preview-stage__description {
    margin-top: var(--space-1);
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--font-size-xs);
}

.ui-preview-stage__content {
    display: grid;
    min-width: 0;
    margin-top: var(--space-3);
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 11.875rem;
    gap: var(--space-8);
}

.ui-invitation {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-popover);
    box-shadow: 0 20px 55px rgba(19, 35, 40, 0.16);
    color: var(--color-text);
}

.ui-invitation--desktop {
    display: grid;
    height: 14.375rem;
    min-height: 14.375rem;
    grid-template-columns: minmax(10rem, 13.4375rem) minmax(0, 1fr);
}

.ui-invitation--mobile {
    width: 10.9375rem;
    min-height: 16.875rem;
    margin: 0 auto;
    padding: var(--space-4);
    border: 0.5rem solid var(--color-glass-border);
    border-radius: 1.75rem;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.ui-invitation__media {
    display: grid;
    min-height: 8rem;
    place-items: center;
    padding: var(--space-4);
    background: var(--color-preview-surface);
}

.ui-invitation__media img {
    width: min(100%, 14rem);
    max-height: 12rem;
}

.ui-invitation__body {
    padding: var(--space-3) var(--space-5);
}

.ui-invitation__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.ui-invitation__brand-mark {
    position: relative;
    display: inline-grid;
    width: 1.125rem;
    height: 1.125rem;
    place-items: center;
    overflow: hidden;
    background: transparent;
}

.ui-invitation__brand-mark img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.ui-invitation__title {
    margin-top: var(--space-2);
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.ui-invitation__subtitle,
.ui-invitation__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-invitation__subtitle {
    margin-top: var(--space-1);
}

.ui-invitation__meta {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.ui-invitation__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-invitation__description {
    max-width: 38rem;
    margin-top: var(--space-2);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
}

.ui-invitation__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.ui-invitation--mobile .ui-invitation__media {
    min-height: 6rem;
    margin-top: var(--space-4);
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

.ui-invitation--mobile .ui-invitation__body {
    padding: 0;
}

.ui-invitation--mobile .ui-invitation__title {
    margin-top: var(--space-4);
    font-size: var(--font-size-base);
}

.ui-invitation--mobile .ui-invitation__subtitle,
.ui-invitation--mobile .ui-invitation__meta {
    font-size: 0.5625rem;
}

.ui-invitation--mobile .ui-invitation__description,
.ui-invitation--mobile .ui-invitation__actions .ui-button:not(:first-child) {
    display: none;
}

.ui-invitation--mobile .ui-invitation__actions .ui-button {
    width: 100%;
    min-height: 1.75rem;
    padding: 0 var(--space-3);
    font-size: 0.5625rem;
}

.ui-statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}

.ui-statistic {
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer);
    text-align: center;
}

.ui-statistic__label {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-statistic__value {
    margin-top: var(--space-1);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
}

.ui-statistic__meta {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.ui-definition-list {
    display: grid;
}

.ui-definition-list__row {
    display: grid;
    min-width: 0;
    padding: var(--space-2) 0;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
    gap: var(--space-4);
}

.ui-definition-list__row:last-child {
    border-bottom: 0;
}

.ui-card--compact .ui-definition-list:not(.ui-definition-list--inline) .ui-definition-list__row {
    padding: 0.375rem 0;
}

.ui-definition-list__term {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-definition-list__description {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

.ui-definition-strip {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: 2.625rem minmax(0, 1fr);
    gap: var(--space-3);
}

.ui-definition-strip__icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.ui-definition-list--inline {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.ui-definition-list--inline .ui-definition-list__row {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
}

.ui-definition-list--inline .ui-definition-list__term,
.ui-definition-list--inline .ui-definition-list__description {
    display: block;
    overflow: hidden;
    font-size: 0.625rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-definition-list--inline .ui-definition-list__description {
    margin-top: var(--space-1);
}

.ui-activity-list {
    display: grid;
    list-style: none;
}

.ui-activity-list__item {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 0 0 var(--space-5) var(--space-8);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
}

.ui-activity-list__item::before {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-soft);
    content: "";
}

.ui-activity-list__item:not(:last-child)::after {
    position: absolute;
    top: 1.15rem;
    bottom: 0.15rem;
    left: 0.625rem;
    width: 1px;
    background: var(--color-border);
    content: "";
}

.ui-activity-list__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.ui-activity-list__description,
.ui-activity-list__time {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-activity-list__description {
    margin-top: var(--space-1);
}

.ui-sparkline {
    width: 100%;
    min-height: 7rem;
    color: var(--color-success);
}

.ui-sparkline__grid {
    stroke: var(--color-border);
    stroke-width: 1;
}

.ui-sparkline__line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.ui-sparkline__fill {
    fill: currentColor;
    opacity: 0.12;
}

.ui-sparkline__label {
    fill: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 10px;
}

.ui-performance-overview {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
}

.ui-performance-overview__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.ui-performance-overview__value-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-1);
}

.ui-performance-overview__value {
    font-size: 2rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.ui-performance-overview__trend {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid rgba(31, 172, 121, 0.14);
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
    color: var(--color-success-strong);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.ui-performance-overview__trend span {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
}

.ui-performance-overview__period {
    display: inline-flex;
    min-width: 9.75rem;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer-strong);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
}

.ui-performance-overview__period .ui-icon {
    color: var(--color-primary);
}

.ui-performance-overview__period small {
    display: block;
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-regular);
}

.ui-performance-chart {
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer);
    box-shadow: inset 0 1px 0 var(--color-glass-border);
}

.ui-performance-chart__header {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.ui-performance-chart__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.ui-performance-chart__subtitle {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.ui-performance-chart__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    list-style: none;
}

.ui-performance-chart__legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.ui-performance-chart__legend-line {
    width: 1.25rem;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.ui-performance-chart__legend-line.is-previous {
    height: 0;
    border-top: 2px dashed var(--color-text-faint);
    background: transparent;
}

.ui-performance-chart__canvas {
    display: grid;
    min-width: 0;
    margin-top: var(--space-5);
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-3);
}

.ui-performance-chart__y-axis {
    display: flex;
    height: 12.5rem;
    flex-direction: column;
    justify-content: space-between;
    color: var(--color-text-faint);
    font-size: 0.625rem;
    line-height: 1;
    text-align: right;
}

.ui-performance-chart__plot-wrap {
    min-width: 0;
}

.ui-performance-chart__plot {
    position: relative;
    height: 12.5rem;
}

.ui-performance-chart__plot svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ui-performance-chart__grid line {
    stroke: var(--color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ui-performance-chart__gradient-start {
    stop-color: var(--color-primary);
    stop-opacity: 0.22;
}

.ui-performance-chart__gradient-end {
    stop-color: var(--color-primary);
    stop-opacity: 0.015;
}

.ui-performance-chart__area {
    fill: url("#event-performance-area");
}

.ui-performance-chart__current-line,
.ui-performance-chart__previous-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ui-performance-chart__current-line {
    stroke: var(--color-primary);
    stroke-width: 3;
}

.ui-performance-chart__previous-line {
    stroke: var(--color-text-faint);
    stroke-dasharray: 5 6;
    stroke-width: 1.5;
}

.ui-performance-chart__point {
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    transform: translate(-50%, -50%);
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary-border);
}

.ui-performance-chart__point.is-first { top: 45%; left: 2%; }
.ui-performance-chart__point.is-second { top: 35%; left: 26%; }
.ui-performance-chart__point.is-third { top: 38.75%; left: 50%; }
.ui-performance-chart__point.is-fourth { top: 23.75%; left: 74%; }
.ui-performance-chart__point.is-latest { top: 15%; left: 98%; }

.ui-performance-chart__point.is-latest {
    width: 0.75rem;
    height: 0.75rem;
    box-shadow: 0 0 0 0.3125rem var(--color-primary-soft);
}

.ui-performance-chart__latest-value {
    position: absolute;
    top: calc(15% - 2.5rem);
    right: 0;
    min-width: 2.875rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inverse);
    box-shadow: var(--shadow-sm);
    color: var(--color-primary-contrast);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.ui-performance-chart__latest-value::after {
    position: absolute;
    top: 100%;
    right: 0.625rem;
    width: 0;
    height: 0;
    border-top: 0.3125rem solid var(--color-surface-inverse);
    border-right: 0.25rem solid transparent;
    border-left: 0.25rem solid transparent;
    content: "";
}

.ui-performance-chart__x-axis {
    display: grid;
    margin-top: var(--space-3);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    color: var(--color-text-faint);
    font-size: 0.625rem;
}

.ui-performance-chart__x-axis span {
    text-align: center;
}

.ui-performance-chart__x-axis span:first-child { text-align: left; }
.ui-performance-chart__x-axis span:last-child { text-align: right; }

.ui-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ui-chip-group {
    min-width: 0;
}

.ui-chip-group__header {
    display: flex;
    min-height: var(--control-height-sm);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.ui-chip-group__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

.ui-chip-group__title span {
    color: var(--color-text-faint);
}

.ui-chip-group__header + .ui-chip-list {
    margin-top: var(--space-2);
}

.ui-chip {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer);
    font-size: var(--font-size-xs);
}

.ui-chip__meta {
    color: var(--color-text-muted);
}

.ui-info-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.ui-info-row__icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.ui-info-row__content {
    min-width: 0;
}

.ui-info-row__label,
.ui-info-row__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.ui-info-row__value {
    overflow: hidden;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-task-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
}

.ui-task-list__item {
    display: flex;
    min-height: var(--control-height);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
    font-size: var(--font-size-xs);
}

.ui-task-list__marker {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
}

.nav-sidebar-group {
    min-width: 0;
}

.nav-sidebar-group__toggle {
    display: none;
    width: 100%;
    min-height: 1.75rem;
    padding: 0 var(--space-3);
    align-items: center;
    justify-content: space-between;
    background: transparent;
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.nav-sidebar-group__toggle .ui-icon {
    transition: transform var(--transition-base) var(--ease-standard);
}

.nav-sidebar-group.is-collapsed .nav-sidebar-group__toggle .ui-icon {
    transform: rotate(-90deg);
}

.nav-sidebar-group__content {
    display: grid;
    gap: 0.625rem;
    margin-top: 0;
}

.has-js .nav-sidebar-group.is-collapsed .nav-sidebar-group__content {
    display: none;
}

.nav-sidebar-item {
    position: relative;
    display: flex;
    min-width: 0;
    width: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-pill);
    background: var(--color-glass);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.nav-sidebar-item:hover {
    transform: translateY(-1px);
    background: var(--color-surface);
    color: var(--color-text);
}

.nav-sidebar-item.is-active {
    border-color: var(--color-surface-inverse);
    background: var(--color-surface-inverse);
    box-shadow: var(--shadow-sm);
    color: var(--color-primary-contrast);
}

.nav-sidebar-item__label {
    display: none;
}

.nav-sidebar-item__badge {
    display: none;
}

.nav-sidebar-item::after {
    position: absolute;
    z-index: var(--z-tooltip);
    top: 50%;
    left: calc(100% + var(--space-2));
    width: max-content;
    padding: var(--space-2) var(--space-3);
    transform: translate(-0.25rem, -50%);
    border-radius: var(--radius-sm);
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
    content: attr(data-nav-tooltip);
    font-size: var(--font-size-2xs);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.nav-sidebar-item:hover::after,
.nav-sidebar-item:focus-visible::after {
    transform: translate(0, -50%);
    opacity: 1;
}

.nav-top {
    display: flex;
    min-width: 0;
    height: var(--header-height);
    padding: var(--space-2);
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-command);
    box-shadow: var(--shadow-command);
    color: var(--color-primary-contrast);
    white-space: nowrap;
}

.nav-top__links {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.375rem;
}

.nav-top__item {
    display: inline-flex;
    min-height: 2.625rem;
    padding: 0 var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-inverse-border);
    border-radius: var(--radius-pill);
    background: var(--color-inverse-control);
    color: var(--color-inverse-text);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-regular);
    transition: background-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.nav-top__item:hover {
    transform: translateY(-1px);
    background: var(--color-inverse-hover);
    color: var(--color-primary-contrast);
}

.nav-top__item.is-active {
    border-color: var(--color-surface);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.nav-top__item .ui-icon {
    width: 1rem;
    height: 1rem;
}

.nav-top__more {
    flex: 0 0 auto;
}

.nav-top__more .ui-icon-button--command {
    width: 2.625rem;
}

.nav-tabs-wrap {
    min-width: 0;
    margin-top: var(--space-5);
    padding: 0 var(--space-2);
}

.nav-tabs {
    display: flex;
    min-width: 0;
    gap: var(--space-20);
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: thin;
}

.nav-tabs__item {
    position: relative;
    display: inline-flex;
    min-height: 3rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
}

.nav-tabs__item:hover,
.nav-tabs__item.is-active,
.nav-tabs__item[aria-selected="true"] {
    color: var(--color-text);
}

.nav-tabs__item.is-active,
.nav-tabs__item[aria-selected="true"] {
    font-weight: var(--font-weight-medium);
}

.nav-tabs__item.is-active::after,
.nav-tabs__item[aria-selected="true"]::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    content: "";
}

.nav-tabs__item.is-active::before,
.nav-tabs__item[aria-selected="true"]::before {
    position: absolute;
    bottom: -0.3125rem;
    left: 50%;
    width: 0.5625rem;
    height: 0.5625rem;
    transform: translateX(-50%) rotate(-45deg);
    border-bottom: 2px solid var(--color-primary);
    border-left: 2px solid var(--color-primary);
    background: var(--color-page);
    content: "";
}

.nav-tabs-wrap--notch {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.nav-tabs--notch {
    height: var(--header-height);
    padding: var(--space-2);
    align-items: center;
    gap: 0.375rem;
    overflow-x: auto;
    border: 1px solid var(--color-inverse-border);
    border-radius: var(--radius-pill);
    background: var(--color-command);
    box-shadow: var(--shadow-command);
    color: var(--color-primary-contrast);
    scrollbar-width: none;
}

.nav-tabs--notch::-webkit-scrollbar {
    display: none;
}

.nav-tabs--notch .nav-tabs__item {
    min-height: 2.625rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-inverse-border);
    border-radius: var(--radius-pill);
    background: var(--color-inverse-control);
    color: var(--color-inverse-text);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-regular);
    transition: background-color var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.nav-tabs--notch .nav-tabs__item:hover {
    transform: translateY(-1px);
    background: var(--color-inverse-hover);
    color: var(--color-primary-contrast);
}

.nav-tabs--notch .nav-tabs__item.is-active,
.nav-tabs--notch .nav-tabs__item[aria-selected="true"] {
    border-color: var(--color-surface);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.nav-tabs--notch .nav-tabs__item::before,
.nav-tabs--notch .nav-tabs__item::after {
    display: none;
}

.nav-tabs--notch .nav-tabs__item:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-inverse-focus);
}

.dashboard-workspace {
    display: grid;
    height: 100%;
    min-height: 0;
    padding: 0 var(--space-2);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-3);
}

.dashboard-workspace__context {
    display: flex;
    min-width: 0;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.dashboard-workspace__context-copy {
    min-width: 0;
}

.dashboard-workspace__eyebrow {
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.2;
    text-transform: uppercase;
}

.dashboard-workspace__context .ui-page-title {
    margin-top: var(--space-1);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.dashboard-workspace__quick-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.dashboard-workspace__quick-actions .ui-icon-button {
    box-shadow: var(--shadow-xs);
}

.dashboard-workspace__quick-actions .ui-tooltip::after {
    top: calc(100% + var(--space-2));
    bottom: auto;
    transform: translate(50%, calc(0px - var(--space-1)));
}

.dashboard-workspace__quick-actions .ui-tooltip:hover::after,
.dashboard-workspace__quick-actions .ui-tooltip:focus-within::after {
    transform: translate(50%, 0);
}

.dashboard-workspace__panels,
.dashboard-workspace__panel {
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-workspace__panel {
    height: 100%;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.dashboard-workspace__panel + .dashboard-workspace__panel {
    margin-top: var(--space-5);
}

.has-js .dashboard-workspace__panel + .dashboard-workspace__panel {
    margin-top: 0;
}

.dashboard-workspace__panel--overview {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-4);
}

.dashboard-workspace__metrics {
    gap: var(--space-3);
}

.dashboard-workspace__metrics .ui-metric-card {
    min-height: 5.5rem;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-xl);
}

.dashboard-workspace__metrics .ui-metric-card__value {
    margin-top: var(--space-1);
    font-size: 1.6875rem;
}

.dashboard-workspace__metrics .ui-metric-card__trend {
    margin-top: var(--space-1);
}

.dashboard-workspace__overview-grid,
.dashboard-workspace__performance-grid,
.dashboard-workspace__activity-grid {
    display: grid;
    min-width: 0;
    min-height: 0;
    gap: var(--space-4);
}

.dashboard-workspace__overview-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: var(--space-3);
}

.dashboard-workspace__overview-card--performance {
    grid-column: 1 / span 7;
    grid-row: 1;
}

.dashboard-workspace__overview-card--activity {
    grid-column: 8 / -1;
    grid-row: 1;
}

.dashboard-workspace__overview-card--running {
    grid-column: 1 / span 4;
    grid-row: 2;
}

.dashboard-workspace__overview-card--scheduled {
    grid-column: 5 / span 4;
    grid-row: 2;
}

.dashboard-workspace__overview-card--team {
    grid-column: 9 / -1;
    grid-row: 2;
}

.dashboard-workspace__overview-card--performance .ui-card__body,
.dashboard-workspace__overview-card--activity .ui-card__body {
    display: grid;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-2);
    overflow: hidden;
}

.dashboard-overview__chart-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.dashboard-overview__chart-value-group {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: var(--space-2);
}

.dashboard-overview__chart-value {
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.dashboard-overview__chart-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.dashboard-overview__chart-trend {
    padding: 0.3rem var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.dashboard-overview__line-chart {
    display: grid;
    height: 100%;
    min-height: 8.5rem;
    margin: 0 calc(0px - var(--space-5)) calc(0px - var(--space-3));
    overflow: hidden;
    border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
    background: transparent;
    color: var(--color-primary);
    grid-template-rows: minmax(0, 1fr) auto;
}

.dashboard-overview__performance-plot {
    position: relative;
    min-height: 6.75rem;
}

.dashboard-overview__performance-plot svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.dashboard-overview__performance-grid line {
    stroke: var(--color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.dashboard-overview__performance-gradient-start {
    stop-color: var(--color-primary);
    stop-opacity: 0.2;
}

.dashboard-overview__performance-gradient-end {
    stop-color: var(--color-primary);
    stop-opacity: 0;
}

.dashboard-overview__performance-area {
    fill: url("#dashboard-performance-gradient");
}

.dashboard-overview__performance-line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.dashboard-overview__performance-current {
    position: absolute;
    z-index: 1;
    top: calc(17.5% - 0.3125rem);
    right: calc(3.33% - 0.3125rem);
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    box-shadow: 0 0 0 0.3125rem var(--color-primary-soft);
}

.dashboard-overview__performance-current::before {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: -0.4375rem;
    min-width: 2.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-inverse);
    box-shadow: var(--shadow-sm);
    color: var(--color-primary-contrast);
    content: attr(data-value);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-align: center;
}

.dashboard-overview__performance-axis {
    display: grid;
    min-height: 1.75rem;
    padding: 0 var(--space-5) 0.375rem;
    align-items: center;
    color: var(--color-text-muted);
    grid-template-columns: repeat(7, minmax(0, 1fr));
    font-size: var(--font-size-2xs);
    line-height: 1;
    text-align: center;
}

.dashboard-overview__performance-axis span:first-child {
    text-align: left;
}

.dashboard-overview__performance-axis span:last-child {
    text-align: right;
}

.dashboard-overview__activity-chart {
    min-width: 0;
    min-height: 0;
}

.dashboard-overview__activity-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 5.75rem;
}

.dashboard-overview__activity-grid line {
    stroke: var(--color-border);
    stroke-width: 1;
}

.dashboard-overview__activity-bars rect {
    fill: var(--color-primary-soft);
}

.dashboard-overview__activity-bars .is-current {
    fill: var(--color-primary);
}

.dashboard-overview__activity-labels {
    fill: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 9px;
    text-anchor: middle;
}

.dashboard-overview__event-list {
    display: grid;
    align-content: start;
}

.dashboard-overview__event-list .ui-info-row {
    padding: var(--space-2) 0;
    gap: var(--space-2);
}

.dashboard-overview__event-list .ui-info-row + .ui-info-row {
    border-top: 1px solid var(--color-border);
}

.dashboard-overview__event-list .ui-info-row__icon {
    width: 2.25rem;
    height: 2.25rem;
}

.dashboard-overview__event-list .ui-info-row__icon .ui-icon {
    width: 1rem;
    height: 1rem;
}

.dashboard-overview__event-list .ui-info-row__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-workspace__overview-card--team .ui-card__body {
    padding-top: var(--space-2);
    overflow: hidden;
}

.dashboard-overview__team-table-wrap {
    min-width: 0;
    height: 100%;
    overflow: auto;
    scrollbar-width: thin;
}

.dashboard-overview__team-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.dashboard-overview__team-table th,
.dashboard-overview__team-table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    vertical-align: middle;
}

.dashboard-overview__team-table th {
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-overview__team-table tbody tr:last-child td {
    border-bottom: 0;
}

.dashboard-overview__team-table td:last-child,
.dashboard-overview__team-table th:last-child {
    text-align: right;
}

.dashboard-overview__team-member {
    display: flex;
    min-width: 8rem;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.dashboard-overview__assignment-count {
    display: inline-grid;
    min-width: 1.75rem;
    min-height: 1.75rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text-soft);
    font-weight: var(--font-weight-semibold);
}

.dashboard-workspace__performance-grid {
    height: 100%;
    grid-template-columns: minmax(0, 2.15fr) minmax(17rem, 0.85fr);
}

.dashboard-workspace__activity-grid {
    height: 100%;
    grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 1.42fr);
}

.dashboard-workspace__card {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-workspace__card .ui-card__header,
.dashboard-workspace__card .ui-card__footer {
    flex: 0 0 auto;
}

.dashboard-workspace__card .ui-card__body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.dashboard-workspace__event-list {
    display: grid;
    align-content: start;
}

.dashboard-workspace__health-list,
.dashboard-workspace__chart-content {
    display: grid;
    min-height: 0;
    gap: var(--space-5);
}

.dashboard-workspace__health-list {
    height: 100%;
    align-content: center;
}

.dashboard-workspace__chart-content {
    gap: var(--space-4);
}

.dashboard-workspace__chart-card .ui-card__body {
    display: grid;
}

.dashboard-workspace__performance-side {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--space-4);
}

.dashboard-workspace__performance-side .ui-statistics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-overview__performance-point,
.dashboard-performance__point {
    fill: var(--color-surface);
    stroke: var(--color-primary);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.dashboard-workspace__card .ui-empty-state {
    min-height: 100%;
    padding: var(--space-4);
}

.dashboard-workspace__card .ui-empty-state__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-2);
}

.dashboard-workspace__card .ui-empty-state__title {
    font-size: var(--font-size-sm);
}

.dashboard-workspace__card .ui-empty-state__description {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
}

.dashboard-performance {
    display: grid;
    height: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-4);
}

.dashboard-performance__metrics {
    gap: var(--space-3);
}

.dashboard-performance__metrics .ui-metric-card {
    min-height: 5.5rem;
    padding: var(--space-3) var(--space-5);
}

.dashboard-performance__metrics .ui-metric-card__value {
    margin-top: var(--space-1);
    font-size: 1.6875rem;
}

.dashboard-workspace__performance-side {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.dashboard-performance__readiness {
    display: grid;
    height: 100%;
    align-content: center;
    gap: var(--space-3);
}

.dashboard-performance__readiness-meta {
    display: grid;
    color: var(--color-text-muted);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    font-size: var(--font-size-xs);
}

.dashboard-performance__readiness-meta span {
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer);
    text-align: center;
}

.dashboard-performance__readiness-meta strong {
    display: block;
    color: var(--color-text);
    font-size: var(--font-size-base);
}

.dashboard-performance__latest-value {
    fill: var(--color-text);
    font-family: var(--font-sans);
    font-size: 7px;
    font-weight: var(--font-weight-semibold);
}

.dashboard-workspace__activity-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(15rem, 1fr) minmax(11rem, 0.72fr);
    gap: var(--space-3);
}

.dashboard-activity__feed {
    grid-column: 1 / span 6;
    grid-row: 1;
}

.dashboard-activity__credits {
    grid-column: 7 / -1;
    grid-row: 1;
}

.dashboard-activity__events {
    grid-column: 1 / -1;
    grid-row: 2;
}

.dashboard-credit-usage {
    display: grid;
    min-height: 0;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-3);
}

.dashboard-credit-usage .ui-statistics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-credit-usage__recent {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
}

.dashboard-credit-usage__recent > p {
    margin-bottom: var(--space-1);
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.dashboard-credit-usage .ui-activity-list__item {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.dashboard-workspace__event-table .table-responsive {
    max-height: 100%;
}

.nav-tabs-wrap > [data-tab-panel] {
    padding-top: var(--space-4);
}

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown > summary {
    list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown[open] > summary {
    box-shadow: var(--focus-ring);
}

.nav-dropdown__menu {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + var(--space-2));
    right: 0;
    display: grid;
    width: max-content;
    min-width: 13rem;
    max-width: min(19rem, calc(100vw - 2rem));
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-popover);
    box-shadow: var(--shadow-overlay);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nav-dropdown--start .nav-dropdown__menu {
    right: auto;
    left: 0;
}

.nav-dropdown--command .nav-dropdown__menu {
    color: var(--color-text);
}

.nav-dropdown__item {
    display: flex;
    width: 100%;
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    text-align: left;
}

.nav-dropdown__item:hover:not(:disabled) {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.nav-dropdown__item.is-active {
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
}

.nav-dropdown__item.is-danger {
    color: var(--color-danger);
}

.app-user-menu__trigger {
    display: block;
    border-radius: var(--radius-pill);
}

.app-user-menu__trigger:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.app-user-menu__menu {
    gap: var(--space-1);
}

.app-user-menu__identity {
    display: grid;
    min-width: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.app-user-menu__identity strong,
.app-user-menu__identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user-menu__identity strong {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.app-user-menu__identity span {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.app-user-menu__links {
    display: grid;
    gap: var(--space-1);
}

.app-user-menu__item-chevron {
    margin-left: auto;
    color: var(--color-text-faint);
}

.app-user-menu__signout {
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

/* Profile workspace */
.profile-page {
    display: grid;
    height: 100%;
    min-height: 0;
    padding: var(--space-1) 0 var(--space-3);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-3);
    overflow: hidden;
}

.profile-page__header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.profile-page__eyebrow {
    color: var(--color-primary-active);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.profile-page__title {
    margin-top: var(--space-1);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.profile-page__description {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.profile-page__header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
}

.profile-page__layout {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(16.75rem, 0.64fr) minmax(0, 2.36fr);
    gap: var(--space-3);
}

.profile-identity-card,
.profile-details-card,
.profile-purchase-card,
.profile-social-card {
    min-height: 0;
    overflow: hidden;
}

.profile-page__sidebar,
.profile-page__main,
.profile-page__forms,
.profile-page__details-stack,
.profile-identity-card,
.profile-details-card,
.profile-purchase-card {
    height: 100%;
}

.profile-page__sidebar {
    min-width: 0;
    min-height: 0;
}

.profile-identity-card .ui-card__body {
    height: 100%;
    padding: var(--space-5);
}

.profile-identity-card__content {
    display: flex;
    height: 100%;
    min-height: 0;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.profile-identity-card__avatar.ui-avatar {
    width: 5.25rem;
    height: 5.25rem;
    border-width: 0.3125rem;
    font-size: var(--font-size-xl);
    box-shadow: 0 0 0 4px var(--color-primary-border), var(--shadow-sm);
}

.profile-identity-card__avatar .ui-avatar__status {
    right: 0.125rem;
    bottom: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
}

.profile-identity-card__copy {
    width: 100%;
    min-width: 0;
    margin-top: var(--space-4);
}

.profile-identity-card__copy h2,
.profile-identity-card__copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-identity-card__copy h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.profile-identity-card__copy p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.profile-identity-card__copy + .ui-status-badge {
    margin-top: var(--space-3);
}

.profile-photo-control {
    display: grid;
    width: 100%;
    margin-top: var(--space-5);
    justify-items: center;
    gap: var(--space-2);
}

.profile-photo-control .ui-button {
    cursor: pointer;
}

.profile-photo-control p {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.profile-identity-card__meta {
    display: grid;
    width: 100%;
    margin-top: auto;
    padding-top: var(--space-5);
    gap: var(--space-2);
}

.profile-address-card .ui-card__body {
    overflow-y: auto;
}

.profile-address-grid {
    gap: var(--space-2) var(--space-3);
}

.profile-identity-card__meta div {
    display: flex;
    min-width: 0;
    padding-top: var(--space-2);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
}

.profile-identity-card__meta span {
    color: var(--color-text-muted);
}

.profile-identity-card__meta strong {
    overflow: hidden;
    color: var(--color-text-soft);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-page__main {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-3);
}

.profile-page__forms {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(19rem, 0.92fr) minmax(25rem, 1.08fr);
    gap: var(--space-3);
}

.profile-page__details-stack {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    gap: var(--space-3);
}

.profile-details-card {
    display: flex;
    flex-direction: column;
}

.profile-details-card .ui-card__header {
    flex: 0 0 auto;
}

.profile-details-card .ui-card__body {
    min-height: 0;
    flex: 1 1 auto;
}

.profile-purchase-card {
    display: flex;
    flex-direction: column;
}

.profile-purchase-card .ui-card__body {
    display: grid;
    min-height: 0;
    padding-right: var(--space-4);
    padding-left: var(--space-4);
    align-content: space-between;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-2);
}

.profile-purchase-table-wrap {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-purchase-table {
    width: 100%;
    min-width: 29rem;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
}

.profile-purchase-table th,
.profile-purchase-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.profile-purchase-table th:first-child,
.profile-purchase-table td:first-child {
    padding-left: 0;
}

.profile-purchase-table th:last-child,
.profile-purchase-table td:last-child {
    padding-right: 0;
}

.profile-purchase-table th {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-purchase-table td {
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.profile-purchase-table tbody tr:last-child td {
    border-bottom: 0;
}

.profile-purchase-table__item {
    display: grid;
    gap: var(--space-1);
}

.profile-purchase-table td strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.profile-purchase-table td span {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.profile-purchase-table__amount {
    color: var(--color-text) !important;
    font-weight: var(--font-weight-semibold);
    text-align: right;
}

.profile-purchase-pagination {
    display: flex;
    min-width: 0;
    padding-top: var(--space-2);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.profile-purchase-pagination p {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.profile-purchase-pagination .nav-pagination {
    flex-wrap: nowrap;
}

.profile-purchase-pagination .nav-pagination__item {
    padding: 0;
    background: transparent;
}

.profile-form-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.profile-form-grid .form-group {
    min-width: 0;
    align-content: start;
    gap: var(--space-1);
}

.profile-form-grid .form-group + .form-group {
    margin-top: 0;
}

.profile-form-grid__wide {
    grid-column: 1 / -1;
}

.profile-page .form-control,
.profile-page .form-select {
    min-height: 2.5rem;
}

.profile-social-card .ui-card__body {
    padding-top: var(--space-3);
}

.profile-social-card__privacy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.profile-social-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.profile-social-item {
    display: flex;
    min-width: 0;
    min-height: 4.25rem;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-layer), var(--color-layer-faint));
}

.profile-social-item__identity,
.profile-social-item__actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.profile-social-item__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.profile-social-item__copy {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.profile-social-item__copy strong,
.profile-social-item__copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-social-item__copy strong {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.profile-social-item__copy span {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.profile-social-item__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.profile-social-item__status i {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-text-faint);
    opacity: 0.7;
}

.profile-social-item .ui-button {
    flex: 0 0 auto;
    padding-right: var(--space-2);
    padding-left: var(--space-2);
}

.nav-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.nav-pagination__item {
    display: inline-grid;
    min-width: var(--control-height-sm);
    height: var(--control-height-sm);
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.nav-pagination__item:hover:not(.is-disabled) {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.nav-pagination__item.is-active {
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
}

.nav-pagination__item.is-disabled {
    opacity: 0.42;
}

.nav-pagination__ellipsis {
    padding: 0 var(--space-1);
    color: var(--color-text-faint);
}

.ui-alert {
    display: grid;
    min-width: 0;
    padding: var(--space-4);
    align-items: flex-start;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
}

.ui-alert--info {
    border-color: rgba(53, 120, 212, 0.18);
    background: var(--color-info-soft);
    color: var(--color-info-strong);
}

.ui-alert--success {
    border-color: rgba(31, 172, 121, 0.18);
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.ui-alert--warning {
    border-color: rgba(215, 138, 19, 0.2);
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.ui-alert--danger {
    border-color: rgba(216, 79, 99, 0.2);
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.ui-alert__icon {
    display: inline-flex;
    margin-top: 0.1rem;
}

.ui-alert__content {
    min-width: 0;
}

.ui-alert__title {
    font-weight: var(--font-weight-semibold);
}

.ui-alert__message {
    color: currentColor;
}

.ui-alert__title + .ui-alert__message {
    margin-top: var(--space-1);
    opacity: 0.9;
}

.ui-alert__dismiss {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    margin: -0.35rem -0.35rem 0 0;
    place-items: center;
    border-radius: var(--radius-pill);
    background: transparent;
    color: currentColor;
}

.ui-alert__dismiss:hover {
    background: var(--color-layer);
}

.ui-success-card {
    position: fixed;
    z-index: var(--z-toast);
    top: var(--space-5);
    right: var(--space-5);
    width: min(28rem, calc(100vw - (var(--space-5) * 2)));
    overflow: hidden;
    border-color: var(--color-card-glass-border);
    background:
        radial-gradient(circle at 8% -12%, var(--color-card-glass-highlight), transparent 44%),
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    animation: ui-success-card-in var(--transition-slow) var(--ease-standard) both;
    transition: opacity var(--transition-base) var(--ease-standard), transform var(--transition-base) var(--ease-standard);
}

.ui-success-card__body {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
}

.ui-success-card__icon {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-glass-strong), var(--color-layer-soft));
    box-shadow: inset 0 1px 0 var(--color-card-glass-highlight);
    color: var(--color-success-strong);
}

.ui-success-card__content {
    min-width: 0;
}

.ui-success-card__title {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-success-card__message {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-success-card__dismiss {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    align-self: start;
    place-items: center;
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
    color: var(--color-text-muted);
    transition: background var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.ui-success-card__dismiss:hover {
    background: var(--color-layer-strong);
    color: var(--color-text);
}

.ui-success-card.is-dismissing {
    opacity: 0;
    transform: translateX(calc(100% + var(--space-5)));
    animation: none;
    pointer-events: none;
}

@keyframes ui-success-card-in {
    from {
        opacity: 0;
        transform: translateX(calc(100% + var(--space-5)));
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.is-modal-open {
    overflow: hidden;
}

.ui-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    padding: var(--space-4);
    place-items: center;
}

.ui-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: var(--color-backdrop);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.ui-modal__dialog {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    width: min(100%, 34rem);
    max-height: min(48rem, calc(100vh - 2rem));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-overlay);
}

.ui-modal--sm .ui-modal__dialog { width: min(100%, 27rem); }
.ui-modal--lg .ui-modal__dialog { width: min(100%, 48rem); }

.ui-modal__header {
    display: flex;
    padding: var(--space-5);
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.ui-modal__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.ui-modal__description {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.ui-modal__body {
    padding: var(--space-5);
    overflow-y: auto;
}

.ui-modal__footer {
    display: flex;
    padding: var(--space-4) var(--space-5);
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.calendar-onboarding-modal .ui-modal__dialog {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.calendar-onboarding-modal .ui-modal__header {
    position: relative;
    padding-bottom: var(--space-3);
    justify-content: center;
    border: 0;
}

.calendar-onboarding-modal .ui-modal__header > div {
    width: 100%;
    padding: 0 var(--space-10);
    text-align: center;
}

.calendar-onboarding-modal .ui-modal__title {
    color: var(--color-primary-contrast);
}

.calendar-onboarding-modal .ui-modal__description {
    max-width: 38rem;
    margin-right: auto;
    margin-left: auto;
    color: var(--color-inverse-text);
}

.calendar-onboarding-modal .ui-modal__header > .ui-icon-button {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    color: var(--color-primary-contrast);
}

.calendar-onboarding-modal .ui-modal__header > .ui-icon-button:hover:not(:disabled) {
    background: var(--color-inverse-hover);
    color: var(--color-primary-contrast);
}

.calendar-onboarding-modal .ui-modal__body {
    padding-top: var(--space-2);
}

.calendar-onboarding-modal .ui-modal__footer {
    padding-top: 0;
    justify-content: center;
    border: 0;
    background: transparent;
}

.calendar-onboarding-step {
    text-align: center;
}

.calendar-onboarding-options {
    display: grid;
    min-width: 0;
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.calendar-onboarding-option {
    display: grid;
    min-width: 0;
    min-height: 7.5rem;
    padding: var(--space-4);
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 0 0, var(--color-card-glass-highlight), transparent 50%),
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    box-shadow: var(--shadow-card);
    color: var(--color-text);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    transition:
        transform var(--transition-fast) var(--ease-standard),
        border-color var(--transition-fast) var(--ease-standard),
        box-shadow var(--transition-fast) var(--ease-standard);
}

.calendar-onboarding-option:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-soft), inset 0 1px 0 var(--color-glass-border);
}

.calendar-onboarding-option:focus-visible {
    outline: 0;
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-card), var(--focus-ring);
}

.calendar-onboarding-option__icon {
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-primary-soft), var(--color-layer));
    box-shadow: var(--shadow-xs), inset 0 1px 0 var(--color-glass-border);
    color: var(--color-primary-active);
}

.calendar-onboarding-option__copy {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.calendar-onboarding-option__title,
.calendar-onboarding-option__description {
    display: block;
}

.calendar-onboarding-option__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.calendar-onboarding-option__description {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.calendar-onboarding-option__arrow {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    transition:
        transform var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard);
}

.calendar-onboarding-option:hover .calendar-onboarding-option__arrow,
.calendar-onboarding-option:focus-visible .calendar-onboarding-option__arrow {
    transform: translateX(0.2rem);
    color: var(--color-primary-active);
}

.create-event-modal .ui-modal__backdrop {
    background:
        radial-gradient(circle at 18% 12%, var(--color-primary-border), transparent 34%),
        radial-gradient(circle at 82% 86%, var(--color-layer-strong), transparent 38%),
        var(--color-backdrop);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
}

.create-event-modal .ui-modal__dialog {
    width: min(100%, 50rem);
    max-height: min(47rem, calc(100vh - 2rem));
    max-height: min(47rem, calc(100dvh - 2rem));
    border-color: var(--color-glass-border);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(circle at 0 0, var(--color-layer-strong), transparent 36%),
        radial-gradient(circle at 100% 100%, var(--color-primary-border), transparent 42%),
        linear-gradient(145deg, var(--color-glass-strong), var(--color-glass));
    box-shadow: var(--shadow-overlay), inset 0 1px 0 var(--color-glass-border);
    backdrop-filter: blur(30px) saturate(145%);
    -webkit-backdrop-filter: blur(30px) saturate(145%);
}

.create-event-modal:not([hidden]) .ui-modal__backdrop {
    animation: create-event-backdrop-in var(--transition-base) var(--ease-standard) both;
}

.create-event-modal:not([hidden]) .ui-modal__dialog {
    animation: create-event-dialog-in var(--transition-slow) var(--ease-standard) both;
}

.create-event-modal .ui-modal__header,
.create-event-modal .ui-modal__footer {
    position: relative;
    z-index: var(--z-base);
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.create-event-modal .ui-modal__header {
    padding: var(--space-4) var(--space-5) var(--space-2);
    align-items: center;
}

.create-event-modal .ui-modal__title {
    font-size: var(--font-size-xl);
    letter-spacing: var(--letter-spacing-tight);
}

.create-event-modal .ui-modal__body {
    position: relative;
    padding: var(--space-2) var(--space-5) var(--space-3);
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.create-event-modal .ui-modal__footer {
    padding: var(--space-2) var(--space-5) var(--space-4);
}

.event-composer {
    display: grid;
    gap: var(--space-3);
}

.event-composer .form-group + .form-group {
    margin-top: 0;
}

.event-composer__top-grid,
.event-composer__schedule-grid {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
}

.event-composer__top-grid {
    grid-template-columns: minmax(12.5rem, 0.8fr) minmax(18rem, 1.4fr);
}

.event-composer__schedule-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 1fr);
}

.event-composer__surface {
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-layer), var(--color-layer-faint));
    box-shadow: inset 0 1px 0 var(--color-glass-border);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    transition: border-color var(--transition-fast) var(--ease-standard), background-color var(--transition-fast) var(--ease-standard);
}

.event-composer__surface:focus-within {
    border-color: var(--color-primary-border);
    background: var(--color-layer);
}

.event-composer__surface .form-control,
.event-composer__surface .form-select,
.event-composer__surface .form-textarea {
    min-height: var(--control-height);
    border-color: var(--color-border);
    background-color: var(--color-glass-control);
    box-shadow: inset 0 1px 0 var(--color-glass-border);
}

.event-composer__provider {
    display: grid;
    min-height: 5.375rem;
    align-content: center;
}

.event-composer__provider .form-group {
    gap: var(--space-1);
}

.event-composer__provider .form-select {
    min-height: var(--control-height-sm);
}

.event-composer__location {
    position: relative;
    z-index: 2;
    padding: 0;
}

.event-location-picker {
    position: relative;
    height: 100%;
}

.event-location-picker__trigger {
    display: flex;
    height: 100%;
    min-height: 5.375rem;
    min-width: 0;
    padding: var(--space-3);
    align-items: center;
    gap: var(--space-3);
    border-radius: inherit;
    cursor: pointer;
    list-style: none;
}

.event-location-picker__trigger::-webkit-details-marker {
    display: none;
}

.event-location-picker__trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.event-location-picker__trigger-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-location-picker__trigger-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: var(--space-1);
}

.event-location-picker__trigger-copy strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-location-picker__trigger-copy strong::after {
    color: var(--color-danger);
    content: " *";
}

.event-location-picker__trigger-copy small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-location-picker.has-selected-location .event-location-picker__trigger-copy strong,
.event-location-picker.has-selected-location .event-location-picker__trigger-copy small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.event-location-picker.has-selected-location .event-location-picker__trigger-copy small {
    line-height: var(--line-height-normal);
}

.event-location-picker__chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast) var(--ease-standard);
}

.event-location-picker[open] .event-location-picker__chevron {
    transform: rotate(180deg);
}

.event-location-picker__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    width: min(24rem, calc(100vw - 3rem));
    padding: var(--space-3);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0, var(--color-primary-soft), transparent 44%),
        linear-gradient(145deg, var(--color-surface), var(--color-surface-subtle));
    box-shadow: var(--shadow-overlay), inset 0 1px 0 var(--color-glass-border);
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
}

.event-location-picker__search .form-control {
    min-height: var(--control-height);
}

.event-location-picker__section {
    display: grid;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    gap: var(--space-1);
    border-top: 1px solid var(--color-border);
}

[data-event-location-defaults][hidden],
.event-location-picker__places[hidden] {
    display: none;
}

.event-location-picker__section-title {
    padding: 0 var(--space-1);
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-location-picker__empty {
    padding: var(--space-2) var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-location-picker__option {
    display: flex;
    width: 100%;
    min-height: 2.5rem;
    padding: var(--space-1) var(--space-2);
    align-items: center;
    gap: var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-soft);
    font: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.event-location-picker__option:hover,
.event-location-picker__option:focus-visible,
.event-location-picker__option.is-active {
    background: var(--color-layer-strong);
    color: var(--color-text);
    outline: 0;
}

.event-location-picker__option > span:first-child {
    display: grid;
    width: 1.875rem;
    height: 1.875rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
}

.event-location-picker__option--zoom > span:first-child {
    background: #2d8cff;
    color: #ffffff;
}

.event-location-picker__option--meet > span:first-child {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.event-location-picker__option--teams > span:first-child {
    background: var(--color-info-soft);
    color: var(--color-info);
}

.event-location-picker__places-list {
    display: grid;
    max-height: min(18rem, 40vh);
    max-height: min(18rem, 40dvh);
    gap: var(--space-1);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.event-location-picker__place {
    align-items: flex-start;
}

.event-location-picker__place > span:first-child {
    margin-top: 0.0625rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-location-picker__place-copy {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.event-location-picker__place-copy strong,
.event-location-picker__place-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-location-picker__place-copy strong {
    color: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-location-picker__place-copy small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-location-picker__attribution {
    padding: var(--space-1) var(--space-2) 0;
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-align: right;
    white-space: nowrap;
}

.event-location-picker__hint {
    display: flex;
    margin-top: var(--space-3);
    padding: var(--space-2);
    align-items: flex-start;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-layer-soft);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-location-picker__hint .ui-icon {
    margin-top: 0.0625rem;
    flex: 0 0 auto;
    color: var(--color-primary);
}

.event-composer__schedule {
    padding: var(--space-2) var(--space-3);
}

.event-composer__time-fields {
    position: relative;
    display: grid;
    padding-left: var(--space-7);
    gap: var(--space-1);
}

.event-composer__time-fields::before {
    position: absolute;
    top: 1.1875rem;
    bottom: 1.1875rem;
    left: 0.3125rem;
    width: 1px;
    background: var(--color-primary-border);
    content: "";
}

.event-composer__time-row {
    position: relative;
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-items: center;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--space-2);
    border: 0;
}

.event-composer__time-row::before {
    position: absolute;
    top: 50%;
    left: calc(0rem - var(--space-7));
    width: 0.625rem;
    height: 0.625rem;
    transform: translateY(-50%);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-layer);
    content: "";
}

.event-composer__time-row--end::before {
    background: var(--color-glass-control);
    box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px var(--color-layer);
}

.event-composer__time-label {
    padding: 0;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-composer__time-controls {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(9rem, 1.35fr) minmax(6.25rem, 0.65fr);
    gap: var(--space-2);
}

.event-composer__time-controls .form-control {
    min-height: var(--control-height-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.event-composer__timezone {
    display: grid;
    padding: var(--space-3);
    align-content: center;
    align-items: center;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: var(--space-2);
}

.event-composer__timezone-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    grid-row: 1 / span 2;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-composer__timezone .form-select {
    min-height: 1.625rem;
    padding: 0 var(--space-6) 0 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: right center;
    box-shadow: none;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-composer__timezone .form-select:focus {
    background-color: transparent;
    box-shadow: none;
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.event-composer__timezone-note {
    grid-column: 2;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-composer__description {
    gap: var(--space-2);
}

.event-composer__description-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.event-composer__description .form-textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.event-composer__ai-button {
    display: inline-flex;
    min-height: 2rem;
    padding: 0 var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-glass-strong), var(--color-primary-soft));
    color: var(--color-primary);
    box-shadow: inset 0 1px 0 var(--color-glass-border);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: border-color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard), background-color var(--transition-fast) var(--ease-standard);
}

.event-composer__ai-button:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.event-composer__ai-button:active {
    transform: translateY(0);
}

.event-composer__ai-button:disabled {
    border-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.event-composer__ai-status {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-composer__ai-status.is-attention {
    color: var(--color-warning-strong);
}

.event-composer__footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

@keyframes create-event-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes create-event-dialog-in {
    from { transform: translateY(1rem) scale(0.985); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.event-overview-page {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
}

.event-overview-page .ui-page-header {
    align-items: center;
    gap: var(--space-6);
}

.event-overview-page .ui-breadcrumbs {
    margin-bottom: var(--space-1);
}

.event-overview-page .ui-page-header__eyebrow {
    margin-bottom: 0;
    font-size: var(--font-size-xs);
}

.event-overview-page .ui-page-title {
    font-size: clamp(1.75rem, 2.4vw, 2.375rem);
}

.event-overview-page .ui-page-description {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
}

.event-overview__tab-panel {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--space-3);
}

.event-overview__tab-panel[hidden] {
    display: none;
}

.event-overview__focused-panel {
    width: min(100%, 52rem);
    margin-right: auto;
    margin-left: auto;
}

.event-overview__focused-panel--wide {
    width: min(100%, 68rem);
}

.event-overview__focused-panel--fluid {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.event-overview__integrations-workspace {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: var(--space-3);
    grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
}

.event-overview__board {
    display: grid;
    min-width: 0;
    padding: 0 var(--space-2);
    align-items: stretch;
    gap: var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.event-overview__card {
    height: 100%;
    border-radius: var(--radius-lg);
    background: var(--color-card-glass-strong);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.event-overview__card.ui-card--compact .ui-card__header {
    min-width: 0;
    padding: var(--space-3) var(--space-3) 0;
}

.event-overview__card.ui-card--compact .ui-card__body {
    min-width: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.event-overview__card .ui-card__header > div {
    min-width: 0;
}

.event-overview__card .ui-card__title {
    font-size: var(--font-size-sm);
}

.event-overview__card .ui-card__subtitle {
    margin-top: 0;
    font-size: var(--font-size-2xs);
}

.event-overview__main-card {
    --event-reference-surface: #10111f;
    --event-reference-surface-soft: #191a2a;
    --event-reference-border: rgba(167, 166, 195, 0.18);
    --event-reference-text: #f7f6ff;
    --event-reference-muted: #aaa9bd;
    --event-reference-accent: #f43d91;
    --event-reference-pad: clamp(1rem, 2.1vh, 1.5rem);
    --event-reference-gap: clamp(0.45rem, 0.95vh, 0.8rem);
    --event-reference-icon: clamp(1.75rem, 3.4vh, 2.4rem);
    --event-reference-title: clamp(0.9375rem, 1.85vh, 1.3rem);
    --event-reference-body: clamp(0.75rem, 1.35vh, 0.9375rem);
    --event-reference-label: clamp(0.6875rem, 1.2vh, 0.8125rem);
    --event-reference-action: clamp(2rem, 3.4vh, 2.75rem);
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    border-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(circle at 8% 5%, rgba(64, 68, 112, 0.08), transparent 34%),
        var(--event-reference-surface);
    box-shadow: 0 1.35rem 3.4rem rgba(15, 16, 29, 0.2);
    color: var(--event-reference-text);
    backdrop-filter: blur(24px) saturate(115%);
    -webkit-backdrop-filter: blur(24px) saturate(115%);
}

.event-overview__main-card.ui-card--compact > .ui-card__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    padding: var(--event-reference-pad);
    flex-direction: column;
}

.event-overview__reference-header,
.event-overview__reference-actions {
    flex: 0 0 auto;
}

.event-overview__reference-scroll {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.event-overview__main-card .ui-icon--lg {
    width: clamp(0.9375rem, calc(var(--event-reference-icon) * 0.48), 1.375rem);
    height: clamp(0.9375rem, calc(var(--event-reference-icon) * 0.48), 1.375rem);
}

.event-overview__reference-header {
    display: flex;
    align-items: center;
    gap: var(--event-reference-gap);
}

.event-overview__reference-header h2 {
    color: var(--event-reference-text);
    font-size: var(--event-reference-title);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.event-overview__reference-header h2 > span {
    color: var(--event-reference-muted);
    font-weight: var(--font-weight-regular);
}

.event-overview__reference-back {
    display: inline-grid;
    width: var(--event-reference-icon);
    height: var(--event-reference-icon);
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--event-reference-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 0 0.85rem rgba(255, 255, 255, 0.018);
    color: var(--event-reference-muted);
    transition: border-color var(--transition-fast) var(--ease-standard), background var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.event-overview__reference-back:hover {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.07);
    color: var(--event-reference-text);
}

.event-overview__reference-back:focus-visible,
.event-overview__reference-action:focus-visible {
    outline: 3px solid rgba(167, 130, 255, 0.55);
    outline-offset: 3px;
}

.event-overview__reference-intro {
    display: grid;
    margin-top: var(--event-reference-gap);
    grid-template-columns: 0.3125rem minmax(0, 1fr);
    gap: var(--event-reference-gap);
}

.event-overview__reference-intro > span {
    min-height: 2.25rem;
    border-radius: var(--radius-pill);
    background: var(--event-reference-accent);
}

.event-overview__reference-intro > div {
    min-width: 0;
    align-self: center;
}

.event-overview__reference-intro h3 {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--event-reference-text);
    font-size: var(--event-reference-title);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.event-overview__reference-intro p {
    display: -webkit-box;
    margin-top: calc(var(--event-reference-gap) * 0.5);
    overflow: hidden;
    color: var(--event-reference-muted);
    font-size: var(--event-reference-body);
    line-height: var(--line-height-snug);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.event-overview__reference-meta {
    display: grid;
    margin-top: var(--event-reference-gap);
    gap: var(--event-reference-gap);
}

.event-overview__reference-meta > div {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: var(--event-reference-icon) minmax(0, 1fr);
    gap: var(--event-reference-gap);
}

.event-overview__reference-meta > div > div {
    min-width: 0;
}

.event-overview__reference-icon {
    display: inline-grid;
    width: var(--event-reference-icon);
    height: var(--event-reference-icon);
    place-items: center;
    border: 1px solid var(--event-reference-border);
    border-radius: calc(var(--event-reference-icon) * 0.3);
    background: var(--event-reference-surface-soft);
    box-shadow: inset 0 0 0.8rem rgba(255, 255, 255, 0.018);
    color: var(--event-reference-muted);
}

.event-overview__reference-meta dt {
    color: var(--event-reference-muted);
    font-size: var(--event-reference-label);
    line-height: var(--line-height-snug);
}

.event-overview__reference-meta dd {
    margin-top: 0.125rem;
    overflow-wrap: anywhere;
    color: var(--event-reference-text);
    font-size: var(--event-reference-body);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
}

.event-overview__reference-meta dd > span {
    color: var(--event-reference-muted);
    font-weight: var(--font-weight-regular);
}

.event-overview__reference-location {
    display: -webkit-box;
    overflow: hidden;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.event-overview__reference-attendees {
    margin-top: var(--event-reference-gap);
}

.event-overview__reference-attendees > h3 {
    color: var(--event-reference-muted);
    font-size: calc(var(--event-reference-label) * 0.9);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.event-overview__reference-attendees > div {
    display: flex;
    margin-top: calc(var(--event-reference-gap) * 0.6);
    align-items: center;
    gap: var(--event-reference-gap);
}

.event-overview__reference-attendees p {
    color: var(--event-reference-muted);
    font-size: var(--event-reference-label);
    line-height: var(--line-height-snug);
}

.event-overview__reference-attendees p strong {
    font-weight: var(--font-weight-regular);
}

.event-overview__reference-attendees .event-overview__attendee-avatar,
.event-overview__reference-attendees .event-overview__attendee-more {
    width: calc(var(--event-reference-icon) * 0.8);
    height: calc(var(--event-reference-icon) * 0.8);
    border: 0.125rem solid var(--event-reference-surface);
    color: #ffffff;
    font-size: calc(var(--event-reference-label) * 0.85);
}

.event-overview__reference-attendees .event-overview__attendee-preview > * + * {
    margin-left: -0.45rem;
}

.event-overview__reference-attendees .event-overview__attendee-avatar:nth-child(3n + 1) {
    background: #ed3e78;
}

.event-overview__reference-attendees .event-overview__attendee-avatar:nth-child(3n + 2) {
    background: #29bd7c;
}

.event-overview__reference-attendees .event-overview__attendee-avatar:nth-child(3n + 3) {
    background: #e7a126;
}

.event-overview__reference-attendees .event-overview__attendee-more {
    background: #262737;
    color: var(--event-reference-muted);
}

.event-overview__reference-actions {
    display: grid;
    margin-top: var(--event-reference-gap);
    gap: var(--event-reference-gap);
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.6fr);
}

.event-overview__reference-action {
    display: inline-flex;
    min-width: 0;
    min-height: var(--event-reference-action);
    padding: 0.5rem 0.75rem;
    align-items: center;
    justify-content: center;
    gap: calc(var(--event-reference-gap) * 0.6);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: inherit;
    color: var(--event-reference-text);
    font-size: var(--event-reference-body);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    transition: filter var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.event-overview__reference-action:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.event-overview__reference-action.is-secondary {
    border-color: var(--event-reference-border);
    background: #1b1c2c;
}

.event-overview__reference-action.is-primary {
    background: #7d57f6;
}

.event-overview__reference-action.is-disabled {
    cursor: not-allowed;
    filter: saturate(0.45);
    opacity: 0.5;
    pointer-events: none;
}

.event-overview__date-header {
    display: flex;
    min-width: 0;
    min-height: 4.5rem;
    padding: var(--space-3) var(--space-4) calc(var(--space-5) + var(--space-2));
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    color: var(--event-date-layer-ink);
}

.event-overview__date-copy {
    min-width: 0;
}

.event-overview__date-header strong {
    display: block;
}

.event-overview__date-header strong {
    overflow-wrap: anywhere;
    color: var(--event-date-layer-ink);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}

.event-overview__time-chip,
.event-overview__mode-chip {
    display: inline-flex;
    min-height: var(--control-height-sm);
    padding: var(--space-1) var(--space-3);
    align-items: center;
    gap: var(--space-1);
    border: 1px solid rgba(72, 49, 8, 0.1);
    border-radius: var(--radius-pill);
    background: var(--event-date-layer-control);
    box-shadow: var(--shadow-xs);
    color: var(--event-date-layer-ink);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.event-overview__mode-chip {
    margin-left: auto;
}

.event-overview__header-action {
    flex: 0 0 auto;
}

.event-overview__main-surface {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
    margin-top: calc(var(--space-4) * -1);
    padding: var(--space-3);
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: 0 -10px 28px rgba(45, 34, 14, 0.09), var(--shadow-sm);
}

.event-overview__main-heading,
.event-overview__context-block {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.event-overview__main-heading {
    margin-bottom: var(--space-2);
}

.event-overview__main-heading .event-overview__attendee-preview {
    margin-left: auto;
}

.event-overview__main-heading > div,
.event-overview__context-block > div,
.event-overview__integration-row > div,
.event-overview__setting-row > div {
    min-width: 0;
}

.event-overview__main-heading h2 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.event-overview__main-heading p,
.event-overview__context-block > div > span,
.event-overview__context-block p,
.event-overview__integration-row p,
.event-overview__setting-row p,
.event-overview__integration-meta span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__main-content {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__details-panel,
.event-overview__media-panel {
    min-width: 0;
}

.event-overview__detail-list {
    display: grid;
}

.event-overview__detail-list > div {
    display: grid;
    min-width: 0;
    padding: var(--space-2) 0;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
}

.event-overview__detail-list > div:first-child {
    padding-top: 0;
}

.event-overview__detail-list dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.event-overview__detail-list dd {
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-overview__context-block {
    margin-top: var(--space-2);
    padding: var(--space-2);
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-overview__context-block strong {
    display: block;
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
}

.event-overview__context-block p {
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
}

.event-overview__meeting-block {
    display: grid;
    gap: var(--space-2);
}

.event-overview__meeting-block > .ui-button {
    justify-self: start;
}

.event-overview__meeting-url {
    word-break: break-all;
}

.event-overview__section-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-overview__media-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.event-overview__media-panel .event-overview__context-block {
    margin-top: 0;
}

.event-overview__map {
    position: relative;
    display: grid;
    min-height: 8.5rem;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
    isolation: isolate;
}

.event-overview__map-canvas {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-base) var(--ease-standard);
}

.event-overview__map-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-strong);
    box-shadow: var(--shadow-card);
    color: var(--color-primary);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity var(--transition-base) var(--ease-standard);
}

.event-overview__map.is-ready .event-overview__map-canvas,
.event-overview__map.is-ready .event-overview__map-marker {
    opacity: 1;
}

.event-overview__map-fallback {
    z-index: 1;
    max-width: 13rem;
    padding: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
}

.event-overview__map.is-ready .event-overview__map-fallback {
    display: none;
}

.event-overview__media-placeholder,
.event-overview__cover-placeholder {
    display: grid;
    min-height: 8.5rem;
    padding: var(--space-3);
    place-content: center;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top, var(--color-primary-soft), transparent 68%),
        var(--color-layer-soft);
    text-align: center;
}

.event-overview__media-icon,
.event-overview__attendance-icon,
.event-overview__setting-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-overview__media-placeholder strong,
.event-overview__cover-placeholder strong {
    margin-top: var(--space-2);
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
}

.event-overview__media-placeholder p,
.event-overview__cover-placeholder > span:not(.event-overview__media-icon) {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-overview__cover-placeholder > span:not(.event-overview__media-icon) {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-overview__attendance-card,
.event-overview__description-card,
.event-overview__integration-card,
.event-overview__module-card,
.event-overview__settings-card {
    display: flex;
    flex-direction: column;
}

.event-overview__attendance-card .ui-card__body,
.event-overview__description-card .ui-card__body,
.event-overview__integration-card .ui-card__body,
.event-overview__module-card .ui-card__body,
.event-overview__settings-card .ui-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.event-overview__card-scroll {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.event-overview__attendance-total {
    display: flex;
    padding: var(--space-2);
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
}

.event-overview__attendance-people {
    display: flex;
    margin-bottom: var(--space-2);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-overview__attendance-people .event-overview__accent-link {
    margin-top: 0;
}

.event-overview__attendee-preview {
    display: flex;
    min-width: 0;
    align-items: center;
}

.event-overview__attendee-avatar,
.event-overview__attendee-more {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 2px solid var(--color-card-glass-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    color: var(--color-primary-contrast);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.event-overview__attendee-preview > * + * {
    margin-left: -0.45rem;
}

.event-overview__attendee-avatar:nth-child(3n + 1) {
    background: var(--color-primary);
}

.event-overview__attendee-avatar:nth-child(3n + 2) {
    background: var(--color-success-strong);
}

.event-overview__attendee-avatar:nth-child(3n + 3) {
    background: var(--color-warning-strong);
}

.event-overview__attendee-more {
    background: var(--color-surface-inverse);
}

.event-overview__attendance-total > div > span,
.event-overview__attendance-total strong {
    display: block;
}

.event-overview__attendance-total > div > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-overview__attendance-total strong {
    margin-top: var(--space-1);
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
}

.event-overview__attendance-breakdown {
    display: grid;
    margin-top: var(--space-2);
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__attendance-breakdown > div {
    padding: var(--space-2);
    border-radius: var(--radius-lg);
}

.event-overview__attendance-breakdown > div > span,
.event-overview__attendance-breakdown strong {
    display: block;
}

.event-overview__attendance-breakdown > div > span {
    font-size: var(--font-size-xs);
}

.event-overview__attendance-breakdown strong {
    margin-top: var(--space-1);
    font-size: var(--font-size-lg);
}

.event-overview__attendance-breakdown .is-verified {
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.event-overview__attendance-breakdown .is-unverified {
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.event-overview__attendance-empty {
    display: grid;
    flex: 1;
    min-height: 2.5rem;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    place-items: center;
    border-top: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
}

.event-overview__accent-link,
.event-overview__text-button {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-1);
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.event-overview__accent-link {
    margin-top: var(--space-2);
}

.event-overview__accent-link:hover,
.event-overview__text-button:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.event-overview__accent-link:focus-visible,
.event-overview__text-button:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

.event-overview__description-copy {
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.has-js .event-overview__description-copy {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.has-js .event-overview__expandable.is-expanded .event-overview__description-copy {
    display: block;
    overflow: visible;
}

.event-overview__text-button {
    margin-top: var(--space-2);
    padding: 0;
    cursor: pointer;
}

.event-overview__muted-copy {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.event-overview__integration-list,
.event-overview__settings-list {
    display: grid;
}

.event-overview__integration-row,
.event-overview__setting-row {
    display: flex;
    min-width: 0;
    padding: var(--space-2) 0;
    align-items: flex-start;
    gap: var(--space-2);
}

.event-overview__integration-row:first-child,
.event-overview__setting-row:first-child {
    padding-top: 0;
}

.event-overview__integration-row + .event-overview__integration-row,
.event-overview__setting-row + .event-overview__setting-row {
    border-top: 1px solid var(--color-border);
}

.event-overview__integration-row strong,
.event-overview__setting-row strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
}

.event-overview__integration-row > .ui-status-badge,
.event-overview__setting-row > .ui-status-badge {
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: var(--space-1);
}

.event-overview__integration-meta {
    display: grid;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    gap: var(--space-1);
    border-top: 1px solid var(--color-border);
}

.event-overview__integration-meta strong {
    font-size: var(--font-size-sm);
}

.event-overview__setting-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
}

.event-overview__setting-row.is-disabled {
    opacity: 0.62;
}

.event-overview__card-action {
    margin-top: auto;
    padding-top: var(--space-2);
}

.event-overview__card-action .event-overview__accent-link {
    margin-top: 0;
}

.event-overview__card-action form {
    margin: 0;
}

.event-public-registration-card .ui-card__body {
    display: grid;
    gap: var(--space-3);
}

.event-delivery-automation-card {
    display: flex;
    flex-direction: column;
}

.event-delivery-automation-card .ui-card__body {
    display: grid;
    flex: 1;
    gap: var(--space-3);
}

.event-overview__integrations-workspace > .event-public-registration-card {
    grid-column: 1 / -1;
}

.event-delivery-automation-card__switch-row,
.event-delivery-automation-card__actions {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: var(--space-3);
}

.event-delivery-automation-card__switches {
    display: grid;
    gap: var(--space-2);
}

.event-delivery-automation-card__switch-row {
    justify-content: space-between;
}

.event-delivery-automation-card__switch-row strong,
.event-delivery-automation-card__run strong {
    display: block;
    font-size: var(--font-size-sm);
}

.event-delivery-automation-card__switch-row p,
.event-delivery-automation-card__switch-row em,
.event-delivery-automation-card__independent,
.event-delivery-automation-card__run span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-delivery-automation-card__switch-row em {
    color: var(--color-primary);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
}

.event-delivery-automation-card__independent {
    color: var(--color-text-soft);
    font-weight: var(--font-weight-medium);
}

.event-delivery-automation-card__credits,
.event-delivery-automation-modal__counts,
.event-delivery-automation-modal__estimate {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.event-delivery-automation-card__credits {
    padding: var(--space-3) 0;
    gap: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.event-delivery-automation-card__credits > div,
.event-delivery-automation-modal__counts > div,
.event-delivery-automation-modal__estimate > div {
    display: grid;
    padding: var(--space-3);
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
}

.event-delivery-automation-card__credits > div {
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.event-delivery-automation-card__credits > div:first-child {
    padding-left: 0;
}

.event-delivery-automation-card__credits > div + div {
    border-left: 1px solid var(--color-border);
}

.event-delivery-automation-card__credits span,
.event-delivery-automation-modal__counts span,
.event-delivery-automation-modal__estimate span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-delivery-automation-card__credits strong,
.event-delivery-automation-modal__counts strong,
.event-delivery-automation-modal__estimate strong {
    font-size: var(--font-size-base);
}

.event-delivery-automation-card__run,
.event-delivery-automation-card__actions {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.event-delivery-automation-card__notice {
    color: var(--color-warning-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.event-delivery-automation-card__run {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-delivery-automation-card__actions {
    margin-top: auto;
    flex-wrap: wrap;
}

.event-delivery-automation-card__actions form {
    margin: 0;
}

.event-delivery-automation-modal__options {
    display: grid;
    padding: 0;
    gap: var(--space-2);
    border: 0;
}

.event-delivery-automation-modal__options legend {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-delivery-automation-modal__option {
    display: flex;
    padding: var(--space-3);
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
}

.event-delivery-automation-modal__option > div:first-child {
    display: grid;
    gap: var(--space-1);
}

.event-delivery-automation-modal__option strong {
    font-size: var(--font-size-sm);
}

.event-delivery-automation-modal__option small,
.event-delivery-automation-modal__option em,
.event-delivery-automation-modal__estimate small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-style: normal;
}

.event-delivery-automation-modal__option em {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.event-delivery-automation-modal__estimate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-public-registration-card__status {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-public-registration-card__status > div {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: var(--space-3);
}

.event-public-registration-card__status strong,
.event-public-registration-card__empty strong,
.event-public-registration-card__control-row strong {
    display: block;
    font-size: var(--font-size-sm);
}

.event-public-registration-card__status p,
.event-public-registration-card__empty p,
.event-public-registration-card__control-row p,
.event-public-registration-card__footer p,
.event-public-registration-card__embed p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-public-registration-card__section,
.event-public-registration-card__embed,
.event-public-registration-card__footer {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.event-public-registration-card__section > label,
.event-public-registration-card__control-row > div > span {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.event-public-registration-card__copy-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.event-public-registration-card__copy-row .form-control {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

.event-public-registration-card__copy-row .ui-button {
    flex: 0 0 auto;
}

.event-public-registration-card__inline-actions,
.event-public-registration-card__footer,
.event-public-registration-card__control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.event-public-registration-card__inline-actions {
    margin-top: var(--space-2);
}

.event-public-registration-card__inline-actions > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-public-registration-card__control-row > div {
    min-width: 0;
}

.event-public-registration-card__embed summary {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-public-registration-card__embed > div {
    display: grid;
    margin-top: var(--space-3);
    gap: var(--space-2);
}

.event-public-registration-card__embed textarea {
    min-height: 7rem;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

.event-public-registration-card__embed .ui-button {
    justify-self: start;
}

.event-public-registration-card__footer p {
    max-width: 24rem;
    margin-top: 0;
}

.event-public-registration-card__empty {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-public-registration-card__empty > span {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-overview__settings-workspace .event-overview__settings-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.event-overview__settings-workspace .event-overview__setting-row {
    min-height: 3rem;
    padding: 0 var(--space-4);
}

.event-overview__settings-workspace .event-overview__setting-row:first-child {
    padding-left: 0;
}

.event-overview__settings-workspace .event-overview__setting-row:last-child {
    padding-right: 0;
}

.event-overview__settings-workspace .event-overview__setting-row + .event-overview__setting-row {
    border-top: 0;
    border-left: 1px solid var(--color-border);
}

.event-attendees-page {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

.event-attendees__metrics {
    gap: var(--space-3);
}

.event-registrations__public-card .ui-card__body,
.event-settings-page,
.event-response-page {
    display: grid;
    gap: var(--space-4);
}

.event-registrations__public-link {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
}

.event-registrations__public-link label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-registrations__public-link .form-control,
.event-registrations__embed-code {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

.event-registrations__public-actions,
.event-registrations__public-disabled,
.event-attendees__selection-toolbar,
.event-attendees__selection-toolbar > div,
.event-attendees__selection-banner,
.event-settings__action-row {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.event-registrations__public-actions {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.event-registrations__public-disabled,
.event-attendees__selection-toolbar,
.event-settings__action-row {
    justify-content: space-between;
}

.event-registrations__public-disabled p,
.event-settings__action-row p,
.event-settings__section-heading p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-attendees__selection-toolbar {
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
}

.event-attendees__selection-toolbar strong,
.event-attendees__selection-banner {
    font-size: var(--font-size-sm);
}

.event-attendees__selection-banner {
    margin-bottom: var(--space-2);
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-text-soft);
}

.event-attendees__selection-banner button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    font-weight: var(--font-weight-semibold);
}

.event-attendees__selection-banner button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.event-attendees__selection-cell {
    width: 2.75rem;
    text-align: center;
}

.event-attendees__selection-cell input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
}

.event-attendees__person {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.event-attendees__avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-attendees__email {
    overflow-wrap: anywhere;
}

.event-attendees__import-errors {
    display: grid;
    padding-left: var(--space-5);
    gap: var(--space-1);
}

.event-attendees__file-input {
    height: auto;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.event-attendees__actions {
    display: flex;
    min-width: 9rem;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.event-attendees__actions .ui-button {
    white-space: nowrap;
}

.event-attendees__status-note {
    max-width: 13rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-attendees__action-complete {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-success-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-response__summary {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr);
    gap: var(--space-3);
}

.event-response__sync-status {
    display: flex;
    padding: var(--space-3) var(--space-4);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-response__sync-status > div {
    display: grid;
    gap: var(--space-1);
}

.event-response__sync-status span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-response__sync-status strong {
    font-size: var(--font-size-sm);
}

.event-response__summary > .ui-card {
    height: 100%;
}

.event-response__summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.event-response__summary-grid--rsvp {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.event-response__summary-grid > div {
    display: grid;
    padding: var(--space-3);
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-layer-soft);
}

.event-response__summary-grid span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-response__summary-grid strong {
    font-size: var(--font-size-lg);
}

.event-response__filters {
    display: flex;
    margin-bottom: var(--space-4);
    align-items: end;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.event-response__filters .form-group {
    min-width: min(100%, 14rem);
}

.event-settings__section {
    display: grid;
    gap: var(--space-3);
}

.event-settings__section-heading h2 {
    font-size: var(--font-size-base);
}

.event-settings__configuration-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.event-settings__configuration-grid > div {
    min-width: 0;
}

.event-settings__configuration-grid dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.event-settings__configuration-grid dd {
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-settings__configuration-description {
    grid-column: 1 / -1;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.event-settings__configuration-description dd {
    color: var(--color-text-soft);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
}

.event-settings__status-card,
.event-settings__danger-card {
    border-color: var(--color-border-strong);
}

.event-settings__danger-zone {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.event-settings__danger-card {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.attendee-verification-result__icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-2);
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.attendee-verification-result--success .attendee-verification-result__icon {
    border-color: var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.attendee-verification-result--warning .attendee-verification-result__icon {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.attendee-verification-result--danger .attendee-verification-result__icon {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.attendee-verification-result__event {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.attendee-verification-result__schedule {
    display: inline-flex;
    margin: 0 auto;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
}

.attendee-verification-result__form {
    display: grid;
    margin-top: var(--space-5);
}

.attendee-verification-result__form .ui-button {
    width: 100%;
}

@media (max-width: 47.99rem) {
    .event-registrations__public-link,
    .event-settings__configuration-grid,
    .event-response__summary-grid--rsvp {
        grid-template-columns: minmax(0, 1fr);
    }

    .event-registrations__public-actions .ui-button,
    .event-registrations__public-disabled .ui-button,
    .event-attendees__selection-toolbar .ui-button,
    .event-settings__action-row .ui-button {
        width: 100%;
        justify-content: center;
    }

    .event-registrations__public-disabled,
    .event-attendees__selection-toolbar,
    .event-attendees__selection-toolbar > div,
    .event-settings__action-row,
    .event-response__filters,
    .event-response__filters .form-group,
    .event-response__filters .ui-button {
        width: 100%;
        align-items: stretch;
    }

    .event-attendees__selection-toolbar > div,
    .event-settings__action-row {
        flex-direction: column;
    }

    .event-attendees__table {
        overflow: visible;
    }

    .event-attendees__table .table-base,
    .event-attendees__table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .event-attendees__table thead {
        display: none;
    }

    .event-attendees__table tbody {
        display: grid;
        gap: var(--space-3);
    }

    .event-attendees__table .table-base tr {
        display: grid;
        overflow: hidden;
        border: 1px solid var(--color-card-glass-border);
        border-radius: var(--radius-lg);
        background: var(--color-card-glass);
    }

    .event-attendees__table .table-base td {
        display: grid;
        min-width: 0;
        padding: var(--space-3);
        align-items: start;
        grid-template-columns: minmax(6.5rem, 0.75fr) minmax(0, 1.25fr);
        gap: var(--space-3);
        border-bottom: 1px solid var(--color-border);
    }

    .event-attendees__table .table-base td::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--letter-spacing-wide);
        text-transform: uppercase;
    }

    .event-attendees__table .table-base td:last-child {
        border-bottom: 0;
    }

    .event-attendees__actions,
    .event-attendees__actions form,
    .event-attendees__actions .ui-button {
        width: 100%;
        min-width: 0;
    }
}

/*
 * Calendar page is sized to the viewport: the month grid divides whatever
 * height is left instead of pushing the document into a scroll.
 */
.calendar-page {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.event-calendar {
    --calendar-cell-min: 2.75rem;
    --calendar-cell-pad: 0.3125rem;
    --calendar-day-heading: 1.25rem;
    display: grid;
    min-width: 0;
    align-items: stretch;
    grid-template-columns: minmax(16.5rem, 0.62fr) minmax(0, 2.38fr);
    gap: var(--space-4);
}

.event-calendar__inspector,
.event-calendar__board {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.event-calendar__inspector-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.event-calendar__inspector-header,
.event-calendar__board-header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.event-calendar__inspector-header {
    border-bottom: 1px solid var(--color-border);
}

.event-calendar__eyebrow {
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.2;
    text-transform: uppercase;
}

.event-calendar__inspector-context {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-calendar__empty {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    padding: var(--space-6) var(--space-5);
    place-content: center;
    text-align: center;
}

.event-calendar__empty-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--space-3);
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-calendar__empty h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.event-calendar__empty p {
    max-width: 17rem;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.event-calendar__detail {
    padding: var(--space-5);
}

.event-calendar__detail-heading h2 {
    margin-top: var(--space-4);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.event-calendar__detail-heading h2:focus {
    outline: none;
}

.event-calendar__detail-heading p {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.event-calendar__audience-summary {
    display: flex;
    min-width: 0;
    margin: var(--space-6) 0 var(--space-4);
    padding: var(--space-4);
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
}

.event-calendar__audience-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-glass-control);
    color: var(--color-primary-active);
}

.event-calendar__audience-summary strong,
.event-calendar__audience-summary span {
    display: block;
}

.event-calendar__audience-summary strong {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.event-calendar__audience-summary div > span {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-calendar__detail .ui-definition-list__row {
    grid-template-columns: minmax(6rem, 0.72fr) minmax(0, 1.28fr);
}

.event-calendar__detail-footer {
    display: flex;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.event-calendar__detail-footer strong {
    color: var(--color-text-soft);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
}

.event-calendar__backdrop {
    display: none;
}

/* Month, legend, and tools share one row so the grid keeps the height. */
.event-calendar__board-header {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.event-calendar__board-title {
    min-width: 0;
    flex: 0 0 auto;
}

.event-calendar__board-header h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.event-calendar__board-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.event-calendar__month-navigation {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.event-calendar__month-picker {
    z-index: var(--z-dropdown);
}

.event-calendar__month-trigger {
    min-width: 10.25rem;
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    justify-content: flex-start;
    font-weight: var(--font-weight-medium);
}

.event-calendar__month-trigger > span {
    flex: 1;
    text-align: left;
    white-space: nowrap;
}

.event-calendar__month-trigger .ui-icon:first-child {
    color: var(--color-primary);
}

.event-calendar__month-trigger .ui-icon:last-child {
    color: var(--color-text-faint);
    transition: transform var(--transition-base) var(--ease-standard);
}

.event-calendar__month-picker[open] .event-calendar__month-trigger .ui-icon:last-child {
    transform: rotate(180deg);
}

.event-calendar__month-picker-menu {
    right: auto;
    left: 50%;
    width: 18rem;
    min-width: 18rem;
    padding: 0;
    overflow: hidden;
    transform: translateX(-50%);
    border-color: var(--color-glass-border);
    border-radius: var(--radius-lg);
    background: var(--color-popover-strong);
    box-shadow: var(--shadow-overlay), inset 0 1px 0 var(--color-glass-border);
}

.event-calendar__month-picker-header {
    display: grid;
    padding: var(--space-3);
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    text-align: center;
}

.event-calendar__month-picker-header span,
.event-calendar__month-picker-header strong {
    display: block;
}

.event-calendar__month-picker-header span {
    color: var(--color-text-faint);
    font-size: 0.5625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-calendar__month-picker-header strong {
    margin-top: 0.125rem;
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.event-calendar__month-grid {
    display: grid;
    padding: var(--space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}

.event-calendar__month-option {
    position: relative;
    display: grid;
    min-height: 2.5rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-fast) var(--ease-standard), border-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.event-calendar__month-option:hover {
    transform: translateY(-1px);
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.event-calendar__month-option:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.event-calendar__month-option.is-current:not(.is-selected) {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.event-calendar__month-option.is-selected {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-action-contrast);
    box-shadow: var(--shadow-xs);
}

.event-calendar__month-picker-footer {
    display: flex;
    min-height: 3.125rem;
    padding: 0 var(--space-4);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
}

.event-calendar__month-picker-footer a {
    color: var(--color-primary-active);
    font-weight: var(--font-weight-semibold);
}

.event-calendar__month-picker-footer a:hover {
    color: var(--color-primary-hover);
}

.event-calendar__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.event-calendar__summary span {
    display: inline-flex;
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-strong);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-calendar__summary strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.event-calendar__legend {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-calendar__legend span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.event-calendar__legend i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-neutral);
}

.event-calendar__legend i.is-primary { background: var(--color-primary); }
.event-calendar__legend i.is-success { background: var(--color-success); }
.event-calendar__legend i.is-warning { background: var(--color-warning); }
.event-calendar__legend i.is-neutral { background: var(--color-text-faint); }
.event-calendar__legend i.is-danger { background: var(--color-danger); }
.event-calendar__legend i.is-info { background: var(--color-info); }

.event-calendar__month-empty {
    display: flex;
    flex: 0 0 auto;
    margin: var(--space-3) var(--space-5) 0;
    padding: var(--space-3);
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.event-calendar__month-empty-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.event-calendar__month-empty strong {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.event-calendar__month-empty p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-calendar__viewport {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
}

.event-calendar__viewport:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.event-calendar__table {
    width: 100%;
    min-width: 42rem;
    height: 100%;
    border-spacing: 0;
    border-collapse: separate;
    table-layout: fixed;
}

.event-calendar__table th {
    height: 2.25rem;
    padding: 0 var(--space-2);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-layer-soft);
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}

.event-calendar__table th + th,
.event-calendar__table td + td {
    border-left: 1px solid var(--color-border);
}

/*
 * The cell is the positioning context for its event list. Keeping the list out
 * of flow means a busy day can never stretch its week row, so the six rows
 * always divide the viewport evenly and the month stays on one screen.
 */
.event-calendar__table td {
    position: relative;
    height: var(--calendar-cell-min);
    padding: var(--calendar-cell-pad);
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-layer-faint);
}

.event-calendar__table tbody tr:last-child td {
    border-bottom: 0;
}

.event-calendar__table td.is-outside-month {
    background: var(--color-surface-muted);
}

.event-calendar__day-heading {
    display: flex;
    height: var(--calendar-day-heading);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
}

.event-calendar__day-heading time {
    display: inline-grid;
    width: var(--calendar-day-heading);
    height: var(--calendar-day-heading);
    place-items: center;
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
}

.event-calendar__day-heading span {
    color: var(--color-primary-active);
    font-size: 0.5625rem;
    font-weight: var(--font-weight-semibold);
}

.event-calendar__table td.is-today .event-calendar__day-heading time {
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
}

.event-calendar__table td.is-outside-month .event-calendar__day-heading time {
    color: var(--color-text-faint);
}

.event-calendar__events {
    position: absolute;
    top: calc(var(--calendar-cell-pad) + var(--calendar-day-heading) + 0.125rem);
    right: var(--calendar-cell-pad);
    bottom: var(--calendar-cell-pad);
    left: var(--calendar-cell-pad);
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-neutral) transparent;
    scrollbar-width: thin;
    /* Fades the last chip when a busy day scrolls, instead of a hard cut. */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 0.5rem), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 0.5rem), transparent);
}

/* Single-line chip: time, then title. Status reads from the accent + legend. */
.event-calendar__event {
    --calendar-event-background: var(--color-surface-muted);
    --calendar-event-color: var(--color-text-soft);
    --calendar-event-accent: var(--color-text-faint);
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 1.25rem;
    flex: 0 0 auto;
    align-items: baseline;
    padding: 0.1875rem 0.375rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-left: 3px solid var(--calendar-event-accent);
    border-radius: var(--radius-xs);
    background: var(--calendar-event-background);
    color: var(--calendar-event-color);
    gap: 0.3125rem;
    text-align: left;
    transition: border-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.event-calendar__event span {
    flex: 0 0 auto;
    font-size: 0.5625rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.76;
}

.event-calendar__event strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-calendar__event.is-primary {
    --calendar-event-background: var(--color-primary-soft);
    --calendar-event-color: var(--color-primary-active);
    --calendar-event-accent: var(--color-primary);
}

.event-calendar__event.is-success {
    --calendar-event-background: var(--color-success-soft);
    --calendar-event-color: var(--color-success-strong);
    --calendar-event-accent: var(--color-success);
}

.event-calendar__event.is-warning {
    --calendar-event-background: var(--color-warning-soft);
    --calendar-event-color: var(--color-warning-strong);
    --calendar-event-accent: var(--color-warning);
}

.event-calendar__event.is-danger {
    --calendar-event-background: var(--color-danger-soft);
    --calendar-event-color: var(--color-danger-strong);
    --calendar-event-accent: var(--color-danger);
}

.event-calendar__event.is-info {
    --calendar-event-background: var(--color-info-soft);
    --calendar-event-color: var(--color-info-strong);
    --calendar-event-accent: var(--color-info);
}

.event-calendar__event:hover {
    transform: translateY(-1px);
    border-color: var(--calendar-event-accent);
    box-shadow: var(--shadow-xs);
}

.event-calendar__event[aria-pressed="true"] {
    border-color: var(--calendar-event-accent);
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--calendar-event-accent);
}

/* Board pages trade page-header scale for grid height, as the Event overview does. */
.app-page--calendar .ui-page-header {
    align-items: center;
    gap: var(--space-6);
}

.app-page--calendar .ui-breadcrumbs {
    margin-bottom: var(--space-1);
}

.app-page--calendar .ui-page-header__eyebrow {
    margin-bottom: 0;
    font-size: var(--font-size-xs);
}

.app-page--calendar .ui-page-title {
    font-size: clamp(1.75rem, 2.4vw, 2.375rem);
}

.app-page--calendar .ui-page-description {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
}

@media (min-width: 64rem) {
    .has-js .app-page--calendar .calendar-page {
        height: 100%;
        min-height: 0;
    }

    .has-js .app-page--calendar .ui-page-header {
        flex: 0 0 auto;
    }

    .has-js .app-page--calendar .ui-section {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .has-js .app-page--calendar .event-calendar {
        min-height: 0;
        flex: 1 1 auto;
    }
}

/* Analytics workspace: compact, viewport-bound reporting with accent-aware charts. */

.analytics-workspace {
    display: grid;
    height: 100%;
    min-height: 0;
    padding: 0 var(--space-2);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--space-3);
}

.analytics-workspace__context {
    display: flex;
    min-width: 0;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.analytics-workspace__eyebrow {
    color: var(--color-text-faint);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.2;
    text-transform: uppercase;
}

.analytics-workspace__context .ui-page-title {
    margin-top: var(--space-1);
    font-size: clamp(1.5rem, 2vw, 2rem);
}

.analytics-workspace__description {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.analytics-workspace__metrics {
    gap: var(--space-3);
}

.analytics-workspace__metrics .ui-metric-card {
    min-height: 5rem;
    padding: var(--space-3) var(--space-5);
}

.analytics-workspace__metrics .ui-metric-card__value {
    margin-top: var(--space-1);
    font-size: 1.625rem;
}

.analytics-workspace__metrics .ui-metric-card__trend {
    margin-top: var(--space-1);
}

.analytics-metric--verified .ui-metric-card__value,
.analytics-metric--verified .ui-metric-card__trend-value {
    color: var(--color-primary);
}

.analytics-workspace__grid {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.75fr);
    gap: var(--space-3);
}

.analytics-workspace__side {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(12rem, 0.88fr) minmax(13rem, 1.12fr);
    gap: var(--space-3);
}

.analytics-card {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.analytics-card > .ui-card__header {
    flex: 0 0 auto;
}

.analytics-card > .ui-card__body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.analytics-card--campaigns > .ui-card__body {
    display: grid;
}

.analytics-campaign-chart {
    display: grid;
    min-height: 0;
    margin: 0;
    align-content: center;
    gap: var(--space-3);
}

.analytics-campaign-chart__legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.analytics-campaign-chart__legend span,
.analytics-verification__legend dt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.analytics-campaign-chart__legend i,
.analytics-verification__legend i {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-pill);
}

.analytics-campaign-chart__legend .is-verified,
.analytics-verification__legend .is-verified {
    background: var(--color-primary);
}

.analytics-campaign-chart__legend .is-pending,
.analytics-verification__legend .is-pending {
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.analytics-campaign-chart__rows {
    display: grid;
    min-height: 0;
    align-content: center;
}

.analytics-campaign-chart__row {
    display: grid;
    min-width: 0;
    padding: var(--space-3) 0;
    align-items: center;
    grid-template-columns: minmax(9rem, 0.75fr) minmax(12rem, 1.55fr) minmax(5.5rem, 0.42fr);
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.analytics-campaign-chart__row:last-child {
    border-bottom: 0;
}

.analytics-campaign-chart__label,
.analytics-campaign-chart__value {
    min-width: 0;
}

.analytics-campaign-chart__label a {
    display: block;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-campaign-chart__label a:hover,
.analytics-campaign-chart__label a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.analytics-campaign-chart__label span,
.analytics-campaign-chart__value span {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.analytics-campaign-chart__plot {
    height: 0.75rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
}

.analytics-campaign-chart__volume {
    display: block;
    width: var(--campaign-volume);
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.analytics-campaign-chart__verified {
    display: block;
    width: var(--campaign-verified);
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.analytics-campaign-chart__value {
    text-align: right;
}

.analytics-campaign-chart__value strong {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.analytics-verification {
    display: grid;
    height: 100%;
    min-height: 0;
    align-items: center;
    grid-template-columns: minmax(7.5rem, 0.8fr) minmax(8rem, 1.2fr);
    gap: var(--space-4);
}

.analytics-verification__donut {
    display: grid;
    width: min(8.75rem, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--color-primary) var(--verification-rate), var(--color-surface-muted) 0);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.analytics-verification__donut > div {
    display: grid;
    width: 68%;
    aspect-ratio: 1;
    place-content: center;
    border: 1px solid var(--color-card-glass-border);
    border-radius: 50%;
    background: var(--color-card-glass-strong);
    text-align: center;
}

.analytics-verification__donut strong {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    line-height: 1;
}

.analytics-verification__donut span {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.analytics-verification__legend {
    display: grid;
    margin: 0;
}

.analytics-verification__legend > div {
    display: flex;
    padding: var(--space-2) 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.analytics-verification__legend > div:last-child {
    border-bottom: 0;
}

.analytics-verification__legend dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.analytics-verification__legend dd {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.analytics-card--trend > .ui-card__body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.analytics-trend__summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.analytics-trend__summary strong {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.analytics-trend__summary span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.analytics-trend {
    display: grid;
    min-height: 7rem;
    margin: var(--space-2) 0 0;
    grid-template-rows: minmax(0, 1fr) auto;
}

.analytics-trend svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 5.5rem;
    overflow: visible;
}

.analytics-trend__grid line {
    stroke: var(--color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.analytics-trend__gradient-start {
    stop-color: var(--color-primary);
    stop-opacity: 0.24;
}

.analytics-trend__gradient-end {
    stop-color: var(--color-primary);
    stop-opacity: 0.01;
}

.analytics-trend__area {
    fill: url("#analytics-verification-area");
}

.analytics-trend__line {
    fill: none;
    stroke: var(--color-primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.analytics-trend__axis {
    display: flex;
    margin-top: var(--space-1);
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: 0.625rem;
}

/* Reference-led analytics composition: 3-card overview, KPI rail, and 2-chart row. */

.analytics-workspace {
    grid-template-rows: auto minmax(14.25rem, 1.15fr) auto minmax(11.5rem, 0.85fr);
}

.analytics-overview-grid,
.analytics-chart-grid,
.analytics-kpi-strip {
    display: grid;
    min-width: 0;
    min-height: 0;
    gap: var(--space-3);
}

.analytics-overview-grid {
    grid-template-columns: minmax(15rem, 0.9fr) minmax(17rem, 1fr) minmax(20rem, 1.1fr);
}

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

.analytics-kpi-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.analytics-overview-grid .analytics-card,
.analytics-chart-grid .analytics-card {
    border-color: color-mix(in srgb, var(--color-primary) 15%, var(--color-card-glass-border));
    box-shadow: var(--shadow-sm);
}

.analytics-overview-grid .analytics-card > .ui-card__header,
.analytics-chart-grid .analytics-card > .ui-card__header {
    position: relative;
}

.analytics-overview-grid .analytics-card > .ui-card__header::after,
.analytics-chart-grid .analytics-card > .ui-card__header::after {
    width: 1.25rem;
    height: 0.25rem;
    border-radius: var(--radius-pill);
    background: radial-gradient(circle, var(--color-text-faint) 1px, transparent 1.5px) 0 0 / 0.3125rem 0.25rem;
    content: "";
    opacity: 0.55;
}

.analytics-card--summary {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-card-glass-strong)), var(--color-card-glass));
}

.analytics-summary-list {
    display: grid;
    height: 100%;
    min-height: 0;
    margin: 0;
    align-content: center;
    gap: var(--space-2);
}

.analytics-summary-list > div {
    display: flex;
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-primary) 13%, var(--color-border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) var(--summary-strength), var(--color-layer));
}

.analytics-summary-list dt {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.analytics-summary-list dt i {
    width: 0.4375rem;
    height: 0.4375rem;
    flex: 0 0 auto;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
}

.analytics-summary-list dd {
    min-width: 3.25rem;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-card-glass-strong) 86%, transparent);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-align: right;
}

.analytics-card--score {
    background:
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 62%),
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-card-glass-strong)), var(--color-card-glass));
}

.analytics-card--score > .ui-card__body {
    display: grid;
    overflow: hidden;
}

.analytics-score {
    display: grid;
    min-height: 0;
    place-items: center;
    align-content: center;
}

.analytics-score__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.analytics-score__value {
    margin-top: var(--space-1);
    color: var(--color-text);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.055em;
    line-height: 1;
}

.analytics-score__value span {
    margin-left: 0.125rem;
    color: var(--color-primary);
    font-size: 0.52em;
    letter-spacing: normal;
}

.analytics-score__gauge {
    position: relative;
    width: min(14.5rem, 95%);
    height: min(7.75rem, 17vh);
    margin: var(--space-1) 0 0;
}

.analytics-score__gauge svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.analytics-score__track,
.analytics-score__progress {
    fill: none;
    stroke-linecap: round;
    stroke-width: 20;
    vector-effect: non-scaling-stroke;
}

.analytics-score__track {
    stroke: var(--color-surface-muted);
}

.analytics-score__progress {
    stroke: var(--color-primary);
}

.analytics-score__gauge figcaption {
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    display: grid;
    min-width: 7rem;
    padding: 0.4rem 0.65rem;
    transform: translateX(-50%);
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-glass-strong);
    box-shadow: var(--shadow-xs);
}

.analytics-score__gauge figcaption strong {
    color: var(--color-primary-active);
    font-size: var(--font-size-sm);
}

.analytics-score__gauge figcaption span {
    color: var(--color-text-muted);
    font-size: 0.625rem;
}

.analytics-score__foot,
.analytics-comparison__legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.analytics-score__foot span,
.analytics-comparison__legend span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.analytics-score__foot i,
.analytics-comparison__legend i {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.analytics-score__foot .is-verified,
.analytics-comparison__legend .is-verified {
    background: var(--color-primary);
}

.analytics-score__foot .is-pending,
.analytics-comparison__legend .is-pending {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-muted);
}

.analytics-card--ranking {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-card-glass-strong)), var(--color-card-glass));
}

.analytics-ranking-table {
    display: grid;
    min-width: 0;
    height: 100%;
    min-height: 0;
    align-content: center;
}

.analytics-ranking-table__head,
.analytics-ranking-table__row {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(8rem, 1.4fr) minmax(3.25rem, 0.42fr) minmax(3.25rem, 0.42fr) minmax(3rem, 0.35fr);
    gap: var(--space-2);
}

.analytics-ranking-table__head {
    padding: 0 var(--space-2) var(--space-2);
    color: var(--color-text-faint);
    font-size: 0.625rem;
}

.analytics-ranking-table__head span:not(:first-child),
.analytics-ranking-table__row > span:not(:first-child),
.analytics-ranking-table__row > strong {
    text-align: right;
}

.analytics-ranking-table__row {
    min-height: 2.25rem;
    padding: var(--space-2);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    text-decoration: none;
}

.analytics-ranking-table__row:hover,
.analytics-ranking-table__row:focus-visible {
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    outline: none;
}

.analytics-ranking-table__campaign {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.analytics-ranking-table__campaign i {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    font-size: 0.625rem;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
}

.analytics-ranking-table__campaign b {
    overflow: hidden;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-ranking-table__row > strong {
    color: var(--color-primary-active);
    font-size: var(--font-size-xs);
}

.analytics-kpi-strip .ui-metric-card {
    min-width: 0;
    min-height: 5.5rem;
    padding: var(--space-3) var(--space-4);
    border-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-card-glass-border));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-card-glass-strong)), var(--color-card-glass));
    box-shadow: var(--shadow-xs);
}

.analytics-kpi-strip .ui-metric-card__value {
    margin-top: var(--space-1);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
}

.analytics-kpi-strip .ui-metric-card__trend {
    overflow: hidden;
    margin-top: var(--space-1);
    font-size: 0.625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-metric--pending .ui-metric-card__value {
    color: var(--color-warning);
}

.analytics-card--trend > .ui-card__body,
.analytics-card--comparison > .ui-card__body {
    overflow: hidden;
}

.analytics-chart-grid .analytics-trend {
    min-height: 5.25rem;
}

.analytics-comparison {
    display: grid;
    height: 100%;
    min-height: 0;
    margin: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-2);
}

.analytics-comparison__legend {
    justify-content: flex-end;
}

.analytics-comparison__legend .is-rate {
    width: 0.75rem;
    height: 1px;
    border-radius: 0;
    background: var(--color-text);
}

.analytics-comparison__plot {
    position: relative;
    display: flex;
    min-height: 7.5rem;
    padding: var(--space-2) 8% 0;
    align-items: flex-end;
    justify-content: space-around;
    gap: var(--space-6);
}

.analytics-comparison__grid-line {
    position: absolute;
    right: 2%;
    left: 2%;
    height: 1px;
    background: var(--color-border);
}

.analytics-comparison__grid-line.is-top { top: 12%; }
.analytics-comparison__grid-line.is-middle { top: 47%; }
.analytics-comparison__grid-line.is-bottom { top: 82%; }

.analytics-comparison__plot > svg {
    position: absolute;
    z-index: 3;
    inset: 0 8% 2.75rem;
    width: 84%;
    height: calc(100% - 2.75rem);
    overflow: visible;
    pointer-events: none;
}

.analytics-comparison__plot > svg polyline {
    fill: none;
    stroke: var(--color-text);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}

.analytics-comparison__plot > svg circle {
    fill: var(--color-card-glass-strong);
    stroke: var(--color-text);
    stroke-width: 1.5;
}

.analytics-comparison__column {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(8rem, 36%);
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto auto;
    justify-items: center;
}

.analytics-comparison__bar {
    display: flex;
    width: min(4.25rem, 75%);
    height: var(--comparison-height);
    min-height: 1.5rem;
    align-self: end;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
    background: var(--color-surface-muted);
    box-shadow: var(--shadow-xs);
}

.analytics-comparison__pending {
    height: calc(100% - var(--comparison-verified));
    background: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface-muted));
}

.analytics-comparison__verified {
    height: var(--comparison-verified);
    background: var(--color-primary);
}

.analytics-comparison__column > strong {
    width: 100%;
    overflow: hidden;
    margin-top: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-2xs);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-comparison__column > span {
    color: var(--color-primary-active);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
}

/* Account settings pages */
.account-page {
    display: grid;
    min-width: 0;
    padding: var(--space-1) 0 var(--space-5);
    gap: var(--space-5);
}

.account-page__primary-grid,
.account-overview-grid {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
}

.account-page__primary-grid,
.account-page__secondary-grid,
.account-settings-grid {
    align-items: start;
}

.account-page__stack {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--space-5);
}

.account-page__card {
    overflow: hidden;
}

.account-summary-card .ui-card__body {
    display: grid;
    gap: var(--space-5);
}

.account-summary-card__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-4);
}

.account-summary-card__mark {
    display: grid;
    width: 4.25rem;
    height: 4.25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, var(--color-primary-soft), var(--color-layer));
    color: var(--color-primary-active);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-xs);
}

.account-summary-card__copy {
    min-width: 0;
}

.account-summary-card__copy p,
.account-summary-card__copy span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-summary-card__copy h2 {
    margin: var(--space-1) 0;
    overflow: hidden;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-detail-list {
    display: grid;
    gap: 0;
}

.account-detail-list > div {
    display: grid;
    min-width: 0;
    padding: var(--space-3) 0;
    align-items: center;
    grid-template-columns: minmax(7rem, 0.75fr) minmax(0, 1.25fr);
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.account-detail-list dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-detail-list dd {
    overflow: hidden;
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-inline-actions,
.account-card-footer {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.account-inline-actions .ui-button {
    flex: 1 1 auto;
}

.account-card-footer--end {
    justify-content: flex-end;
}

.account-card-footer > p {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-info-list {
    display: grid;
    gap: 0;
}

.account-info-list .ui-info-row {
    padding: var(--space-3) 0;
}

.account-info-list .ui-info-row:first-child {
    padding-top: 0;
}

.account-info-list .ui-info-row:last-child {
    padding-bottom: 0;
}

.account-info-list .ui-info-row + .ui-info-row {
    border-top: 1px solid var(--color-border);
}

.account-form-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.account-form-grid .form-group,
.account-form-stack .form-group {
    min-width: 0;
}

.account-form-grid .form-group + .form-group,
.account-form-stack .form-group + .form-group {
    margin-top: 0;
}

.account-form-grid__wide {
    grid-column: 1 / -1;
}

.account-form-stack {
    display: grid;
    gap: var(--space-4);
}

.account-create-card,
.account-create-card .ui-card__body {
    height: 100%;
}

.account-create-card__content {
    display: flex;
    height: 100%;
    min-height: 15.5rem;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-4);
}

.account-create-card__icon,
.account-settings-workspace__icon,
.account-session-row__icon,
.account-overview-card__icon,
.account-plan-card__icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
}

.account-create-card__content h3,
.account-preference-row h3,
.account-danger-card__content h3,
.account-session-row h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.account-create-card__content p,
.account-preference-row p,
.account-danger-card__content p,
.account-session-row p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.account-create-card__content .ui-button {
    margin-top: auto;
}

.account-overview-grid {
    align-items: stretch;
}

.account-overview-card {
    display: grid;
    min-width: 0;
    min-height: 8.75rem;
    padding: var(--space-4);
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 8% -12%, var(--color-card-glass-highlight), transparent 44%),
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

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

.account-overview-card p,
.account-overview-card span:not(.ui-status-badge):not(.account-overview-card__icon) {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-overview-card h2 {
    margin: var(--space-1) 0;
    overflow: hidden;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-plan-card__hero {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-4);
}

.account-plan-card__hero > div {
    min-width: 0;
}

.account-plan-card__hero p {
    color: var(--color-primary-active);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.account-plan-card__hero h2 {
    margin: var(--space-1) 0 var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.account-plan-card__hero span,
.account-plan-card__features span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-plan-card__features {
    display: flex;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
}

.account-plan-card__features span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.account-plan-card__features .ui-icon {
    color: var(--color-success);
}

.account-compact-empty-card .ui-empty-state {
    min-height: 12rem;
    padding: var(--space-4);
}

.account-invoice-card .ui-empty-state {
    min-height: 12rem;
}

.account-settings-workspace,
.account-session-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.account-settings-workspace > div,
.account-session-row > div {
    min-width: 0;
}

.account-settings-workspace p,
.account-settings-workspace span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.account-settings-workspace h2 {
    margin: var(--space-1) 0;
    overflow: hidden;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-session-row .ui-status-badge {
    margin-left: auto;
}

/* Provider integrations */
/*
 * Integrations directory. The page is a workspace surface: at desktop widths the
 * two sections share one viewport so the whole catalogue reads without scrolling.
 * Each tile carries its provider hue via the inline --integration-accent custom
 * property, tinted here so light and dark themes stay legible.
 */

.integrations-page {
    --integration-gap: clamp(0.5rem, 1.25vh, 0.85rem);
    --integration-pad: clamp(0.75rem, 1.6vh, 1rem);
    --integration-mark: clamp(1.9rem, 3.8vh, 2.35rem);
    --integration-switch-w: 2.375rem;
    --integration-switch-h: 1.3125rem;
    --integration-switch-knob: 0.9375rem;
    display: flex;
    min-width: 0;
    padding: var(--space-1) var(--space-2) var(--space-3);
    flex-direction: column;
    gap: clamp(var(--space-3), 2vh, var(--space-5));
}

.integrations-section {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: var(--integration-gap);
}

.integrations-section__header {
    flex: 0 0 auto;
}

.integrations-section__header h2 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.integrations-section__header p {
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.integrations-grid {
    display: grid;
    min-width: 0;
    align-items: stretch;
    gap: var(--integration-gap);
}

.integrations-grid--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.integrations-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * Tile shape follows the product reference: mark + name + switch on one row,
 * a shrinkable body, then a full-width bordered action row pinned to the base
 * so every card in a row lines its footer up regardless of body length.
 */
.integration-tile {
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: var(--integration-pad);
    flex-direction: column;
    gap: var(--integration-gap);
    border: 1px solid var(--color-card-glass-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 6% -10%, color-mix(in srgb, var(--integration-accent) 9%, transparent), transparent 58%),
        linear-gradient(145deg, var(--color-card-glass-strong), var(--color-card-glass));
    background-clip: padding-box;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    transition: transform var(--transition-base) var(--ease-standard), box-shadow var(--transition-base) var(--ease-standard), border-color var(--transition-base) var(--ease-standard);
}

.integration-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--integration-accent) 34%, var(--color-card-glass-border));
    box-shadow: var(--shadow-soft);
}

.integration-tile__head {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
}

.integration-tile__mark {
    display: grid;
    width: var(--integration-mark);
    height: var(--integration-mark);
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--integration-accent) 24%, transparent);
    border-radius: calc(var(--integration-mark) * 0.3);
    background: color-mix(in srgb, var(--integration-accent) 13%, transparent);
    color: var(--integration-accent);
}

.integration-tile__name {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
}

/* The body is the only part allowed to give up space on short viewports. */
.integration-tile__body {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-1);
    overflow: hidden;
}

/* One compact line carries connection state plus the connected account. */
.integration-tile__status {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 0.375rem;
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
}

.integration-tile__status-label {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.integration-tile__status--success .integration-tile__status-label {
    color: var(--color-success-strong);
}

.integration-tile__status--warning .integration-tile__status-label {
    color: var(--color-warning-strong);
}

.integration-tile__status--danger .integration-tile__status-label {
    color: var(--color-danger-strong);
}

.integration-tile__status--info .integration-tile__status-label {
    color: var(--integration-accent);
}

.integration-tile__status-meta {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-tile__status-meta::before {
    margin-right: 0.375rem;
    content: "\00b7";
}

.integration-tile__description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.integration-tile__capabilities {
    display: grid;
    margin-top: 0.125rem;
    gap: 0.25rem;
    list-style: none;
}

.integration-tile__capabilities li {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-snug);
}

.integration-tile__capabilities span {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-soft);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-tile__capabilities strong {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

.integration-tile__capabilities strong.is-available {
    color: var(--color-success-strong);
}

.integration-tile__capabilities strong.is-unavailable {
    color: var(--color-warning-strong);
}

.integration-tile__locked {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.375rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
}

.integration-tile__locked .ui-icon {
    flex: 0 0 auto;
    transform: translateY(0.125rem);
}

.integration-tile__notice {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-warning-strong);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-normal);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Switch: link, button, or inert span — all share one track/knob rendering. */
.integration-switch {
    position: relative;
    display: block;
    width: var(--integration-switch-w);
    height: var(--integration-switch-h);
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    appearance: none;
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}

.integration-switch::after {
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: var(--integration-switch-knob);
    height: var(--integration-switch-knob);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    content: "";
    transform: translateY(-50%);
    transition: transform var(--transition-base) var(--ease-standard);
}

.integration-switch.is-on {
    background: var(--integration-accent);
    box-shadow: inset 0 0 0 1px var(--integration-accent);
}

.integration-switch.is-on::after {
    transform: translate(calc(var(--integration-switch-w) - var(--integration-switch-knob) - 0.375rem), -50%);
}

.integration-switch--warning.is-on {
    background: var(--color-warning-strong);
    box-shadow: inset 0 0 0 1px var(--color-warning-strong);
}

.integration-switch.is-disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Always-on integrations read at full strength — they are active, not greyed. */
.integration-switch.is-locked {
    cursor: default;
    opacity: 1;
}

.integration-switch:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.integration-tile__footer {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
}

.integration-tile__footer,
.integration-tile__footer form {
    width: 100%;
    margin: 0;
}

/* The reference "Learn More" row: label left, affordance icon right. */
.integration-tile__action {
    display: flex;
    width: 100%;
    min-height: 2.125rem;
    padding: 0 var(--space-3);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text-soft);
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition-fast) var(--ease-standard), background var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}

.integration-tile__action > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-tile__action .ui-icon {
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.integration-tile__action:hover:not(.is-disabled):not(.is-loading) {
    border-color: color-mix(in srgb, var(--integration-accent) 40%, var(--color-border));
    background: color-mix(in srgb, var(--integration-accent) 8%, transparent);
    color: var(--color-text);
}

.integration-tile__action:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.integration-tile__action.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Informational row on an active integration: stated, not dimmed out. */
.integration-tile__action--on {
    border-color: color-mix(in srgb, var(--color-success-strong) 30%, transparent);
    background: color-mix(in srgb, var(--color-success-strong) 7%, transparent);
    color: var(--color-success-strong);
    cursor: default;
    opacity: 1;
}

.integration-tile__action--on .ui-icon {
    color: var(--color-success-strong);
}

.integration-tile__action.is-loading {
    cursor: progress;
    opacity: 0.7;
    pointer-events: none;
}

/*
 * Desktop: the page is sized to the viewport so every tile is reachable
 * without scrolling. Only the tile bodies flex, so heads and action rows
 * stay put while the sections share whatever height is left.
 */
@media (min-width: 64rem) {
    /* "safe" keeps the top reachable if a very short viewport ever overflows. */
    .has-js .app-page--integrations .integrations-page {
        height: 100%;
        min-height: 0;
        justify-content: safe center;
    }

    .has-js .app-page--integrations .ui-page-header {
        flex: 0 0 auto;
    }

    /* Sections keep their natural height but give it up before the page does. */
    .has-js .app-page--integrations .integrations-section,
    .has-js .app-page--integrations .integrations-grid {
        min-height: 0;
        flex: 0 1 auto;
    }
}

.account-preference-list {
    display: grid;
}

.account-preference-row {
    display: flex;
    min-width: 0;
    padding: var(--space-4) 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.account-preference-row:first-child {
    padding-top: 0;
}

.account-preference-row:last-child {
    padding-bottom: 0;
}

.account-preference-row + .account-preference-row {
    border-top: 1px solid var(--color-border);
}

.account-preference-row > div {
    min-width: 0;
}

.account-preference-row__toggle {
    flex: 0 0 auto;
}

.account-preference-row__toggle > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.account-danger-card {
    border-color: var(--color-danger);
}

.account-danger-card__content {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.account-danger-card__content > div {
    min-width: 0;
}

/* Event workspace: single-screen board, module cards and list rail. */

.event-overview__card-lede {
    display: flex;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-overview__card-lede > div {
    min-width: 0;
}

.event-overview__card-lede > div > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-overview__card-lede strong {
    display: block;
    letter-spacing: var(--letter-spacing-tight);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
}

.event-overview__card-lede strong span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.event-overview__card-lede p {
    margin-top: var(--space-1);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__gauge {
    --gauge-value: 0;
    --gauge-color: var(--color-primary);
    position: relative;
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: conic-gradient(var(--gauge-color) calc(var(--gauge-value) * 1%), var(--color-surface-muted) 0);
}

.event-overview__gauge::after {
    position: absolute;
    inset: 0.4375rem;
    border-radius: inherit;
    background: var(--color-surface);
    content: "";
}

.event-overview__gauge > span {
    position: relative;
    z-index: 1;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
}

.event-overview__tile-grid {
    display: grid;
    margin-top: var(--space-2);
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__tile-grid--quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.event-overview__tile {
    display: grid;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-overview__tile > span {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-overview__tile > strong {
    margin-top: var(--space-1);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
}

.event-overview__tile-grid--quad .event-overview__tile {
    padding: var(--space-2);
}

.event-overview__tile-grid--quad .event-overview__tile > span {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
}

.event-overview__tile-grid--quad .event-overview__tile > strong {
    font-size: var(--font-size-lg);
}

.event-overview__tile.is-going,
.event-overview__tile.is-verified {
    background: var(--color-success-soft);
    color: var(--color-success-strong);
}

.event-overview__tile.is-declined {
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
}

.event-overview__tile.is-maybe,
.event-overview__tile.is-unverified {
    background: var(--color-warning-soft);
    color: var(--color-warning-strong);
}

.event-overview__tile.is-awaiting {
    background: var(--color-info-soft);
    color: var(--color-info-strong);
}

.event-overview__module-list {
    display: grid;
    margin-top: var(--space-2);
    gap: var(--space-2);
}

.event-overview__module-list--flush {
    margin-top: 0;
}

.event-overview__module-row {
    display: flex;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.event-overview__module-row > div {
    min-width: 0;
    flex: 1;
}

.event-overview__module-row strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: var(--font-size-sm);
}

.event-overview__module-row p {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__module-row > .ui-status-badge,
.event-overview__module-row > .ui-icon-button,
.event-overview__module-row > form {
    flex: 0 0 auto;
    margin: 0;
}

.event-overview__module-row.is-disabled {
    opacity: 0.62;
}

.event-overview__link-field {
    display: flex;
    min-width: 0;
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-layer-soft);
}

.event-overview__link-field code,
.event-overview__link-field input {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--color-text-soft);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__link-field input:focus {
    outline: none;
}

.event-overview__action-row {
    display: flex;
    margin-top: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.event-overview__action-row form {
    margin: 0;
}

.event-overview__action-row--footer {
    margin-top: auto;
    padding-top: var(--space-2);
}

.event-overview__meta-row {
    display: flex;
    margin-top: auto;
    padding-top: var(--space-2);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.event-overview__meta-row strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.event-overview__meta-row .event-overview__accent-link {
    margin-top: 0;
}

.event-overview__credit-grid {
    display: grid;
    margin-top: var(--space-2);
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-overview__credit-grid > div {
    display: grid;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-layer-soft);
}

.event-overview__credit-grid span {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-overview__credit-grid strong {
    margin-top: var(--space-1);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
}

.event-overview__response-list {
    display: grid;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    gap: var(--space-1);
    border-top: 1px solid var(--color-border);
}

.event-overview__response-list > p {
    color: var(--color-text-faint);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.event-overview__response-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.event-overview__response-row > div {
    min-width: 0;
    flex: 1;
}

.event-overview__response-row strong {
    display: block;
    overflow: hidden;
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-overview__response-time {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.event-overview__response-row .event-overview__attendee-avatar {
    width: 1.625rem;
    height: 1.625rem;
    border-width: 0;
}

.event-overview__consequences {
    display: grid;
    gap: var(--space-1);
}

.event-overview__consequences > div {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.event-overview__consequences svg {
    margin-top: 0.15rem;
    color: var(--color-text-faint);
}

.event-settings__danger-card {
    border-color: var(--color-danger-border);
    background:
        radial-gradient(circle at 12% 0%, var(--color-danger-soft), transparent 62%),
        var(--color-card-glass-strong);
}

.event-settings__danger-card .ui-card__title {
    color: var(--color-danger-strong);
}

.event-overview__board .ui-activity-list {
    margin-top: var(--space-1);
}

.event-overview__board .ui-activity-list__item {
    padding: 0 0 var(--space-3) var(--space-6);
    gap: var(--space-2);
}

.event-overview__board .ui-activity-list__item.is-done::before {
    background: var(--color-success-strong);
    box-shadow: 0 0 0 2px var(--color-success-soft);
}

.event-overview__board .ui-activity-list__item.is-next::before {
    background: var(--color-warning-strong);
    box-shadow: 0 0 0 2px var(--color-warning-soft);
}

.event-overview__board .ui-activity-list__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.event-overview__board .ui-activity-list__time {
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.event-settings-page,
.workspace-page {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
}

.app-page--event-board .ui-page-header,
.app-page--event-workspace .ui-page-header {
    align-items: center;
    gap: var(--space-6);
}

.app-page--event-board .ui-breadcrumbs,
.app-page--event-workspace .ui-breadcrumbs {
    margin-bottom: var(--space-1);
}

.app-page--event-board .ui-page-header__eyebrow,
.app-page--event-workspace .ui-page-header__eyebrow {
    margin-bottom: 0;
    font-size: var(--font-size-xs);
}

.app-page--event-board .ui-page-description,
.app-page--event-workspace .ui-page-description {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
}

.workspace-rail {
    display: grid;
    min-width: 0;
    padding: 0 var(--space-2);
    align-items: stretch;
    gap: var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace-rail .event-overview__card {
    height: 100%;
}

.workspace-body {
    min-width: 0;
    padding: 0 var(--space-2);
}

.workspace-table-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: var(--color-card-glass-strong);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.workspace-table-card.ui-card--compact .ui-card__header {
    padding: var(--space-3) var(--space-3) 0;
}

.workspace-table-card.ui-card--compact .ui-card__body {
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.workspace-table-card .ui-card__title {
    font-size: var(--font-size-sm);
}

.workspace-table-card .ui-card__subtitle {
    margin-top: 0;
    font-size: var(--font-size-2xs);
}

.workspace-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.workspace-toolbar form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.workspace-toolbar .form-input-wrap {
    width: 15rem;
}

.workspace-toolbar .form-control {
    min-height: 2.25rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
}

.event-logs__header {
    flex-direction: column;
    gap: var(--space-3);
}

.event-logs__toolbar {
    width: 100%;
}

.workspace-toolbar .event-logs__filters {
    display: grid;
    width: 100%;
    min-width: 0;
    align-items: center;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workspace-toolbar .event-logs__filters .form-input-wrap {
    width: 100%;
}

.event-logs__filters .form-control,
.event-logs__filters .form-select {
    width: 100%;
    min-height: 2.25rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
}

.event-logs__filter-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.event-logs__filter-actions .ui-button {
    width: 100%;
    min-width: 0;
    flex: 1 1 0;
}

.event-logs__table .table-base {
    min-width: 68rem;
}

.event-logs__table small {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.event-logs__activity {
    align-items: flex-start;
}

.event-logs__activity .event-attendees__avatar {
    flex: 0 0 auto;
}

.event-logs__time {
    white-space: nowrap;
}

@media (max-width: 63.99rem) {
    .workspace-toolbar .event-logs__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.99rem) {
    .workspace-toolbar .event-logs__filters {
        grid-template-columns: minmax(0, 1fr);
    }
}

.workspace-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.workspace-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.3125rem var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

a.workspace-chip:hover {
    border-color: var(--color-text-faint);
    color: var(--color-text);
}

.workspace-chip.is-active {
    border-color: transparent;
    background: var(--color-action);
    color: var(--color-action-contrast);
}

.workspace-chip__count {
    font-weight: var(--font-weight-semibold);
    opacity: 0.72;
}

.workspace-table {
    min-width: 0;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    -webkit-overflow-scrolling: touch;
}

.workspace-table .table-base {
    min-width: 46rem;
}

.workspace-table .table-base thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-2) var(--space-3);
}

.workspace-table .table-base td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

.workspace-person {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.workspace-person__avatar {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.workspace-person__meta {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-regular);
}

.workspace-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}

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

.workspace-table-foot {
    display: flex;
    margin-top: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.workspace-table-foot strong {
    color: var(--color-text);
}

@media (min-width: 64rem) {
    .has-js .app-page--event-board .event-overview-page,
    .has-js .app-page--event-board .event-settings-page,
    .has-js .app-page--event-workspace .workspace-page {
        display: flex;
        height: 100%;
        min-height: 0;
        flex-direction: column;
    }

    .has-js .app-page--event-board .ui-page-header,
    .has-js .app-page--event-board .ui-alert,
    .has-js .app-page--event-board .app-success-feedback,
    .has-js .app-page--event-workspace .ui-page-header,
    .has-js .app-page--event-workspace .workspace-rail {
        flex: 0 0 auto;
    }

    .has-js .app-page--event-board .ui-page-title,
    .has-js .app-page--event-workspace .ui-page-title {
        font-size: clamp(1.375rem, 1.8vw, 1.75rem);
    }

    .has-js .app-page--event-board .ui-page-description,
    .has-js .app-page--event-workspace .ui-page-description {
        margin-top: 0;
    }

    .has-js .app-page--event-board .event-overview__tab-panel {
        min-height: 0;
        flex: 1 1 auto;
        align-content: stretch;
        grid-template-rows: minmax(0, 1fr);
    }

    .has-js .app-page--event-board .event-overview__board {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .has-js .app-page--event-board .event-overview__card {
        min-height: 0;
        overflow: hidden;
    }

    .has-js .app-page--event-board .event-overview__card > .ui-card__body {
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-color: var(--color-neutral) transparent;
        scrollbar-width: thin;
    }

    /*
     * The Event details card and the board's module cards pin their primary
     * actions / footer link outside the scroll area, so only the middle
     * content scrolls and the action buttons or footer are never scrolled
     * out of view. See .event-overview__reference-scroll / .event-overview__card-scroll.
     */
    .has-js .app-page--event-board .event-overview__main-card > .ui-card__body,
    .has-js .app-page--event-board .event-overview__rsvp-card > .ui-card__body,
    .has-js .app-page--event-board .event-overview__verification-card > .ui-card__body,
    .has-js .app-page--event-board .event-overview__public-card > .ui-card__body,
    .has-js .app-page--event-board .event-overview__automation-card > .ui-card__body,
    .has-js .app-page--event-board .event-overview__sync-card > .ui-card__body {
        overflow: hidden;
    }

    .has-js .app-page--event-board .event-overview__reference-scroll,
    .has-js .app-page--event-board .event-overview__rsvp-card .event-overview__card-scroll,
    .has-js .app-page--event-board .event-overview__verification-card .event-overview__card-scroll,
    .has-js .app-page--event-board .event-overview__public-card .event-overview__card-scroll,
    .has-js .app-page--event-board .event-overview__automation-card .event-overview__card-scroll,
    .has-js .app-page--event-board .event-overview__sync-card .event-overview__card-scroll {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-color: var(--color-neutral) transparent;
        scrollbar-width: thin;
    }

    .has-js .app-page--event-board .event-overview__reference-scroll {
        scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }

    .has-js .app-page--event-board .event-overview__description-card .ui-card__body {
        display: block;
    }

    .has-js .app-page--event-workspace .workspace-body {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .has-js .app-page--event-workspace .workspace-table-card {
        min-height: 0;
        flex: 1 1 auto;
    }

    .has-js .app-page--event-workspace .workspace-table-card > .ui-card__body {
        display: flex;
        min-height: 0;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
    }

    .has-js .app-page--event-workspace .workspace-table {
        min-height: 0;
        flex: 1 1 auto;
    }

    .has-js .app-page--event-workspace .workspace-rail .event-overview__card {
        overflow: hidden;
    }
}

/* Board cards keep their primary actions visible; only their content scrolls. */

@media (min-width: 64rem) {
    .has-js .app-page--event-board .event-delivery-automation-card .ui-card__body,
    .has-js .app-page--event-board .event-public-registration-card .ui-card__body {
        display: flex;
        min-height: 0;
        flex-direction: column;
        gap: var(--space-2);
        overflow: hidden;
    }

    .has-js .app-page--event-board .event-delivery-automation-card__switches {
        min-height: 0;
        flex: 1 1 auto;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-color: var(--color-neutral) transparent;
        scrollbar-width: thin;
    }

    .has-js .app-page--event-board .event-delivery-automation-card__credits {
        padding: var(--space-2) 0;
    }

    .has-js .app-page--event-board .event-delivery-automation-card__actions,
    .has-js .app-page--event-board .event-public-registration-card__footer,
    .has-js .app-page--event-board .event-public-registration-card > .ui-card__body > form {
        flex: 0 0 auto;
        margin-top: auto;
    }

    .has-js .app-page--event-board .event-public-registration-card__empty,
    .has-js .app-page--event-board .event-public-registration-card__section {
        flex: 0 1 auto;
        min-height: 0;
        overflow: auto;
    }
}