/* MultiApps.UI — base global da biblioteca. Só tokens --ma-*: nenhuma cor, fonte ou tamanho literal (LiteralStyleGate). */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--ma-font-sans);
  font-size: 100%;
  line-height: var(--ma-leading-normal);
  color: var(--ma-text);
  background: var(--ma-bg);
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; min-height: 100vh; font-size: var(--ma-text-sm); }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--ma-link); text-decoration: none; }
a:hover { color: var(--ma-link-hover); text-decoration: underline; }

:focus-visible {
  outline: var(--ma-focus-ring-width) solid var(--ma-focus-ring);
  outline-offset: var(--ma-focus-ring-offset);
}

.ma-scroll-locked, .ma-scroll-locked body { overflow: hidden; }

.ma-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Texto (MaText) */
.ma-text { margin: 0; }
.ma-text--display { font-size: var(--ma-text-3xl); line-height: var(--ma-leading-tight); font-weight: var(--ma-weight-bold); letter-spacing: var(--ma-tracking-tight); }
.ma-text--h1 { font-size: var(--ma-text-2xl); line-height: var(--ma-leading-tight); font-weight: var(--ma-weight-semibold); letter-spacing: var(--ma-tracking-tight); }
.ma-text--h2 { font-size: var(--ma-text-xl); line-height: var(--ma-leading-tight); font-weight: var(--ma-weight-semibold); }
.ma-text--h3 { font-size: var(--ma-text-lg); line-height: var(--ma-leading-tight); font-weight: var(--ma-weight-semibold); }
.ma-text--h4 { font-size: var(--ma-text-base); line-height: var(--ma-leading-tight); font-weight: var(--ma-weight-semibold); }
.ma-text--body { font-size: var(--ma-text-sm); }
.ma-text--body-sm { font-size: var(--ma-text-xs); }
.ma-text--caption { font-size: var(--ma-text-xs); color: var(--ma-text-muted); }
.ma-text--code { font-family: var(--ma-font-mono); font-size: var(--ma-text-xs); background: var(--ma-surface-sunken); padding: 0 var(--ma-space-1); border-radius: var(--ma-radius-sm); }
.ma-color--secondary { color: var(--ma-text-secondary); }
.ma-color--muted { color: var(--ma-text-muted); }
.ma-color--primary { color: var(--ma-primary-text); }
.ma-color--accent { color: var(--ma-accent-text); }
.ma-color--success { color: var(--ma-success-text); }
.ma-color--warning { color: var(--ma-warning-text); }
.ma-color--danger { color: var(--ma-danger-text); }
.ma-color--info { color: var(--ma-info-text); }
/* Matiz de categoria (AppHue): ícone de menu e de página. */
.ma-hue--sky { color: var(--ma-hue-sky); }
.ma-hue--blue { color: var(--ma-hue-blue); }
.ma-hue--violet { color: var(--ma-hue-violet); }
.ma-hue--emerald { color: var(--ma-hue-emerald); }
.ma-hue--teal { color: var(--ma-hue-teal); }
.ma-hue--amber { color: var(--ma-hue-amber); }
.ma-hue--orange { color: var(--ma-hue-orange); }
.ma-hue--rose { color: var(--ma-hue-rose); }

