/*
 * MECHANOCS dashboard design layer, loaded after Filament's own CSS.
 * Palette: soft navy dark mode (gray scale set in AdminPanelProvider) + the site's blue accent.
 * Selectors target Filament's stable fi-* class names only.
 */

:root {
  --mc-radius: 18px;
  --mc-radius-sm: 12px;
  --mc-accent: #2f80ed;
  --mc-accent-soft: rgb(47 128 237 / 0.1);
  --mc-ring: rgb(47 128 237 / 0.35);
  --mc-card: #fff;
  --mc-card-2: #f7f9fc;
  --mc-line: rgb(15 30 60 / 0.08);
  --mc-line-strong: rgb(15 30 60 / 0.14);
  --mc-head: #f3f6fb;
  --mc-row-hover: rgb(47 128 237 / 0.05);
  --mc-muted: #64748b;
  --mc-shadow: 0 1px 2px rgb(15 30 60 / 0.04), 0 12px 32px -18px rgb(15 30 60 / 0.22);
}

.dark {
  --mc-accent: #5aa2ff;
  --mc-accent-soft: rgb(90 162 255 / 0.12);
  --mc-ring: rgb(90 162 255 / 0.4);
  --mc-card: #1b2436;
  --mc-card-2: #212c41;
  --mc-line: rgb(148 170 210 / 0.1);
  --mc-line-strong: rgb(148 170 210 / 0.18);
  --mc-head: #222d43;
  --mc-row-hover: rgb(90 162 255 / 0.07);
  --mc-muted: #94a3bd;
  --mc-shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 18px 40px -24px rgb(0 0 0 / 0.55);
}

/* ---------- page background ---------- */
.fi-body {
  background:
    radial-gradient(1200px 520px at 100% -10%, rgb(47 128 237 / 0.07), transparent 60%),
    radial-gradient(900px 480px at 0% 110%, rgb(34 211 238 / 0.05), transparent 60%),
    var(--gray-50);
  background-attachment: fixed;
}
.dark .fi-body {
  background:
    radial-gradient(1200px 560px at 100% -10%, rgb(90 162 255 / 0.12), transparent 60%),
    radial-gradient(900px 520px at 0% 110%, rgb(70 225 255 / 0.06), transparent 60%),
    var(--gray-950);
  background-attachment: fixed;
}

/* ---------- topbar & sidebar ---------- */
.fi-topbar {
  background: color-mix(in oklab, var(--mc-card) 78%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--mc-line);
  box-shadow: none !important;
}
/* =========================================================
   Sidebar: tinted icon tiles, colour per section, filled active state
   ========================================================= */
.fi-main-sidebar {
  background:
    radial-gradient(420px 260px at 100% 0%, color-mix(in oklab, var(--mc-accent) 9%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--mc-card) 88%, transparent), color-mix(in oklab, var(--mc-card) 72%, transparent));
  border-inline-end: 1px solid var(--mc-line);
  backdrop-filter: blur(16px);
}
.fi-main-sidebar .fi-sidebar-nav {
  padding: 1rem 0.65rem 0.9rem;
  gap: 1rem;
}
.fi-main-sidebar .fi-sidebar-nav-groups {
  gap: 1.15rem;
}

/* section colours (by destination, so they survive reordering) */
.fi-sidebar-item { --tone: var(--mc-accent); }
.fi-sidebar-item a[href$="/admin"] { --tone: #3b95ff; }
.fi-sidebar-item a[href*="/project-requests"] { --tone: #f5a524; }
.fi-sidebar-item a[href*="/categories"] { --tone: #8b6cf6; }
.fi-sidebar-item a[href*="/machines"] { --tone: #3b95ff; }
.fi-sidebar-item a[href*="/production-lines"] { --tone: #22c7e6; }
.fi-sidebar-item a[href*="/robots"] { --tone: #22c993; }
.fi-sidebar-item a[href*="/users"] { --tone: #f472b6; }
.fi-sidebar-item a[href*="/faqs"] { --tone: #f97316; }

/* group title: small label + hairline */
.fi-sidebar-group-btn {
  padding-inline: 0.55rem;
  gap: 0.6rem;
}
.fi-sidebar-group-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  color: var(--mc-muted) !important;
}
.fi-sidebar-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--mc-line-strong), transparent);
}
[dir="rtl"] .fi-sidebar-group-label::after {
  background: linear-gradient(-90deg, var(--mc-line-strong), transparent);
}
.fi-sidebar-group-collapse-btn {
  opacity: 0.45;
  transition: opacity 0.18s;
}
.fi-sidebar-group-btn:hover .fi-sidebar-group-collapse-btn {
  opacity: 1;
}
.fi-sidebar-group-items {
  gap: 0.2rem;
  margin-top: 0.35rem;
}

/* item */
.fi-sidebar-item-btn {
  position: relative;
  gap: 0.75rem !important;
  min-height: 2.85rem;
  padding: 0.3rem 0.45rem !important;
  border-radius: 14px !important;
  transition: background-color 0.2s, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.fi-sidebar-item-btn:hover {
  background: color-mix(in oklab, var(--tone) 8%, transparent) !important;
}
.fi-sidebar-item-btn:hover .fi-sidebar-item-label {
  color: var(--gray-950);
}
.dark .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
  color: #fff;
}
/* the icon becomes a rounded tile (padding/background work on the outer <svg>) */
.fi-sidebar-item-icon {
  box-sizing: content-box;
  width: 1.15rem !important;
  height: 1.15rem !important;
  padding: 0.5rem;
  flex: none;
  border-radius: 12px;
  color: var(--tone) !important;
  background: color-mix(in oklab, var(--tone) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 20%, transparent);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
  transform: scale(1.06) rotate(-4deg);
  background: color-mix(in oklab, var(--tone) 18%, transparent);
}
.fi-sidebar-item-label {
  font-size: 0.9rem;
  font-weight: 600 !important;
  color: var(--mc-muted) !important;
  transition: color 0.2s;
}

/* active item: soft tone background, filled tile, edge marker */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  background: linear-gradient(90deg, color-mix(in oklab, var(--tone) 16%, transparent), color-mix(in oklab, var(--tone) 4%, transparent)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 22%, transparent);
}
[dir="rtl"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  background: linear-gradient(-90deg, color-mix(in oklab, var(--tone) 16%, transparent), color-mix(in oklab, var(--tone) 4%, transparent)) !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
  content: "";
  position: absolute;
  inset-block: 0.7rem;
  inset-inline-start: -0.65rem;
  width: 4px;
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
  background: var(--tone);
  box-shadow: 0 0 12px var(--tone);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
  color: #fff !important;
  background: linear-gradient(145deg, color-mix(in oklab, var(--tone) 80%, #fff), var(--tone));
  box-shadow: 0 8px 18px -8px var(--tone);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
  color: var(--gray-950) !important;
  font-weight: 700 !important;
}
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label {
  color: #fff !important;
}

/* counters: tone pill, gently pulsing while there is something new */
.fi-sidebar-item-badge-ctn .fi-badge {
  min-width: 1.6rem;
  justify-content: center;
  color: #fff !important;
  background: var(--tone) !important;
  --tw-ring-color: transparent !important;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--tone) 60%, transparent);
  animation: mc-pulse 2.4s ease-out infinite;
}
@keyframes mc-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--tone) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px transparent; }
}

