/*
 * Componentes da base comum do protótipo. Só para elementos NOVOS (os estilos inline do canvas não mudam).
 * Tudo usa tokens de tokens.css e fica sob `.mr-theme` para vencer o `a{color}` e o
 * `[data-theme="claro"] a{color}` do canvas.css (um link com `.btn` não pode virar azul sobre azul).
 * Alvos interativos têm 44 px de altura mínima; o foco aparece com anel de 2 px no acento.
 * O movimento (transições, animações) fica em motion.css.
 */

/* ---------- Base ---------- */

.mr-theme {
  font-family: var(--mr-font);
  -webkit-text-size-adjust: 100%;
}

/* No tema claro o fundo do body também clareia (rolagem elástica, áreas fora da tela). */
body:has(.mr-theme[data-theme="claro"]) { background: #F3F6FB; }

/*
 * O canvas.css pinta o fundo do tema claro no `:first-child` do wrapper. Como o primeiro filho agora é o
 * <script> do tema, repete aqui o mesmo fundo no `.mr-page` (mesmos valores do canvas; não muda no escuro).
 */
.mr-theme[data-theme="claro"] > .mr-page {
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(0, 113, 255, 0.12), transparent 60%),
    radial-gradient(800px 600px at 100% 110%, rgba(59, 130, 246, 0.10), transparent 60%),
    #F3F6FB !important;
  color: #0F172A !important;
}

.mr-theme :focus-visible {
  outline: 2px solid var(--mr-accent);
  outline-offset: 2px;
}

.mr-theme [hidden] { display: none !important; }
[x-cloak] { display: none !important; }

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

/* ---------- Ícones (Lucide) e logos de marca ---------- */

/* Reserva o espaço antes de o Lucide trocar o <i data-lucide> pelo <svg>. */
.mr-theme .icon,
.mr-theme i[data-lucide] {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
}
.mr-theme .icon-sm { width: 18px; height: 18px; }
.mr-theme .icon-lg { width: 24px; height: 24px; }

.mr-theme .brand-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
}
.mr-theme .brand-icon.icon-sm { width: 18px; height: 18px; }
.mr-theme .brand-icon.icon-lg { width: 24px; height: 24px; }

/* ---------- Botões ---------- */

.mr-theme .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--mr-radius-pill);
  font: 600 15px/1.2 var(--mr-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mr-theme .btn-block { display: flex; width: 100%; }
.mr-theme .btn-icon { width: 44px; padding: 0; }

.mr-theme .btn-primary {
  background: var(--mr-accent-solid);
  color: var(--mr-on-accent);
  box-shadow: var(--mr-shadow-accent);
}
.mr-theme .btn-primary:hover { background: var(--mr-accent-solid-hover); color: var(--mr-on-accent); }
.mr-theme .btn-primary:active { background: var(--mr-accent-solid-active); }

.mr-theme .btn-secondary {
  background: var(--mr-surface);
  border-color: var(--mr-border-strong);
  color: var(--mr-text);
  -webkit-backdrop-filter: var(--mr-blur);
  backdrop-filter: var(--mr-blur);
}
.mr-theme .btn-secondary:hover { background: var(--mr-surface-2); color: var(--mr-text); }
.mr-theme .canvas-toolbar .btn-secondary { background: var(--mr-surface-solid); }

.mr-theme .btn-ghost {
  background: transparent;
  color: var(--mr-text-2);
}
.mr-theme .btn-ghost:hover { background: var(--mr-surface-2); color: var(--mr-text); }

.mr-theme .btn-danger {
  background: var(--mr-err-bg);
  border-color: var(--mr-err-line);
  color: var(--mr-err);
}
.mr-theme .btn-danger:hover { background: var(--mr-err-bg); color: var(--mr-err); }

.mr-theme .btn:disabled,
.mr-theme .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Carregando: o texto fica e um anel gira ao lado (rotação em motion.css). */
.mr-theme .btn.is-loading,
.mr-theme .btn[aria-busy="true"] { pointer-events: none; }
.mr-theme .btn.is-loading::after,
.mr-theme .btn[aria-busy="true"]::after {
  content: "";
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  flex: none;
}

/* ---------- Campos ---------- */

.mr-theme .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--mr-text-2);
}
.mr-theme .field-label { font-size: 13px; font-weight: 500; color: var(--mr-text-2); }
.mr-theme .field-hint { font-size: 12px; line-height: 1.4; color: var(--mr-text-3); }
.mr-theme .field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mr-err);
}

/* Aplica a `.input` e aos controles dentro de `.field` (menos checkbox, radio, range, color, file). */
.mr-theme :is(.input, .field input, .field select, .field textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])) {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--mr-field-border);
  border-radius: var(--mr-radius-md);
  background: var(--mr-field-bg);
  color: var(--mr-text);
  font: 400 15px/1.4 var(--mr-font);
}
.mr-theme textarea:is(.input, .field textarea) { min-height: 96px; resize: vertical; }
.mr-theme :is(.input, .field input, .field textarea)::placeholder { color: var(--mr-text-3); opacity: 1; }
.mr-theme input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]),
.mr-theme textarea { color: var(--mr-text) !important; opacity: 1; }
.mr-theme :is(.input, .field input, .field select, .field textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):hover {
  border-color: var(--mr-accent-line);
}
.mr-theme :is(.input, .field input, .field select, .field textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):focus-visible {
  outline: 2px solid var(--mr-accent);
  outline-offset: 1px;
  border-color: var(--mr-accent);
}
.mr-theme :is(.input, .field input, .field select, .field textarea)[aria-invalid="true"] {
  border-color: var(--mr-err-line);
  background: var(--mr-err-bg);
}
.mr-theme :is(.input, .field input, .field select, .field textarea):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.mr-theme .field :is(input[type="range"], input[type="checkbox"], input[type="radio"]) { accent-color: var(--mr-accent-solid); }

/* Caixa de seleção e opção de rádio com rótulo clicável de 44 px. */
.mr-theme .check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  color: var(--mr-text-2);
  cursor: pointer;
}
.mr-theme .check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--mr-accent-solid); }

/* ---------- Badges de status ---------- */