/* Layout (MaStack, MaRow, MaGridLayout) — também usáveis por apps em composição, sem CSS próprio. */
.ma-stack { display: flex; flex-direction: column; }
.ma-row { display: flex; flex-direction: row; align-items: center; }
.ma-wrap { flex-wrap: wrap; }
/* Lista sem marcador nem recuo: itens de um drawer, membros, perfis. */
.ma-list { list-style: none; margin: 0; padding: 0; }
.ma-grid { display: grid; grid-template-columns: repeat(var(--ma-cols, 1), minmax(0, 1fr)); }
.ma-gap-0 { gap: 0; } .ma-gap-1 { gap: var(--ma-space-1); } .ma-gap-2 { gap: var(--ma-space-2); } .ma-gap-3 { gap: var(--ma-space-3); }
.ma-gap-4 { gap: var(--ma-space-4); } .ma-gap-5 { gap: var(--ma-space-5); } .ma-gap-6 { gap: var(--ma-space-6); } .ma-gap-8 { gap: var(--ma-space-8); }
.ma-align-start { align-items: flex-start; } .ma-align-center { align-items: center; } .ma-align-end { align-items: flex-end; }
.ma-align-stretch { align-items: stretch; } .ma-align-baseline { align-items: baseline; }
.ma-justify-start { justify-content: flex-start; } .ma-justify-center { justify-content: center; }
.ma-justify-end { justify-content: flex-end; } .ma-justify-between { justify-content: space-between; }
.ma-cols-1 { --ma-cols: 1; } .ma-cols-2 { --ma-cols: 2; } .ma-cols-3 { --ma-cols: 3; } .ma-cols-4 { --ma-cols: 4; } .ma-cols-6 { --ma-cols: 6; }
@media (min-width: 640px) {
  .ma-sm-cols-1 { --ma-cols: 1; } .ma-sm-cols-2 { --ma-cols: 2; } .ma-sm-cols-3 { --ma-cols: 3; } .ma-sm-cols-4 { --ma-cols: 4; }
}
@media (min-width: 768px) {
  .ma-md-cols-1 { --ma-cols: 1; } .ma-md-cols-2 { --ma-cols: 2; } .ma-md-cols-3 { --ma-cols: 3; } .ma-md-cols-4 { --ma-cols: 4; }
}
@media (min-width: 1024px) {
  .ma-lg-cols-1 { --ma-cols: 1; } .ma-lg-cols-2 { --ma-cols: 2; } .ma-lg-cols-3 { --ma-cols: 3; } .ma-lg-cols-4 { --ma-cols: 4; } .ma-lg-cols-6 { --ma-cols: 6; }
}
@media (min-width: 1280px) {
  .ma-xl-cols-2 { --ma-cols: 2; } .ma-xl-cols-3 { --ma-cols: 3; } .ma-xl-cols-4 { --ma-cols: 4; } .ma-xl-cols-6 { --ma-cols: 6; }
}

