:root {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --panel-soft: #ffffff;
  --text: #18202a;
  --muted: #64707d;
  --lilac: #f0ebf7;
  --lilac-strong: #8f73bd;
  --lilac-deep: #6B4AA0;
  --brand-plum: #6B4AA0;
  --brand-soft: #f0ebf7;
  --border: #dce2e8;
  --md-bg: #f7f8fb;
  --md-panel: #ffffff;
  --md-text: #18202a;
  --md-muted: #64707d;
  --md-purple: #6B4AA0;
  --md-border: #dce2e8;
  --radius: 12px;
  --shadow: 0 16px 40px rgba(24, 32, 42, .08);
}

* {
  letter-spacing: 0 !important;
}

html,
body {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400;
  background: #f7f8fb !important;
  color: #18202a;
}

h1,
h2,
h3,
h4,
h5,
h6,
label,
.field__label,
.btn,
.sidebar,
.nav-link,
.nav-group-label,
.tab,
.topbar__heading,
.card-title,
.metric-card__title,
.section-head,
th {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
}

p,
small,
td,
input,
select,
textarea,
.muted,
.topbar__sub,
.user-card__meta {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400;
}

.app-shell,
.main,
.main--auth,
.content,
.topbar {
  background: #f7f8fb !important;
}

.card,
.auth-card,
.auth-card--wide,
.panel,
.metric-card,
.action-card,
.list-row--card,
.table-wrap,
.empty-state {
  background: #ffffff !important;
  border: 1px solid #dce2e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(24, 32, 42, .08) !important;
  color: #18202a;
}

.btn,
button,
input,
select,
textarea {
  min-height: 44px;
}

input,
select,
textarea,
.topbar__search input {
  background: #ffffff !important;
  border: 1px solid #dce2e8 !important;
  border-radius: 6px !important;
  color: #18202a !important;
}

input:focus,
select:focus,
textarea:focus,
.topbar__search input:focus {
  border-color: #6B4AA0 !important;
  box-shadow: 0 0 0 3px rgba(107, 74, 160, .22) !important;
  outline: 0 !important;
}

.btn-primary,
.btn-primary:visited,
button[type="submit"].btn-primary {
  background: #6B4AA0 !important;
  border-color: #6B4AA0 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 22px rgba(107, 74, 160, .22) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: #583b88 !important;
  border-color: #583b88 !important;
  color: #ffffff !important;
}

.btn-soft,
.icon-btn,
.tab {
  background: #ffffff !important;
  border: 1px solid #dce2e8 !important;
  color: #18202a !important;
  border-radius: 8px !important;
}

.btn-soft:hover,
.icon-btn:hover,
.tab:hover,
.tab.is-active {
  background: #f0ebf7 !important;
  border-color: #8f73bd !important;
  color: #583b88 !important;
}

.sidebar {
  background: #6B4AA0 !important;
  color: #ffffff !important;
  border-right: 0 !important;
}

.sidebar__brand {
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.sidebar__brand img {
  object-fit: contain;
}

.sidebar__eyebrow,
.sidebar__title,
.nav-group-label,
.sidebar .user-card__name,
.sidebar .user-card__meta {
  color: #ffffff !important;
}

.nav-link {
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}

.nav-link__icon,
.nav-link__text {
  color: #ffffff !important;
}

.nav-link:hover,
.nav-link.is-active,
.sidebar .btn-soft:hover,
.sidebar .btn-soft.is-active {
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #ffffff !important;
}

.sidebar .btn-soft {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #18202a !important;
}

.sidebar .btn-primary {
  background: #583b88 !important;
  border-color: #583b88 !important;
  color: #ffffff !important;
}

.user-card {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  border-radius: 12px !important;
}

.tabs {
  background: transparent !important;
  border-color: #dce2e8 !important;
}

table {
  color: #18202a;
}

th {
  color: #18202a !important;
  background: #f7f8fb !important;
}

td {
  color: #18202a;
  border-color: #dce2e8 !important;
}

.muted,
.topbar__sub,
.auth-branding p,
.auth-header p,
.auth-note,
.card small {
  color: #64707d !important;
}

.app-shell--auth .content {
  padding: 72px 16px 24px !important;
}

.auth-shell,
.auth-shell--login {
  width: 100%;
  min-height: auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  background: transparent !important;
}

.auth-card,
.auth-card--wide {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  padding: 0 0 34px !important;
  overflow: hidden !important;
  text-align: center;
}

.auth-header {
  width: 100%;
  padding: 28px 24px 24px;
  background: #6B4AA0;
  color: #ffffff;
}

.auth-header h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
}

.auth-header p {
  margin: 8px 0 0;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
}

.auth-branding,
.auth-branding--standard {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 32px 24px 18px !important;
  text-align: center !important;
  background: #ffffff !important;
}