/* collapsed (icons only): centre the tiles, hide the group hairlines */
.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
  justify-content: center;
}
.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
  inset-inline-start: -0.65rem;
}

/* footer card */
.mc-side-card {
  position: relative;
  display: grid;
  gap: 0.35rem;
  margin: 0 0.65rem 0.9rem;
  padding: 1rem 1rem 0.95rem;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgb(70 225 255 / 0.55), transparent 55%),
    linear-gradient(140deg, #1767d6, #2f80ed 60%, #3aa0ff);
  box-shadow: 0 16px 34px -18px rgb(23 103 214 / 0.8);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mc-side-card:hover {
  transform: translateY(-2px);
}
.mc-side-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.09) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(200deg, #000, transparent 70%);
  pointer-events: none;
}
.mc-side-card__icon {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.18);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.mc-side-card__icon .fi-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.mc-side-card b {
  margin-top: 0.35rem;
  font-size: 0.92rem;
}
.mc-side-card span {
  font-size: 0.76rem;
  opacity: 0.85;
  line-height: 1.5;
}
.mc-side-card__go {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0.85;
}
[dir="rtl"] .mc-side-card__go {
  transform: scaleX(-1);
}
.fi-main-sidebar:not(.fi-sidebar-open) .mc-side-card {
  display: none;
}

/* ---------- headings ---------- */
.fi-header-heading {
  letter-spacing: -0.01em;
}

/* ---------- cards: sections, widgets, table container ---------- */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart .fi-section {
  background: var(--mc-card) !important;
  border-radius: var(--mc-radius) !important;
  box-shadow: var(--mc-shadow) !important;
  --tw-ring-color: var(--mc-line) !important;
  outline: 1px solid var(--mc-line);
  outline-offset: -1px;
}
.fi-section-header {
  padding-block: 1rem;
}
.fi-section-header-heading {
  font-weight: 700;
}
/* section icon as a tinted tile */
.fi-section-header > .fi-icon {
  box-sizing: content-box;
  width: 1.2rem !important;
  height: 1.2rem !important;
  padding: 0.5rem;
  flex: none;
  border-radius: 12px;
  color: var(--mc-accent);
  background: var(--mc-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mc-accent) 22%, transparent);
}
.fi-section-header-description {
  color: var(--mc-muted) !important;
}
.fi-section-has-header > .fi-section-content-ctn {
  border-top-color: var(--mc-line) !important;
}

/* =========================================================
   Forms (create / edit)
   ========================================================= */
.fi-fo-field-label {
  font-weight: 600 !important;
}
/* language badge next to bilingual labels */
.mc-lang {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.15rem;
  margin-inline-start: 0.3rem;
  padding-inline: 0.35rem;
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}
.mc-lang--ar {
  color: #0d9a63;
  background: rgb(13 154 99 / 0.12);
}
.mc-lang--en {
  color: var(--mc-accent);
  background: var(--mc-accent-soft);
  letter-spacing: 0.04em;
}
.dark .mc-lang--ar {
  color: #2ee59d;
  background: rgb(46 229 157 / 0.12);
}

/* inputs: soft fill, clear focus */
.fi-fo-field .fi-input-wrp {
  background: var(--mc-card-2) !important;
  box-shadow: inset 0 0 0 1px var(--mc-line-strong) !important;
  transition: box-shadow 0.18s, background-color 0.18s;
}
.dark .fi-fo-field .fi-input-wrp {
  background: #161e2e !important;
}
/* browser autofill: keep the field's own background and text colour instead of Chrome's tinted strip */
.fi-input-wrp input:-webkit-autofill,
.fi-input-wrp input:-webkit-autofill:hover,
.fi-input-wrp input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--gray-950);
  caret-color: var(--gray-950);
  transition: background-color 99999s ease-out 0s;
  border-radius: inherit;
}
.dark .fi-input-wrp input:-webkit-autofill,
.dark .fi-input-wrp input:-webkit-autofill:hover,
.dark .fi-input-wrp input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}
.fi-fo-field .fi-input-wrp:hover {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mc-accent) 35%, var(--mc-line-strong)) !important;
}
.fi-fo-field .fi-input-wrp:focus-within {
  background: var(--mc-card) !important;
  box-shadow: inset 0 0 0 1.5px var(--mc-accent), 0 0 0 4px var(--mc-accent-soft) !important;
}
.fi-fo-field .fi-input-wrp-prefix .fi-icon,
.fi-fo-field .fi-input-wrp-suffix .fi-icon {
  color: var(--mc-muted);
}
.fi-fo-field .fi-input-wrp:focus-within .fi-input-wrp-prefix .fi-icon {
  color: var(--mc-accent);
}
/* the slug prefix ("/machines/") reads like part of the address */
.mc-ltr-field .fi-input-wrp-prefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--mc-muted);
}
.fi-fo-field-wrp-helper-text,
.fi-fo-field .fi-sc-text {
  color: var(--mc-muted);
}