.mr-theme .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius-pill);
  background: var(--mr-surface);
  color: var(--mr-text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.mr-theme .badge-ok { background: var(--mr-ok-bg); border-color: var(--mr-ok-line); color: var(--mr-ok); }
.mr-theme .badge-warn { background: var(--mr-warn-bg); border-color: var(--mr-warn-line); color: var(--mr-warn); }
.mr-theme .badge-err { background: var(--mr-err-bg); border-color: var(--mr-err-line); color: var(--mr-err); }
.mr-theme .badge-info { background: var(--mr-info-bg); border-color: var(--mr-info-line); color: var(--mr-info); }
.mr-theme .badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---------- Alertas (resumo de erro, aviso, sucesso) ---------- */

.mr-theme .alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--mr-border-strong);
  border-radius: 18px;
  background: var(--mr-surface);
  color: var(--mr-text-2);
  font-size: 13px;
  line-height: 1.5;
}
.mr-theme .alert-title { font-size: 14px; font-weight: 600; color: var(--mr-text); }
.mr-theme .alert-ok { background: var(--mr-ok-bg); border-color: var(--mr-ok-line); }
.mr-theme .alert-ok .alert-title { color: var(--mr-ok); }
.mr-theme .alert-warn { background: var(--mr-warn-bg); border-color: var(--mr-warn-line); }
.mr-theme .alert-warn .alert-title { color: var(--mr-warn); }
.mr-theme .alert-err { background: var(--mr-err-bg); border-color: var(--mr-err-line); }
.mr-theme .alert-err .alert-title { color: var(--mr-err); }
.mr-theme .alert-info { background: var(--mr-info-bg); border-color: var(--mr-info-line); }
.mr-theme .alert-info .alert-title { color: var(--mr-info); }

/* ---------- Abas ---------- */

.mr-theme .tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-theme .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--mr-border-strong);
  border-radius: var(--mr-radius-pill);
  background: var(--mr-surface);
  color: var(--mr-text);
  font: 500 14px/1.2 var(--mr-font);
  cursor: pointer;
}
.mr-theme .tab:hover { background: var(--mr-surface-2); }
.mr-theme .tab[aria-selected="true"],
.mr-theme .tab.is-active {
  background: var(--mr-accent-solid);
  border-color: var(--mr-accent-solid);
  color: var(--mr-on-accent);
  font-weight: 600;
}
.mr-theme .tab-panel { padding-top: 16px; }

/* ---------- Toggle (interruptor) ---------- */
/* <label class="toggle"><input type="checkbox" role="switch"><span class="toggle-ui"></span><span>Texto</span></label> */

.mr-theme .toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 14px;
  color: var(--mr-text-2);
  cursor: pointer;
}
.mr-theme .toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mr-theme .toggle-ui {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  box-sizing: border-box;
  border: 1px solid var(--mr-border-strong);
  border-radius: var(--mr-radius-pill);
  background: var(--mr-border-strong);
  pointer-events: none;
}
.mr-theme .toggle-ui::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.4);
}
.mr-theme .toggle input:checked + .toggle-ui {
  background: var(--mr-accent-solid);
  border-color: var(--mr-accent-solid);
}
.mr-theme .toggle input:checked + .toggle-ui::before { transform: translateX(18px); }
.mr-theme .toggle input:focus-visible + .toggle-ui {
  outline: 2px solid var(--mr-accent);
  outline-offset: 2px;
}
.mr-theme .toggle input:focus-visible { outline: none; } /* o anel fica no .toggle-ui */
.mr-theme .toggle input:disabled { cursor: not-allowed; }
.mr-theme .toggle input:disabled + .toggle-ui { opacity: 0.5; }

/* ---------- Stepper (etapas do wizard) ---------- */

.mr-theme .stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mr-theme .step {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 7px 12px;
  border-radius: var(--mr-radius-pill);
  color: var(--mr-text-2);
  font-size: 13px;
  text-decoration: none;
}
.mr-theme a.step { min-height: 44px; }
.mr-theme .step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mr-surface-2);
  color: var(--mr-text);
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.mr-theme .step.is-done .step-dot { background: var(--mr-ok-bg); color: var(--mr-ok); }
.mr-theme .step.is-current {
  background: var(--mr-accent-soft);
  color: var(--mr-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--mr-accent-line);
}
.mr-theme .step.is-current .step-dot { background: var(--mr-accent-solid); color: var(--mr-on-accent); }
.mr-theme .step .icon, .mr-theme .step i[data-lucide] { width: 12px; height: 12px; stroke-width: 3; }

/* ---------- Tabela com rolagem própria ---------- */
/* Use tabindex="0" role="region" aria-label="..." na caixa (região rolável precisa ser focável). */

.mr-theme .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--mr-radius-md);
}
.mr-theme .table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}
.mr-theme .table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--mr-border-strong);
  color: var(--mr-text-2);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.mr-theme .table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--mr-border);
  color: var(--mr-text-2);
}
.mr-theme .table tbody tr:hover td { background: var(--mr-surface); }
.mr-theme .table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Skeleton ---------- */

.mr-theme .skel {
  display: block;
  min-height: 12px;
  border-radius: var(--mr-radius-sm);
  background: var(--mr-skel);
}

/* ---------- Toast ---------- */