.auth-branding__logo,
.auth-branding__logo--small {
  width: 220px !important;
  height: 100px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.auth-branding h2 {
  margin: 10px 0 0;
  color: #18202a;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
}

.auth-branding p {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.auth-panel {
  width: min(100% - 32px, 460px);
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.auth-panel .form-grid {
  gap: 16px;
  text-align: left;
}

.auth-actions .btn,
.auth-panel .btn-primary {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 720px) {
  .app-shell--auth .content {
    padding: 16px !important;
  }

  .auth-card,
  .auth-card--wide {
    width: 100% !important;
  }

  .auth-header {
    padding: 22px 16px 20px;
  }

  .auth-branding,
  .auth-branding--standard {
    padding: 24px 16px 16px !important;
  }

  .auth-branding h2 {
    font-size: 24px;
  }
}

/* Professional reusable login page */
body.app-shell--auth {
  background: #f7f8fb !important;
}

body.app-shell--auth .main,
body.app-shell--auth .content {
  background: #f7f8fb !important;
}

body.app-shell--auth .content {
  max-width: 520px !important;
  padding: 32px 16px !important;
}

.auth-card--login {
  width: min(100%, 460px) !important;
  max-width: 460px !important;
  padding: 34px 32px 30px !important;
  background: #ffffff !important;
  border: 1px solid #dce2e8 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 42px rgba(24, 32, 42, .10) !important;
  overflow: visible !important;
}

.auth-card--login .auth-branding {
  padding: 0 0 24px !important;
  margin: 0 !important;
  background: #ffffff !important;
  gap: 14px !important;
}

.auth-card--login .auth-branding__logo {
  width: 190px !important;
  height: 96px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: none !important;
}

.auth-card--login .auth-branding__copy h1 {
  margin: 0 !important;
  color: #18202a !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.auth-card--login .auth-branding__copy p {
  margin: 8px 0 0 !important;
  color: #64707d !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.auth-card--login .auth-panel {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.auth-form {
  gap: 16px !important;
}

.auth-card--login .field__label {
  color: #18202a !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.auth-card--login input {
  min-height: 46px !important;
  padding: 0 13px !important;
  background: #ffffff !important;
  border: 1px solid #dce2e8 !important;
  border-radius: 6px !important;
  color: #18202a !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.auth-card--login input::placeholder {
  color: #64707d !important;
}

.auth-card--login input:focus {
  border-color: #6B4AA0 !important;
  box-shadow: 0 0 0 3px rgba(107, 74, 160, .22) !important;
  outline: 0 !important;
}

.auth-card--login .auth-actions {
  display: block !important;
  margin-top: 2px !important;
}

.auth-card--login .btn-primary {
  width: 100% !important;
  min-height: 46px !important;
  background: #6B4AA0 !important;
  border: 1px solid #6B4AA0 !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 22px rgba(107, 74, 160, .22) !important;
}

.auth-card--login .btn-primary:hover,
.auth-card--login .btn-primary:focus {
  background: #583b88 !important;
  border-color: #583b88 !important;
}

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.auth-links a {
  color: #6B4AA0 !important;
  text-decoration: none;
}

.auth-links a:hover,
.auth-links a:focus {
  color: #583b88 !important;
  text-decoration: underline;
}

@media (max-width: 520px) {
  body.app-shell--auth .content {
    padding: 18px 14px !important;
  }

  .auth-card--login {
    padding: 26px 20px 24px !important;
  }

  .auth-card--login .auth-branding__logo {
    width: 160px !important;
    height: 82px !important;
  }

  .auth-links {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

/* Screenshot-style purple sidebar */
@media (min-width: 981px) {
  :root {
    --sidebar-width: 402px;
  }
}

.sidebar--reference {
  gap: 26px !important;
  padding: 35px 23px 24px !important;
  background: #6B4AA0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  overflow-y: auto;
  scrollbar-color: rgba(255, 255, 255, .42) transparent;
  scrollbar-width: thin;
}

.sidebar--reference::-webkit-scrollbar {
  width: 9px;
}

.sidebar--reference::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar--reference::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .42);
  border-radius: 999px;
}

.sidebar--reference .sidebar__brand--card {
  display: grid !important;
  justify-items: center;
  gap: 12px;
  padding: 14px 18px 15px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .22) !important;
  box-shadow: none !important;
  text-align: center;
}

.sidebar--reference .sidebar__brand--card img {
  width: 188px !important;
  height: 88px;
  object-fit: contain;
}

.sidebar--reference .sidebar__brand--card > div {
  display: grid;
  gap: 5px;
}

.sidebar--reference .sidebar__title {
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.15;
}

.sidebar--reference .sidebar__eyebrow {
  color: rgba(255, 255, 255, .68) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
}

.sidebar-menu {
  display: grid !important;
  gap: 15px !important;
}

.sidebar-menu__group {
  display: grid;
  gap: 10px;
}

.sidebar-menu__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 17px;
  min-height: 73px;
  padding: 0 16px;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  text-decoration: none !important;
}

.sidebar-menu__item--group {
  grid-template-columns: 18px 46px minmax(0, 1fr) 18px;
  background: rgba(255, 255, 255, .22) !important;
}

.sidebar-menu__item:hover,
.sidebar-menu__item.is-active {
  background: rgba(255, 255, 255, .22) !important;
  transform: none !important;
  box-shadow: none !important;
}

.sidebar-menu__icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
}