/* icon picker options */
.mc-icon-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.mc-icon-opt svg {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.3rem;
  border-radius: 8px;
  color: var(--mc-accent);
  background: var(--mc-accent-soft);
}
.mc-icon-opt span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

/* toggles inside the publishing card get a little breathing room */
.fi-fo-toggle + .fi-fo-field-wrp-helper-text {
  margin-top: 0.25rem;
}

/* sticky save bar: frosted, aligned with the page */
.fi-sc-actions.fi-sticky .fi-ac {
  border-radius: var(--mc-radius) !important;
  background: color-mix(in oklab, var(--mc-card) 82%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.45), inset 0 0 0 1px var(--mc-line-strong) !important;
}

/* live preview card */
.mc-preview {
  display: grid;
  gap: 0.85rem;
}
.mc-preview__tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--mc-card-2);
  box-shadow: inset 0 0 0 1px var(--mc-line);
}
.mc-preview__tabs button {
  flex: 1;
  height: 2rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mc-muted);
  transition: background-color 0.18s, color 0.18s;
}
.mc-preview__tabs button.is-on {
  color: #fff;
  background: var(--mc-accent);
  box-shadow: 0 6px 16px -8px var(--mc-ring);
}
.mc-preview__card {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: 1.15rem;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(260px 160px at 100% 0%, color-mix(in oklab, var(--mc-accent) 14%, transparent), transparent 70%),
    var(--mc-card-2);
  box-shadow: inset 0 0 0 1px var(--mc-line-strong);
}
.mc-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1rem;
}
.mc-preview__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 15px;
  color: var(--mc-accent);
  background: var(--mc-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mc-accent) 25%, transparent);
}
.mc-preview__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: var(--mc-muted);
  box-shadow: inset 0 0 0 1px var(--mc-line-strong);
}
.mc-preview__card h3 {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.4;
}
.mc-preview__card p {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--mc-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mc-preview__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mc-accent);
}

/* ---------- table toolbar (search / filters / columns) ---------- */
.fi-ta-header-toolbar {
  gap: 0.75rem;
  padding: 0.9rem 1rem !important;
  background: linear-gradient(180deg, var(--mc-card-2), var(--mc-card));
  border-bottom: 1px solid var(--mc-line) !important;
}
/* search takes the start side and grows; Filters / Columns sit at the far end */
.fi-ta-header-toolbar > div:last-child {
  flex: 1 1 auto;
  justify-content: flex-start;
}
.fi-ta-search-field {
  flex: 1 1 18rem;
  max-width: 30rem;
  margin-inline-end: auto;
}
/* the count is always rendered (even "0"); active filters show in the indicators bar instead */
.fi-ta-filters-dropdown .fi-btn-badge-ctn {
  display: none;
}
.fi-ta-search-field .fi-input-wrp,
.fi-ta-header-toolbar .fi-input-wrp {
  border-radius: 999px !important;
  background: var(--mc-card) !important;
  box-shadow: inset 0 0 0 1px var(--mc-line-strong) !important;
  transition: box-shadow 0.18s;
  min-height: 2.5rem;
}
.fi-ta-search-field .fi-input-wrp:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--mc-accent), 0 0 0 4px var(--mc-accent-soft) !important;
}
.fi-ta-search-field .fi-input-wrp-prefix .fi-icon {
  color: var(--mc-accent);
}
.fi-ta-header-toolbar .fi-btn {
  border-radius: 999px;
  min-height: 2.5rem;
  padding-inline: 1rem;
  background: var(--mc-card);
  box-shadow: inset 0 0 0 1px var(--mc-line-strong) !important;
  font-weight: 600;
}
.fi-ta-header-toolbar .fi-btn:hover {
  background: var(--mc-accent-soft);
  color: var(--mc-accent);
}
.fi-ta-header-toolbar .fi-btn .fi-badge,
.fi-ta-header-toolbar .fi-icon-btn-badge-ctn .fi-badge {
  background: var(--mc-accent) !important;
  color: #fff !important;
  --tw-ring-color: transparent !important;
}
.fi-ta-filters-dropdown .fi-dropdown-panel,
.fi-ta-col-manager-dropdown .fi-dropdown-panel {
  border-radius: var(--mc-radius-sm);
}
.fi-ta-filter-indicators {
  padding-inline: 1rem;
  background: var(--mc-accent-soft);
  border-bottom: 1px solid var(--mc-line);
}

