/* SanalyAudit workspace v5: shared visual system for login, app and Budget Lots. */
:root {
  --sa-ink: #17262b;
  --sa-ink-soft: #42585f;
  --sa-muted: #6b7d83;
  --sa-canvas: #f3f6f6;
  --sa-surface: #ffffff;
  --sa-surface-soft: #f7f9f9;
  --sa-line: #dce5e5;
  --sa-line-strong: #c8d5d5;
  --sa-primary: #087f78;
  --sa-primary-hover: #066b66;
  --sa-primary-soft: #e5f4f2;
  --sa-blue: #176b9b;
  --sa-blue-soft: #eaf3f8;
  --sa-coral: #d45d4c;
  --sa-coral-soft: #fbece9;
  --sa-success: #17845f;
  --sa-warning: #a86614;
  --sa-danger: #c74646;
  --sa-shadow-sm: 0 1px 2px rgba(18, 48, 54, .06), 0 5px 16px rgba(18, 48, 54, .04);
  --sa-shadow-lg: 0 22px 60px rgba(18, 48, 54, .13);
  --sa-radius: 8px;
}

body.sa-login-page,
body.sa-app-page,
body.sa-budget-page {
  color: var(--sa-ink) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  background: var(--sa-canvas) !important;
}

body.sa-login-page *,
body.sa-app-page *,
body.sa-budget-page * {
  letter-spacing: 0 !important;
}

body.sa-login-page button,
body.sa-login-page input,
body.sa-login-page select,
body.sa-login-page textarea,
body.sa-app-page button,
body.sa-app-page input,
body.sa-app-page select,
body.sa-app-page textarea,
body.sa-budget-page button,
body.sa-budget-page input,
body.sa-budget-page select,
body.sa-budget-page textarea {
  font-family: inherit !important;
}

body.sa-login-page :focus-visible,
body.sa-app-page :focus-visible,
body.sa-budget-page :focus-visible {
  outline: 3px solid rgba(23, 107, 155, .24) !important;
  outline-offset: 2px !important;
}

/* Login */
body.sa-login-page {
  min-height: 100vh !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
  background: #edf2f2 !important;
}

body.sa-login-page::before,
body.sa-login-page::after {
  content: none !important;
}

body.sa-login-page > .shell {
  width: min(1120px, 100%) !important;
  min-height: 650px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--sa-line-strong) !important;
  border-radius: var(--sa-radius) !important;
  background: var(--sa-surface) !important;
  box-shadow: var(--sa-shadow-lg) !important;
}

body.sa-login-page .panel {
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--sa-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.sa-login-page .promo {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 48px 52px !important;
  overflow: hidden !important;
  color: #eef8f7 !important;
  background: #123f46 !important;
}

body.sa-login-page .promo::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 6px !important;
  background: var(--sa-coral) !important;
}

