/* Screens added on top of the console bundle.
 *
 * The panel's own classes do the work wherever one exists — page-heading,
 * dashboard-card, primary-button, section-tag and the rest — so these screens
 * inherit its look and follow its light and dark themes without restating any
 * of it. What is left here covers only the shapes the panel has no class for,
 * and even those are built from its CSS variables. */

.mx-password-holder { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; }
.mx-password-holder > input { min-width: 0; box-sizing: border-box; padding-inline-end: 44px !important; }
.mx-password-holder > button.mx-password-toggle { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; margin: 0; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted, #64748b); box-shadow: none; cursor: pointer; }
.mx-password-holder > button.mx-password-toggle:hover { color: var(--primary, #2478de); background: rgb(36 120 222 / 8%); }
.mx-password-holder > button.mx-password-toggle:focus-visible { outline: 2px solid var(--primary, #2478de); outline-offset: 2px; }
.mx-password-holder > button.mx-password-toggle:disabled { cursor: default; opacity: .45; }

.mx-screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mx-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Same surface, radius and shadow as the panel's dashboard-card, with the
   padding the panel applies through its inner elements. */
.mx-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 13px;
  box-shadow: 0 8px 24px #142c4d0b;
  padding: 20px;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.mx-card > h3 {
  margin: 0;
  font-size: 14px;
  color: var(--heading);
}

.mx-card > .form-hint {
  margin: -8px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}

.mx-tab {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 9px;
  min-height: 34px;
  padding: 0 15px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mx-tab:hover { border-color: var(--primary); }

.mx-tab[aria-selected='true'] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.mx-locked {
  color: var(--red);
  background: transparent;
  border: 1px solid var(--red);
}

.mx-card-body {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.mx-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.mx-card-head h3 {
  margin: 0;
  font-size: 14px;
  color: var(--heading);
}

.mx-card-head p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}

.mx-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.mx-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.mx-field > label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-2);
}

.mx-field small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}

.mx-field input[type='text'],
.mx-field input[type='email'],
.mx-field input[type='number'],
.mx-field input[type='password'],
.mx-field select,
.mx-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: 9px;
  min-height: 38px;
  padding: 8px 11px;
  font-size: 13px;
}

.mx-field input:focus,
.mx-field select:focus,
.mx-field textarea:focus {
  border-color: var(--primary);
}

.mx-field textarea {
  min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.7;
  direction: ltr;
  text-align: left;
}

.mx-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  align-self: end;
  min-height: 38px;
}

.mx-switch input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  cursor: pointer;
}

.mx-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.mx-modal .mx-actions {
  padding-top: 0;
  border-top: 0;
  justify-content: center;
}

.mx-actions input {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: 9px;
  min-height: 34px;
  padding: 0 11px;
  font-size: 12px;
  max-width: 230px;
}

.mx-note {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}

.mx-note.mx-ok { color: var(--green); }
.mx-note.mx-bad { color: var(--red); }

.mx-media {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mx-media img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  padding: 5px;
}

.mx-media img[data-dark='1'] { background: var(--navy); }
.mx-media > .attachment-actions { grid-column: 1 / -1; }
.mx-media > .mx-note { grid-column: 1 / -1; margin: 0; }
.media-actions > .attachment-actions { display: flex; flex-wrap: wrap; }

.mx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mx-table th,
.mx-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: start;
  color: var(--text);
}

.mx-table thead th {
  font-size: 11px;
  color: var(--muted-2);
  font-weight: 700;
}

.mx-table tr:last-child td,
.mx-table tr:last-child th { border-bottom: 0; }

.mx-split { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1180px) { .mx-split { grid-template-columns: 1fr 1fr; } }