/* ---------- table ---------- */
.fi-ta-table {
  border-collapse: separate;
  border-spacing: 0;
}
.fi-ta-table > thead > tr {
  background: var(--mc-head) !important;
}
.fi-ta-header-cell {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--mc-muted) !important;
  padding-block: 0.8rem !important;
  white-space: nowrap;
}
.fi-ta-header-cell-sorted,
.fi-ta-header-cell-sorted .fi-icon {
  color: var(--mc-accent) !important;
}
.fi-ta-table > tbody {
  border-color: var(--mc-line) !important;
}
.fi-ta-row {
  transition: background-color 0.15s;
}
.fi-ta-row > td {
  border-top: 1px solid var(--mc-line);
}
.fi-ta-row:hover {
  background: var(--mc-row-hover) !important;
}
.fi-ta-row:hover > td:first-child {
  box-shadow: inset 3px 0 0 var(--mc-accent);
}
[dir="rtl"] .fi-ta-row:hover > td:first-child {
  box-shadow: inset -3px 0 0 var(--mc-accent);
}
.fi-ta-cell {
  padding-block: 0.35rem;
}
.fi-ta-text-description {
  color: var(--mc-muted) !important;
}
.fi-ta-image img {
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--mc-line-strong);
}
.fi-ta-record-checkbox,
.fi-ta-page-checkbox {
  border-radius: 6px !important;
}
.fi-ta-actions .fi-icon-btn {
  border-radius: 10px;
}
.fi-ta-actions .fi-icon-btn:hover {
  background: var(--mc-accent-soft);
  color: var(--mc-accent);
}

/* pagination footer */
.fi-pagination {
  padding: 0.8rem 1rem !important;
  background: var(--mc-card-2);
  border-top: 1px solid var(--mc-line);
}
.fi-pagination-items {
  border-radius: 999px !important;
  overflow: hidden;
}

/* empty state */
.fi-ta-empty-state-icon-bg {
  background: var(--mc-accent-soft) !important;
  color: var(--mc-accent);
  border-radius: 18px !important;
}

/* ---------- badges ---------- */
.fi-badge {
  border-radius: 999px !important;
  padding-inline: 0.6rem !important;
  font-weight: 600;
  gap: 0.3rem;
}
.fi-badge .fi-icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* ---------- tabs (request status) ---------- */
.fi-tabs {
  border-radius: 999px !important;
  padding: 0.3rem !important;
  background: var(--mc-card) !important;
  box-shadow: var(--mc-shadow) !important;
  outline: 1px solid var(--mc-line);
  outline-offset: -1px;
  --tw-ring-color: transparent !important;
}
.fi-tabs-item {
  border-radius: 999px !important;
  transition: background-color 0.18s, color 0.18s;
}
.fi-tabs-item.fi-active {
  background: var(--mc-accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -10px var(--mc-ring);
}
.fi-tabs-item.fi-active .fi-icon,
.fi-tabs-item.fi-active .fi-tabs-item-label {
  color: #fff !important;
}
.fi-tabs-item.fi-active .fi-badge {
  background: rgb(255 255 255 / 0.22) !important;
  color: #fff !important;
  --tw-ring-color: transparent !important;
}

/* ---------- buttons & inputs ---------- */
.fi-btn {
  border-radius: 12px;
}
.fi-btn.fi-color-primary:not(.fi-outlined) {
  background-image: linear-gradient(135deg, rgb(255 255 255 / 0.14), transparent 55%);
  box-shadow: 0 10px 24px -14px var(--mc-ring);
}
.fi-input-wrp {
  border-radius: var(--mc-radius-sm) !important;
}
.fi-input-wrp:focus-within {
  box-shadow: 0 0 0 4px var(--mc-accent-soft);
}

/* ---------- stats widgets ---------- */
.fi-wi-stats-overview-stat {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fi-wi-stats-overview-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--mc-accent), #46e1ff);
  opacity: 0.85;
}
a.fi-wi-stats-overview-stat:hover {
  transform: translateY(-2px);
}
.fi-wi-stats-overview-stat-value {
  letter-spacing: -0.02em;
}

/* ---------- dropdowns & modals ---------- */
.fi-dropdown-panel {
  border-radius: var(--mc-radius-sm) !important;
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.35) !important;
}
.fi-modal-window {
  border-radius: var(--mc-radius) !important;
}

/* ---------- brand: the mark is drawn for dark backgrounds (same filter as the site) ---------- */
html:not(.dark) .mc-brand-mark {
  filter: invert(1) hue-rotate(180deg) saturate(1.5);
}

/* =========================================================
   Top bar: logo · search ………… [site · language · theme] · bell · name · avatar
   ========================================================= */
.fi-topbar {
  height: 4.25rem;
  padding-inline: 1rem 1.25rem;
}
.fi-topbar-end {
  flex: 1 1 auto;
  gap: 0.6rem;
  align-items: center;
}
/* search grows from the logo side and pushes everything else to the far end */
.fi-topbar .fi-global-search-ctn {
  flex: 1 1 auto;
  max-width: 34rem;
  margin-inline-start: 1.25rem;
  margin-inline-end: auto;
}
.fi-topbar .fi-global-search-field .fi-input-wrp {
  border-radius: 999px !important;
  min-height: 2.6rem;
  background: var(--mc-card-2) !important;
  box-shadow: inset 0 0 0 1px var(--mc-line-strong) !important;
  transition: box-shadow 0.18s, background-color 0.18s;
}
.fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
  background: var(--mc-card) !important;
  box-shadow: inset 0 0 0 1.5px var(--mc-accent), 0 0 0 4px var(--mc-accent-soft) !important;
}
.fi-topbar .fi-global-search-field .fi-input-wrp-prefix .fi-icon {
  color: var(--mc-accent);
}
/* the Ctrl+K hint as a keycap */
.fi-topbar .fi-global-search-field .fi-input-wrp-suffix {
  padding-inline-end: 0.5rem;
}
.fi-topbar .fi-global-search-field .fi-input-wrp-suffix > * {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--mc-muted);
  border: 1px solid var(--mc-line-strong);
  border-bottom-width: 2px;
  border-radius: 7px;
  padding: 0.05rem 0.4rem;
  background: var(--mc-card);
  direction: ltr;
}