body.sa-login-page .badge {
  width: max-content !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 6px !important;
  color: #d7eeeb !important;
  background: rgba(255, 255, 255, .07) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.sa-login-page .hero {
  display: block !important;
  margin: 30px 0 0 !important;
}

body.sa-login-page .hero h1 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 42px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

body.sa-login-page .lead {
  margin: 18px 0 0 !important;
  color: #ffffff !important;
  font-size: 25px !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
}

body.sa-login-page .lead span {
  color: #8bd2ca !important;
}

body.sa-login-page .desc {
  max-width: 520px !important;
  margin-top: 16px !important;
  color: #bbd0d2 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

body.sa-login-page .illus,
body.sa-login-page .greenbar,
body.sa-login-page .partner {
  display: none !important;
}

body.sa-login-page .features {
  margin-top: 34px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: var(--sa-radius) !important;
  background: rgba(255, 255, 255, .14) !important;
}

body.sa-login-page .feature {
  min-height: 92px !important;
  padding: 15px !important;
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  gap: 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #eef8f7 !important;
  background: rgba(8, 49, 56, .82) !important;
  box-shadow: none !important;
}

body.sa-login-page .feature:nth-child(n+5) {
  display: none !important;
}

body.sa-login-page .feature .ico {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  color: #8bd2ca !important;
  background: rgba(139, 210, 202, .12) !important;
}

body.sa-login-page .feature .ico svg {
  width: 20px !important;
  height: 20px !important;
}

body.sa-login-page .feature b {
  margin: 0 0 4px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

body.sa-login-page .feature p {
  color: #aebfc2 !important;
  font-size: 11.5px !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;
}

body.sa-login-page .loginPanel {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px 48px !important;
  border-left: 1px solid var(--sa-line) !important;
}

body.sa-login-page .loginBox {
  width: min(390px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.sa-login-page .logoWrap {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-radius) !important;
  background: #fff !important;
  box-shadow: var(--sa-shadow-sm) !important;
}

body.sa-login-page .logoWrap::before,
body.sa-login-page .logoWrap::after {
  content: none !important;
}

body.sa-login-page .logoWrap img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

body.sa-login-page .edition {
  width: max-content !important;
  margin: 0 auto 11px !important;
  padding: 5px 8px !important;
  border: 1px solid #cfe2e1 !important;
  border-radius: 5px !important;
  color: var(--sa-primary) !important;
  background: var(--sa-primary-soft) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

body.sa-login-page .loginTitle {
  margin: 0 !important;
  color: var(--sa-ink) !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  font-weight: 800 !important;
}

body.sa-login-page .loginSub {
  max-width: 330px !important;
  margin: 7px auto 20px !important;
  color: var(--sa-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  text-align: center !important;
  font-weight: 500 !important;
}

body.sa-login-page .field {
  margin-bottom: 12px !important;
}

body.sa-login-page .field label {
  display: block !important;
  margin: 0 0 7px !important;
  color: var(--sa-ink-soft) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.sa-login-page .inputWrap {
  position: relative !important;
  display: block !important;
}

body.sa-login-page .field input {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 46px !important;
  border: 1px solid var(--sa-line-strong) !important;
  border-radius: var(--sa-radius) !important;
  color: var(--sa-ink) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

body.sa-login-page .field input::placeholder {
  color: #94a3a7 !important;
  font-weight: 500 !important;
}

body.sa-login-page .field input:focus {
  border-color: var(--sa-primary) !important;
  box-shadow: 0 0 0 3px rgba(8, 127, 120, .12) !important;
  outline: 0 !important;
}

body.sa-login-page .field svg {
  left: 15px !important;
  width: 19px !important;
  height: 19px !important;
  color: var(--sa-primary) !important;
}

body.sa-login-page .eye {
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  color: var(--sa-blue) !important;
  background: transparent !important;
}

body.sa-login-page #btn,
body.sa-login-page #resetBtn,
body.sa-login-page .secondaryBtn {
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid var(--sa-primary) !important;
  border-radius: var(--sa-radius) !important;
  color: #fff !important;
  background: var(--sa-primary) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  transition: background .16s ease, transform .16s ease !important;
}

body.sa-login-page #btn:hover,
body.sa-login-page #resetBtn:hover,
body.sa-login-page .secondaryBtn:hover {
  background: var(--sa-primary-hover) !important;
}

body.sa-login-page #btn:active,
body.sa-login-page #resetBtn:active,
body.sa-login-page .secondaryBtn:active {
  transform: translateY(1px) !important;
}

body.sa-login-page .resetTools {
  margin: 12px 0 0 !important;
  text-align: center !important;
}

body.sa-login-page .linkBtn {
  padding: 6px !important;
  color: var(--sa-blue) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.sa-login-page .resetBox {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--sa-line) !important;
}

body.sa-login-page .msg {
  min-height: 20px !important;
  margin-top: 9px !important;
  color: var(--sa-danger) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

body.sa-login-page .secure {
  margin: 18px 0 0 !important;
  padding: 14px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  border-top: 1px solid var(--sa-line) !important;
  color: var(--sa-muted) !important;
}

body.sa-login-page .secure > div {
  min-width: 0 !important;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  text-align: center !important;
  font-weight: 600 !important;
}

body.sa-login-page .secure .ico {
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 7px !important;
  border-radius: 6px !important;
  color: var(--sa-primary) !important;
  background: var(--sa-primary-soft) !important;
}

body.sa-login-page .secure .ico svg {
  width: 16px !important;
  height: 16px !important;
}

body.sa-login-page .support {
  margin-top: 12px !important;
  padding: 10px !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-radius) !important;
  color: var(--sa-ink-soft) !important;
  background: var(--sa-surface-soft) !important;
  box-shadow: none !important;
}

body.sa-login-page .support .ico {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  color: var(--sa-blue) !important;
  background: var(--sa-blue-soft) !important;
}

body.sa-login-page .support a {
  color: var(--sa-blue) !important;
}

body.sa-login-page .support p {
  color: var(--sa-muted) !important;
}

/* Main application shell */
body.sa-app-page {
  min-height: 100vh !important;
  margin: 0 !important;
  color: var(--sa-ink) !important;
  background: var(--sa-canvas) !important;
}

body.sa-app-page > .kp-bg {
  display: none !important;
}

body.sa-app-page > .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  height: 66px !important;
  margin: 0 !important;
  padding: 0 20px 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sa-line) !important;
  border-radius: 0 !important;
  color: var(--sa-ink) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.sa-app-page > .topbar .brand {
  min-width: 242px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  color: var(--sa-ink) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body.sa-app-page > .topbar .logo {
  width: 38px !important;
  height: 38px !important;
  overflow: hidden !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.sa-app-page > .topbar .logo img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

body.sa-app-page .top-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

body.sa-app-page .userbox {
  min-height: 38px !important;
  max-width: min(520px, 46vw) !important;
  padding: 7px 12px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 7px !important;
  color: var(--sa-ink-soft) !important;
  background: var(--sa-surface-soft) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.sa-app-page #logoutBtn {
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #e5c6c2 !important;
  border-radius: 7px !important;
  color: #a63f34 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

body.sa-app-page #logoutBtn:hover {
  border-color: #d99e96 !important;
  background: var(--sa-coral-soft) !important;
}

body.sa-app-page > .app {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 66px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 264px minmax(0, 1fr) !important;
  gap: 0 !important;
}

body.sa-app-page .sidebar {
  position: sticky !important;
  top: 66px !important;
  align-self: start !important;
  width: 100% !important;
  height: calc(100vh - 66px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: auto !important;
  border: 0 !important;
  border-right: 1px solid var(--sa-line) !important;
  border-radius: 0 !important;
  color: var(--sa-ink) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.sa-app-page .sidebar-title {
  margin: 0 10px 10px !important;
  color: var(--sa-muted) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

body.sa-app-page #navRoot {
  display: grid !important;
  gap: 4px !important;
}

body.sa-app-page .nav-group {
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.sa-app-page .nav-group.open {
  border-color: var(--sa-line) !important;
  background: var(--sa-surface-soft) !important;
}

body.sa-app-page .nav-group-head {
  width: 100% !important;
  min-height: 42px !important;
  padding: 7px 9px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--sa-ink-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.sa-app-page .nav-group-head:hover {
  color: var(--sa-ink) !important;
  background: #edf3f3 !important;
}

body.sa-app-page .nav-icon {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 6px !important;
  color: var(--sa-primary) !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.sa-app-page .nav-group-title {
  min-width: 0 !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  white-space: normal !important;
}

body.sa-app-page .nav-chevron {
  color: #8ca0a5 !important;
  font-size: 13px !important;
  text-align: center !important;
}

body.sa-app-page .nav-items {
  padding: 0 7px 7px 45px !important;
  display: none !important;
}

body.sa-app-page .nav-group.open .nav-items {
  display: grid !important;
  gap: 2px !important;
}

body.sa-app-page .nav-btn {
  width: 100% !important;
  min-height: 34px !important;
  padding: 6px 8px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 5px !important;
  color: var(--sa-ink-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: left !important;
}

body.sa-app-page .nav-btn:hover {
  color: var(--sa-ink) !important;
  background: #eaf1f1 !important;
}

body.sa-app-page .nav-btn.active {
  color: #fff !important;
  background: var(--sa-primary) !important;
  font-weight: 750 !important;
}

body.sa-app-page .nav-num {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 4px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: var(--sa-muted) !important;
  background: #e4ebeb !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

body.sa-app-page .nav-btn.active .nav-num {
  color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
}

body.sa-app-page .sidebar-account {
  margin: auto 0 0 !important;
  padding: 13px !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 7px !important;
  color: var(--sa-ink-soft) !important;
  background: var(--sa-surface-soft) !important;
  box-shadow: none !important;
}

body.sa-app-page .sidebar-account b {
  color: var(--sa-ink) !important;
  font-size: 12px !important;
}

body.sa-app-page .sidebar-account span {
  color: var(--sa-muted) !important;
  font-size: 10.5px !important;
}

body.sa-app-page .main {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 24px 28px 44px !important;
}

body.sa-app-page #mainPanel {
  width: min(1480px, 100%) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.sa-app-page .module-head,
body.sa-app-page .orders-head {
  margin: 0 0 18px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid var(--sa-line) !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-page-hero {
  min-height: 0 !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sa-line) !important;
  border-radius: 0 !important;
  color: var(--sa-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-page-hero::before,
body.sa-app-page[data-product-shell="v3"] .sa-page-hero::after,
body.sa-app-page[data-product-shell="v3"] #moduleBody::before,
body.sa-app-page[data-product-shell="v3"] #moduleBody::after,
body.sa-app-page[data-product-shell="v3"] .sa-min-card::before,
body.sa-app-page[data-product-shell="v3"] .nav-group::before {
  content: none !important;
  display: none !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-breadcrumb {
  margin-bottom: 7px !important;
  color: var(--sa-muted) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-page-desc {
  margin-top: 5px !important;
  color: var(--sa-muted) !important;
  font-size: 12px !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-status-pill {
  min-height: 30px !important;
  padding: 6px 9px !important;
  border: 1px solid #cbdede !important;
  border-radius: 6px !important;
  color: var(--sa-primary) !important;
  background: var(--sa-primary-soft) !important;
  box-shadow: none !important;
  font-size: 10px !important;
}

body.sa-app-page[data-product-shell="v3"] #moduleBody,
body.sa-app-page[data-product-shell="v3"] .sa-min-check {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-card {
  margin: 0 !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-radius) !important;
  color: var(--sa-ink) !important;
  background: #fff !important;
  box-shadow: var(--sa-shadow-sm) !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-head {
  margin: 0 0 16px !important;
  padding: 0 0 13px !important;
  border-bottom: 1px solid var(--sa-line) !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-title {
  color: var(--sa-ink) !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-card .field {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-card .label {
  margin: 0 0 6px !important;
  color: var(--sa-ink-soft) !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-card input,
body.sa-app-page[data-product-shell="v3"] .sa-min-card select {
  min-height: 40px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-options {
  margin-top: 12px !important;
  gap: 10px !important;
}

body.sa-app-page[data-product-shell="v3"] .check-row {
  min-height: 46px !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 7px !important;
  color: var(--sa-ink-soft) !important;
  background: var(--sa-surface-soft) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-actions {
  margin-top: 14px !important;
  gap: 8px !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-meta {
  margin-top: 12px !important;
  padding: 9px 11px !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 7px !important;
  color: var(--sa-muted) !important;
  background: var(--sa-surface-soft) !important;
  box-shadow: none !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-clean-status {
  margin-top: 10px !important;
  padding: 10px 11px !important;
  border: 1px solid #d5e2e6 !important;
  border-radius: 7px !important;
  color: var(--sa-ink-soft) !important;
  background: var(--sa-blue-soft) !important;
  box-shadow: none !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-extra {
  margin-top: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.sa-app-page[data-product-shell="v3"] .sa-min-extra > summary {
  padding: 11px 13px !important;
  color: var(--sa-ink-soft) !important;
  background: var(--sa-surface-soft) !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
}

body.sa-app-page .module-head h2,
body.sa-app-page .module-head h1,
body.sa-app-page .orders-head h2,
body.sa-app-page #mainPanel > h2 {
  margin: 0 !important;
  color: var(--sa-ink) !important;
  font-size: 23px !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
}

body.sa-app-page .module-head p,
body.sa-app-page .module-subtitle,
body.sa-app-page .muted {
  color: var(--sa-muted) !important;
}

body.sa-app-page .card,
body.sa-app-page .tool-card,
body.sa-app-page .summary-card,
body.sa-app-page .metric-card,
body.sa-app-page .kpi-card,
body.sa-app-page .admin-section-panel,
body.sa-app-page .orders-tools,
body.sa-app-page .soft-details,
body.sa-app-page .hospital-card,
body.sa-app-page .profile-section,
body.sa-app-page .login-card,
body.sa-app-page .whatsapp-settings-card {
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-radius) !important;
  background: #fff !important;
  box-shadow: var(--sa-shadow-sm) !important;
}

body.sa-app-page .card::before,
body.sa-app-page .tool-card::before,
body.sa-app-page .orders-tools::before,
body.sa-app-page .admin-section-panel::before {
  content: none !important;
}

body.sa-app-page .btn {
  min-height: 38px !important;
  padding: 8px 13px !important;
  border: 1px solid var(--sa-line-strong) !important;
  border-radius: 7px !important;
  color: var(--sa-ink-soft) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.sa-app-page .btn:hover {
  border-color: #aebfbf !important;
  color: var(--sa-ink) !important;
  background: var(--sa-surface-soft) !important;
}

body.sa-app-page .btn-primary,
body.sa-app-page .btn.primary {
  border-color: var(--sa-primary) !important;
  color: #fff !important;
  background: var(--sa-primary) !important;
}

body.sa-app-page .btn-primary:hover,
body.sa-app-page .btn.primary:hover {
  border-color: var(--sa-primary-hover) !important;
  color: #fff !important;
  background: var(--sa-primary-hover) !important;
}

body.sa-app-page input,
body.sa-app-page select,
body.sa-app-page textarea {
  border: 1px solid var(--sa-line-strong) !important;
  border-radius: 7px !important;
  color: var(--sa-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.sa-app-page input:focus,
body.sa-app-page select:focus,
body.sa-app-page textarea:focus {
  border-color: var(--sa-primary) !important;
  box-shadow: 0 0 0 3px rgba(8, 127, 120, .1) !important;
  outline: 0 !important;
}

body.sa-app-page table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-radius) !important;
  background: #fff !important;
}

body.sa-app-page table th {
  padding: 10px 11px !important;
  border-bottom: 1px solid var(--sa-line) !important;
  color: var(--sa-ink-soft) !important;
  background: #eef3f3 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

body.sa-app-page table td {
  padding: 10px 11px !important;
  border-bottom-color: #e7eded !important;
  color: var(--sa-ink-soft) !important;
  background: #fff !important;
  font-size: 12px !important;
}

body.sa-app-page table tr:hover td {
  background: #f7fafa !important;
}

body.sa-app-page .modal-card,
body.sa-app-page .security-card {
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-radius) !important;
  background: #fff !important;
  box-shadow: var(--sa-shadow-lg) !important;
}

/* Budget Lots */
body.sa-budget-page {
  min-height: 100vh !important;
  margin: 0 !important;
  color: var(--sa-ink) !important;
  background: var(--sa-canvas) !important;
}

body.sa-budget-page > .kp-bg {
  display: none !important;
}

body.sa-budget-page > .shell {
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 264px minmax(0, 1fr) !important;
  grid-template-rows: 66px minmax(0, 1fr) !important;
  gap: 0 !important;
  background: var(--sa-canvas) !important;
}

body.sa-budget-page .topbar {
  grid-column: 1 / -1 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  height: 66px !important;
  margin: 0 !important;
  padding: 0 20px 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sa-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.sa-budget-page .topbar-brand {
  min-width: 242px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}

body.sa-budget-page .topbar-brand-logo {
  width: 38px !important;
  height: 38px !important;
  overflow: hidden !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.sa-budget-page .topbar-brand-logo img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

body.sa-budget-page .topbar-brand-text {
  color: var(--sa-ink) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body.sa-budget-page .topbar-org {
  max-width: min(560px, 54vw) !important;
  min-height: 42px !important;
  margin-left: auto !important;
  padding: 5px 6px 5px 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 7px !important;
  background: var(--sa-surface-soft) !important;
  box-shadow: none !important;
}

body.sa-budget-page .topbar-org-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  color: var(--sa-primary) !important;
  background: var(--sa-primary-soft) !important;
}

body.sa-budget-page .topbar-org-name {
  color: var(--sa-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.sa-budget-page .topbar-org-role {
  color: var(--sa-muted) !important;
  font-size: 10px !important;
}

body.sa-budget-page .topbar-logout {
  min-height: 32px !important;
  padding: 0 11px !important;
  border: 1px solid #e5c6c2 !important;
  border-radius: 6px !important;
  color: #a63f34 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

body.sa-budget-page .topbar-logout:hover {
  border-color: #d99e96 !important;
  background: var(--sa-coral-soft) !important;
}

body.sa-budget-page aside.side {
  position: sticky !important;
  top: 66px !important;
  align-self: start !important;
  width: 100% !important;
  height: calc(100vh - 66px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px 14px !important;
  overflow: auto !important;
  border: 0 !important;
  border-right: 1px solid var(--sa-line) !important;
  border-radius: 0 !important;
  color: var(--sa-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.sa-budget-page .nav-title {
  margin: 14px 10px 7px !important;
  padding: 0 !important;
  color: var(--sa-muted) !important;
  font-size: 9.5px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

body.sa-budget-page .nav-title:first-of-type {
  margin-top: 0 !important;
}

body.sa-budget-page .nav-btn {
  width: 100% !important;
  min-height: 39px !important;
  margin: 0 0 3px !important;
  padding: 7px 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--sa-ink-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
  text-align: left !important;
}

body.sa-budget-page .nav-btn:hover {
  border-color: var(--sa-line) !important;
  color: var(--sa-ink) !important;
  background: #f1f5f5 !important;
}

body.sa-budget-page .nav-btn.active {
  border-color: var(--sa-primary) !important;
  color: #fff !important;
  background: var(--sa-primary) !important;
  font-weight: 750 !important;
}

body.sa-budget-page .nav-num {
  min-width: 21px !important;
  height: 20px !important;
  margin-left: auto !important;
  padding: 0 4px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: var(--sa-muted) !important;
  background: #e5ecec !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

body.sa-budget-page .nav-btn.active .nav-num {
  color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
}

body.sa-budget-page .side-nav-group {
  margin: 0 0 6px !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.sa-budget-page .side-nav-group.open {
  border-color: var(--sa-line) !important;
  background: var(--sa-surface-soft) !important;
}

body.sa-budget-page .side-nav-group::before,
body.sa-budget-page .side-nav-group::after,
body.sa-budget-page .side-nav-head::before,
body.sa-budget-page .top::before,
body.sa-budget-page .top::after {
  content: none !important;
  display: none !important;
}

body.sa-budget-page .side-nav-head {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--sa-ink-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

body.sa-budget-page .side-nav-head:hover {
  color: var(--sa-ink) !important;
  background: #edf3f3 !important;
}

body.sa-budget-page .side-nav-group.open .side-nav-head {
  border-bottom: 1px solid var(--sa-line) !important;
  border-radius: 0 !important;
  color: var(--sa-primary) !important;
}

body.sa-budget-page .side-nav-items {
  padding: 5px !important;
}

body.sa-budget-page main {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 23px 28px 48px !important;
  overflow: visible !important;
}

body.sa-budget-page .breadcrumb {
  margin: 0 0 8px !important;
  color: var(--sa-muted) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
}

body.sa-budget-page .breadcrumb .current {
  color: var(--sa-primary) !important;
}

body.sa-budget-page .top {
  margin: 0 0 18px !important;
  padding: 0 0 16px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sa-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.sa-budget-page .h1 {
  margin: 0 !important;
  color: var(--sa-ink) !important;
  font-size: 23px !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
}

body.sa-budget-page .top-subtitle {
  max-width: 760px !important;
  margin-top: 5px !important;
  color: var(--sa-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

body.sa-budget-page .user {
  flex: 0 0 auto !important;
  color: var(--sa-muted) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

body.sa-budget-page .toolbar,
body.sa-budget-page .status-row {
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 10px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.sa-budget-page .status-row {
  align-items: center !important;
  background: var(--sa-surface-soft) !important;
}

body.sa-budget-page .status {
  margin-right: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--sa-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

body.sa-budget-page .function-tabs {
  width: 100% !important;
  margin: 18px 0 14px !important;
  padding: 0 !important;
  display: flex !important;
  gap: 2px !important;
  overflow: auto !important;
  border-bottom: 1px solid var(--sa-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.sa-budget-page .function-tab-btn {
  position: relative !important;
  flex: 0 0 auto !important;
  min-width: 176px !important;
  min-height: 58px !important;
  padding: 9px 12px 11px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 6px 6px 0 0 !important;
  color: var(--sa-ink-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.sa-budget-page .function-tab-btn:hover {
  background: #edf3f3 !important;
}

body.sa-budget-page .function-tab-btn.active {
  color: var(--sa-primary) !important;
  background: var(--sa-primary-soft) !important;
}

body.sa-budget-page .function-tab-btn.active::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: -1px !important;
  left: 0 !important;
  height: 3px !important;
  background: var(--sa-primary) !important;
}

body.sa-budget-page .function-tab-icon {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: 6px !important;
  color: var(--sa-primary) !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.sa-budget-page .function-tab-text b {
  display: block !important;
  color: inherit !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
}

body.sa-budget-page .function-tab-text small {
  display: block !important;
  margin-top: 2px !important;
  color: var(--sa-muted) !important;
  font-size: 9.5px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}

body.sa-budget-page .panel,
body.sa-budget-page .section-card,
body.sa-budget-page .function-panel,
body.sa-budget-page .settings-control-group {
  overflow: hidden !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-radius) !important;
  background: #fff !important;
  box-shadow: var(--sa-shadow-sm) !important;
}

body.sa-budget-page .panel::before,
body.sa-budget-page .section-card::before,
body.sa-budget-page .function-panel::before {
  content: none !important;
}

body.sa-budget-page .panel-head {
  min-height: 48px !important;
  padding: 12px 15px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid var(--sa-line) !important;
  color: var(--sa-ink) !important;
  background: #f7f9f9 !important;
}

body.sa-budget-page .panel-title {
  color: var(--sa-ink) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.sa-budget-page .panel-body {
  padding: 18px !important;
}

body.sa-budget-page .grid {
  gap: 12px !important;
}

body.sa-budget-page .field label {
  margin-bottom: 6px !important;
  color: var(--sa-ink-soft) !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  text-transform: none !important;
}

body.sa-budget-page input,
body.sa-budget-page select,
body.sa-budget-page textarea {
  min-height: 40px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--sa-line-strong) !important;
  border-radius: 7px !important;
  color: var(--sa-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

body.sa-budget-page input:focus,
body.sa-budget-page select:focus,
body.sa-budget-page textarea:focus {
  border-color: var(--sa-primary) !important;
  box-shadow: 0 0 0 3px rgba(8, 127, 120, .1) !important;
  outline: 0 !important;
}

body.sa-budget-page .btn {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--sa-line-strong) !important;
  border-radius: 7px !important;
  color: var(--sa-ink-soft) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body.sa-budget-page .btn:hover {
  border-color: #aebfbf !important;
  color: var(--sa-ink) !important;
  background: #f6f9f9 !important;
}

body.sa-budget-page .btn.primary,
body.sa-budget-page .btn-save,
body.sa-budget-page button.primary {
  border-color: var(--sa-primary) !important;
  color: #fff !important;
  background: var(--sa-primary) !important;
  box-shadow: none !important;
}

body.sa-budget-page .btn.primary:hover,
body.sa-budget-page .btn-save:hover,
body.sa-budget-page button.primary:hover {
  border-color: var(--sa-primary-hover) !important;
  background: var(--sa-primary-hover) !important;
}

body.sa-budget-page .hint {
  color: var(--sa-muted) !important;
  font-size: 10.5px !important;
  line-height: 1.5 !important;
}

body.sa-budget-page .actions {
  gap: 8px !important;
}

body.sa-budget-page .table-wrap {
  overflow: auto !important;
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-radius) !important;
  background: #fff !important;
}

body.sa-budget-page table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #fff !important;
}

body.sa-budget-page table th {
  padding: 10px 11px !important;
  border-bottom: 1px solid var(--sa-line) !important;
  color: var(--sa-ink-soft) !important;
  background: #eef3f3 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

body.sa-budget-page table td {
  padding: 10px 11px !important;
  border-bottom: 1px solid #e7eded !important;
  color: var(--sa-ink-soft) !important;
  background: #fff !important;
  font-size: 11.5px !important;
}

body.sa-budget-page table tr:hover td {
  background: #f7fafa !important;
}

body.sa-budget-page .modal,
body.sa-budget-page .modal-overlay {
  background: rgba(15, 37, 42, .52) !important;
}

body.sa-budget-page .modal-card,
body.sa-budget-page .modal-content {
  border: 1px solid var(--sa-line) !important;
  border-radius: var(--sa-radius) !important;
  background: #fff !important;
  box-shadow: var(--sa-shadow-lg) !important;
}

@media (max-width: 1100px) {
  body.sa-login-page {
    padding: 18px !important;
  }

  body.sa-login-page > .shell {
    min-height: 620px !important;
    grid-template-columns: minmax(0, 1fr) minmax(370px, .9fr) !important;
  }

  body.sa-login-page .promo {
    padding: 38px !important;
  }

  body.sa-login-page .feature {
    grid-template-columns: 32px 1fr !important;
    padding: 12px !important;
  }

  body.sa-app-page > .app,
  body.sa-budget-page > .shell {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  body.sa-app-page .sidebar,
  body.sa-budget-page aside.side {
    width: 100% !important;
  }

  body.sa-app-page .main,
  body.sa-budget-page main {
    padding: 20px !important;
  }
}

@media (min-width: 821px) and (max-height: 760px) {
  body.sa-login-page .support {
    display: none !important;
  }

  body.sa-login-page .promo {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

@media (max-width: 820px) {
  body.sa-login-page {
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.sa-login-page > .shell {
    width: 100% !important;
    min-height: 100vh !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.sa-login-page .promo {
    min-height: 0 !important;
    padding: 24px !important;
    display: block !important;
  }

  body.sa-login-page .badge,
  body.sa-login-page .lead,
  body.sa-login-page .desc,
  body.sa-login-page .features {
    display: none !important;
  }

  body.sa-login-page .hero {
    margin: 0 !important;
  }

  body.sa-login-page .hero h1 {
    font-size: 24px !important;
  }

  body.sa-login-page .loginPanel {
    min-height: 0 !important;
    padding: 36px 22px !important;
    border: 0 !important;
  }

  body.sa-app-page > .topbar,
  body.sa-budget-page .topbar {
    height: auto !important;
    min-height: 62px !important;
    padding: 10px 14px !important;
  }

  body.sa-app-page > .topbar .brand,
  body.sa-budget-page .topbar-brand {
    min-width: 0 !important;
  }

  body.sa-app-page .userbox,
  body.sa-budget-page .topbar-org-info {
    display: none !important;
  }

  body.sa-app-page > .app,
  body.sa-budget-page > .shell {
    display: block !important;
    min-height: 0 !important;
  }

  body.sa-app-page .sidebar,
  body.sa-budget-page aside.side {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--sa-line) !important;
  }

  body.sa-app-page .sidebar-title,
  body.sa-app-page .sidebar-account,
  body.sa-budget-page .nav-title,
  body.sa-budget-page .nav-num {
    display: none !important;
  }

  body.sa-app-page #navRoot {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.sa-app-page .nav-items {
    padding-left: 38px !important;
  }

  body.sa-budget-page aside.side {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
  }

  body.sa-budget-page .brand {
    display: none !important;
  }

  body.sa-budget-page .nav-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 36px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  body.sa-app-page .main,
  body.sa-budget-page main {
    padding: 18px 14px 36px !important;
  }

  body.sa-budget-page .top {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.sa-budget-page .user {
    display: none !important;
  }

  body.sa-budget-page .toolbar,
  body.sa-budget-page .status-row {
    align-items: stretch !important;
    flex-wrap: wrap !important;
  }

  body.sa-budget-page .toolbar .field {
    flex: 1 1 100% !important;
  }
}

@media (max-width: 520px) {
  body.sa-login-page .loginPanel {
    align-items: start !important;
    padding: 28px 18px !important;
  }

  body.sa-login-page .secure {
    gap: 3px !important;
  }

  body.sa-login-page .support {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  body.sa-app-page > .topbar .logo,
  body.sa-budget-page .topbar-brand-logo {
    width: 34px !important;
    height: 34px !important;
  }

  body.sa-app-page > .topbar .brand,
  body.sa-budget-page .topbar-brand-text {
    font-size: 14px !important;
  }

  body.sa-app-page #navRoot {
    grid-template-columns: 1fr !important;
  }

  body.sa-app-page .main,
  body.sa-budget-page main {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  body.sa-app-page .module-head h2,
  body.sa-app-page .module-head h1,
  body.sa-budget-page .h1 {
    font-size: 20px !important;
  }

  body.sa-budget-page .function-tab-btn {
    min-width: 156px !important;
  }

  body.sa-budget-page .panel-body {
    padding: 14px !important;
  }
}

/* Budget Lots refinement: stronger hierarchy and a purposeful settings workspace. */
body.sa-budget-page {
  --budget-sidebar: 276px;
  --budget-canvas: #f4f7f8;
  --budget-panel: #ffffff;
  --budget-panel-muted: #f8fafb;
  --budget-line: #d8e2e5;
  --budget-line-strong: #c4d2d6;
  --budget-ink: #16282e;
  --budget-muted: #657980;
  --budget-teal: #087f78;
  --budget-teal-dark: #075f5b;
  --budget-teal-soft: #e8f5f3;
  background: var(--budget-canvas) !important;
}

body.sa-budget-page > .shell {
  grid-template-columns: var(--budget-sidebar) minmax(0, 1fr) !important;
  grid-template-rows: 68px minmax(0, 1fr) !important;
  background: var(--budget-canvas) !important;
}

body.sa-budget-page .topbar {
  height: 68px !important;
  padding-right: 24px !important;
  padding-left: 20px !important;
  border-bottom-color: var(--budget-line) !important;
  box-shadow: 0 1px 0 rgba(22, 40, 46, .02) !important;
}

body.sa-budget-page .topbar-brand {
  min-width: calc(var(--budget-sidebar) - 20px) !important;
}

body.sa-budget-page .topbar-brand-text {
  color: var(--budget-ink) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
}

body.sa-budget-page .topbar-org {
  min-height: 44px !important;
  padding: 5px 6px 5px 8px !important;
  border-color: var(--budget-line) !important;
  background: #f8fbfb !important;
}

body.sa-budget-page .topbar-org-avatar {
  width: 32px !important;
  height: 32px !important;
}

body.sa-budget-page aside.side {
  top: 68px !important;
  height: calc(100vh - 68px) !important;
  padding: 18px 14px 22px !important;
  border-right-color: var(--budget-line) !important;
  background: #f8fbfb !important;
  scrollbar-width: thin !important;
  scrollbar-color: #c5d3d6 transparent !important;
}

body.sa-budget-page .side-nav-group {
  margin-bottom: 8px !important;
  border-color: transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

body.sa-budget-page .side-nav-group.open {
  border-color: var(--budget-line) !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(23, 50, 57, .05) !important;
}

body.sa-budget-page .side-nav-head {
  position: relative !important;
  min-height: 42px !important;
  padding: 10px 42px 10px 12px !important;
  color: #52676f !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

body.sa-budget-page .side-nav-head::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 15px !important;
  width: 7px !important;
  height: 7px !important;
  margin: -5px 0 0 !important;
  border: 0 !important;
  border-right: 1.5px solid #6e858c !important;
  border-bottom: 1.5px solid #6e858c !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: rotate(45deg) !important;
  transition: transform .16s ease, border-color .16s ease !important;
}

body.sa-budget-page .side-nav-group.open .side-nav-head {
  border-bottom-color: #e7eeee !important;
  color: var(--budget-teal-dark) !important;
}

body.sa-budget-page .side-nav-group.open .side-nav-head::after {
  margin-top: -2px !important;
  border-color: var(--budget-teal) !important;
  transform: rotate(225deg) !important;
}

body.sa-budget-page .side-nav-group.back-group .side-nav-head::after {
  content: none !important;
  display: none !important;
}

body.sa-budget-page .side-nav-items {
  padding: 6px !important;
}

body.sa-budget-page .nav-btn {
  min-height: 42px !important;
  padding: 8px 9px !important;
  border-radius: 6px !important;
  color: #344b54 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.sa-budget-page .nav-btn:hover {
  border-color: #d9e4e6 !important;
  background: #f2f7f7 !important;
}

body.sa-budget-page .nav-btn.active {
  border-color: var(--budget-teal-dark) !important;
  background: var(--budget-teal-dark) !important;
  box-shadow: 0 6px 14px rgba(7, 95, 91, .17) !important;
}

body.sa-budget-page .nav-num {
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
}

body.sa-budget-page main {
  padding: 24px 30px 56px !important;
  background: var(--budget-canvas) !important;
}

body.sa-budget-page main > * {
  width: min(100%, 1600px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body.sa-budget-page .breadcrumb {
  margin-bottom: 9px !important;
  color: #75888e !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

body.sa-budget-page .top {
  margin-bottom: 16px !important;
  padding-bottom: 17px !important;
  border-bottom-color: var(--budget-line) !important;
}

body.sa-budget-page .h1 {
  color: var(--budget-ink) !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
}

body.sa-budget-page .top-subtitle {
  max-width: 820px !important;
  margin-top: 7px !important;
  color: var(--budget-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body.sa-budget-page .toolbar {
  min-height: 42px !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
}

body.sa-budget-page .toolbar .btn {
  min-height: 40px !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
  border-color: var(--budget-line-strong) !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(24, 53, 60, .04) !important;
}

body.sa-budget-page .toolbar .btn:hover {
  border-color: #9fb5ba !important;
  background: #fbfdfd !important;
}

body.sa-budget-page .status-row {
  min-height: 52px !important;
  margin-bottom: 14px !important;
  padding: 8px 10px 8px 13px !important;
  border-color: #cfe2df !important;
  border-radius: 8px !important;
  background: #f3faf8 !important;
}

body.sa-budget-page .status {
  color: #46636a !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
}

body.sa-budget-page .status-row .btn {
  min-height: 36px !important;
  background: #fff !important;
}

body.sa-budget-page .function-tabs {
  margin: 18px auto 14px !important;
  padding: 6px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 6px !important;
  overflow: visible !important;
  border: 1px solid var(--budget-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(24, 53, 60, .04) !important;
}

body.sa-budget-page .function-tab-btn {
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 10px 12px !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: #fff !important;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease !important;
}

body.sa-budget-page .function-tab-btn:hover {
  border-color: #d6e2e4 !important;
  background: #f7fafb !important;
}

body.sa-budget-page .function-tab-btn.active {
  border-color: #a9d4cf !important;
  color: var(--budget-teal-dark) !important;
  background: var(--budget-teal-soft) !important;
}

body.sa-budget-page .function-tab-btn.active::after {
  content: none !important;
  display: none !important;
}

body.sa-budget-page .function-tab-icon {
  width: 32px !important;
  height: 32px !important;
  border-color: #d6e2e4 !important;
  border-radius: 7px !important;
  color: var(--budget-teal) !important;
  background: #f8fbfb !important;
  font-size: 12px !important;
}

body.sa-budget-page .function-tab-btn.active .function-tab-icon {
  border-color: #9fcfc9 !important;
  color: #fff !important;
  background: var(--budget-teal) !important;
}

body.sa-budget-page .function-tab-text {
  min-width: 0 !important;
}

body.sa-budget-page .function-tab-text b {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

body.sa-budget-page .function-tab-text small {
  margin-top: 3px !important;
  color: #6d8086 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 550 !important;
}

body.sa-budget-page .panel,
body.sa-budget-page .section-card,
body.sa-budget-page .function-panel {
  border-color: var(--budget-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 18px rgba(23, 50, 57, .055) !important;
}

body.sa-budget-page .panel-head {
  min-height: 56px !important;
  padding: 14px 18px !important;
  border-bottom-color: var(--budget-line) !important;
  background: #fff !important;
}

body.sa-budget-page .panel-title {
  color: var(--budget-ink) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

body.sa-budget-page .settings-control-panel {
  margin-top: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

body.sa-budget-page .settings-control-panel > .panel-head {
  position: relative !important;
  padding-left: 22px !important;
  justify-content: flex-start !important;
}

body.sa-budget-page .settings-control-panel > .panel-head::before {
  content: "" !important;
  width: 4px !important;
  height: 24px !important;
  margin-right: 11px !important;
  border-radius: 4px !important;
  background: var(--budget-teal) !important;
}

body.sa-budget-page .settings-control-panel > .panel-body {
  padding: 14px !important;
  background: #f5f8f9 !important;
}

body.sa-budget-page .settings-control-board {
  display: grid !important;
  gap: 10px !important;
}

body.sa-budget-page .settings-control-group {
  --settings-accent: #176b9b;
  --settings-soft: #edf5fa;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--budget-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(23, 50, 57, .035) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

body.sa-budget-page .settings-group-order37 {
  --settings-accent: #2563a8;
  --settings-soft: #edf4fb;
}

body.sa-budget-page .settings-group-main {
  --settings-accent: #087f78;
  --settings-soft: #eaf6f4;
}

body.sa-budget-page .settings-group-appointment {
  --settings-accent: #b46524;
  --settings-soft: #fff5e9;
}

body.sa-budget-page .settings-group-ai {
  --settings-accent: #b24e6c;
  --settings-soft: #fff0f4;
}

body.sa-budget-page .settings-control-group:not(.is-collapsed) {
  padding-left: 0 !important;
  border-color: var(--settings-accent) !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(23, 50, 57, .075) !important;
}

body.sa-budget-page .settings-group-head,
body.sa-budget-page .settings-control-group.is-collapsed .settings-group-head {
  width: 100% !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 13px 16px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 34px !important;
  grid-column: auto !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 0 !important;
  background: #fff !important;
  transition: background-color .16s ease !important;
}

body.sa-budget-page .settings-group-head > div {
  min-width: 0 !important;
}

body.sa-budget-page .settings-group-head::after {
  content: none !important;
  display: none !important;
}

body.sa-budget-page .settings-group-head:hover {
  background: #f8fbfb !important;
}

body.sa-budget-page .settings-control-group:not(.is-collapsed) .settings-group-head {
  border-bottom: 1px solid var(--budget-line) !important;
  background: var(--settings-soft) !important;
}

body.sa-budget-page .settings-group-head:focus-visible {
  outline: 3px solid rgba(23, 107, 155, .2) !important;
  outline-offset: -3px !important;
  box-shadow: none !important;
}

body.sa-budget-page .settings-group-index {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--settings-accent) !important;
  background: var(--settings-soft) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.sa-budget-page .settings-control-group:not(.is-collapsed) .settings-group-index {
  border-color: var(--settings-accent) !important;
  color: #fff !important;
  background: var(--settings-accent) !important;
}

body.sa-budget-page .settings-group-title {
  overflow: hidden !important;
  color: var(--budget-ink) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
}

body.sa-budget-page .settings-group-note {
  margin-top: 3px !important;
  overflow: hidden !important;
  color: #687c83 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
}

body.sa-budget-page .settings-group-chevron {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  justify-self: end !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--budget-line-strong) !important;
  border-radius: 8px !important;
  color: #587078 !important;
  background: #fff !important;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease !important;
}

body.sa-budget-page .settings-group-chevron::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) translate(-1px, -1px) !important;
  transition: transform .16s ease !important;
}

body.sa-budget-page .settings-control-group.is-collapsed .settings-group-chevron::before {
  transform: rotate(-45deg) translate(-1px, 1px) !important;
}

body.sa-budget-page .settings-control-group:not(.is-collapsed) .settings-group-chevron {
  border-color: var(--settings-accent) !important;
  color: #fff !important;
  background: var(--settings-accent) !important;
}

body.sa-budget-page .settings-group-grid,
body.sa-budget-page .settings-group-grid.four {
  padding: 18px 20px 20px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: end !important;
  background: #fff !important;
}

body.sa-budget-page .settings-group-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.sa-budget-page .settings-control-group.is-collapsed .settings-group-grid,
body.sa-budget-page .settings-control-group.is-collapsed .settings-group-grid.four {
  display: none !important;
}

body.sa-budget-page .settings-group-grid .field {
  min-width: 0 !important;
}

body.sa-budget-page .settings-group-grid .field label {
  min-height: 30px !important;
  margin-bottom: 7px !important;
  display: flex !important;
  align-items: flex-end !important;
  color: #3d535b !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
}

body.sa-budget-page .settings-group-grid select,
body.sa-budget-page .settings-group-grid input,
body.sa-budget-page .settings-group-grid textarea {
  min-height: 42px !important;
  border-color: var(--budget-line-strong) !important;
  background: #fbfdfd !important;
}

body.sa-budget-page .settings-group-grid select:hover,
body.sa-budget-page .settings-group-grid input:hover,
body.sa-budget-page .settings-group-grid textarea:hover {
  border-color: #aabdc1 !important;
}

body.sa-budget-page .settings-control-actions {
  margin-top: 10px !important;
  padding: 14px 2px 2px !important;
  border-top: 1px solid var(--budget-line) !important;
}

body.sa-budget-page .settings-control-actions .btn,
body.sa-budget-page .settings-control-actions .btn-save {
  min-height: 42px !important;
  padding-right: 17px !important;
  padding-left: 17px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

@media (max-width: 1360px) {
  body.sa-budget-page .settings-group-grid,
  body.sa-budget-page .settings-group-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.sa-budget-page .settings-field-wide {
    grid-column: span 2 !important;
  }
}

@media (max-width: 1180px) and (min-width: 1101px) {
  body.sa-budget-page {
    --budget-sidebar: 248px;
  }

  body.sa-budget-page main {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  body.sa-budget-page .function-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  body.sa-budget-page > .shell {
    display: block !important;
    min-height: 0 !important;
  }

  body.sa-budget-page .topbar {
    min-height: 64px !important;
  }

  body.sa-budget-page aside.side {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    padding: 10px 12px !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--budget-line) !important;
    background: #fff !important;
  }

  body.sa-budget-page .side-nav-group {
    flex: 0 0 238px !important;
    margin: 0 !important;
  }

  body.sa-budget-page .side-nav-group.back-group {
    flex-basis: 190px !important;
  }

  body.sa-budget-page main {
    padding: 20px 18px 42px !important;
  }

  body.sa-budget-page .function-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body.sa-budget-page .topbar {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body.sa-budget-page main {
    padding: 16px 10px 34px !important;
  }

  body.sa-budget-page aside.side {
    min-height: 54px !important;
    padding: 8px 10px !important;
    align-items: center !important;
    scrollbar-width: none !important;
  }

  body.sa-budget-page aside.side::-webkit-scrollbar,
  body.sa-budget-page .function-tabs::-webkit-scrollbar {
    display: none !important;
  }

  body.sa-budget-page .side-nav-group,
  body.sa-budget-page .side-nav-group.back-group {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.sa-budget-page .side-nav-group.open .side-nav-head,
  body.sa-budget-page .side-nav-group.back-group .side-nav-head {
    display: none !important;
  }

  body.sa-budget-page .side-nav-head {
    min-height: 36px !important;
    padding: 8px 32px 8px 10px !important;
    border: 1px solid var(--budget-line) !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    background: #fff !important;
  }

  body.sa-budget-page .side-nav-head::after {
    right: 12px !important;
  }

  body.sa-budget-page .side-nav-items,
  body.sa-budget-page .side-nav-group.open .side-nav-items,
  body.sa-budget-page .side-nav-group.back-group .side-nav-items {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  body.sa-budget-page .nav-btn {
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
  }

  body.sa-budget-page .top {
    padding-bottom: 14px !important;
  }

  body.sa-budget-page .toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.sa-budget-page .toolbar .btn {
    width: 100% !important;
  }

  body.sa-budget-page .status-row {
    align-items: stretch !important;
  }

  body.sa-budget-page .status {
    flex: 1 1 100% !important;
  }

  body.sa-budget-page .function-tabs {
    padding: 5px !important;
    display: flex !important;
    gap: 5px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
  }

  body.sa-budget-page .function-tab-btn {
    flex: 0 0 220px !important;
    scroll-snap-align: start !important;
  }

  body.sa-budget-page .settings-control-panel > .panel-head {
    min-height: 52px !important;
    padding: 12px 14px !important;
  }

  body.sa-budget-page .settings-control-panel > .panel-body {
    padding: 9px !important;
  }

  body.sa-budget-page .settings-control-board {
    gap: 8px !important;
  }

  body.sa-budget-page .settings-group-head,
  body.sa-budget-page .settings-control-group.is-collapsed .settings-group-head {
    min-height: 68px !important;
    padding: 11px 12px !important;
    grid-template-columns: 34px minmax(0, 1fr) 32px !important;
    gap: 9px !important;
  }

  body.sa-budget-page .settings-group-index {
    width: 34px !important;
    height: 34px !important;
  }

  body.sa-budget-page .settings-group-chevron {
    width: 32px !important;
    height: 32px !important;
  }

  body.sa-budget-page .settings-group-title {
    font-size: 13.5px !important;
  }

  body.sa-budget-page .settings-group-note {
    white-space: normal !important;
  }

  body.sa-budget-page .settings-group-grid,
  body.sa-budget-page .settings-group-grid.four {
    padding: 14px 12px 16px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.sa-budget-page .settings-field-wide {
    grid-column: span 1 !important;
  }

  body.sa-budget-page .settings-group-grid .field label {
    min-height: 0 !important;
  }
}