.mx-preview {
  width: 100%;
  min-height: 460px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.mx-steps {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}

.mx-steps span {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.mx-steps span[data-active='1'] {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

/* ---------- login screen ---------- */

.login-form-panel { position: relative; }

/* The console's own topbar keeps the theme and language controls in the far
   corner, away from the content, so the login screen does the same rather
   than centring them over the form. */
.mx-login-controls {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 24px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  z-index: 2;
}

@media (max-width: 900px) {
  .mx-login-controls {
    position: static;
    justify-content: center;
    margin: 0 0 18px;
  }
}

/* The brand sits above the form, where it names the console the credentials
   belong to. Its counterpart in the dark panel is hidden so it reads as moved
   rather than repeated. */
.login-brand-panel .login-brand { display: none; }

.mx-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 26px;
}

.mx-login-brand img {
  object-fit: contain;
  width: 132px;
  height: 42px;
}

.mx-login-brand span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 14px;
}


.mx-turnstile {
  display: flex;
  justify-content: center;
  margin: 14px 0 0;
}

/* Chrome paints its own background on an autofilled field. The field here is
   transparent inside a styled wrapper, so that background shows up as a hard
   rectangle sitting inside the border. Filling it with the wrapper's own
   colour makes an autofilled field look like an empty one. */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus,
.mx-field input:-webkit-autofill,
.mx-field input:-webkit-autofill:hover,
.mx-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 60px var(--surface-soft) inset;
  box-shadow: 0 0 0 60px var(--surface-soft) inset;
  caret-color: var(--text);
  border-radius: 10px;
}

/* ---------- verification code dialog ---------- */

.mx-modal-backdrop {
  position: fixed;
  inset: 0;
  background: #071d3699;
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 2147483000;
  padding: 20px;
}

.mx-modal {
  width: min(430px, 100%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 28px;
  text-align: center;
}

.mx-modal h2 { margin: 0 0 8px; font-size: 17px; color: var(--heading); }
.mx-modal p { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.8; }

.mx-code-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 13px;
  text-align: center;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  direction: ltr;
}

.mx-code-input:focus { border-color: var(--primary); }

/* -------------------------------------------------- forgotten password */

.mx-forgot-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.mx-forgot-link {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mx-forgot-link:hover { color: var(--navy); }

/*
 * Telling someone their address has no account is a dead end, not a passing
 * validation slip, so it is given a block of its own rather than the single
 * line an ordinary error gets.
 */
.mx-unknown-account {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid var(--red);
  border-radius: 12px;
  background: color-mix(in srgb, var(--red) 8%, transparent);
  font-size: 13px;
  line-height: 1.7;
}

.mx-unknown-account strong { color: var(--red); font-size: 13px; }
.mx-unknown-account span { color: var(--text); }
.mx-unknown-account .mx-unknown-hint { color: var(--muted); font-size: 12px; }

/* ------------------------------------------------- login brand panel */

/*
 * The two cards at the foot of the dark panel are gone. One of them promised
 * live updates over Socket.IO, which this server does not provide, and the
 * other described the database arrangement — neither is something the person
 * signing in needs to be told. With them and the panel's own brand row (which
 * the layer moves above the form) out of the way, the message is the only
 * thing left in the panel, so it sits in the middle of it rather than at the
 * top edge.
 */
.login-brand-panel .login-security { display: none; }
.login-brand-panel { justify-content: center; }

/*
 * Its margins were set for a panel with something above and below it — forty
 * at the top against twenty at the bottom. Alone and centred, that asymmetry
 * is all that remains of them, and it leaves the message sitting ten pixels
 * low. Nothing is being separated any more, so nothing is reserved.
 */
.login-brand-panel .login-message { margin-block: 0; }

/*
 * Placed against the panel rather than in the flow, so it stays at the foot
 * of the page whichever card is showing — sign in, activation, or a reset.
 *
 * Being out of the flow it cannot push the card away from itself, and the card
 * is centred in whatever the padding leaves. Without room reserved below, the
 * two came to rest eight pixels apart and read as one block.
 */
.login-form-panel {
  position: relative;
  padding-bottom: 62px;
}

.mx-login-copyright {
  position: absolute;
  inset-inline: 0;
  bottom: 18px;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}

/* ------------------------------------------------------ dashboard rows */

/*
 * The claims tile is hidden, and a fixed four-column track kept its place in
 * the row as a gap. Sizing by content instead lets the row close up around
 * whatever is actually shown, at every width, without a count written down
 * anywhere that would have to be corrected the next time one is added.
 */
.metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* --------------------------------------------------------- content form */

/*
 * Each field was stretching to the height of the tallest one beside it, so a
 * one-line input sitting next to a four-line description grew into a box the
 * size of the description with its text stranded at the bottom. Fields now
 * take the height they need and line up along their tops, which is where the
 * eye reads a row of labels.
 */
.json-group { align-items: start; }

.json-field input:not([type=checkbox]) { min-height: 38px; }
.json-field textarea { min-height: 96px; }

/* ------------------------------------------------------ message preview */

.mx-preview-button {
  margin-inline-end: 8px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.mx-preview-button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* The clipped line is what someone reaches for to read the rest. */
.mx-message-open { cursor: pointer; }
.mx-message-open:hover { text-decoration: underline; text-underline-offset: 3px; }

.mx-message-modal {
  width: min(620px, 100%);
  text-align: start;
}

.mx-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mx-message-head h2 { margin: 0; }

.mx-message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.mx-message-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}

.mx-message-meta-item span { color: var(--muted); }
.mx-message-meta-item strong { color: var(--text); font-weight: 600; }

/*
 * The message is someone else's words, so it keeps the line breaks they typed
 * and scrolls rather than pushing the actions off the screen when it is long.
 */
.mx-message-body {
  margin: 16px 0 20px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 46vh;
  overflow-y: auto;
}

.mx-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.mx-reply-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------------------------------------------------- list beside a panel */

/*
 * Templates and permission groups were each drawn one under the other, every
 * editor open at once, so reaching the third of anything meant scrolling past
 * the first two in full. The list names them all in the space one of them used
 * to take, and the panel holds only the one being worked on.
 */
.mx-workbench {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 940px) {
  .mx-workbench { grid-template-columns: 1fr; }
  .mx-workbench-list { position: static; }
}

/*
 * Sticky, so the list stays reachable while a long template is scrolled —
 * which is the difference between choosing the next one and scrolling back up
 * to look for it.
 */
.mx-workbench-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 14px;
}