/* quick actions capsule */
.mc-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.22rem;
  border-radius: 999px;
  background: var(--mc-card-2);
  box-shadow: inset 0 0 0 1px var(--mc-line);
}
.mc-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.15rem;
  min-width: 2.15rem;
  justify-content: center;
  padding-inline: 0.55rem;
  border-radius: 999px;
  color: var(--mc-muted);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background-color 0.18s, color 0.18s;
}
.mc-topbar-btn:hover {
  background: var(--mc-accent-soft);
  color: var(--mc-accent);
}
.mc-topbar-btn .fi-icon {
  width: 1.2rem;
  height: 1.2rem;
}
.mc-topbar-btn__lang {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
  background: var(--mc-accent-soft);
  color: var(--mc-accent);
}
@media (max-width: 1023px) {
  .mc-topbar-btn__label:not(.mc-topbar-btn__lang) {
    display: none;
  }
}

/* notifications bell: same round-button language */
.fi-topbar-end > .fi-no-database {
  display: flex;
  flex: none;
}
.fi-topbar-database-notifications-btn {
  width: 2.6rem !important;
  height: 2.6rem !important;
  border-radius: 999px !important;
  background: var(--mc-card-2);
  box-shadow: inset 0 0 0 1px var(--mc-line);
}
.fi-topbar-database-notifications-btn:hover {
  background: var(--mc-accent-soft);
  color: var(--mc-accent);
}
.fi-topbar-database-notifications-btn .fi-icon {
  width: 1.3rem;
  height: 1.3rem;
}

/* name + role, then the avatar: one "user chip" separated from the actions */
.mc-topbar-user {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  padding-inline-start: 0.85rem;
  margin-inline-start: 0.25rem;
  border-inline-start: 1px solid var(--mc-line-strong);
  min-width: 0;
}
.mc-topbar-user__name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--gray-950);
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .mc-topbar-user__name {
  color: #fff;
}
.mc-topbar-user__role {
  font-size: 0.72rem;
  color: var(--mc-muted);
}
.mc-topbar-user:hover .mc-topbar-user__name {
  color: var(--mc-accent);
}
@media (max-width: 767px) {
  .mc-topbar-user {
    display: none;
  }
}
.fi-user-menu-trigger .fi-avatar {
  width: 2.6rem;
  height: 2.6rem;
  box-shadow: 0 0 0 2px var(--mc-card), 0 0 0 4px color-mix(in oklab, var(--mc-accent) 55%, transparent);
  transition: box-shadow 0.18s;
}
.fi-user-menu-trigger:hover .fi-avatar {
  box-shadow: 0 0 0 2px var(--mc-card), 0 0 0 4px var(--mc-accent);
}

/* =========================================================
   My account page
   ========================================================= */
.mc-profile-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--mc-radius);
  background: var(--mc-card);
  box-shadow: var(--mc-shadow);
  outline: 1px solid var(--mc-line);
  outline-offset: -1px;
}
.mc-profile-hero__cover {
  height: 8.5rem;
  background:
    radial-gradient(circle at 15% 120%, rgb(70 225 255 / 0.55), transparent 45%),
    radial-gradient(circle at 85% -20%, rgb(255 138 61 / 0.35), transparent 40%),
    linear-gradient(120deg, #1767d6, #2f80ed 45%, #46b5ff);
}
.mc-profile-hero__cover::after {
  content: "";
  display: block;
  height: 100%;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000, transparent);
}
.mc-profile-hero__body {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1rem 1.75rem 1.5rem;
  flex-wrap: wrap;
}
/* only the photo overlaps the cover; the text stays on the card */
.mc-profile-hero__body > .mc-profile-hero__avatar {
  margin-top: -4.75rem;
}
.mc-profile-hero__avatar {
  position: relative;
  flex: none;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  padding: 5px;
  background: var(--mc-card);
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.5);
}
.mc-profile-hero__avatar img,
.mc-profile-hero__avatar > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.mc-profile-hero__avatar > span {
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #1767d6, #46b5ff);
}
.mc-profile-hero__status {
  position: absolute;
  inset-block-end: 0.55rem;
  inset-inline-end: 0.55rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--mc-muted);
  box-shadow: 0 0 0 3px var(--mc-card);
}
.mc-profile-hero__status.is-on {
  background: #2ee59d;
}
.mc-profile-hero__text {
  flex: 1 1 18rem;
  min-width: 0;
  padding-bottom: 0.2rem;
}
.mc-profile-hero__name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.mc-profile-hero__name h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.mc-profile-hero__text > p {
  color: var(--mc-muted);
  margin-top: 0.1rem;
}
.mc-profile-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.mc-profile-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--mc-card-2);
  box-shadow: inset 0 0 0 1px var(--mc-line);
  color: var(--mc-muted);
}
.mc-profile-hero__meta .fi-icon {
  width: 1rem;
  height: 1rem;
  color: var(--mc-accent);
}

/* avatar uploader: big centred circle */
.mc-avatar-upload {
  display: flex;
  justify-content: center;
  padding-block: 0.75rem;
}
.mc-avatar-upload .filepond--root {
  width: 11rem !important;
  height: 11rem !important;
  margin-inline: auto;
}
.mc-avatar-upload .filepond--panel-root {
  background: var(--mc-accent-soft) !important;
  border: 2px dashed color-mix(in oklab, var(--mc-accent) 45%, transparent);
}
.mc-avatar-upload .filepond--drop-label {
  color: var(--mc-accent);
  font-weight: 600;
}

/* =========================================================
   Dashboard widgets
   ========================================================= */