.mr-theme .mr-toasts {
  position: fixed;
  left: auto;
  right: 24px;
  bottom: 24px;
  z-index: var(--mr-z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  transform: none;
  pointer-events: none;
}

.mr-environment-status {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  margin: 8px auto;
  padding: 9px 14px;
  border: 1px solid var(--mr-info-line, #60a5fa);
  border-radius: 999px;
  background: var(--mr-surface-solid, #172033);
  color: var(--mr-text, #f8fafc);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  font: 500 13px/1.4 system-ui, sans-serif;
}
.mr-environment-indicator {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mr-environment-spin .8s linear infinite;
}
.mr-environment-status[aria-busy="false"] .mr-environment-indicator { animation: none; border-right-color: currentColor; }
.mr-environment-retry {
  flex: none;
  border: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--mr-info, #60a5fa);
  color: #07111f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
@keyframes mr-environment-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mr-environment-indicator { animation: none; } }
/* Como popover (app.js), o navegador aplica estilos próprios de [popover]: zera borda, fundo, margem e recorte. */
.mr-theme .mr-toasts[popover] {
  inset: auto;
  left: auto;
  right: 24px;
  bottom: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  height: auto;
}
.mr-theme .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--mr-border-strong);
  border-radius: var(--mr-radius-md);
  background: var(--mr-glass), var(--mr-surface-solid);
  color: var(--mr-text);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: var(--mr-shadow-pop);
  -webkit-backdrop-filter: var(--mr-blur);
  backdrop-filter: var(--mr-blur);
  pointer-events: auto;
}
.mr-theme .toast .toast-icon { color: var(--mr-info); }
.mr-theme .toast-ok { border-color: var(--mr-ok-line); }
.mr-theme .toast-ok .toast-icon { color: var(--mr-ok); }
.mr-theme .toast-warn { border-color: var(--mr-warn-line); }
.mr-theme .toast-warn .toast-icon { color: var(--mr-warn); }
.mr-theme .toast-err { border-color: var(--mr-err-line); }
.mr-theme .toast-err .toast-icon { color: var(--mr-err); }
.mr-theme .toast-info { border-color: var(--mr-info-line); }

/* ---------- Modal ---------- */
/* Recomendado: <dialog class="modal"> com showModal() (foco preso e Esc de graça). */

.mr-theme .modal-layer {
  position: fixed;
  inset: 0;
  z-index: var(--mr-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--mr-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mr-theme .modal {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: auto;
  padding: 0;
  border: 1px solid var(--mr-border-strong);
  border-radius: var(--mr-radius-lg);
  background: var(--mr-glass), var(--mr-surface-solid);
  color: var(--mr-text);
  box-shadow: var(--mr-shadow-pop);
}
.mr-theme dialog.modal::backdrop {
  background: var(--mr-scrim, rgba(2, 6, 23, 0.66));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mr-theme .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 0;
}
.mr-theme .modal-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.mr-theme .modal-body { padding: 16px 24px; font-size: 14px; line-height: 1.55; color: var(--mr-text-2); }
.mr-theme .modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 24px 24px;
}

/* ---------- Selo "Dados de exemplo" e botão de tema ---------- */

/* Ao lado do botão de tema (canto inferior direito): à esquerda ele cobria itens do menu lateral. */
.mr-theme .mr-proto-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--mr-border-strong);
  border-radius: var(--mr-radius-pill);
  background: var(--mr-glass), var(--mr-surface-solid);
  color: var(--mr-text-2);
  font: 500 12px/1.3 var(--mr-font);
  letter-spacing: 0.01em;
  pointer-events: none;
  user-select: none;
}
.mr-theme .mr-inline-proto-badge { position: static; flex: none; margin-inline-start: auto; }
body:has([x-data="campaignCreatives"]) .mr-theme .mr-proto-badge {
  position: static;
  display: flex;
  width: max-content;
  margin: 16px 24px 20px auto;
}
.mr-theme .mr-proto-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mr-accent);
  flex: none;
}

.mr-theme .mr-theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--mr-z-badge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--mr-border-strong);
  border-radius: 50%;
  background: var(--mr-glass), var(--mr-surface-solid);
  color: var(--mr-text);
  box-shadow: var(--mr-shadow-pop);
  -webkit-backdrop-filter: var(--mr-blur);
  backdrop-filter: var(--mr-blur);
  cursor: pointer;
}
.mr-theme .mr-theme-toggle:hover { border-color: var(--mr-accent-line); color: var(--mr-accent-text); }

@media (max-width: 480px) {
  .mr-theme .mr-toasts,
  .mr-theme .mr-toasts[popover] { bottom: 76px; }
}

/* ---------- Menu lateral e menus flutuantes (seletor de marca, menu do usuário) ---------- */
.mr-theme .nav-link { min-height: 44px; box-sizing: border-box; }
.mr-theme .mr-menu-wrap { position: relative; }
/* Nomes de organização e marca conservam o menu lateral dentro da tela. */
.mr-theme aside:has([x-data^="orgMenu"]) { min-width: 0; }
.mr-theme [x-data^="orgMenu"] [x-ref="trigger"] > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.mr-theme [x-data^="orgMenu"] .mr-menu-item { min-width: 0; overflow-wrap: anywhere; }
.mr-theme .mr-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  padding: 6px;
  border-radius: var(--mr-radius-md);
  background: var(--mr-surface-solid);
  border: 1px solid var(--mr-border);
  box-shadow: var(--mr-shadow-pop);
}
.mr-theme .mr-menu-up { top: auto; bottom: calc(100% + 6px); }
.mr-theme .mr-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mr-text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mr-theme .mr-menu-item:hover,
.mr-theme .mr-menu-item:focus-visible { background: var(--mr-surface-2); color: var(--mr-text); }
.mr-theme .mr-menu-item[aria-checked="true"] { background: var(--mr-accent-soft); }
.mr-theme .mr-menu-sep { height: 1px; margin: 4px 6px; background: var(--mr-border); }
.mr-theme .mr-org-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--mr-accent-solid);
  color: var(--mr-on-accent);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- Telas novas (Relatórios, Configurações) ---------- */
.mr-theme .mr-muted { color: var(--mr-text-3); }
.mr-theme .mr-card { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; padding: 24px; border-radius: 28px; }
.mr-theme .mr-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.mr-theme .mr-card-title { margin: 0; font-size: 18px; font-weight: 600; }
.mr-theme .mr-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.mr-theme .mr-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-theme .mr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-theme .mr-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mr-theme .mr-list-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--mr-border); }
.mr-theme .mr-list-row:first-child { border-top: 0; }
.mr-theme .mr-form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Botões de navegação preservam a aparência dos links sem destino. */
.mr-theme button.nav-link { background: none; border: 0; text-align: left; }
.mr-theme[data-theme="claro"] button.nav-link { color: var(--mr-accent-text); }

/* Identidade real no menu da conta, com quebra para e-mails e organizações longos. */
.mr-theme .mr-menu-profile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  max-width: 240px;
  overflow-wrap: anywhere;
  color: var(--mr-text-2);
  font-size: 12px;
}
.mr-theme .mr-menu-profile span:first-child { color: var(--mr-text); font-weight: 600; }
.mr-theme [x-data^="userMenu"] [x-ref="trigger"] { overflow-wrap: anywhere; }
.mr-theme [x-data^="userMenu"] [x-ref="trigger"] > span:last-child { min-width: 0; }

/*
 * O x-show do Alpine apaga o `display` inline quando volta a mostrar o elemento (ex.: depois do estado "carregando"),
 * e um `display: grid` some, empilhando os cartões. Estas classes guardam o layout fora do style inline; o
 * `display: none` inline do x-show continua vencendo quando o elemento está oculto. O verificador exige a classe.
 */
.mr-show-grid{display:grid}
.mr-show-flex{display:flex}
.mr-show-inline-flex{display:inline-flex}
.mr-show-inline-grid{display:inline-grid}
.mr-show-block{display:block}
.mr-show-inline-block{display:inline-block}