.mx-list-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: start;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 11px;
  padding: 11px 13px;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}

.mx-list-item strong { font-size: 13px; font-weight: 700; }
.mx-list-item span { font-size: 11px; color: var(--muted); }

.mx-list-item:hover { border-color: var(--primary); }

.mx-list-item[aria-current='true'] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.mx-list-item[aria-current='true'] strong { color: var(--primary); }

/* The entry that creates something rather than opening something. */
.mx-list-item-accent {
  border-style: dashed;
  margin-top: 4px;
}

.mx-workbench-panel { min-width: 0; }

/*
 * Inside the panel the card is the whole width already, so its own frame would
 * be a second border around the same thing.
 */
.mx-workbench-panel > .mx-card { padding: 18px; }

/*
 * The editor and its preview stand side by side, so neither needs to be tall
 * enough to read on its own — together they fit the screen instead of running
 * past the bottom of it.
 */
.mx-workbench-panel .mx-field textarea { min-height: 300px; }
.mx-workbench-panel .mx-preview { min-height: 300px; }

/* ------------------------------------------------------- tables at scale */

.mx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.mx-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--muted);
  background: var(--surface);
  border-radius: 12px;
  padding: 15px 17px;
  box-shadow: 0 8px 24px #142c4d0b;
}

.mx-stat span { font-size: 12px; color: var(--muted); }
.mx-stat strong { font-size: 24px; font-weight: 800; color: var(--heading); }

.mx-stat-green { border-inline-start-color: var(--green); }
.mx-stat-amber { border-inline-start-color: #d9962a; }
.mx-stat-red { border-inline-start-color: var(--red); }

.mx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mx-toolbar-filters,
.mx-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.mx-toolbar input[type='search'],
.mx-toolbar select {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 9px;
  min-height: 38px;
  padding: 0 11px;
  font: inherit;
  font-size: 13px;
}

.mx-toolbar input[type='search'] { min-width: 230px; }
.mx-toolbar input[type='search']:focus,
.mx-toolbar select:focus { border-color: var(--primary); }

/* Wide tables scroll inside their own card rather than the page. */
.mx-table-scroll { overflow-x: auto; }
.mx-table-scroll .mx-table { min-width: 640px; }

.mx-table th.mx-pick,
.mx-table td.mx-pick { width: 34px; }

.mx-table input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.mx-table td.mx-row-actions { text-align: end; white-space: nowrap; }
.mx-table td.mx-empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.mx-table small { color: var(--muted); }

.mx-email { direction: ltr; unicode-bidi: isolate; font-size: 12px; }

.mx-count {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-2);
}