.mc-tone-blue { --tone: #3b95ff; }
.mc-tone-cyan { --tone: #22c7e6; }
.mc-tone-amber { --tone: #f5a524; }
.mc-tone-violet { --tone: #8b6cf6; }
.mc-tone-green { --tone: #22c993; }
.mc-tone-red { --tone: #f43f5e; }
.mc-tone-gray { --tone: #94a3b8; }
.dark .mc-tone-green { --tone: #2ee59d; }

@keyframes mc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes mc-draw {
  from { stroke-dashoffset: 400; }
  to { stroke-dashoffset: 0; }
}
@keyframes mc-grow {
  from { transform: scaleX(0); }
}

/* small rounded status chip */
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tone);
  background: color-mix(in oklab, var(--tone) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 28%, transparent);
}
.mc-chip .fi-icon {
  width: 0.85rem;
  height: 0.85rem;
}

/* ---------- KPI cards ---------- */
.mc-kpis {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
}
.mc-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.15rem 1.2rem 1.1rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--mc-radius);
  background: var(--mc-card);
  box-shadow: var(--mc-shadow);
  outline: 1px solid var(--mc-line);
  outline-offset: -1px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s, outline-color 0.25s;
  animation: mc-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 70ms);
}
/* soft colour glow in the corner */
.mc-kpi::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -45%;
  inset-inline-end: -25%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--tone) 28%, transparent), transparent 70%);
  opacity: 0.55;
  transition: opacity 0.25s;
}
.dark .mc-kpi::before {
  opacity: 0.7;
}
.mc-kpi:hover {
  transform: translateY(-3px);
  outline-color: color-mix(in oklab, var(--tone) 45%, transparent);
  box-shadow: var(--mc-shadow), 0 18px 40px -22px color-mix(in oklab, var(--tone) 70%, transparent);
}
.mc-kpi:hover::before {
  opacity: 1;
}
.mc-kpi__top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.mc-kpi__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  color: var(--tone);
  background: linear-gradient(145deg, color-mix(in oklab, var(--tone) 22%, transparent), color-mix(in oklab, var(--tone) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 30%, transparent);
}
.mc-kpi__icon .fi-icon {
  width: 1.4rem;
  height: 1.4rem;
}
.mc-kpi__label {
  flex: 1;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--mc-muted);
}
.mc-kpi__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}
.mc-kpi__value {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gray-950);
}
.dark .mc-kpi__value {
  color: #fff;
}
.mc-kpi__hint {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--mc-muted);
}
.mc-kpi__spark {
  flex: none;
  width: 7.5rem;
  height: 2.6rem;
  color: var(--tone);
  overflow: visible;
}
.mc-kpi__spark-line {
  stroke-dasharray: 400;
  animation: mc-draw 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 70ms + 0.2s);
}
.mc-kpi__split {
  display: grid;
  gap: 0.55rem;
  margin-top: auto;
}
.mc-kpi__bar {
  display: flex;
  gap: 3px;
  height: 0.5rem;
}
.mc-kpi__bar > span {
  border-radius: 999px;
  background: var(--tone);
  transform-origin: inline-start;
  animation: mc-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.3s;
}
.mc-kpi__split ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  font-size: 0.75rem;
  color: var(--mc-muted);
}
.mc-kpi__split li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.mc-kpi__split li i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tone);
}
.mc-kpi__split li b {
  color: var(--gray-950);
}
.dark .mc-kpi__split li b {
  color: #fff;
}

/* ---------- panels (pipeline, types, chart) ---------- */
.mc-panel .fi-section-header,
.fi-wi-chart .fi-section-header {
  border-bottom: 1px solid var(--mc-line);
}
.fi-wi-chart .fi-section-content {
  padding-top: 0.75rem;
}
/* cards in the same dashboard row share one height */
.fi-wi-widget > .fi-section,
.fi-wi-widget > .fi-wi-chart > .fi-section,
.fi-wi-chart > .fi-section,
.fi-wi-widget > .fi-ta-ctn {
  height: 100%;
}
.fi-wi-widget > .fi-section:has(.mc-types) {
  height: auto;
}
.fi-wi-chart > .fi-section {
  display: flex;
  flex-direction: column;
}
.fi-wi-chart > .fi-section > .fi-section-content-ctn {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* pipeline ring */
.mc-ring {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
}
.mc-ring__chart {
  position: relative;
  width: min(11.5rem, 100%);
  aspect-ratio: 1;
}
.mc-ring__chart svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg) scaleY(-1);
}
[dir="rtl"] .mc-ring__chart svg {
  transform: rotate(-90deg);
}
.mc-ring__track {
  fill: none;
  stroke: var(--mc-line);
  stroke-width: 4.2;
}
.mc-ring__seg {
  fill: none;
  stroke: var(--tone);
  stroke-width: 4.2;
  stroke-linecap: round;
  animation: mc-rise 0.7s both;
  animation-delay: calc(var(--i) * 90ms);
  transition: stroke-width 0.2s;
}
.mc-ring__seg:hover {
  stroke-width: 5.2;
}
.mc-ring__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.mc-ring__center b {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.mc-ring__center span {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--mc-muted);
}
.mc-ring__legend {
  width: 100%;
  display: grid;
  gap: 0.3rem;
}
.mc-ring__legend a {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "dot label count share" "bar bar bar bar";
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.2rem;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  transition: background-color 0.18s;
}
.mc-ring__legend a:hover {
  background: color-mix(in oklab, var(--tone) 9%, transparent);
}
.mc-ring__dot {
  grid-area: dot;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tone) 22%, transparent);
}
.mc-ring__label {
  grid-area: label;
  font-size: 0.85rem;
  font-weight: 600;
}
.mc-ring__count {
  grid-area: count;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mc-ring__share {
  grid-area: share;
  min-width: 2.6rem;
  text-align: end;
  font-size: 0.75rem;
  color: var(--mc-muted);
}
.mc-ring__bar {
  grid-area: bar;
  height: 4px;
  border-radius: 999px;
  background: var(--mc-line);
  overflow: hidden;
}
.mc-ring__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tone);
  transform-origin: inline-start;
  animation: mc-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.2s;
}