/* Navegação flutuante em vidro; as páginas e seus conteúdos continuam sólidos. */
.mr-theme.mr-glassnav .glass:not(.mr-glass){background:var(--mr-surface-solid);border-color:var(--mr-border);box-shadow:0 12px 32px rgba(2,6,23,.12);-webkit-backdrop-filter:none;backdrop-filter:none}
.mr-glassnav [style*="color: #94A3B8"],.mr-glassnav [style*="color:#94A3B8"],.mr-glassnav [style*="color: #64748B"],.mr-glassnav [style*="color:#64748B"]{color:var(--mr-text-3)!important}
.mr-glassnav[data-theme="claro"] [style*="color: #94A3B8"],.mr-glassnav[data-theme="claro"] [style*="color:#94A3B8"],.mr-glassnav[data-theme="claro"] [style*="color: #64748B"],.mr-glassnav[data-theme="claro"] [style*="color:#64748B"],.mr-glassnav[data-theme="claro"] [style*="color: #CBD5E1"],.mr-glassnav[data-theme="claro"] [style*="color:#CBD5E1"]{color:#0F172A!important}
.mr-glassnav[data-theme="escuro"] [style*="color: #94A3B8"],.mr-glassnav[data-theme="escuro"] [style*="color:#94A3B8"],.mr-glassnav[data-theme="escuro"] [style*="color: #64748B"],.mr-glassnav[data-theme="escuro"] [style*="color:#64748B"]{color:#FFFFFF!important}
.mr-glassnav[data-theme="claro"] [style*="color: #FCD34D"],.mr-glassnav[data-theme="claro"] [style*="color:#FCD34D"]{color:#92400E!important}
.mr-glassnav[data-theme="claro"] [style*="color: #93C5FD"],.mr-glassnav[data-theme="claro"] [style*="color:#93C5FD"]{color:#1E40AF!important}
.mr-glassnav[data-theme="claro"] [style*="color: #6EE7B7"],.mr-glassnav[data-theme="claro"] [style*="color:#6EE7B7"]{color:#065F46!important}
.mr-glassnav[data-theme="claro"] [style*="color: #34D399"],.mr-glassnav[data-theme="claro"] [style*="color:#34D399"]{color:#047857!important}
.mr-glassnav[data-theme="claro"] .mr-show-flex[style*="color"]{color:var(--mr-text)!important}
.mr-glassnav[data-theme="claro"] .chip[x-show="demo"]{color:var(--mr-text)!important}
.mr-glassnav .flow-selected{color:var(--mr-text)!important}
.mr-theme .mr-glass,.mr-theme .mr-client-navigation{background:var(--mr-glass);border:1px solid var(--mr-glass-border);box-shadow:var(--mr-glass-shadow);-webkit-backdrop-filter:var(--mr-glass-blur);backdrop-filter:var(--mr-glass-blur)}
.mr-theme .mr-client-navigation{position:fixed;z-index:80;inset:16px auto 16px 16px;display:flex;flex-direction:column;gap:4px;width:256px;padding:14px 12px;overflow:auto;border-radius:30px}
.mr-theme .mr-sidebar-brand{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 6px 4px;color:var(--mr-text);font-weight:700;text-decoration:none}
.mr-theme .mr-sidebar-brand-full{display:block;width:164px;max-width:100%;height:auto}
.mr-theme .mr-sidebar-brand-symbol{display:none;width:38px;height:38px}
.mr-theme .mr-sidebar-collapse{align-self:flex-end;width:44px;height:44px;border:0;border-radius:50%;color:var(--mr-text);background:transparent;cursor:pointer}
.mr-theme .mr-navigation-group{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:2px}
.mr-theme .mr-navigation-group>.nav-link{min-width:0}
.mr-theme .mr-client-navigation .nav-link{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:16px;color:var(--mr-text-2);text-decoration:none}
.mr-theme .mr-client-navigation .nav-link{min-height:40px;padding-block:5px}
.mr-theme .mr-client-navigation .nav-link-subitem{min-height:34px;font-size:13px}
.mr-theme .mr-client-navigation .nav-link[aria-current="page"]{color:var(--mr-text);background:var(--mr-glass-drop);box-shadow:var(--mr-glass-drop-shadow)}
.mr-theme .mr-area-toggle{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--mr-text-2);cursor:pointer}
.mr-theme .mr-area-toggle:focus-visible{outline:2px solid var(--mr-accent);outline-offset:2px}
.mr-theme .mr-navigation-subitems{grid-column:1/-1;display:grid;gap:2px}
.mr-theme .mr-navigation-subitems[hidden]{display:none!important}
.mr-theme .mr-client-navigation .nav-link-subitem{padding-left:22px}
.mr-theme .mr-client-navigation .nav-link-area{font-weight:650}
.mr-theme .mr-client-navigation .nav-link-featured{background:var(--mr-accent-soft);color:var(--mr-accent-text)}
.mr-theme .mr-client-navigation .nav-link-featured:not([aria-current="page"]){background:transparent;color:var(--mr-text-2)}
.mr-theme:has(.mr-stage-capsule) header>ol[aria-label="Etapas"]{display:none!important}
.mr-theme .mr-client-settings-group{display:grid;gap:0;margin-top:4px;padding-top:6px;border-top:1px solid var(--mr-border)}
.mr-theme .mr-client-settings-group .nav-link{min-height:42px}
.mr-theme .mr-client-context{display:grid;gap:6px;margin:0 0 4px;padding:8px;border:1px solid var(--mr-glass-border);border-radius:18px;color:var(--mr-text-2);font-size:12px;font-weight:600}
.mr-theme .mr-client-navigation .mr-menu-wrap.mr-client-context{display:block;min-width:0;margin:0 0 8px;padding:0;border:0;font-size:inherit}
.mr-theme .mr-client-navigation .mr-client-account{flex:none;margin-top:auto;padding-top:10px;border-top:1px solid var(--mr-border)}
.mr-theme .mr-client-navigation .mr-client-account + .mr-menu-theme-toggle{margin-top:0}
.mr-theme .mr-client-navigation .mr-menu-theme-toggle{position:static;inset:auto;display:flex;width:100%;min-height:44px;justify-content:flex-start;padding:8px 12px;border-radius:14px;box-shadow:none}
.mr-theme .mr-client-navigation .mr-menu-theme-toggle::after{content:"Tema";margin-left:10px;font-size:13px}
.mr-theme .mr-client-navigation .rail-bottom{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:0;color:var(--mr-text-2);font-size:12px}
.mr-theme .mr-client-navigation .rail-bottom>span:not(.avatar){display:flex;min-width:0;flex-direction:column}
.mr-theme .mr-client-navigation .rail-bottom small{color:var(--mr-text-3)}
.mr-theme .mr-client-navigation .rail-bottom button{position:static;display:flex;width:44px;height:44px;margin-left:auto;border:1px solid var(--mr-border);background:transparent;color:var(--mr-text)}
.mr-theme .mr-client-context select{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--mr-border-strong);border-radius:10px;color:var(--mr-text);background:var(--mr-glass-fallback);font:inherit}
.mr-theme .mr-client-navigation .mr-credit-link{display:flex;align-items:center;justify-content:space-between;min-height:40px;margin-top:auto;padding:8px 12px;border-radius:16px;color:var(--mr-text);text-decoration:none}
.mr-theme .mr-client-navigation.is-collapsed{width:76px}
.mr-theme .mr-client-navigation.is-collapsed .mr-sidebar-brand-full,.mr-theme .mr-client-navigation.is-collapsed .mr-client-context,.mr-theme .mr-client-navigation.is-collapsed .mr-navigation-group>.nav-link span,.mr-theme .mr-client-navigation.is-collapsed .mr-area-toggle,.mr-theme .mr-client-navigation.is-collapsed .mr-client-settings-group,.mr-theme .mr-client-navigation.is-collapsed .mr-credit-link span,.mr-theme .mr-client-navigation.is-collapsed .mr-client-account{visibility:hidden;opacity:0;pointer-events:none}
.mr-theme .mr-client-navigation.is-collapsed .mr-navigation-subitems{visibility:hidden;opacity:0;pointer-events:none}
.mr-theme .mr-client-navigation.is-collapsed .mr-sidebar-brand-symbol{display:block}
.mr-theme .mr-client-navigation.is-collapsed .mr-sidebar-brand{justify-content:center}
.mr-theme .mr-client-navigation.is-collapsed .mr-navigation-group{display:block}
.mr-theme .mr-client-navigation.is-collapsed .nav-link{justify-content:center;padding-inline:4px}
.mr-theme .mr-stage-capsule{position:relative;z-index:5;display:flex;align-items:center;gap:3px;width:max-content;max-width:calc(100% - 300px);margin:12px 24px 12px auto;padding:5px;border-radius:999px;overflow-x:auto;scrollbar-width:none}
.mr-theme .mr-stage-capsule{box-sizing:border-box;max-width:100%;min-width:0;justify-content:flex-start;overflow-y:hidden}
.mr-theme .mr-stage-capsule::-webkit-scrollbar{display:none}
.mr-theme .mr-stage-link,.mr-theme .mr-stage-arrow{flex:0 0 auto}
.mr-theme .mr-stage-link,.mr-theme .mr-stage-arrow{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 14px;border-radius:999px;color:var(--mr-text-2);font-size:13px;text-decoration:none;white-space:nowrap}
.mr-theme .mr-stage-arrow{font-size:25px}
.mr-theme .mr-stage-link.is-current{border:1px solid var(--mr-glass-drop-border);color:var(--mr-text);font-weight:700;background:var(--mr-glass-drop);box-shadow:var(--mr-glass-drop-shadow)}
.mr-theme .mr-stage-check{color:var(--mr-ok);font-weight:800}
.mr-theme .mr-stage-link:focus-visible,.mr-theme .mr-stage-arrow:focus-visible,.mr-theme .mr-dock-link:focus-visible{outline:2px solid var(--mr-accent);outline-offset:2px}
.mr-theme .mr-mobile-dock{display:none}
@media(min-width:1024px){.mr-theme{padding-left:288px}}
@media(min-width:768px) and (max-width:1023px){.mr-theme:not(:has(.studio-shell)){padding-left:96px}}
@media(min-width:681px) and (max-width:1023px){.mr-theme .mr-stage-capsule{width:calc(100% - 32px);max-width:calc(100% - 32px);flex-wrap:wrap;justify-content:center;margin-inline:auto}}
@media(max-width:1023px){.mr-theme .mr-client-navigation{width:72px;align-items:center;padding-inline:8px}.mr-theme .mr-sidebar-brand-full,.mr-theme .mr-client-navigation .mr-client-context,.mr-theme .mr-navigation-group>.nav-link span,.mr-theme .mr-area-toggle,.mr-theme .mr-navigation-subitems,.mr-theme .mr-client-settings-group,.mr-theme .mr-credit-link span,.mr-theme .mr-client-account,.mr-theme .mr-menu-theme-toggle{display:none!important}.mr-theme .mr-sidebar-brand-symbol{display:block}.mr-theme .mr-sidebar-brand{justify-content:center}.mr-theme .mr-navigation-group{display:block}.mr-theme .mr-client-navigation .nav-link{position:relative;justify-content:center;width:52px;padding-inline:0}.mr-theme .mr-client-navigation .nav-link .icon{width:22px;height:22px}.mr-theme .mr-stage-capsule{max-width:calc(100% - 104px);margin-right:16px}}
@media(max-width:767px){.mr-theme .mr-client-navigation{display:none!important}.mr-theme .mr-stage-capsule{width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:none;margin:10px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))}.mr-theme .mr-stage-capsule[data-stage-index="0"]::before{content:"";flex:0 0 max(0px,calc((100% - 96px)/2))}.mr-theme .mr-stage-capsule[data-stage-index="6"]::after{content:"";flex:0 0 max(0px,calc((100% - 96px)/2))}.mr-theme .mr-stage-link{padding-inline:12px;font-size:12px}.mr-theme .mr-stage-arrow{padding-inline:8px}.mr-theme .mr-mobile-dock{position:fixed;z-index:100;inset:auto max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;align-items:center;gap:8px;transition:transform var(--mr-dur) var(--mr-ease)}.mr-theme .mr-dock-navigation{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;padding:4px;border-radius:999px}.mr-theme .mr-dock-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:48px;padding:2px;border:0;border-radius:999px;background:transparent;color:var(--mr-text-2);font:inherit;font-size:10px;text-decoration:none}.mr-theme .mr-dock-link[aria-current="page"]{color:var(--mr-text);background:var(--mr-glass-drop);box-shadow:var(--mr-glass-drop-shadow)}.mr-theme .mr-dock-link .icon{width:20px;height:20px}.mr-theme .mr-dock-more{position:absolute;right:58px;bottom:64px;display:grid;gap:4px;min-width:210px;padding:10px;border-radius:22px}.mr-theme .mr-dock-more[hidden]{display:none!important}.mr-theme .mr-dock-more a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:12px;color:var(--mr-text);text-decoration:none}.mr-theme .mr-mobile-dock.is-compact{transform:translateY(2px) scale(.94);transform-origin:bottom center}.mr-theme .mr-mobile-dock.is-compact .mr-dock-link{min-height:44px}.mr-theme{padding-bottom:calc(88px + env(safe-area-inset-bottom))}}
@media(max-width:767px){.mr-theme .mr-toasts,.mr-theme .mr-toasts[popover]{right:max(12px,env(safe-area-inset-right));bottom:calc(82px + env(safe-area-inset-bottom));left:auto;width:min(360px,calc(100vw - 24px));transform:none}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.mr-theme .mr-glass,.mr-theme .mr-client-navigation,.mr-theme .mr-stage-capsule,.mr-theme .mr-dock-more{background:var(--mr-glass-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mr-theme .mr-glass,.mr-theme .mr-client-navigation,.mr-theme .mr-stage-capsule,.mr-theme .mr-dock-more{background:var(--mr-glass-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.mr-theme .mr-mobile-dock{transition:none}}
@media(min-width:768px) and (max-width:1023px){.mr-theme{padding-left:96px}}
@media(max-width:767px){.mr-theme .mr-dock-more .mr-dock-theme-toggle{position:static!important;inset:auto!important;display:flex;width:100%;min-height:44px;justify-content:flex-start;padding:8px 12px;border:0;border-radius:12px;background:transparent;color:var(--mr-text);box-shadow:none;text-align:left}.mr-theme .mr-dock-more .mr-dock-theme-toggle::after{content:"Tema";margin-left:10px;font-size:13px}}

/* A navegação rola sem recortar os menus flutuantes da conta. */
.mr-theme .mr-client-navigation{overflow:visible}
.mr-theme .mr-navigation-scroll{flex:1 1 auto;min-height:0;overflow-x:visible;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.mr-theme .mr-client-navigation .mr-client-account{display:block;flex:0 0 auto;margin:0;padding:8px 0 0;border-top:1px solid var(--mr-border)}
.mr-theme .mr-account-trigger{display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:48px;padding:6px 8px;border:0;border-radius:14px;background:transparent;color:var(--mr-text);font:inherit;text-align:left;cursor:pointer}
.mr-theme .mr-account-trigger:hover,.mr-theme .mr-account-trigger:focus-visible{background:var(--mr-glass-drop);outline-offset:2px}
.mr-theme .mr-account-avatar{display:grid;flex:0 0 36px;place-items:center;width:36px;height:36px;border:1px solid var(--mr-border);border-radius:50%;background:var(--mr-accent-soft);color:var(--mr-accent-text);font-size:12px;font-weight:700}
.mr-theme .mr-account-copy{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:3px}
.mr-theme .mr-account-copy strong,.mr-theme .mr-account-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-theme .mr-account-copy strong{font-size:13px;font-weight:650}
.mr-theme .mr-account-copy small{color:var(--mr-text-3);font-size:11px}
.mr-theme .mr-account-trigger>.icon{flex:0 0 auto;width:16px;height:16px;color:var(--mr-text-3)}
.mr-theme .mr-account-menu{left:0;right:auto;width:max(100%,248px);max-width:min(320px,calc(100vw - 24px));z-index:120}
.mr-theme .mr-menu-profile{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 12px 12px;border-bottom:1px solid var(--mr-border);color:var(--mr-text-2);font-size:12px;overflow-wrap:anywhere}
.mr-theme .mr-menu-profile strong{color:var(--mr-text);font-size:14px}
.mr-theme .mr-menu-profile span:last-child{color:var(--mr-text-3)}
.mr-theme .mr-client-navigation .mr-menu-theme-toggle,.mr-theme .mr-dock-more .mr-menu-theme-toggle{position:static!important;inset:auto!important;display:flex!important;align-items:center;gap:10px;width:100%;min-height:42px;margin:0;padding:8px 12px;border:0;border-radius:14px;background:transparent;color:var(--mr-text-2);box-shadow:none;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.mr-theme .mr-client-navigation .mr-menu-theme-toggle:hover,.mr-theme .mr-client-navigation .mr-menu-theme-toggle:focus-visible,.mr-theme .mr-dock-more .mr-menu-theme-toggle:hover,.mr-theme .mr-dock-more .mr-menu-theme-toggle:focus-visible{background:var(--mr-glass-drop);color:var(--mr-text)}
.mr-theme .mr-menu-theme-toggle::after{content:none!important}
.mr-theme .mr-client-navigation .mr-menu-theme-toggle svg,.mr-theme .mr-dock-more .mr-menu-theme-toggle svg{width:18px;height:18px}
.mr-theme[data-theme="claro"] .mr-sidebar-brand-full.mr-logo-light{display:block!important}
.mr-theme[data-theme="claro"] .mr-sidebar-brand-full.mr-logo-dark{display:none!important}
.mr-theme[data-theme="escuro"] .mr-sidebar-brand-full.mr-logo-light{display:none!important}
.mr-theme[data-theme="escuro"] .mr-sidebar-brand-full.mr-logo-dark{display:block!important}
.mr-theme .mr-sidebar-brand-symbol{display:none}
.mr-theme .mr-client-navigation.is-collapsed .mr-sidebar-brand-full{display:none!important}
.mr-theme .mr-client-navigation.is-collapsed .mr-sidebar-brand-symbol{display:block}
.mr-theme .mr-sidebar-brand-full{width:164px;max-width:100%;height:auto}
.mr-theme .mr-admin-brand-badge{flex:none;padding:3px 8px;border-radius:999px;background:var(--mr-accent-soft);color:var(--mr-accent-text);font-size:10px;font-weight:750;letter-spacing:.06em}
.mr-theme .mr-admin-navigation .mr-navigation-scroll{display:grid;align-content:start;gap:2px}
.mr-theme .mr-admin-navigation .mr-admin-platform-link{margin-top:8px;padding-top:8px;border-top:1px solid var(--mr-border)}
.mr-theme .mr-admin-page{max-width:none!important;min-height:100vh;padding:24px!important;background:var(--mr-bg)!important;color:var(--mr-text)!important}
.mr-theme .mr-admin-layout{display:block!important;max-width:none!important;margin:0!important}
.mr-theme .mr-admin-content{min-width:0;max-width:1440px;margin:0 auto!important;flex:none!important}
.mr-theme .mr-admin-access-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:720px;margin:8vh auto 0;padding:clamp(22px,5vw,40px);border:1px solid var(--mr-glass-border);border-radius:28px;background:var(--mr-glass);box-shadow:var(--mr-glass-shadow);color:var(--mr-text)}
.mr-theme .mr-admin-access-card h1{margin:0;font-size:clamp(24px,4vw,34px)}
.mr-theme .mr-admin-access-card p{margin:0;color:var(--mr-text-2);line-height:1.55;overflow-wrap:anywhere}

@media(max-width:1023px){
  .mr-theme.mr-glassnav{padding-left:0!important;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .mr-theme .mr-client-navigation:not(.mr-admin-navigation){display:none!important}
  .mr-theme .mr-mobile-dock{position:fixed;z-index:100;inset:auto max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;align-items:center;gap:8px;width:auto;max-width:720px;margin-inline:auto;transition:transform var(--mr-dur) var(--mr-ease)}
  .mr-theme .mr-dock-navigation{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;padding:4px;border-radius:999px}
  .mr-theme .mr-dock-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:48px;padding:2px;border:0;border-radius:999px;background:transparent;color:var(--mr-text-2);font:inherit;font-size:10px;text-decoration:none}
  .mr-theme .mr-dock-link[aria-current="page"]{color:var(--mr-text);background:var(--mr-glass-drop);box-shadow:var(--mr-glass-drop-shadow)}
  .mr-theme .mr-dock-link .icon{width:20px;height:20px}

  .mr-theme .mr-dock-more{position:absolute;right:58px;bottom:64px;display:grid;gap:4px;min-width:min(260px,calc(100vw - 32px));max-height:min(72vh,640px);overflow:visible;padding:10px;border-radius:22px;background:var(--mr-glass-fallback)}
  .mr-theme .mr-dock-more[hidden]{display:none!important}
  .mr-theme .mr-dock-more>a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:12px;color:var(--mr-text);text-decoration:none}
  .mr-theme .mr-dock-more .mr-client-account{display:block!important;min-width:0;padding-bottom:6px;border-bottom:1px solid var(--mr-border)}
  .mr-theme .mr-dock-more .mr-account-menu{left:auto;right:0;width:min(280px,calc(100vw - 32px))}
  .mr-theme .mr-stage-capsule{max-width:calc(100% - 24px);margin:10px auto 12px}
  .mr-theme .mr-admin-navigation{position:relative!important;inset:auto!important;display:flex!important;flex-direction:row;flex-wrap:wrap;align-items:center;width:auto!important;max-height:none;margin:12px;padding:10px 12px;border-radius:22px;overflow:visible!important}
  .mr-theme .mr-admin-navigation .mr-sidebar-brand{flex:0 1 150px;width:auto;min-width:0;margin:0}
  .mr-theme .mr-admin-navigation .mr-sidebar-brand-full{width:128px}
  .mr-theme .mr-admin-navigation .mr-admin-brand-badge{font-size:9px}
  .mr-theme .mr-admin-navigation .mr-navigation-scroll{order:3;flex:1 0 100%;width:100%;max-height:none;display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;padding-top:8px;border-top:1px solid var(--mr-border)}
  .mr-theme .mr-admin-navigation .nav-link{flex:0 0 auto;width:auto;min-height:42px;padding:8px 10px}
  .mr-theme .mr-admin-navigation .mr-client-account{display:block!important;flex:1 1 140px;width:auto;max-width:210px;margin:0 4px;padding:0;border:0}
  .mr-theme .mr-admin-navigation .mr-account-trigger{min-height:44px;padding-inline:4px}
  .mr-theme .mr-admin-navigation .mr-account-menu{top:calc(100% + 6px)!important;right:0;bottom:auto!important;left:auto;width:min(280px,calc(100vw - 32px));max-width:calc(100vw - 24px)}
  .mr-theme .mr-admin-navigation>.mr-menu-theme-toggle{flex:0 0 42px;width:42px;min-height:42px;padding:8px}
  .mr-theme .mr-admin-navigation>.mr-menu-theme-toggle span{display:none}
  .mr-theme .mr-admin-page{padding:16px!important}
  .mr-theme .mr-admin-content{max-width:none}
}
@media(max-width:420px){
  .mr-theme .mr-admin-navigation .mr-sidebar-brand{flex-basis:120px}
  .mr-theme .mr-admin-navigation .mr-sidebar-brand-full{width:112px}
  .mr-theme .mr-admin-navigation .mr-admin-brand-badge{display:none}
  .mr-theme .mr-admin-navigation .mr-account-copy small{max-width:112px}
  .mr-theme .mr-admin-navigation .mr-account-trigger>.icon{display:none}
}

/* Navegação e superfícies internas: vidro só nas peças flutuantes do shell. */
.mr-theme .mr-glass{
  background:var(--mr-glass);
  border:1px solid var(--mr-glass-border);
  box-shadow:var(--mr-glass-shadow);
  -webkit-backdrop-filter:var(--mr-glass-blur);
  backdrop-filter:var(--mr-glass-blur);
}
.mr-theme .mr-client-navigation{
  gap:4px;
  border-radius:28px;
  transition:background-color var(--mr-dur) var(--mr-ease), border-color var(--mr-dur) var(--mr-ease), color var(--mr-dur) var(--mr-ease);
}
.mr-theme .mr-client-navigation .nav-link,
.mr-theme .mr-dock-link,
.mr-theme .mr-account-trigger,
.mr-theme .mr-sidebar-collapse,
.mr-theme .mr-area-toggle,
.mr-theme .mr-menu-theme-toggle{
  border:1px solid transparent;
  transition:opacity var(--mr-dur-fast) var(--mr-ease), transform var(--mr-dur-fast) var(--mr-ease), background-color var(--mr-dur-fast) var(--mr-ease), border-color var(--mr-dur-fast) var(--mr-ease), color var(--mr-dur-fast) var(--mr-ease);
}
.mr-theme .mr-client-navigation .nav-link:hover,
.mr-theme .mr-client-navigation .nav-link:focus-visible,
.mr-theme .mr-dock-link:hover,
.mr-theme .mr-dock-link:focus-visible,
.mr-theme .mr-account-trigger:hover,
.mr-theme .mr-account-trigger:focus-visible,
.mr-theme .mr-sidebar-collapse:hover,
.mr-theme .mr-sidebar-collapse:focus-visible,
.mr-theme .mr-area-toggle:hover,
.mr-theme .mr-area-toggle:focus-visible,
.mr-theme .mr-menu-theme-toggle:hover,
.mr-theme .mr-menu-theme-toggle:focus-visible{
  background-color:var(--mr-glass-drop);
  border-color:var(--mr-glass-drop-border);
  color:var(--mr-text);
}
.mr-theme .mr-client-navigation .nav-link[aria-current="page"],
.mr-theme .mr-dock-link[aria-current="page"]{
  border-color:var(--mr-glass-drop-border);
  background-color:var(--mr-glass-drop);
  box-shadow:none;
  color:var(--mr-text);
}
.mr-theme .mr-client-navigation .nav-link-featured,
.mr-theme .mr-client-navigation .nav-link-featured:not([aria-current="page"]){
  background:transparent;
  color:var(--mr-text-2);
}
.mr-theme .mr-client-navigation .mr-navigation-scroll,
.mr-theme .mr-client-navigation .mr-sidebar-brand-full,
.mr-theme .mr-client-navigation .mr-sidebar-brand-symbol,
.mr-theme .mr-client-navigation .mr-client-context,
.mr-theme .mr-client-navigation .mr-navigation-group>.nav-link span,
.mr-theme .mr-client-navigation .mr-area-toggle,
.mr-theme .mr-client-navigation .mr-client-settings-group,
.mr-theme .mr-client-navigation .mr-client-account,
.mr-theme .mr-client-navigation .mr-credit-link span{
  transition:opacity var(--mr-dur-fast) var(--mr-ease), transform var(--mr-dur-fast) var(--mr-ease);
}
.mr-theme .mr-client-navigation.is-collapsed .mr-navigation-scroll,
.mr-theme .mr-client-navigation.is-collapsed .mr-sidebar-brand-full,
.mr-theme .mr-client-navigation.is-collapsed .mr-client-context,
.mr-theme .mr-client-navigation.is-collapsed .mr-navigation-group>.nav-link span,
.mr-theme .mr-client-navigation.is-collapsed .mr-area-toggle,
.mr-theme .mr-client-navigation.is-collapsed .mr-client-settings-group,
.mr-theme .mr-client-navigation.is-collapsed .mr-client-account,
.mr-theme .mr-client-navigation.is-collapsed .mr-credit-link span{opacity:0}
.mr-theme .mr-navigation-subitems{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  overflow:hidden;
  transition:grid-template-rows var(--mr-dur) var(--mr-ease), opacity var(--mr-dur) var(--mr-ease);
}
.mr-theme .mr-navigation-subitems.is-open{grid-template-rows:1fr;opacity:1}
.mr-theme .mr-navigation-subitems-content{min-height:0;overflow:hidden}
.mr-theme .mr-dock-navigation{border:1px solid var(--mr-glass-border)}
.mr-theme .mr-dock-more{
  visibility:hidden;
  opacity:0;
  transform:translateY(8px) scale(.98);
  transform-origin:bottom right;
  background:var(--mr-surface-solid);
  border:1px solid var(--mr-border);
  box-shadow:var(--mr-shadow-pop);
  transition:opacity var(--mr-dur) var(--mr-ease), transform var(--mr-dur) var(--mr-ease), visibility var(--mr-dur) var(--mr-ease);
}
.mr-theme .mr-dock-more.is-open{visibility:visible;opacity:1;transform:none}
.mr-theme .mr-menu-enter-active,.mr-theme .mr-menu-leave-active{
  transition:opacity var(--mr-dur) var(--mr-ease), transform var(--mr-dur) var(--mr-ease);
  transform-origin:bottom left;
}
.mr-theme .mr-menu-enter-from,.mr-theme .mr-menu-leave-to{opacity:0;transform:translateY(6px) scale(.985)}
.mr-theme .mr-menu-enter-to,.mr-theme .mr-menu-leave-from{opacity:1;transform:none}
.mr-theme .glass:not(.mr-glass),
.mr-theme .chip{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.mr-theme .glass:not(.mr-glass){
  background:var(--mr-surface);
  border-color:var(--mr-border);
  box-shadow:0 8px 24px rgba(2,6,23,.12);
}
.mr-theme .chip:hover{background-color:var(--mr-surface-2)}
.mr-theme.mr-glassnav{padding-left:288px!important}
@media(min-width:768px) and (max-width:1023px){
  .mr-theme.mr-glassnav{padding-left:96px!important}
}
@media(max-width:767px){
  .mr-theme.mr-glassnav{padding-left:0!important}
  .mr-theme .mr-mobile-dock{transition:transform var(--mr-dur) var(--mr-ease)}
  .mr-theme .mr-dock-more{right:58px;bottom:64px}
}

/* Somente o shell comum reserva espaço para a navegação; páginas públicas e 404 ocupam toda a tela. */
@media(min-width:1024px){.mr-theme:not(.mr-glassnav){padding-left:0!important}}
@media(min-width:768px) and (max-width:1023px){.mr-theme:not(.mr-glassnav){padding-left:0!important}}
body.mr-theme[data-theme="claro"]{background:#F3F6FB}

/* Controles do tema usam o mesmo tratamento dos itens do menu e nunca flutuam sobre o conteúdo. */
.mr-theme .mr-theme-toggle{display:none!important}
.mr-theme .mr-client-navigation .mr-menu-theme-toggle,.mr-theme .mr-dock-more .mr-menu-theme-toggle{appearance:none;-webkit-appearance:none;border:0!important;background:transparent!important;color:var(--mr-text-2);font:inherit}
.mr-theme .mr-client-navigation .mr-menu-theme-toggle:hover,.mr-theme .mr-client-navigation .mr-menu-theme-toggle:focus-visible,.mr-theme .mr-dock-more .mr-menu-theme-toggle:hover,.mr-theme .mr-dock-more .mr-menu-theme-toggle:focus-visible{background:var(--mr-glass-drop)!important;color:var(--mr-text)}
.mr-glassnav[data-theme="claro"] .mr-show-inline-flex{color:var(--mr-text)!important}


/* Link "Ir para o conteúdo": invisível até receber foco do teclado. */
.mr-theme .skip-link{position:fixed;z-index:1000;top:8px;left:8px;padding:12px 16px;border-radius:var(--mr-radius-sm);background:var(--mr-surface-solid);color:var(--mr-text);border:1px solid var(--mr-border-strong);transform:translateY(-200%)}
.mr-theme .skip-link:focus,.mr-theme .skip-link:focus-visible{transform:translateY(0)}

/* Geometria do shell antes da primeira pintura: a barra legada não pisca e o conteúdo já fica no lugar final. */
.mr-theme:not([data-mr-navigation-ready="true"]):is(:has(.dense-shell),:has(.studio-page),:has(.studio-shell),:has(.mr-admin-page),:has(.managed-page),:has(.o1-shell)){padding-left:288px!important}
.mr-theme:not([data-mr-navigation-ready="true"]) :is(.dense-shell>aside,.studio-home-rail,.studio-rail,.o1-sidebar,.managed-layout>aside,.mr-admin-layout>aside){display:none!important}
@media(min-width:768px) and (max-width:1023px){
  .mr-theme:not([data-mr-navigation-ready="true"]):is(:has(.dense-shell),:has(.studio-page),:has(.studio-shell),:has(.mr-admin-page),:has(.managed-page),:has(.o1-shell)){padding-left:96px!important}
}
@media(max-width:767px){
  .mr-theme:not([data-mr-navigation-ready="true"]):is(:has(.dense-shell),:has(.studio-page),:has(.studio-shell),:has(.mr-admin-page),:has(.managed-page),:has(.o1-shell)){padding-left:0!important}
}

/* A navegação Admin é horizontal em tablet; o conteúdo usa a largura completa disponível. */
@media(min-width:768px) and (max-width:1023px){.mr-theme.mr-admin-shell{padding-left:0!important}}