/* Formulário e campos (spec 0005). Também estilizam os controles nativos das páginas de conta. */
.ma-form, .ma-form__fields { display: flex; flex-direction: column; gap: var(--ma-space-4); }
.ma-form__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--ma-space-2); }
.ma-field { display: flex; flex-direction: column; gap: var(--ma-space-1); min-width: 0; }
fieldset.ma-field { border: 0; padding: 0; margin: 0; }
.ma-field__required { color: var(--ma-danger-text); margin-left: var(--ma-space-1); }
.ma-field__hint { font-size: var(--ma-text-xs); color: var(--ma-text-muted); }
.ma-field__count { align-self: flex-end; font-size: var(--ma-text-xs); color: var(--ma-text-muted); font-variant-numeric: tabular-nums; }
.ma-field__error { display: flex; flex-direction: column; font-size: var(--ma-text-xs); color: var(--ma-danger-text); }
.ma-control { position: relative; display: flex; align-items: center; min-width: 0; }
.ma-control > .ma-input { flex: 1; min-width: 0; width: 100%; }
.ma-control__icon { position: absolute; left: var(--ma-control-padding-x); color: var(--ma-text-muted); pointer-events: none; }
.ma-control--icon > .ma-input { padding-left: calc(var(--ma-control-padding-x) * 2 + var(--ma-space-4)); }
.ma-control__affix { flex: none; color: var(--ma-text-muted); font-size: var(--ma-text-sm); }
.ma-control--affixed {
  height: var(--ma-control-height-md); padding: 0 var(--ma-control-padding-x); gap: var(--ma-space-1);
  border: var(--ma-border-width) solid var(--ma-control-border); border-radius: var(--ma-control-radius); background: var(--ma-control-bg);
}
.ma-control--affixed:focus-within { border-color: var(--ma-focus-ring); box-shadow: 0 0 0 calc(var(--ma-focus-ring-width) * 1.5) color-mix(in oklch, var(--ma-focus-ring) 25%, transparent); }
.ma-control--affixed > .ma-input { height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; }
.ma-control--affixed.ma-control--invalid { border-color: var(--ma-danger); }
.ma-control--sm > .ma-input { height: var(--ma-control-height-sm); font-size: var(--ma-text-xs); }
.ma-control--lg > .ma-input { height: var(--ma-control-height-lg); font-size: var(--ma-text-base); }
.ma-control--multiline > .ma-input { height: auto; min-height: calc(var(--ma-control-height-md) * 2); padding: var(--ma-space-2) var(--ma-control-padding-x); resize: vertical; }
.ma-control--invalid > .ma-input, .ma-control--invalid .ma-input { border-color: var(--ma-danger); }
.ma-control--invalid > .ma-input:focus-visible, .ma-control--invalid .ma-input:focus-visible, .ma-control--affixed.ma-control--invalid:focus-within,
.ma-input[aria-invalid="true"]:focus-visible {
  border-color: var(--ma-danger); box-shadow: 0 0 0 calc(var(--ma-focus-ring-width) * 1.5) color-mix(in oklch, var(--ma-danger) 25%, transparent);
}
.ma-input[aria-invalid="true"] { border-color: var(--ma-danger); }
.ma-input:disabled { background: var(--ma-surface-sunken); color: var(--ma-text-disabled); cursor: not-allowed; }
.ma-input[readonly] { background: var(--ma-surface-sunken); }
.ma-select > .ma-input, .ma-combobox > .ma-input { padding-right: calc(var(--ma-control-padding-x) * 2 + var(--ma-space-4)); }
.ma-select > .ma-input { appearance: none; cursor: pointer; }
.ma-combobox--clearable > .ma-input { padding-right: calc(var(--ma-control-padding-x) * 2 + var(--ma-space-4) + var(--ma-control-height-sm)); }
.ma-combobox .ma-combobox__clear { position: absolute; right: calc(var(--ma-control-padding-x) + var(--ma-space-4) + var(--ma-space-1)); }
.ma-select__chevron { position: absolute; right: var(--ma-control-padding-x); color: var(--ma-text-muted); pointer-events: none; }
.ma-combobox__list {
  /* Ancorada pelo ma.js em position: fixed, por cima de tudo, inclusive de um modal (spec 0071). Antes do JavaScript,
     fica logo abaixo do campo. */
  position: absolute; top: calc(100% + var(--ma-space-1)); left: 0; z-index: var(--ma-z-dropdown);
  /* Pelo menos a largura do campo, e cresce até o texto mais longo: a opção não quebra (revisão da v0.3, ajuste 4). */
  min-width: var(--ma-anchor-width, 100%); width: max-content; max-width: min(calc(var(--ma-space-16) * 8), 90vw);
  max-height: min(calc(var(--ma-space-16) * 5), var(--ma-floating-max-height, 100vh)); overflow-y: auto; margin: 0; padding: var(--ma-space-1); list-style: none;
  background: var(--ma-surface-raised); color: var(--ma-text);
  border: var(--ma-border-width) solid var(--ma-border); border-radius: var(--ma-radius-md); box-shadow: var(--ma-shadow-lg);
}
.ma-combobox__option { padding: var(--ma-space-2) var(--ma-space-3); border-radius: var(--ma-radius-sm); font-size: var(--ma-text-sm); cursor: pointer; }
.ma-combobox__option:hover, .ma-combobox__option--active { background: var(--ma-primary-subtle); color: var(--ma-on-primary-subtle); }
.ma-combobox__option[aria-selected="true"] { font-weight: var(--ma-weight-semibold); }
.ma-combobox__status { display: flex; align-items: center; gap: var(--ma-space-2); padding: var(--ma-space-2) var(--ma-space-3); color: var(--ma-text-muted); font-size: var(--ma-text-sm); }
.ma-multiselect {
  flex-wrap: wrap; gap: var(--ma-space-1); min-height: var(--ma-control-height-md); padding: var(--ma-space-1);
  border: var(--ma-border-width) solid var(--ma-control-border); border-radius: var(--ma-control-radius); background: var(--ma-control-bg);
}
.ma-multiselect:focus-within { border-color: var(--ma-focus-ring); box-shadow: 0 0 0 calc(var(--ma-focus-ring-width) * 1.5) color-mix(in oklch, var(--ma-focus-ring) 25%, transparent); }
.ma-multiselect > .ma-input { flex: 1; width: auto; min-width: calc(var(--ma-space-16) * 2); height: calc(var(--ma-control-height-md) - var(--ma-space-3)); border: 0; background: transparent; box-shadow: none; }
.ma-check { gap: var(--ma-space-1); }
.ma-check__label { display: inline-flex; align-items: center; gap: var(--ma-space-2); font-size: var(--ma-text-sm); cursor: pointer; }
.ma-check__label:has(:disabled) { opacity: 0.6; cursor: not-allowed; }
.ma-checkbox__input, .ma-radio__input { width: var(--ma-space-4); height: var(--ma-space-4); margin: 0; accent-color: var(--ma-primary); }
.ma-switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ma-switch__track {
  position: relative; flex: none; width: var(--ma-space-9); height: var(--ma-space-5);
  border-radius: var(--ma-radius-full); background: var(--ma-border-strong);
  transition: background var(--ma-duration-fast) var(--ma-ease-standard);
}
.ma-switch__track::after {
  content: ""; position: absolute; top: calc(var(--ma-space-1) / 2); left: calc(var(--ma-space-1) / 2);
  width: var(--ma-space-4); height: var(--ma-space-4); border-radius: var(--ma-radius-full);
  background: var(--ma-surface-raised); box-shadow: var(--ma-shadow-xs);
  transition: transform var(--ma-duration-fast) var(--ma-ease-standard);
}
.ma-switch__input:checked + .ma-switch__track { background: var(--ma-primary); }
.ma-switch__input:checked + .ma-switch__track::after { transform: translateX(var(--ma-space-4)); }
.ma-switch__input:focus-visible + .ma-switch__track { outline: var(--ma-focus-ring-width) solid var(--ma-focus-ring); outline-offset: var(--ma-focus-ring-offset); }
.ma-radio-group { display: flex; flex-direction: column; gap: var(--ma-space-2); }
.ma-radio-group--horizontal { flex-direction: row; flex-wrap: wrap; gap: var(--ma-space-4); }
.ma-search { min-width: calc(var(--ma-space-16) * 3); }
.ma-search > .ma-input { padding-right: calc(var(--ma-control-height-sm) + var(--ma-space-2)); }
.ma-search .ma-search__clear { position: absolute; right: var(--ma-space-1); }
.ma-search > .ma-input::-webkit-search-cancel-button { display: none; }
.ma-label {
  font-size: var(--ma-label-size); font-weight: var(--ma-label-weight); color: var(--ma-label-color);
  text-transform: var(--ma-label-transform); letter-spacing: var(--ma-label-tracking);
}
.ma-input {
  height: var(--ma-control-height-md);
  padding: 0 var(--ma-control-padding-x);
  border: var(--ma-border-width) solid var(--ma-control-border);
  border-radius: var(--ma-control-radius);
  background: var(--ma-control-bg);
  color: var(--ma-text); font-size: var(--ma-text-sm);
  transition: border-color var(--ma-duration-fast) var(--ma-ease-standard), box-shadow var(--ma-duration-fast) var(--ma-ease-standard);
}
.ma-input::placeholder { color: var(--ma-control-placeholder); }
.ma-input:focus-visible { outline: none; border-color: var(--ma-focus-ring); box-shadow: 0 0 0 calc(var(--ma-focus-ring-width) * 1.5) color-mix(in oklch, var(--ma-focus-ring) 25%, transparent); }