/* requests by type */
.mc-types {
  display: grid;
  gap: 1rem;
}
.mc-types li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  animation: mc-rise 0.5s both;
  animation-delay: calc(var(--i) * 80ms);
}
.mc-types__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 13px;
  color: var(--tone);
  background: color-mix(in oklab, var(--tone) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 26%, transparent);
}
.mc-types__icon .fi-icon {
  width: 1.3rem;
  height: 1.3rem;
}
.mc-types__main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.4rem;
}
.mc-types__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.87rem;
  font-weight: 600;
}
.mc-types__head em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  margin-inline-start: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  color: var(--tone);
  background: color-mix(in oklab, var(--tone) 14%, transparent);
}
.mc-types__head b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mc-types__head small {
  font-weight: 600;
  color: var(--mc-muted);
}
.mc-types__bar {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--mc-line);
  overflow: hidden;
}
.mc-types__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--tone) 55%, transparent), var(--tone));
  transform-origin: inline-start;
  animation: mc-grow 1s cubic-bezier(0.22, 1, 0.36, 1) both 0.25s;
}
[dir="rtl"] .mc-types__bar i {
  background: linear-gradient(-90deg, color-mix(in oklab, var(--tone) 55%, transparent), var(--tone));
}

@media (prefers-reduced-motion: reduce) {
  .mc-kpi,
  .mc-kpi__spark-line,
  .mc-kpi__bar > span,
  .mc-ring__seg,
  .mc-ring__bar i,
  .mc-types li,
  .mc-types__bar i {
    animation: none !important;
  }
}

/* =========================================================
   Sign-in page: 3D stage + glass card
   ========================================================= */
.mc-login {
  --stage-bg-1: #eaf1fb;
  --stage-bg-2: #d9e6f7;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(24rem, 1fr);
  min-height: 100dvh;
}
.dark .mc-login {
  --stage-bg-1: #0d1424;
  --stage-bg-2: #142038;
}

/* ---- stage ---- */
.mc-login__stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 600px at 30% 35%, color-mix(in oklab, var(--mc-accent) 22%, transparent), transparent 65%),
    radial-gradient(700px 500px at 85% 100%, rgb(255 138 61 / 0.12), transparent 60%),
    linear-gradient(160deg, var(--stage-bg-1), var(--stage-bg-2));
  border-inline-end: 1px solid var(--mc-line);
}
.mc-login__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 58%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 58%, #000 55%, transparent 100%);
  animation: mc-fade 1.6s ease both 0.2s;
}
.mc-login__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--mc-accent) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--mc-accent) 10%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
  mask-image: linear-gradient(180deg, #000, transparent 75%);
}
.mc-login__glow {
  position: absolute;
  z-index: 0;
  width: 46rem;
  aspect-ratio: 1;
  inset-inline-start: 50%;
  top: 55%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--mc-accent) 30%, transparent), transparent 62%);
  filter: blur(10px);
  animation: mc-breathe 7s ease-in-out infinite;
}
[dir="rtl"] .mc-login__glow {
  translate: 50% -50%;
}
.mc-login__brand,
.mc-login__copy {
  position: relative;
  z-index: 2;
}
.mc-login__brand {
  position: absolute;
  top: 2rem;
  inset-inline-start: 2.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  font-size: 1.05rem;
  color: var(--gray-950);
  animation: mc-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dark .mc-login__brand {
  color: #fff;
}
/* keep "mark + wordmark" order while the block sits on the start side */
[dir="rtl"] .mc-login__brand {
  flex-direction: row-reverse;
}
.mc-login__brand img {
  height: 34px;
  width: auto;
}
.mc-login__copy {
  position: absolute;
  top: 6.5rem;
  inset-inline-start: 2.25rem;
  max-width: 30rem;
  animation: mc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.15s;
}
.mc-login__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mc-accent);
  background: color-mix(in oklab, var(--mc-card) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mc-accent) 30%, transparent);
  backdrop-filter: blur(8px);
}
.mc-login__eyebrow i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #2ee59d;
  box-shadow: 0 0 0 0 rgb(46 229 157 / 0.6);
  animation: mc-ping 2s ease-out infinite;
}
.mc-login__copy h2 {
  margin-top: 1rem;
  font-size: clamp(1.6rem, 2.4vw, 2.35rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--gray-950);
}
.dark .mc-login__copy h2 {
  color: #fff;
}
.mc-login__copy p {
  margin-top: 0.75rem;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--mc-muted);
}
/* ---- sign-in side ---- */
.mc-login__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 5rem clamp(1rem, 4vw, 3.5rem) 2rem;
  outline: none;
}
.mc-login__tools {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  display: flex;
  gap: 0.25rem;
  padding: 0.22rem;
  border-radius: 999px;
  background: var(--mc-card-2);
  box-shadow: inset 0 0 0 1px var(--mc-line);
}
.mc-login__mobile-brand {
  display: none;
  align-items: center;
  gap: 0.55rem;
  direction: ltr;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.mc-login__mobile-brand img {
  height: 28px;
  width: auto;
}

.mc-login__tilt {
  width: 100%;
  max-width: 27rem;
  perspective: 1200px;
  animation: mc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.1s;
}
.mc-login__card {
  position: relative;
  padding: 2.75rem 2rem 2rem;
  border-radius: 26px;
  background: color-mix(in oklab, var(--mc-card) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 30px 70px -30px rgb(15 30 60 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.dark .mc-login__card {
  box-shadow:
    0 40px 90px -30px rgb(0 0 0 / 0.75),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
}
/* animated gradient border */
.mc-login__card-ring {
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--mc-angle, 0deg), transparent 0deg, var(--mc-accent) 60deg, #46e1ff 110deg, transparent 170deg, transparent 220deg, #ff8a3d 270deg, transparent 320deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mc-spin 6s linear infinite;
  pointer-events: none;
}
.mc-login__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--mc-line-strong);
  pointer-events: none;
}
.mc-login__card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 0%), rgb(255 255 255 / 0.1), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.mc-login__badge {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #46b5ff, #1767d6);
  box-shadow: 0 16px 30px -12px rgb(23 103 214 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.35);
  transform: translateZ(40px);
}
[dir="rtl"] .mc-login__badge {
  translate: 50% -50%;
}
.mc-login__badge .fi-icon {
  width: 1.8rem;
  height: 1.8rem;
}
.mc-login__card .fi-simple-header {
  margin-bottom: 0.25rem;
}
.mc-login__card .fi-simple-header-heading {
  font-size: 1.65rem;
  font-weight: 800;
}
.mc-login__card .fi-simple-header-subheading {
  color: var(--mc-muted);
  line-height: 1.7;
}
.mc-login__card .fi-input-wrp {
  min-height: 2.85rem;
  border-radius: 14px !important;
}
/* the input fills the whole box, so text (and autofill) sit centred in it */
.mc-login__card .fi-input-wrp-content-ctn {
  align-self: stretch;
  display: flex;
}
.mc-login__card .fi-input-wrp .fi-input {
  height: 100%;
  min-height: 2.85rem;
}
.mc-login__card .fi-btn.fi-color-primary {
  min-height: 3rem;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  background-image: linear-gradient(135deg, #46b5ff, #1767d6) !important;
  box-shadow: 0 16px 30px -14px rgb(23 103 214 / 0.85);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.mc-login__card .fi-btn.fi-color-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 20px 36px -14px rgb(23 103 214 / 0.95);
}
.mc-login__foot {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--mc-muted);
  animation: mc-fade 1s ease both 0.6s;
}
.mc-login__foot .fi-icon {
  width: 1rem;
  height: 1rem;
  color: var(--mc-accent);
}