.mx-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.mx-chips span {
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--muted);
}

.mx-table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--muted);
}

.mx-pager { display: flex; align-items: center; gap: 9px; }

.mx-pager select {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  min-height: 30px;
  padding: 0 7px;
  font: inherit;
  font-size: 12px;
}

.mx-preview-button:disabled {
  opacity: .45;
  cursor: not-allowed;
  border-color: var(--line);
  color: var(--muted);
}

/* --------------------------------------------------- permissions in a modal */

.mx-role-modal { width: min(760px, 100%); }

.mx-switches { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; }

.mx-permission-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/*
 * Fifteen permissions in six areas: grouped and scrollable inside the panel,
 * so the buttons that act on them stay in view while the list is read.
 */
.mx-permission-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  max-height: 44vh;
  overflow-y: auto;
  padding-inline-end: 4px;
}

.mx-area {
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  padding: 12px 13px;
  min-width: 0;
}

.mx-area-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.mx-area-head strong { font-size: 12px; color: var(--heading); }

.mx-area-toggle {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

.mx-area-toggle:disabled { color: var(--muted); cursor: not-allowed; }

.mx-area-list { display: grid; gap: 7px; }
.mx-area-list .mx-switch { min-height: 0; font-size: 12px; font-weight: 500; }

/* Legal and support widgets stay inside the site-management console. */
.mx-legal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 10px 27px 24px;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  color: var(--muted);
  background: var(--surface);
  font-size: 12px;
}

.mx-legal-footer nav { display: flex; gap: 18px; }
.mx-legal-footer button { padding: 0; border: 0; color: var(--primary); background: none; font: inherit; font-weight: 700; }
.login-form-panel { position: relative; }
.mx-legal-footer.is-login { position: absolute; inset-inline: 30px; bottom: 16px; margin: 0; background: transparent; }

.mx-legal-modal { width: min(880px, 100%); max-height: calc(100vh - 42px); overflow: auto; }
.mx-legal-content { margin-top: 18px; }
.mx-legal-loading, .mx-legal-lead { color: var(--muted); line-height: 1.8; }
.mx-legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mx-legal-grid article { position: relative; padding: 18px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-soft); }
.mx-legal-grid article > span { position: absolute; inset-inline-end: 15px; top: 12px; color: var(--line); font-size: 20px; font-weight: 800; }
.mx-legal-grid h3 { margin: 0 0 7px; padding-inline-end: 34px; color: var(--heading); font-size: 14px; }
.mx-legal-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.mx-legal-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mx-legal-contact .mx-field:nth-child(4), .mx-legal-contact > div, .mx-legal-contact > button { grid-column: 1 / -1; }
.mx-legal-contact textarea { resize: vertical; }

@media (max-width: 720px) {
  .mx-legal-footer { flex-direction: column; margin-inline: 14px; }
  .mx-legal-footer.is-login { inset-inline: 12px; bottom: 8px; }
  .mx-legal-grid, .mx-legal-contact { grid-template-columns: 1fr; }
  .mx-legal-contact .mx-field { grid-column: 1; }
}

[data-mx-permission-hidden="1"] { display: none !important; }