/* Tabela simples (Sobre, catálogo). O MaGrid da spec 0005 tem o seu. */
.ma-table { width: 100%; border-collapse: collapse; font-size: var(--ma-text-sm); }
.ma-table th {
  text-align: left; font-weight: var(--ma-weight-medium); color: var(--ma-text-secondary);
  padding: var(--ma-space-2) var(--ma-space-3); border-bottom: var(--ma-border-width) solid var(--ma-border);
  background: var(--ma-surface-sunken);
}
.ma-table td { padding: var(--ma-space-2) var(--ma-space-3); border-bottom: var(--ma-border-width) solid var(--ma-divider); }
.ma-table tr:last-child td { border-bottom: 0; }

/* Grade de dados (spec 0005): MaGrid, MaGridRow, MaPagination e MaFilterBar. */
.ma-datagrid { display: flex; flex-direction: column; gap: var(--ma-space-3); min-width: 0; }
.ma-datagrid__scroll {
  position: relative; overflow: auto; background: var(--ma-surface);
  border: var(--ma-border-width) solid var(--ma-border); border-radius: var(--ma-radius-xl); box-shadow: var(--ma-shadow-card);
}
.ma-datagrid--virtual .ma-datagrid__scroll { max-height: calc(var(--ma-space-16) * 10); }
.ma-datagrid__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ma-text-sm); }
.ma-datagrid__th {
  position: sticky; top: 0; z-index: 1; height: calc(var(--ma-space-10) * var(--ma-density)); padding: 0 var(--ma-space-4);
  text-align: left; white-space: nowrap; background: var(--ma-surface-sunken); border-bottom: var(--ma-border-width) solid var(--ma-border);
  font-size: var(--ma-label-size); font-weight: var(--ma-label-weight); text-transform: var(--ma-label-transform);
  letter-spacing: var(--ma-label-tracking); color: var(--ma-label-color);
}
.ma-datagrid__sort {
  display: inline-flex; align-items: center; gap: var(--ma-space-1); padding: 0; border: 0; background: transparent;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.ma-datagrid__sort:hover { color: var(--ma-text); }
.ma-datagrid__th--sorted { color: var(--ma-text); }
.ma-datagrid__td { height: var(--ma-table-row-height); padding: var(--ma-space-2) var(--ma-space-4); color: var(--ma-text); border-bottom: var(--ma-border-width) solid var(--ma-divider); }
.ma-control--mono .ma-input { font-family: var(--ma-font-mono); font-size: var(--ma-text-sm); }
.ma-datagrid__cell--mono { font-family: var(--ma-font-mono); font-size: var(--ma-text-xs); white-space: nowrap; }
.ma-datagrid__cell--emphasis { font-weight: var(--ma-weight-medium); color: var(--ma-text); white-space: nowrap; }
.ma-datagrid__empty-value { color: var(--ma-text-muted); }
.ma-datagrid__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--ma-space-0); }
.ma-datagrid--dense .ma-datagrid__th, .ma-datagrid--dense .ma-datagrid__td { height: calc(var(--ma-table-row-height) * 0.8); }
.ma-datagrid__row:last-child > .ma-datagrid__td { border-bottom: 0; }
.ma-datagrid__row--clickable { cursor: pointer; }
.ma-datagrid__row--clickable:hover > .ma-datagrid__td { background: var(--ma-surface-hover); }
.ma-datagrid__row--clickable:focus-visible { outline: var(--ma-focus-ring-width) solid var(--ma-focus-ring); outline-offset: calc(var(--ma-focus-ring-width) * -1); }
.ma-datagrid__row--selected > .ma-datagrid__td { background: var(--ma-primary-subtle); color: var(--ma-on-primary-subtle); }
.ma-datagrid__row--skeleton > td { padding: var(--ma-space-2) var(--ma-space-3); }
.ma-datagrid__row--empty > td { padding: var(--ma-space-6); }
.ma-datagrid__select { width: var(--ma-space-10); text-align: center; }
.ma-datagrid__cell--center { text-align: center; }
.ma-datagrid__cell--end { text-align: right; }
.ma-datagrid__cell--w-xs { width: var(--ma-space-16); }
.ma-datagrid__cell--w-sm { width: calc(var(--ma-space-16) * 2); }
.ma-datagrid__cell--w-md { width: calc(var(--ma-space-16) * 3); }
.ma-datagrid__cell--w-lg { width: calc(var(--ma-space-16) * 4); }
.ma-datagrid__cell--w-xl { width: calc(var(--ma-space-16) * 6); }
.ma-datagrid__cell--sticky { position: sticky; left: 0; z-index: 1; background: var(--ma-surface); }
.ma-datagrid__th.ma-datagrid__cell--sticky { z-index: 2; background: var(--ma-surface-sunken); }
@media (max-width: 1535px) { .ma-datagrid__cell--hide-below-xxl { display: none; } }
@media (max-width: 1279px) { .ma-datagrid__cell--hide-below-xl { display: none; } }
@media (max-width: 1023px) { .ma-datagrid__cell--hide-below-lg { display: none; } }
@media (max-width: 767px) { .ma-datagrid__cell--hide-below-md { display: none; } }
.ma-datagrid__overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--ma-surface) 60%, transparent);
}
.ma-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ma-space-3); font-size: var(--ma-text-sm); color: var(--ma-text-secondary); }
.ma-pagination__controls { display: flex; align-items: center; gap: var(--ma-space-1); }
.ma-pagination__size { display: inline-flex; align-items: center; gap: var(--ma-space-2); margin-right: var(--ma-space-3); }
.ma-pagination__size .ma-input { height: var(--ma-control-height-sm); padding: 0 var(--ma-space-2); }
.ma-pagination__page { padding: 0 var(--ma-space-2); font-variant-numeric: tabular-nums; }
.ma-filterbar { display: flex; flex-direction: column; gap: var(--ma-space-2); }
.ma-filterbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ma-space-2); }
.ma-filterbar__search { flex: 1; max-width: calc(var(--ma-space-16) * 5); }
.ma-filterbar__actions { display: flex; align-items: center; gap: var(--ma-space-2); margin-left: auto; }
.ma-filterbar__editor {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--ma-space-3); padding: var(--ma-space-3);
  background: var(--ma-surface-sunken); border: var(--ma-border-width) solid var(--ma-border); border-radius: var(--ma-radius-md);
}
.ma-filterbar__editor-actions { display: flex; gap: var(--ma-space-2); }
.ma-filterbar__choices { display: flex; flex-wrap: wrap; gap: var(--ma-space-3); }
.ma-filterbar__chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ma-space-2); }
.ma-filterbar__count { font-size: var(--ma-text-xs); color: var(--ma-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ma-datagrid__cards { display: grid; grid-template-columns: repeat(var(--ma-cols, 1), minmax(0, 1fr)); gap: var(--ma-space-4); }
.ma-datagrid__card { min-width: 0; }
.ma-datagrid__card--clickable { cursor: pointer; }
.ma-datagrid__card--clickable:focus-visible { outline: var(--ma-focus-ring-width) solid var(--ma-focus-ring); outline-offset: var(--ma-focus-ring-offset); border-radius: var(--ma-radius-xl); }
.ma-datagrid__card--selected > .ma-card { border-color: var(--ma-primary); }
.ma-datagrid__cards-empty { padding: var(--ma-space-6); background: var(--ma-surface); border: var(--ma-border-width) solid var(--ma-border); border-radius: var(--ma-radius-xl); }
@media (min-width: 768px) { .ma-datagrid__cards { --ma-cols: 2; } }
@media (min-width: 1280px) { .ma-datagrid__cards { --ma-cols: 3; } }

/* Aviso de reconexão do circuito (spec 0004, RN-13): aparece depois de 2 s sem conexão. */
#components-reconnect-modal {
  display: none; position: fixed; inset: 0; z-index: var(--ma-z-modal);
  background: var(--ma-backdrop); align-items: center; justify-content: center;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; animation: ma-reconnect-in var(--ma-duration-slow) var(--ma-ease-standard) 2s both; }
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { animation-delay: 0s; }
.ma-reconnect__box {
  display: flex; flex-direction: column; align-items: center; gap: var(--ma-space-3);
  padding: var(--ma-space-6); max-width: var(--ma-container-sm);
  background: var(--ma-surface-raised); color: var(--ma-text);
  border-radius: var(--ma-radius-lg); box-shadow: var(--ma-shadow-xl); text-align: center;
}
.ma-reconnect__failed, .ma-reconnect__reload { display: none; }
.components-reconnect-show .ma-reconnect__waiting { display: block; }
.components-reconnect-failed .ma-reconnect__waiting, .components-reconnect-rejected .ma-reconnect__waiting { display: none; }
.components-reconnect-failed .ma-reconnect__failed, .components-reconnect-rejected .ma-reconnect__failed,
.components-reconnect-failed .ma-reconnect__reload, .components-reconnect-rejected .ma-reconnect__reload { display: block; }
@keyframes ma-reconnect-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes ma-spin { to { transform: rotate(360deg); } }
@keyframes ma-pulse { 50% { opacity: 0.5; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}