@property --mc-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes mc-spin {
  to { --mc-angle: 360deg; }
}
@keyframes mc-fade {
  from { opacity: 0; }
}
@keyframes mc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes mc-breathe {
  0%, 100% { opacity: 0.75; scale: 1; }
  50% { opacity: 1; scale: 1.08; }
}
@keyframes mc-ping {
  0% { box-shadow: 0 0 0 0 rgb(46 229 157 / 0.6); }
  80%, 100% { box-shadow: 0 0 0 8px transparent; }
}

/* tablets & phones: the scene becomes a banner above the card */
@media (max-width: 1023px) {
  .mc-login {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .mc-login__stage {
    height: 17rem;
    border-inline-end: 0;
    border-bottom: 1px solid var(--mc-line);
  }
  .mc-login__copy {
    display: none;
  }
  .mc-login__brand {
    top: 1.25rem;
    inset-inline-start: 1.25rem;
  }
  .mc-login__panel {
    justify-content: flex-start;
    padding-top: 3rem;
  }
  /* tools move up into the banner's corner, clear of the card */
  .mc-login__tools {
    top: calc(-17rem + 1rem);
    inset-inline-end: 1rem;
    background: color-mix(in oklab, var(--mc-card) 75%, transparent);
    backdrop-filter: blur(10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-login *,
  .mc-login *::before {
    animation: none !important;
  }
}

/* request page: items from the site's quote list */
.mc-quote-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  margin-inline-end: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--mc-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mc-accent) 25%, transparent);
  color: var(--mc-accent);
  font-size: 0.85rem;
  transition: background-color 0.18s;
}
.mc-quote-item:hover {
  background: color-mix(in oklab, var(--mc-accent) 20%, transparent);
}
.mc-quote-item span {
  font-size: 0.72rem;
  color: var(--mc-muted);
}

/* ---------- real site performance (Web Vitals) ---------- */
.mc-vitals {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}
.mc-vital {
  display: grid;
  gap: 0.4rem;
  padding: 1rem;
  border-radius: 16px;
  background: var(--mc-card-2);
  box-shadow: inset 0 0 0 1px var(--mc-line);
  border-top: 3px solid var(--tone);
  animation: mc-rise 0.5s both;
  animation-delay: calc(var(--i) * 60ms);
}
.mc-vital__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.mc-vital__key {
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  color: var(--mc-muted);
}
.mc-vital__value {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--tone);
  font-variant-numeric: tabular-nums;
}
.mc-vital__label {
  font-size: 0.8rem;
  color: var(--mc-muted);
}
.mc-vital__bar {
  height: 5px;
  border-radius: 999px;
  background: var(--mc-line);
  overflow: hidden;
}
.mc-vital__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #22c993;
}
.mc-vital__split {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--mc-muted);
}
.mc-vital__split span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.mc-vital__split .fi-icon {
  width: 0.95rem;
  height: 0.95rem;
}
.mc-vitals-pages {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mc-line);
}
.mc-vitals-pages__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mc-muted);
  margin-bottom: 0.5rem;
}
.mc-vitals-pages ul {
  display: grid;
  gap: 0.35rem;
}
.mc-vitals-pages li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
}
.mc-vitals-pages li:hover {
  background: var(--mc-row-hover);
}
.mc-vitals-pages a {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--mc-accent);
  text-align: start;
}
.mc-vitals-pages__n {
  font-size: 0.75rem;
  color: var(--mc-muted);
}
.mc-vitals-empty {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--mc-muted);
}