.sidebar-menu__item--group .sidebar-menu__icon {
  background: rgba(255, 255, 255, .18);
}

.sidebar-menu__icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-menu__copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sidebar-menu__copy strong {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.sidebar-menu__copy small {
  color: rgba(255, 255, 255, .58);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sidebar-menu__chevron,
.sidebar-menu__arrow {
  color: rgba(255, 255, 255, .82);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.sidebar-submenu {
  display: grid;
  gap: 0;
  padding: 18px 14px;
  border-radius: 13px;
  background: #ffffff;
  color: #18202a;
  box-shadow: none;
}

.sidebar-submenu a {
  display: grid;
  gap: 6px;
  padding: 12px 14px 20px;
  border-radius: 10px;
  color: #18202a !important;
  text-decoration: none !important;
}

.sidebar-submenu a:hover,
.sidebar-submenu a.is-active {
  background: #f0ebf7;
}

.sidebar-submenu a strong {
  color: #18202a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.sidebar-submenu a.is-active strong {
  color: #6B4AA0;
}

.sidebar-submenu a small {
  color: #64707d;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
}

.sidebar--reference .sidebar__footer {
  gap: 14px !important;
}

.sidebar--reference .user-card {
  background: rgba(255, 255, 255, .16) !important;
  border: 0 !important;
  border-radius: 13px !important;
  padding: 16px 18px !important;
}

.sidebar--reference .sidebar__footer-actions {
  gap: 10px !important;
}

.sidebar--reference .btn-soft,
.sidebar--reference .btn-primary {
  border-radius: 10px !important;
}

@media (min-width: 981px) {
  body.sidebar-collapsed .app-layout {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  body.sidebar-collapsed .sidebar--reference {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.sidebar-collapsed .sidebar--reference .sidebar__brand--card {
    padding: 12px 8px !important;
  }

  body.sidebar-collapsed .sidebar--reference .sidebar__brand--card img {
    width: 56px !important;
    height: 56px;
  }

  body.sidebar-collapsed .sidebar-menu__item,
  body.sidebar-collapsed .sidebar-menu__item--group {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  body.sidebar-collapsed .sidebar-menu__copy,
  body.sidebar-collapsed .sidebar-submenu,
  body.sidebar-collapsed .sidebar-menu__chevron,
  body.sidebar-collapsed .sidebar-menu__arrow {
    display: none;
  }
}

@media (max-width: 980px) {
  :root {
    --sidebar-width: min(92vw, 402px);
  }

  .sidebar--reference {
    padding-top: max(28px, env(safe-area-inset-top)) !important;
  }
}

/* Full reference visual system: fonts, sizes and colors */
:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --text: #111827;
  --muted: #6b7788;
  --purple: #6b3f96;
  --purple-dark: #57317c;
  --purple-soft: #8d6ab5;
  --purple-card: #8b69b4;
  --border: #e3e8ef;
  --shadow: 0 16px 34px rgba(18, 28, 45, .08);
}

html,
body,
button,
input,
select,
textarea {
  font-family: Arial, Helvetica, sans-serif !important;
}

body,
p,
small,
td,
input,
select,
textarea {
  font-weight: 400 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
label,
.field__label,
.btn,
.tab,
.topbar__brand-title,
.topbar__account strong,
.topbar__logout,
.sidebar-menu__copy strong,
.sidebar-submenu a strong,
.sidebar__title,
.page-head h1,
.section-head h3,
.card-title h3,
th {
  font-weight: 700 !important;
}

body.app-shell {
  background: #f4f6fa !important;
  color: #111827 !important;
  font-size: 14px !important;
}

.main,
.content {
  background: #f4f6fa !important;
}

@media (min-width: 981px) {
  :root {
    --sidebar-width: 402px;
  }

  .app-layout {
    grid-template-columns: 402px minmax(0, 1fr) !important;
  }
}

.sidebar--reference {
  padding: 32px 20px 24px !important;
  background: #6b4aa0 !important;
  gap: 24px !important;
}

.sidebar--reference .sidebar__brand--card {
  min-height: 168px;
  padding: 12px 18px 14px !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .22) !important;
}

.sidebar--reference .sidebar__brand--card img {
  width: 198px !important;
  height: 91px !important;
}

.sidebar--reference .sidebar__title {
  font-size: 17px !important;
  line-height: 1.15 !important;
}

.sidebar--reference .sidebar__eyebrow {
  color: rgba(255, 255, 255, .82) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.sidebar-menu {
  gap: 16px !important;
}

.sidebar-menu__item {
  min-height: 56px !important;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
}

.sidebar-menu__item--group {
  min-height: 76px !important;
  grid-template-columns: 18px 46px minmax(0, 1fr) 18px;
  padding: 0 18px !important;
  background: rgba(255, 255, 255, .22) !important;
}

.sidebar-menu__icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .18) !important;
}

.sidebar-menu__copy {
  gap: 7px !important;
}

.sidebar-menu__copy strong {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.12 !important;
}

.sidebar-menu__copy small {
  color: rgba(255, 255, 255, .56) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.sidebar-submenu {
  padding: 16px 12px !important;
  border-radius: 13px !important;
  background: #ffffff !important;
}

.sidebar-submenu a {
  padding: 12px 14px 18px !important;
  border-radius: 10px !important;
}

.sidebar-submenu a:hover,
.sidebar-submenu a.is-active {
  background: #f0ecf5 !important;
}

.sidebar-submenu a strong {
  color: #151c27 !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
}

.sidebar-submenu a.is-active strong {
  color: #6b4aa0 !important;
}

.sidebar-submenu a small {
  color: #7b8794 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.topbar {
  min-height: 106px;
  padding: 26px 36px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e6ebf1 !important;
  box-shadow: 0 2px 10px rgba(18, 28, 45, .04) !important;
}

.topbar__left {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.topbar__logo {
  width: 125px;
  height: 54px;
  object-fit: contain;
}

.topbar__brand-title {
  color: #101827;
  font-size: 28px;
  line-height: 1;
}

.topbar__account {
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 18px;
  border: 1px solid #ece6f4;
  border-radius: 16px;
  background: #fbf9fe;
  color: #8a8192;
  font-size: 14px;
}

.topbar__account strong {
  color: #18202a;
  font-size: 16px;
}

.topbar__role {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #efe4f8;
  color: #6b3f96;
  font-size: 12px;
  font-weight: 700;
}

.topbar__logout {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 12px;
  background: #ffffff;
  color: #4e2b65 !important;
  font-size: 18px;
  text-decoration: none !important;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 42px 44px 22px;
  background: #f4f6fa;
}

.page-head h1 {
  margin: 0 0 14px;
  color: #0f1118;
  font-size: 30px;
  line-height: 1.1;
}

.page-head p {
  margin: 0;
  color: #687789;
  font-size: 14px;
  line-height: 1.45;
}

.page-head__search {
  width: min(100%, 460px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  position: relative;
}

.content {
  padding: 0 44px 36px !important;
}

.tabs {
  display: none !important;
}

.card,
.table-wrap,
.empty-state,
.list-row--card,
.item {
  border: 1px solid #e3e8ef !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 34px rgba(18, 28, 45, .08) !important;
}

.card {
  padding: 22px !important;
}

.card:hover,
.list-row--card:hover,
.item:hover,
.action-card:hover {
  transform: none !important;
}

.section-head h3,
.card-title h3,
.page-title h2,
.welcome-banner h2,
.hero h1 {
  color: #111827 !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
}

.muted,
.sub,
.meta,
.list-row__meta,
.topbar__sub,
.field__help,
.card small {
  color: #728092 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

label,
.field__label {
  color: #667386 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

input,
select,
textarea,
.topbar__search input {
  min-height: 54px !important;
  padding: 0 18px !important;
  border: 1px solid #e0e6ee !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  font-size: 14px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #8b69b4 !important;
  box-shadow: 0 0 0 3px rgba(107, 74, 160, .16) !important;
}

.btn,
button {
  min-height: 54px;
  border-radius: 8px !important;
  font-size: 14px !important;
}

.btn-primary,
button[type="submit"].btn-primary {
  background: #6b3f96 !important;
  border-color: #6b3f96 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: #57317c !important;
  border-color: #57317c !important;
}

.btn-soft,
.icon-btn {
  background: #ffffff !important;
  border-color: #e0e6ee !important;
  color: #6b3f96 !important;
}

.welcome-banner.card {
  display: none !important;
}

@media (max-width: 980px) {
  .topbar {
    min-height: auto;
    padding: 16px !important;
  }

  .topbar__brand-title {
    font-size: 22px;
  }

  .topbar__account {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .page-head {
    display: grid;
    padding: 24px 18px 18px;
  }

  .page-head__search {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .content {
    padding: 0 18px 24px !important;
  }
}

/* Martins module reset: final authority for aligned app screens */
:root {
  --mfs-sidebar: 360px;
  --mfs-bg: #f5f6fa;
  --mfs-panel: #ffffff;
  --mfs-text: #151c27;
  --mfs-muted: #778393;
  --mfs-purple: #6b4aa0;
  --mfs-purple-dark: #583b88;
  --mfs-purple-soft: #8f70b8;
  --mfs-border: #dfe5ec;
  --mfs-shadow: 0 14px 32px rgba(16, 24, 40, .08);
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  background: var(--mfs-bg) !important;
  color: var(--mfs-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

body.app-shell:not(.app-shell--auth) .app-layout {
  display: grid !important;
  grid-template-columns: var(--mfs-sidebar) minmax(0, 1fr) !important;
  min-height: 100vh !important;
  background: var(--mfs-bg) !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference {
  position: sticky !important;
  top: 0 !important;
  width: var(--mfs-sidebar) !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 28px 22px 22px !important;
  background: var(--mfs-purple) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.app-shell:not(.app-shell--auth) .main {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  background: var(--mfs-bg) !important;
}

body.app-shell:not(.app-shell--auth) .topbar {
  min-height: 82px !important;
  height: 82px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 0 32px !important;
  background: var(--mfs-panel) !important;
  border-bottom: 1px solid var(--mfs-border) !important;
  box-shadow: 0 1px 10px rgba(16, 24, 40, .04) !important;
}

body.app-shell:not(.app-shell--auth) .topbar__left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 0 !important;
}

body.app-shell:not(.app-shell--auth) .topbar__logo {
  width: 112px !important;
  max-width: 112px !important;
  height: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  flex: 0 0 112px !important;
}

body.app-shell:not(.app-shell--auth) .topbar__brand-title {
  color: var(--mfs-text) !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body.app-shell:not(.app-shell--auth) .icon-btn {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 8px !important;
  border: 1px solid var(--mfs-border) !important;
  background: #ffffff !important;
  color: var(--mfs-text) !important;
  flex: 0 0 42px !important;
}

body.app-shell:not(.app-shell--auth) .topbar__account {
  min-height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px 0 16px !important;
  border: 1px solid #ebe4f3 !important;
  border-radius: 14px !important;
  background: #fbf9fe !important;
  color: #8a8293 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

body.app-shell:not(.app-shell--auth) .topbar__account strong {
  color: var(--mfs-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.app-shell:not(.app-shell--auth) .topbar__role {
  min-height: 22px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: #efe6f7 !important;
  color: var(--mfs-purple) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body.app-shell:not(.app-shell--auth) .topbar__logout {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #4f336a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.app-shell:not(.app-shell--auth) .page-head,
body.app-shell:not(.app-shell--auth) .content {
  width: min(100%, 1500px) !important;
  margin: 0 auto !important;
}

body.app-shell:not(.app-shell--auth) .page-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px) !important;
  align-items: end !important;
  gap: 24px !important;
  padding: 34px 32px 18px !important;
  background: transparent !important;
}

body.app-shell:not(.app-shell--auth) .page-head h1 {
  margin: 0 0 12px !important;
  color: #101722 !important;
  font-size: 32px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
}

body.app-shell:not(.app-shell--auth) .page-head p {
  margin: 0 !important;
  color: #657386 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

body.app-shell:not(.app-shell--auth) .page-head__search {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  gap: 10px !important;
  align-items: center !important;
}

body.app-shell:not(.app-shell--auth) .page-head__search .search-icon {
  display: none !important;
}

body.app-shell:not(.app-shell--auth) .content {
  padding: 0 32px 34px !important;
  background: transparent !important;
}

body.app-shell:not(.app-shell--auth) .tabs {
  display: flex !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

body.app-shell:not(.app-shell--auth) .tab {
  min-width: 102px !important;
  min-height: 50px !important;
  padding: 0 20px !important;
  border: 1px solid var(--mfs-border) !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: var(--mfs-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.app-shell:not(.app-shell--auth) .tab.is-active,
body.app-shell:not(.app-shell--auth) .tab:hover {
  background: #f1ebf8 !important;
  border-color: #b99bdd !important;
  color: var(--mfs-purple) !important;
}

body.app-shell:not(.app-shell--auth) .card,
body.app-shell:not(.app-shell--auth) .hero__content,
body.app-shell:not(.app-shell--auth) .hero__aside,
body.app-shell:not(.app-shell--auth) .table-wrap,
body.app-shell:not(.app-shell--auth) .empty-state,
body.app-shell:not(.app-shell--auth) .item,
body.app-shell:not(.app-shell--auth) .list-row--card {
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid var(--mfs-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--mfs-shadow) !important;
  padding: 24px !important;
  color: var(--mfs-text) !important;
}

body.app-shell:not(.app-shell--auth) .welcome-banner.card {
  display: flex !important;
  min-height: 176px !important;
  align-items: center !important;
  margin: 0 0 18px !important;
}

body.app-shell:not(.app-shell--auth) .welcome-banner h2,
body.app-shell:not(.app-shell--auth) .page-title h2,
body.app-shell:not(.app-shell--auth) .section-head h3,
body.app-shell:not(.app-shell--auth) .card-title h3 {
  margin: 0 0 10px !important;
  color: var(--mfs-text) !important;
  font-size: 28px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

body.app-shell:not(.app-shell--auth) .eyebrow {
  min-height: 34px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: #eee7f7 !important;
  color: var(--mfs-purple) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

body.app-shell:not(.app-shell--auth) .muted,
body.app-shell:not(.app-shell--auth) .sub,
body.app-shell:not(.app-shell--auth) .meta,
body.app-shell:not(.app-shell--auth) small,
body.app-shell:not(.app-shell--auth) .list-row__meta {
  color: var(--mfs-muted) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

body.app-shell:not(.app-shell--auth) input,
body.app-shell:not(.app-shell--auth) select,
body.app-shell:not(.app-shell--auth) textarea {
  min-height: 50px !important;
  padding: 0 16px !important;
  border: 1px solid var(--mfs-border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--mfs-text) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

body.app-shell:not(.app-shell--auth) label,
body.app-shell:not(.app-shell--auth) .field__label {
  color: #5f6e82 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.app-shell:not(.app-shell--auth) .btn {
  min-height: 50px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.app-shell:not(.app-shell--auth) .btn-primary {
  background: var(--mfs-purple-dark) !important;
  border-color: var(--mfs-purple-dark) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__brand--card {
  min-height: 150px !important;
  padding: 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .20) !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__brand--card img {
  width: 190px !important;
  max-width: 190px !important;
  height: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu__item {
  min-height: 70px !important;
  padding: 0 18px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-submenu {
  max-height: none !important;
  padding: 18px 16px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar__footer {
  margin-top: 18px !important;
}

@media (max-width: 980px) {
  body.app-shell:not(.app-shell--auth) .app-layout {
    display: block !important;
  }

  body.app-shell:not(.app-shell--auth) .sidebar--reference {
    position: fixed !important;
    width: min(88vw, var(--mfs-sidebar)) !important;
    transform: translateX(-100%);
    z-index: 60;
  }

  body.app-shell:not(.app-shell--auth) .sidebar--reference.is-open {
    transform: translateX(0);
  }

  body.app-shell:not(.app-shell--auth) .topbar {
    height: auto !important;
    min-height: 72px !important;
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
  }

  body.app-shell:not(.app-shell--auth) .topbar__logo {
    width: 86px !important;
    max-width: 86px !important;
    height: 38px !important;
    flex-basis: 86px !important;
  }

  body.app-shell:not(.app-shell--auth) .topbar__brand-title {
    font-size: 20px !important;
  }

  body.app-shell:not(.app-shell--auth) .topbar__account {
    width: 100% !important;
    justify-content: space-between !important;
  }

  body.app-shell:not(.app-shell--auth) .page-head {
    grid-template-columns: 1fr !important;
    padding: 24px 16px 16px !important;
  }

  body.app-shell:not(.app-shell--auth) .page-head__search {
    grid-template-columns: 1fr !important;
  }

  body.app-shell:not(.app-shell--auth) .content {
    padding: 0 16px 24px !important;
  }
}

/* Style-only reference pass: do not change manual wording */
body.app-shell:not(.app-shell--auth) {
  background: #f5f6fb !important;
  color: #111827 !important;
}

body.app-shell:not(.app-shell--auth) .app-layout {
  grid-template-columns: 328px minmax(0, 1fr) !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference {
  width: 328px !important;
  padding: 24px 20px !important;
  background: #6b4aa0 !important;
  border-right: 0 !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__brand--card,
body.app-shell:not(.app-shell--auth) .sidebar-menu__item--group,
body.app-shell:not(.app-shell--auth) .sidebar-menu__item.is-active,
body.app-shell:not(.app-shell--auth) .sidebar-menu__item:hover {
  background: rgba(255, 255, 255, .22) !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__brand--card {
  min-height: 138px !important;
  border-radius: 11px !important;
  padding: 11px 14px 12px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__brand--card img {
  width: 158px !important;
  height: 67px !important;
  max-width: 158px !important;
  max-height: 67px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__title {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__eyebrow {
  font-size: 13px !important;
  color: rgba(255, 255, 255, .78) !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu {
  gap: 14px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu__item {
  min-height: 68px !important;
  border-radius: 11px !important;
  padding: 0 15px !important;
  gap: 14px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 11px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu__copy strong {
  font-size: 14px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu__copy small {
  font-size: 11px !important;
  color: rgba(255, 255, 255, .58) !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-submenu {
  border-radius: 11px !important;
  padding: 14px 13px !important;
  background: #ffffff !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-submenu a {
  padding: 10px 13px 16px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-submenu a strong {
  font-size: 14px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-submenu a small {
  font-size: 11px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar__footer {
  display: none !important;
}

body.app-shell:not(.app-shell--auth) .main,
body.app-shell:not(.app-shell--auth) .content,
body.app-shell:not(.app-shell--auth) .page-head {
  background: #f5f6fb !important;
}

body.app-shell:not(.app-shell--auth) .topbar {
  height: 83px !important;
  min-height: 83px !important;
  padding: 0 28px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e4e9f0 !important;
  box-shadow: none !important;
}

body.app-shell:not(.app-shell--auth) .topbar__logo {
  width: 111px !important;
  height: 48px !important;
  max-width: 111px !important;
  max-height: 48px !important;
}

body.app-shell:not(.app-shell--auth) .topbar__brand-title {
  font-size: 24px !important;
  color: #121a28 !important;
}

body.app-shell:not(.app-shell--auth) .topbar__account {
  min-height: 50px !important;
  border-radius: 14px !important;
  border-color: #eee6f4 !important;
  background: #fbf9fe !important;
}

body.app-shell:not(.app-shell--auth) .page-head {
  grid-template-columns: minmax(0, 1fr) 450px !important;
  padding: 38px 36px 28px !important;
}

body.app-shell:not(.app-shell--auth) .page-head h1 {
  font-size: 28px !important;
  line-height: 1.12 !important;
  margin: 0 0 12px !important;
}

body.app-shell:not(.app-shell--auth) .page-head p {
  font-size: 14px !important;
  color: #728092 !important;
}

body.app-shell:not(.app-shell--auth) .page-head__search {
  grid-template-columns: minmax(0, 1fr) 146px !important;
  gap: 12px !important;
  align-self: center !important;
}

body.app-shell:not(.app-shell--auth) .page-head__search input,
body.app-shell:not(.app-shell--auth) .page-head__search .btn {
  min-height: 50px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

body.app-shell:not(.app-shell--auth) .content {
  padding: 0 36px 36px !important;
}

body.app-shell:not(.app-shell--auth) .tabs {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

body.app-shell:not(.app-shell--auth) .tab {
  min-height: 50px !important;
  min-width: 102px !important;
  border-radius: 9px !important;
  font-size: 15px !important;
  background: #ffffff !important;
}

body.app-shell:not(.app-shell--auth) .card,
body.app-shell:not(.app-shell--auth) .action-card,
body.app-shell:not(.app-shell--auth) .item,
body.app-shell:not(.app-shell--auth) .list-row--card {
  border: 1px solid #dfe5ec !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 36px rgba(16, 24, 40, .08) !important;
}

body.app-shell:not(.app-shell--auth) .welcome-banner.card {
  min-height: 154px !important;
  padding: 26px 30px !important;
}

body.app-shell:not(.app-shell--auth) .dashboard-showcase {
  grid-template-columns: minmax(0, 760px) !important;
}

body.app-shell:not(.app-shell--auth) .dashboard-showcase .card {
  padding: 26px 30px !important;
}

body.app-shell:not(.app-shell--auth) .welcome-banner h2,
body.app-shell:not(.app-shell--auth) .section-head h3 {
  font-size: 28px !important;
  line-height: 1.12 !important;
}

body.app-shell:not(.app-shell--auth) .muted,
body.app-shell:not(.app-shell--auth) .action-card small {
  color: #778596 !important;
}

/* System Test parity overrides */
:root {
  --mfs-sidebar: 328px;
}

body.app-shell:not(.app-shell--auth) .app-layout {
  grid-template-columns: 328px minmax(0, 1fr) !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference {
  width: 328px !important;
  padding: 25px 20px !important;
  background: #6b4aa0 !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__brand--card {
  min-height: 139px !important;
  padding: 10px 14px 12px !important;
  border-radius: 11px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__brand--card img {
  width: 158px !important;
  max-width: 158px !important;
  height: 68px !important;
  max-height: 68px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__title {
  font-size: 15px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar--reference .sidebar__eyebrow {
  font-size: 13px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu {
  gap: 14px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu__item {
  min-height: 68px !important;
  border-radius: 11px !important;
  padding: 0 15px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu__item--group {
  grid-template-columns: 14px 44px minmax(0, 1fr) 14px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 11px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu__copy strong {
  font-size: 14px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-menu__copy small {
  font-size: 11px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-submenu {
  border-radius: 11px !important;
  padding: 14px 13px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-submenu a {
  padding: 10px 13px 16px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-submenu a strong {
  font-size: 14px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar-submenu a small {
  font-size: 11px !important;
}

body.app-shell:not(.app-shell--auth) .sidebar__footer {
  display: none !important;
}

body.app-shell:not(.app-shell--auth) .topbar {
  height: 83px !important;
  min-height: 83px !important;
  padding: 0 28px !important;
}

body.app-shell:not(.app-shell--auth) .topbar__logo {
  width: 111px !important;
  max-width: 111px !important;
  height: 48px !important;
  max-height: 48px !important;
}

body.app-shell:not(.app-shell--auth) .topbar__brand-title {
  font-size: 24px !important;
}

body.app-shell:not(.app-shell--auth) .topbar__account {
  min-height: 50px !important;
  border-radius: 14px !important;
}

body.app-shell:not(.app-shell--auth) .page-head,
body.app-shell:not(.app-shell--auth) .content {
  width: 100% !important;
  max-width: none !important;
}

body.app-shell:not(.app-shell--auth) .page-head {
  grid-template-columns: minmax(0, 1fr) 450px !important;
  padding: 38px 36px 28px !important;
}

body.app-shell:not(.app-shell--auth) .page-head h1 {
  font-size: 28px !important;
  margin-bottom: 12px !important;
}

body.app-shell:not(.app-shell--auth) .page-head p {
  font-size: 14px !important;
}

body.app-shell:not(.app-shell--auth) .page-head__search {
  grid-template-columns: minmax(0, 1fr) 146px !important;
  gap: 12px !important;
  align-self: center !important;
}

body.app-shell:not(.app-shell--auth) .content {
  padding: 0 36px 36px !important;
}

body.app-shell:not(.app-shell--auth) .tabs {
  display: flex !important;
}

body.app-shell:not(.app-shell--auth) .system-filter-card.card {
  padding: 18px !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 36px rgba(16, 24, 40, .08) !important;
}

/* Keep manuals wording, use System Test block proportions */
body.app-shell:not(.app-shell--auth) .welcome-banner.card {
  display: flex !important;
  min-height: 154px !important;
  padding: 26px 30px !important;
  margin: 0 0 18px !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 14px !important;
}

body.app-shell:not(.app-shell--auth) .welcome-banner h2 {
  margin: 12px 0 10px !important;
  font-size: 28px !important;
}

body.app-shell:not(.app-shell--auth) .welcome-banner .muted {
  font-size: 15px !important;
}

body.app-shell:not(.app-shell--auth) .status-pill {
  min-height: 28px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #dcf5e9 !important;
  color: #168253 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.app-shell:not(.app-shell--auth) .dashboard-showcase {
  display: grid !important;
  grid-template-columns: minmax(0, 760px) !important;
  gap: 18px !important;
  align-items: start !important;
}

body.app-shell:not(.app-shell--auth) .dashboard-showcase .card {
  padding: 26px 30px !important;
  border-radius: 14px !important;
}

body.app-shell:not(.app-shell--auth) .section-head {
  margin-bottom: 26px !important;
}

body.app-shell:not(.app-shell--auth) .section-head h3 {
  font-size: 28px !important;
  margin: 0 0 12px !important;
}

body.app-shell:not(.app-shell--auth) .action-grid--premium {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body.app-shell:not(.app-shell--auth) .action-card {
  min-height: 82px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 20px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--mfs-border) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body.app-shell:not(.app-shell--auth) .action-card__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 11px !important;
  background: #eee5ff !important;
  color: #7652d8 !important;
}

body.app-shell:not(.app-shell--auth) .action-card strong {
  color: #1b2230 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

body.app-shell:not(.app-shell--auth) .action-card small {
  margin-top: 6px !important;
  color: #7a8797 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

body.app-shell:not(.app-shell--auth) .action-card__arrow {
  color: #8c78a6 !important;
}

@media (max-width: 760px) {
  body.app-shell:not(.app-shell--auth) .action-grid--premium {
    grid-template-columns: 1fr !important;
  }
}

.system-filter-grid {
  display: grid;
  gap: 14px;
}

.system-filter-grid .field {
  gap: 8px;
}

body.app-shell:not(.app-shell--auth) .system-filter-grid input,
body.app-shell:not(.app-shell--auth) .system-filter-grid select {
  min-height: 43px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

body.app-shell:not(.app-shell--auth) .system-filter-grid label {
  font-size: 11px !important;
}

body.app-shell:not(.app-shell--auth) .system-filter-submit {
  width: 100% !important;
  min-height: 43px !important;
  margin-top: 0 !important;
  background: #5b2f78 !important;
  border-color: #5b2f78 !important;
}

.system-results-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.system-results-head h2 {
  grid-column: 1 / -1;
  margin: 0;
  color: #111827;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.system-results-head p {
  margin: 0;
}

@media (max-width: 980px) {
  body.app-shell:not(.app-shell--auth) .app-layout {
    grid-template-columns: 1fr !important;
  }

  body.app-shell:not(.app-shell--auth) .sidebar--reference {
    width: min(88vw, 328px) !important;
  }

  body.app-shell:not(.app-shell--auth) .page-head {
    grid-template-columns: 1fr !important;
    padding: 24px 16px 18px !important;
  }

  body.app-shell:not(.app-shell--auth) .page-head__search {
    grid-template-columns: 1fr !important;
  }

  body.app-shell:not(.app-shell--auth) .content {
    padding: 0 16px 24px !important;
  }
}