.mx-legal-footer{position:fixed;bottom:0;inset-inline:0;z-index:35;margin:0;border-radius:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--surface,#fff);box-sizing:border-box;min-height:54px}
.console-shell .mx-legal-footer{inset-inline-start:var(--sidebar,288px)}
.console-shell.collapsed .mx-legal-footer{inset-inline-start:var(--sidebar-collapsed,88px)}
.workspace-content{padding-bottom:90px!important}
.console-sidebar{height:100dvh;box-sizing:border-box;padding-bottom:80px;overflow:visible}
.console-sidebar .sidebar-brand{flex-shrink:0}
.console-sidebar .sidebar-brand>div>span,.console-sidebar .sidebar-logout{display:none!important}
.console-sidebar nav{flex:1;min-height:0;overflow:auto;align-content:start}
.console-sidebar .sidebar-security{flex-shrink:0}
.console-sidebar .sidebar-toggle{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));inset-inline-end:18px;display:inline-flex!important}
.console-shell.collapsed .console-sidebar .sidebar-toggle{inset-inline-end:22px}
.topbar-search:focus-within{border-color:#3078d0;box-shadow:0 0 0 2px rgb(48 120 208 / 18%)}
.topbar-search>input,.topbar-search>input:focus-visible{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;min-height:0!important;padding:0!important;min-width:0}
.profile-button>[data-platform-avatar]{width:38px;height:38px;object-fit:cover;border-radius:12px}
.profile-button>[data-platform-avatar]:not([hidden])+[data-avatar-initial]{display:none}
@media(max-width:980px){.console-shell .mx-legal-footer,.console-shell.collapsed .mx-legal-footer{inset-inline:0}.workspace-content{padding-bottom:105px!important}}
@media(max-width:720px){.mx-legal-footer.is-login{inset-inline:0;bottom:0}.mx-legal-footer{gap:6px}}
@media print{.mx-legal-footer{display:none!important}}

/* Sign-in uses the same card, aviation image and legal footer as the portals. */
.login-page {
  grid-template-columns: minmax(0, 1.14fr) minmax(420px, .86fr);
  grid-template-areas: "visual form";
  min-height: 100dvh;
  direction: ltr;
}
.login-page[dir=ltr] {
  grid-template-columns: minmax(420px, .86fr) minmax(0, 1.14fr);
  grid-template-areas: "form visual";
}
.login-page[dir=rtl] > section { direction: rtl; }
.login-brand-panel {
  grid-area: visual;
  min-height: 0;
  padding: clamp(28px, 3.4vw, 52px);
  justify-content: flex-end;
  background: linear-gradient(180deg, #08182b14, #08182bd1), linear-gradient(270deg, #08182bbd, #08182b29), url(/brand/makfi-login-aviation-hero.png) center / cover;
}
.login-page[dir=ltr] .login-brand-panel { background: linear-gradient(180deg, #08182b14, #08182bd1), linear-gradient(90deg, #08182bbd, #08182b29), url(/brand/makfi-login-aviation-hero.png) center / cover; }
.login-brand-panel::after { display: none; }
.login-message { position: relative; z-index: 1; }
.login-message > span { display: none; }
.login-message h1 { margin: 0; font-size: clamp(30px, 3.5vw, 52px); font-weight: 900; line-height: 1.16; }
.login-message p { margin: 10px 0 0; font-size: 13px; line-height: 1.8; }
.login-form-panel {
  grid-area: form;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  gap: 16px;
  padding: 20px 24px;
}
.login-card-shell {
  position: relative;
  flex: 0 0 auto;
  width: min(438px, 100%);
  padding: 60px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 22px 48px #1428410f;
}
.login-card-shell .login-card { width: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.login-card-shell .mx-login-controls { inset-block-start: 12px; inset-inline-start: 12px; inset-inline-end: auto; flex-direction: row-reverse; }
.login-card-shell .mx-login-controls button { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.login-card-shell .mx-login-controls .mx-login-theme { display: grid; place-items: center; width: 38px; padding: 8px; }
.login-card-shell .mx-login-brand { margin-bottom: 8px; }
.login-card-shell .mx-login-brand img { width: 120px; height: 54px; }
.login-card-shell .mx-login-brand span,
.login-card-shell .login-icon { display: none; }
.login-card-shell .login-card h2 { margin: 0 0 14px; color: var(--heading); text-align: center; font-size: 22px; line-height: 1.4; }
.login-card-shell .login-card > p { margin-bottom: 12px; font-size: 12px; line-height: 1.7; }
.login-card-shell .login-card label { margin-top: 10px; gap: 6px; font-size: 12px; color: var(--muted); }
.login-card-shell .login-card label > div { min-height: 44px; background: var(--surface); }
.login-card-shell .login-card input { min-height: 42px; padding-block: 10px; font-size: 13px; }
.login-card-shell .login-submit { min-height: 46px; margin-top: 16px; font-size: 13.5px; }
.login-card-shell .login-footnote { font-size: 11.5px; line-height: 1.6; }
.login-card-shell .mx-forgot-row { margin-top: 12px; }
.login-form-panel .mx-legal-footer.is-login {
  position: static;
  flex: 0 0 auto;
  flex-direction: column;
  width: min(438px, 100%);
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 5px;
  border: 0;
  background: transparent;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
.login-form-panel .mx-legal-footer.is-login nav { justify-content: center; gap: 8px; }
@media (max-width: 980px) {
  .login-page, .login-page[dir=ltr] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form"; }
  .login-brand-panel { display: none; }
  .login-form-panel { padding: 16px; }
  .login-card-shell .mx-login-controls { position: absolute; margin: 0; }
}
@media (max-height: 760px) {
  .login-form-panel { padding-block: 16px; gap: 12px; }
  .login-card-shell { padding-block: 56px 18px; }
  .login-card-shell .mx-login-brand img { height: 48px; }
}
@media (max-width: 600px) {
  .login-card-shell { padding-inline: 20px; }
  .login-card-shell .login-card input { font-size: 16px; }
}

.mx-identity-form { display: grid; gap: 20px; min-width: 0; }
.mx-identity-section { display: grid; gap: 12px; min-width: 0; }
.mx-identity-section + .mx-identity-section { padding-top: 20px; border-top: 1px solid var(--line); }
.mx-identity-section h4 { margin: 0; color: var(--heading); font-size: 14px; line-height: 1.5; }
.mx-identity-description { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.mx-identity-name-grid, .mx-identity-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mx-identity-asset-row { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.mx-identity-preview { display: grid; place-items: center; width: 80px; height: 72px; flex: 0 0 80px; border: 1px solid #dfe8f3; border-radius: 10px; background: #f3f7fc; }
.mx-identity-preview.on-dark { border-color: #29425e; background: #091e36; }
.mx-identity-preview img { width: auto; height: auto; max-width: 62px; max-height: 46px; object-fit: contain; }
.mx-identity-preview.is-avatar img { border-radius: 50%; }
.mx-identity-asset-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.mx-identity-asset-content > div:not(.mx-identity-image-actions) { grid-column: 1 / -1; }
.mx-identity-asset-content > strong { color: var(--heading); font-size: 12px; line-height: 1.5; }
.mx-identity-asset-content > div:empty { display: none; }
.mx-identity-image-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mx-identity-image-actions > button { min-height: 36px; padding: 7px 10px; border-radius: 8px; font-size: 11px; box-shadow: none; }
.mx-identity-upload-note { padding: 12px 14px; border-radius: 10px; background: var(--surface-soft); }
@media (max-width: 1100px) {
  .mx-identity-assets { grid-template-columns: minmax(0, 1fr); }
  .mx-identity-asset-content { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 600px) {
  .mx-identity-name-grid { grid-template-columns: minmax(0, 1fr); }
  .mx-identity-asset-row { gap: 12px; padding: 10px; }
  .mx-identity-preview { width: 64px; height: 64px; flex-basis: 64px; }
  .mx-identity-preview img { max-width: 48px; max-height: 40px; }
  .mx-identity-image-actions > button { min-height: 42px; }
}
.mx-content-loading{padding:24px;border:1px solid var(--line,#dce7f5);border-radius:16px;background:var(--panel,#fff)}.mx-loading-line{height:52px;border-radius:10px;background:var(--soft,#edf3fb);animation:mx-content-pulse 1.6s ease-in-out infinite}.mx-loading-title{width:32%;height:22px;margin-bottom:24px}.mx-loading-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}@keyframes mx-content-pulse{50%{opacity:.5}}@media(max-width:600px){.mx-loading-fields{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.mx-loading-line{animation:none}}