.ml-page {
  width: 100%;
  min-width: 0;

  --ml-surface: #ffffff;
  --ml-soft: #f7f8fa;
  --ml-hover: #f1f3f5;

  --ml-text: #101318;
  --ml-text-soft: #37404a;
  --ml-muted: #68727d;

  --ml-border:
    rgba(
      17,
      24,
      39,
      0.09
    );

  --ml-border-strong:
    rgba(
      17,
      24,
      39,
      0.15
    );

  --ml-primary: #111827;
  --ml-primary-hover: #1f2937;
  --ml-primary-text: #ffffff;

  --ml-success: #18794e;
  --ml-success-soft: #edf8f2;
  --ml-success-border: #c9e8d6;

  --ml-warning: #986516;
  --ml-warning-soft: #fff7e8;
  --ml-warning-border: #ecd7ae;

  --ml-danger: #bd3434;
  --ml-danger-soft: #fdf1f1;
  --ml-danger-border: #efcccc;

  --ml-info: #426aa3;
  --ml-info-soft: #edf3fa;
  --ml-info-border: #ccdaee;

  --ml-shadow:
    0 1px 2px
      rgba(
        15,
        23,
        42,
        0.02
      ),
    0 10px 30px
      rgba(
        15,
        23,
        42,
        0.045
      );

  --ml-shadow-hover:
    0 16px 42px
      rgba(
        15,
        23,
        42,
        0.08
      );

  --ml-modal-shadow:
    0 32px 100px
      rgba(
        15,
        23,
        42,
        0.24
      );

  --ml-radius-sm: 10px;
  --ml-radius-md: 14px;
  --ml-radius-lg: 18px;

  --ml-transition:
    180ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  color:
    var(--ml-text);
}



html[data-theme="dark"]
.ml-page,
body[data-theme="dark"]
.ml-page {
  --ml-surface: #111214;
  --ml-soft: #16181b;
  --ml-hover: #1c1e22;

  --ml-text: #ffffff;
  --ml-text-soft: #e1e5ea;
  --ml-muted: #b4bbc4;

  --ml-border:
    rgba(
      255,
      255,
      255,
      0.07
    );

  --ml-border-strong:
    rgba(
      255,
      255,
      255,
      0.14
    );

  --ml-primary: #f4f5f7;
  --ml-primary-hover: #ffffff;
  --ml-primary-text: #111214;

  --ml-success: #7ec59a;
  --ml-success-soft: #15251c;
  --ml-success-border: #285338;

  --ml-warning: #e0b65f;
  --ml-warning-soft: #2b2416;
  --ml-warning-border: #5a4925;

  --ml-danger: #ef9292;
  --ml-danger-soft: #291919;
  --ml-danger-border: #583030;

  --ml-info: #91b3e0;
  --ml-info-soft: #182331;
  --ml-info-border: #314966;

  --ml-shadow:
    0 1px 0
      rgba(
        255,
        255,
        255,
        0.02
      ),
    0 12px 34px
      rgba(
        0,
        0,
        0,
        0.18
      );

  --ml-shadow-hover:
    0 18px 48px
      rgba(
        0,
        0,
        0,
        0.28
      );

  --ml-modal-shadow:
    0 32px 100px
      rgba(
        0,
        0,
        0,
        0.55
      );
}



.ml-heading {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 14px;

  padding: 2px 2px 0;
}



.ml-heading-copy {
  min-width: 0;
}



.ml-heading-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 5px;
}



.ml-heading-kicker,
.ml-heading-section {
  color:
    var(--ml-text-soft);

  font-size: 10px;
  font-weight: 850;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}



.ml-heading-section {
  color:
    var(--ml-muted);
}



.ml-heading-divider {
  width: 20px;
  height: 1px;

  background:
    var(--ml-border-strong);
}



.ml-heading h1 {
  margin: 0;

  color:
    var(--ml-text);

  font-size: 28px;
  font-weight: 900;

  line-height: 1.08;

  letter-spacing:
    -0.045em;
}



.ml-heading p {
  margin:
    6px 0 0;

  max-width: 680px;

  color:
    var(--ml-text-soft);

  font-size: 11.5px;
  font-weight: 720;

  line-height: 1.5;
}



.ml-heading-actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 7px;
}



.ml-button {
  min-height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding:
    0 12px;

  border:
    1px solid
    transparent;

  border-radius:
    var(--ml-radius-sm);

  outline: none;

  font-family: inherit;
  font-size: 10.5px;
  font-weight: 820;

  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  transition:
    color
      var(--ml-transition),
    background-color
      var(--ml-transition),
    border-color
      var(--ml-transition),
    transform
      var(--ml-transition),
    box-shadow
      var(--ml-transition),
    opacity
      var(--ml-transition);
}



.ml-button svg {
  width: 14px;
  height: 14px;

  stroke-width: 2.1;
}



.ml-button:hover:not(
  :disabled
) {
  transform:
    translateY(-1px);
}



.ml-button:active:not(
  :disabled
) {
  transform:
    translateY(0)
    scale(0.98);
}



.ml-button:focus-visible {
  box-shadow:
    0 0 0 3px
    rgba(
      127,
      127,
      127,
      0.12
    );
}



.ml-button:disabled {
  opacity: 0.48;

  cursor: not-allowed;

  transform: none;
}



.ml-button-primary {
  color:
    var(--ml-primary-text);

  background:
    var(--ml-primary);

  border-color:
    var(--ml-primary);

  box-shadow:
    0 6px 16px
    rgba(
      17,
      24,
      39,
      0.08
    );
}



.ml-button-primary:hover:not(
  :disabled
) {
  background:
    var(--ml-primary-hover);

  border-color:
    var(--ml-primary-hover);
}



.ml-button-secondary {
  color:
    var(--ml-text-soft);

  background:
    var(--ml-surface);

  border-color:
    var(--ml-border);
}



.ml-button-secondary:hover:not(
  :disabled
) {
  color:
    var(--ml-text);

  background:
    var(--ml-hover);

  border-color:
    var(--ml-border-strong);
}



.ml-button-danger {
  color:
    #ffffff;

  background:
    var(--ml-danger);

  border-color:
    var(--ml-danger);
}



.ml-button-full {
  width: 100%;
}



.ml-button.is-loading svg,
.ml-detail-loading svg,
.ml-state-icon svg {
  animation:
    mlSpin
    800ms
    linear
    infinite;
}



.ml-feedback {
  min-height: 46px;

  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 12px;

  padding:
    8px
    9px
    8px
    11px;

  border:
    1px solid
    transparent;

  border-radius:
    var(--ml-radius-sm);

  box-shadow:
    var(--ml-shadow);
}



.ml-feedback.is-success {
  color:
    var(--ml-success);

  background:
    var(--ml-success-soft);

  border-color:
    var(--ml-success-border);
}



.ml-feedback.is-error {
  color:
    var(--ml-danger);

  background:
    var(--ml-danger-soft);

  border-color:
    var(--ml-danger-border);
}



.ml-feedback-icon {
  width: 30px;
  height: 30px;

  flex: 0 0
    30px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background:
    rgba(
      127,
      127,
      127,
      0.08
    );
}



.ml-feedback-icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 2.1;
}



.ml-feedback-copy {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 2px;
}



.ml-feedback-copy strong {
  font-size: 10.5px;
  font-weight: 850;
}



.ml-feedback-copy span {
  font-size: 9.5px;
  font-weight: 720;

  line-height: 1.4;
}



.ml-feedback > button {
  width: 30px;
  height: 30px;

  flex: 0 0
    30px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 8px;

  background:
    transparent;

  color:
    currentColor;

  cursor: pointer;

  opacity: 0.7;

  transition:
    opacity
      var(--ml-transition),
    background-color
      var(--ml-transition),
    transform
      var(--ml-transition);
}



.ml-feedback > button:hover {
  opacity: 1;

  background:
    rgba(
      127,
      127,
      127,
      0.1
    );
}



.ml-feedback > button:active {
  transform:
    scale(0.94);
}



.ml-feedback > button svg {
  width: 13px;
  height: 13px;
}



.ml-kpis {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(
        0,
        1fr
      )
    );

  gap: 9px;

  margin-bottom: 12px;
}



.ml-kpi {
  position: relative;

  min-width: 0;
  min-height: 106px;

  display: flex;
  flex-direction: column;

  padding:
    13px;

  overflow: hidden;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-md);

  background:
    var(--ml-surface);

  box-shadow:
    var(--ml-shadow);

  transition:
    transform
      var(--ml-transition),
    border-color
      var(--ml-transition),
    box-shadow
      var(--ml-transition),
    background-color
      var(--ml-transition);
}



.ml-kpi::after {
  content: "";

  position: absolute;

  right: -28px;
  bottom: -36px;

  width: 90px;
  height: 90px;

  border:
    1px solid
    var(--ml-border);

  border-radius: 50%;

  opacity: 0.35;

  pointer-events: none;

  transition:
    transform
      280ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      ),
    opacity
      var(--ml-transition);
}



.ml-kpi:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--ml-border-strong);

  box-shadow:
    var(--ml-shadow-hover);
}



.ml-kpi:hover::after {
  transform:
    scale(1.18);

  opacity: 0.6;
}



.ml-kpi.is-success {
  border-color:
    var(--ml-success-border);

  background:
    var(--ml-success-soft);
}



.ml-kpi.is-info {
  border-color:
    var(--ml-info-border);

  background:
    var(--ml-info-soft);
}



.ml-kpi-top {
  display: flex;
  align-items: center;

  gap: 8px;
}



.ml-kpi-icon {
  width: 30px;
  height: 30px;

  flex:
    0 0
    30px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 9px;

  background:
    var(--ml-soft);

  color:
    var(--ml-text-soft);
}



.ml-kpi-icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 2;
}



.ml-kpi.is-success
.ml-kpi-icon {
  color:
    var(--ml-success);

  border-color:
    var(--ml-success-border);
}



.ml-kpi.is-info
.ml-kpi-icon {
  color:
    var(--ml-info);

  border-color:
    var(--ml-info-border);
}



.ml-kpi-head {
  min-width: 0;

  display: flex;
  align-items: center;
}



.ml-kpi-head span {
  overflow: hidden;

  color:
    var(--ml-text-soft);

  font-size: 9.5px;
  font-weight: 820;

  white-space: nowrap;

  text-overflow:
    ellipsis;
}



.ml-kpi-value {
  display: block;

  margin-top: 9px;

  overflow: hidden;

  color:
    var(--ml-text);

  font-size: 19px;
  font-weight: 900;

  line-height: 1;

  letter-spacing:
    -0.035em;

  white-space: nowrap;

  text-overflow:
    ellipsis;
}



.ml-kpi.is-success
.ml-kpi-value {
  color:
    var(--ml-success);
}



.ml-kpi.is-info
.ml-kpi-value {
  color:
    var(--ml-info);
}



.ml-kpi-description {
  display: block;

  margin-top: 5px;

  max-width: 95%;

  color:
    var(--ml-muted);

  font-size: 8.5px;
  font-weight: 700;

  line-height: 1.35;
}



.ml-navigation {
  width: 100%;
  min-width: 0;

  margin-bottom: 12px;

  padding: 11px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-md);

  background:
    var(--ml-surface);

  box-shadow:
    var(--ml-shadow);
}



.ml-navigation-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 9px;

  padding:
    0 2px;
}



.ml-navigation-head > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}



.ml-navigation-head > div > span {
  color:
    var(--ml-muted);

  font-size: 8.5px;
  font-weight: 850;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}



.ml-navigation-head > div > strong {
  color:
    var(--ml-text);

  font-size: 12px;
  font-weight: 850;
}



.ml-navigation-head p {
  margin: 0;

  color:
    var(--ml-text-soft);

  font-size: 9px;
  font-weight: 700;
}



.ml-tabs {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 7px;

  overflow: visible;

  margin: 0;
  padding: 0;

  border: 0;

  background:
    transparent;

  box-shadow: none;
}



.ml-tabs button {
  position: relative;

  min-width: 0;
  min-height: 64px;

  display: grid;

  grid-template-columns:
    32px
    minmax(
      0,
      1fr
    )
    18px;

  align-items: center;

  gap: 8px;

  padding:
    9px
    10px;

  overflow: hidden;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    10px;

  background:
    var(--ml-soft);

  color:
    var(--ml-text-soft);

  text-align: left;

  cursor: pointer;

  transition:
    transform
      var(--ml-transition),
    background-color
      var(--ml-transition),
    border-color
      var(--ml-transition),
    box-shadow
      var(--ml-transition),
    color
      var(--ml-transition);
}



.ml-tabs button:hover {
  transform:
    translateY(-1px);

  color:
    var(--ml-text);

  background:
    var(--ml-hover);

  border-color:
    var(--ml-border-strong);
}



.ml-tabs button.is-active {
  color:
    var(--ml-primary-text);

  background:
    var(--ml-primary);

  border-color:
    var(--ml-primary);

  box-shadow:
    0 8px 20px
    rgba(
      15,
      23,
      42,
      0.1
    );
}



.ml-tab-icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    9px;

  background:
    var(--ml-surface);

  color:
    var(--ml-text-soft);
}



.ml-tabs button.is-active
.ml-tab-icon {
  color:
    var(--ml-primary);

  background:
    var(--ml-primary-text);

  border-color:
    transparent;
}



.ml-tab-icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 2.1;
}



.ml-tab-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}



.ml-tab-copy strong {
  overflow: hidden;

  color: inherit;

  font-size: 10px;
  font-weight: 850;

  white-space: nowrap;

  text-overflow:
    ellipsis;
}



.ml-tab-copy small {
  overflow: hidden;

  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 700;

  line-height: 1.3;

  white-space: nowrap;

  text-overflow:
    ellipsis;
}



.ml-tabs button.is-active
.ml-tab-copy small {
  color:
    currentColor;

  opacity: 0.72;
}



.ml-tab-arrow {
  width: 13px;
  height: 13px;

  color:
    var(--ml-muted);

  transition:
    transform
      var(--ml-transition),
    color
      var(--ml-transition);
}



.ml-tabs button:hover
.ml-tab-arrow {
  transform:
    translateX(2px);

  color:
    var(--ml-text);
}



.ml-tabs button.is-active
.ml-tab-arrow {
  color:
    currentColor;

  opacity: 0.8;
}



.ml-content {
  width: 100%;
  min-width: 0;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-lg);

  background:
    var(--ml-surface);

  box-shadow:
    var(--ml-shadow);

  overflow: hidden;
}



.ml-content-head {
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding:
    11px
    14px;

  border-bottom:
    1px solid
    var(--ml-border);

  background:
    var(--ml-soft);
}



.ml-content-head > div:first-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}



.ml-content-head > div:first-child > span {
  color:
    var(--ml-muted);

  font-size: 8.5px;
  font-weight: 850;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}



.ml-content-head > div:first-child > strong {
  color:
    var(--ml-text);

  font-size: 11px;
  font-weight: 800;

  line-height: 1.4;
}



.ml-content-icon {
  width: 32px;
  height: 32px;

  flex:
    0 0
    32px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 9px;

  background:
    var(--ml-surface);

  color:
    var(--ml-text-soft);
}



.ml-content-icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 2;
}



.ml-content-body {
  min-width: 0;

  padding: 12px;
}



.ml-dashboard {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1.65fr
    )
    minmax(
      280px,
      0.75fr
    );

  gap: 10px;

  align-items: start;
}



.ml-dashboard-primary,
.ml-dashboard-side {
  min-width: 0;
}



.ml-dashboard-side {
  display: grid;

  gap: 10px;
}



.ml-panel {
  min-width: 0;

  padding: 14px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-md);

  background:
    var(--ml-surface);

  box-shadow:
    var(--ml-shadow);

  transition:
    transform
      var(--ml-transition),
    border-color
      var(--ml-transition),
    box-shadow
      var(--ml-transition),
    background-color
      var(--ml-transition);
}



.ml-panel:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--ml-border-strong);

  box-shadow:
    var(--ml-shadow-hover);
}



.ml-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;
}



.ml-panel-title {
  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 9px;
}



.ml-panel-title > div:last-child {
  min-width: 0;
}



.ml-panel-title
> div:last-child
> span {
  display: block;

  color:
    var(--ml-muted);

  font-size: 8.5px;
  font-weight: 850;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}



.ml-panel-title h2 {
  margin:
    3px 0 0;

  color:
    var(--ml-text);

  font-size: 14px;
  font-weight: 860;

  line-height: 1.2;
}



.ml-panel-title p {
  margin:
    4px 0 0;

  max-width: 620px;

  color:
    var(--ml-text-soft);

  font-size: 9.5px;
  font-weight: 700;

  line-height: 1.45;
}



.ml-panel-icon {
  width: 32px;
  height: 32px;

  flex: 0 0
    32px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 9px;

  background:
    var(--ml-soft);

  color:
    var(--ml-text-soft);
}



.ml-panel-icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 2;
}



.ml-link-button {
  min-height: 30px;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding:
    0 8px;

  flex:
    0 0 auto;

  border:
    1px solid
    var(--ml-border);

  border-radius: 8px;

  background:
    var(--ml-soft);

  color:
    var(--ml-text-soft);

  font-family: inherit;
  font-size: 8.5px;
  font-weight: 800;

  cursor: pointer;

  transition:
    color
      var(--ml-transition),
    background-color
      var(--ml-transition),
    border-color
      var(--ml-transition),
    transform
      var(--ml-transition);
}



.ml-link-button:hover {
  color:
    var(--ml-text);

  background:
    var(--ml-hover);

  border-color:
    var(--ml-border-strong);

  transform:
    translateX(1px);
}



.ml-link-button svg {
  width: 11px;
  height: 11px;
}



.ml-recent-list {
  display: grid;
}



.ml-recent-item {
  min-height: 58px;

  display: grid;

  grid-template-columns:
    8px
    50px
    minmax(
      0,
      1fr
    )
    76px
    110px;

  align-items: center;

  gap: 8px;

  padding:
    0 2px;

  border-bottom:
    1px solid
    var(--ml-border);

  transition:
    background-color
      var(--ml-transition),
    padding-left
      var(--ml-transition);
}



.ml-recent-item:last-child {
  border-bottom: 0;
}



.ml-recent-item:hover {
  padding-left: 4px;

  background:
    var(--ml-soft);
}



.ml-recent-marker {
  width: 8px;

  display: flex;
  justify-content: center;
}



.ml-recent-marker span {
  width: 5px;
  height: 5px;

  display: block;

  border-radius: 50%;

  background:
    var(--ml-border-strong);
}



.ml-recent-time {
  color:
    var(--ml-text-soft);

  font-size: 9px;
  font-weight: 800;
}



.ml-recent-main {
  min-width: 0;
}



.ml-recent-main strong {
  display: block;

  overflow: hidden;

  color:
    var(--ml-text);

  font-size: 10px;
  font-weight: 830;

  white-space: nowrap;

  text-overflow:
    ellipsis;
}



.ml-recent-main span {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 700;

  white-space: nowrap;

  text-overflow:
    ellipsis;
}



.ml-recent-origin {
  overflow: hidden;

  color:
    var(--ml-text-soft);

  font-size: 8.5px;
  font-weight: 760;

  white-space: nowrap;

  text-overflow:
    ellipsis;
}



.ml-recent-amount {
  color:
    var(--ml-text);

  text-align: right;

  font-size: 10.5px;
  font-weight: 880;

  white-space: nowrap;
}



.ml-full-summary {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 7px;

  margin-bottom: 12px;
}



.ml-full-summary > div {
  min-width: 0;

  padding: 10px;

  border:
    1px solid
    var(--ml-border);

  border-radius: 9px;

  background:
    var(--ml-soft);
}



.ml-full-summary span {
  display: block;

  color:
    var(--ml-text-soft);

  font-size: 8px;
  font-weight: 780;
}



.ml-full-summary strong {
  display: block;

  margin-top: 4px;

  color:
    var(--ml-text);

  font-size: 17px;
  font-weight: 900;
}



.ml-full-summary small {
  display: block;

  margin-top: 3px;

  color:
    var(--ml-muted);

  font-size: 7.5px;
  font-weight: 690;
}



.ml-action-guide {
  display: grid;

  gap: 6px;

  margin-bottom: 12px;
}



.ml-action-guide > div {
  display: grid;

  grid-template-columns:
    24px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 8px;

  min-height: 38px;

  padding:
    6px
    8px;

  border:
    1px solid
    var(--ml-border);

  border-radius: 9px;

  background:
    var(--ml-soft);
}



.ml-action-guide > div > span {
  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  background:
    var(--ml-surface);

  color:
    var(--ml-text);

  font-size: 9px;
  font-weight: 900;
}



.ml-action-guide p {
  margin: 0;

  color:
    var(--ml-text-soft);

  font-size: 9px;
  font-weight: 720;

  line-height: 1.35;
}



.ml-section {
  width: 100%;
  min-width: 0;

  margin-bottom: 10px;
}



.ml-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 9px;

  padding:
    0 2px;
}



.ml-section-heading > div:first-child {
  min-width: 0;
}



.ml-section-heading
> div:first-child
> span {
  color:
    var(--ml-muted);

  font-size: 8.5px;
  font-weight: 850;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}



.ml-section-heading h2 {
  margin:
    3px 0 0;

  color:
    var(--ml-text);

  font-size: 15px;
  font-weight: 880;

  line-height: 1.2;
}



.ml-section-heading p {
  margin:
    4px 0 0;

  max-width: 680px;

  color:
    var(--ml-text-soft);

  font-size: 9.5px;
  font-weight: 700;

  line-height: 1.45;
}



.ml-section-badge {
  min-height: 30px;

  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding:
    0 9px;

  flex:
    0 0 auto;

  border:
    1px solid
    var(--ml-border);

  border-radius: 999px;

  background:
    var(--ml-soft);

  color:
    var(--ml-text-soft);

  font-size: 8.5px;
  font-weight: 800;
}



.ml-section-badge svg {
  width: 12px;
  height: 12px;
}



.ml-toolbar {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: flex-end;

  gap: 7px;

  padding: 9px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-md);

  background:
    var(--ml-surface);

  box-shadow:
    var(--ml-shadow);
}



.ml-toolbar-main {
  min-width: 0;

  flex: 1;
}



.ml-toolbar-filters {
  min-width: 0;

  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;

  gap: 6px;
}



.ml-search {
  min-width: 240px;
  min-height: 36px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    0 10px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-soft);

  transition:
    border-color
      var(--ml-transition),
    background-color
      var(--ml-transition),
    box-shadow
      var(--ml-transition);
}



.ml-search-large {
  width: 100%;
}



.ml-search:focus-within {
  background:
    var(--ml-surface);

  border-color:
    var(--ml-border-strong);

  box-shadow:
    0 0 0 3px
    rgba(
      127,
      127,
      127,
      0.08
    );
}



.ml-search > svg {
  width: 14px;
  height: 14px;

  flex: 0 0
    14px;

  color:
    var(--ml-muted);
}



.ml-search input {
  min-width: 0;

  flex: 1;

  border: 0;
  outline: 0;

  background:
    transparent;

  color:
    var(--ml-text);

  font-family: inherit;
  font-size: 10.5px;
  font-weight: 760;
}



.ml-search input::placeholder {
  color:
    var(--ml-muted);

  font-weight: 700;

  opacity: 1;
}



.ml-filter-field {
  min-width: 120px;

  display: flex;
  flex-direction: column;

  gap: 4px;
}



.ml-filter-field > span {
  color:
    var(--ml-text-soft);

  font-size: 8px;
  font-weight: 800;
}



.ml-input,
.ml-select {
  min-width: 0;
  min-height: 36px;

  padding:
    0 9px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-sm);

  outline: none;

  background:
    var(--ml-soft);

  color:
    var(--ml-text);

  font-family: inherit;
  font-size: 9.5px;
  font-weight: 750;

  transition:
    border-color
      var(--ml-transition),
    background-color
      var(--ml-transition),
    box-shadow
      var(--ml-transition);
}



.ml-input:focus,
.ml-select:focus {
  background:
    var(--ml-surface);

  border-color:
    var(--ml-border-strong);

  box-shadow:
    0 0 0 3px
    rgba(
      127,
      127,
      127,
      0.08
    );
}



.ml-icon-button {
  position: relative;

  width: 36px;
  height: 36px;

  flex: 0 0
    36px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-soft);

  color:
    var(--ml-text-soft);

  cursor: pointer;

  transition:
    color
      var(--ml-transition),
    background-color
      var(--ml-transition),
    border-color
      var(--ml-transition),
    transform
      var(--ml-transition);
}



.ml-icon-button:hover {
  transform:
    translateY(-1px);

  color:
    var(--ml-text);

  background:
    var(--ml-hover);

  border-color:
    var(--ml-border-strong);
}



.ml-icon-button.is-active {
  color:
    var(--ml-primary-text);

  background:
    var(--ml-primary);

  border-color:
    var(--ml-primary);
}



.ml-icon-button svg {
  width: 14px;
  height: 14px;
}



.ml-filter-count {
  position: absolute;

  top: -5px;
  right: -5px;

  min-width: 17px;
  height: 17px;

  display: grid;
  place-items: center;

  padding:
    0 4px;

  border:
    2px solid
    var(--ml-surface);

  border-radius: 999px;

  background:
    var(--ml-danger);

  color:
    #ffffff;

  font-size: 7px;
  font-weight: 900;
}



.ml-card {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-md);

  background:
    var(--ml-surface);

  box-shadow:
    var(--ml-shadow);

  transition:
    transform
      var(--ml-transition),
    border-color
      var(--ml-transition),
    box-shadow
      var(--ml-transition);
}



.ml-card:hover {
  border-color:
    var(--ml-border-strong);

  box-shadow:
    var(--ml-shadow-hover);
}



.ml-data-card-head {
  min-height: 54px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    9px
    12px;

  border-bottom:
    1px solid
    var(--ml-border);

  background:
    var(--ml-soft);
}



.ml-data-card-head > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}



.ml-data-card-head > div > span {
  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 850;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}



.ml-data-card-head > div > strong {
  color:
    var(--ml-text);

  font-size: 11px;
  font-weight: 850;
}



.ml-data-card-head > small {
  max-width: 500px;

  color:
    var(--ml-text-soft);

  font-size: 8.5px;
  font-weight: 700;

  line-height: 1.4;

  text-align: right;
}.ml-table-wrap {
  width: 100%;
  min-width: 0;

  overflow-x: auto;

  scrollbar-width: thin;

  scrollbar-color:
    var(--ml-border-strong)
    transparent;
}



.ml-table-wrap::-webkit-scrollbar {
  height: 5px;
}



.ml-table-wrap::-webkit-scrollbar-thumb {
  background:
    var(--ml-border-strong);

  border-radius: 999px;
}



.ml-table {
  width: 100%;

  min-width: 980px;

  border-collapse: collapse;

  white-space: nowrap;
}



.ml-table th {
  height: 42px;

  padding:
    0 11px;

  border-bottom:
    1px solid
    var(--ml-border);

  background:
    var(--ml-soft);

  color:
    var(--ml-text-soft);

  text-align: left;

  font-size: 8.8px;
  font-weight: 900;

  letter-spacing: 0.045em;

  text-transform: uppercase;
}



.ml-table td {
  height: 58px;

  padding:
    9px
    11px;

  border-bottom:
    1px solid
    var(--ml-border);

  color:
    var(--ml-text-soft);

  font-size: 10px;
  font-weight: 720;

  vertical-align: middle;
}



.ml-table tbody tr:last-child td {
  border-bottom: 0;
}



.ml-table tbody tr {
  transition:
    background-color
      var(--ml-transition),
    transform
      var(--ml-transition);
}



.ml-table tbody tr:hover {
  background:
    var(--ml-soft);
}



.ml-table .is-actions {
  text-align: right;
}



.ml-table-date {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color:
    var(--ml-text-soft);

  font-size: 9.5px;
  font-weight: 760;
}



.ml-table-date svg {
  width: 12px;
  height: 12px;

  flex: 0 0
    12px;

  color:
    var(--ml-muted);
}



.ml-table-product {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}



.ml-table-product-icon {
  width: 29px;
  height: 29px;

  flex: 0 0
    29px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 8px;

  background:
    var(--ml-soft);

  color:
    var(--ml-muted);
}



.ml-table-product-icon svg {
  width: 12px;
  height: 12px;
}



.ml-order-id,
.ml-sku {
  color:
    var(--ml-text);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 9px;
  font-weight: 850;
}



.ml-product-name {
  display: block;

  max-width: 320px;

  overflow: hidden;

  color:
    var(--ml-text);

  font-size: 10.2px;
  font-weight: 850;

  white-space: nowrap;

  text-overflow: ellipsis;
}



.ml-number,
.ml-money {
  color:
    var(--ml-text);

  font-size: 10.5px;
  font-weight: 900;

  font-variant-numeric:
    tabular-nums;
}



.ml-number-full {
  color:
    var(--ml-info);
}



.ml-origin,
.ml-status,
.ml-movement {
  min-height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 4px;

  padding:
    0 8px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 0.02em;

  line-height: 1;
}



.ml-origin {
  background:
    var(--ml-info-soft);

  color:
    var(--ml-info);
}



.ml-status.is-success,
.ml-movement.is-success {
  background:
    var(--ml-success-soft);

  color:
    var(--ml-success);
}



.ml-status.is-warning {
  background:
    var(--ml-warning-soft);

  color:
    var(--ml-warning);
}



.ml-status.is-danger,
.ml-movement.is-danger {
  background:
    var(--ml-danger-soft);

  color:
    var(--ml-danger);
}



.ml-movement.is-info {
  background:
    var(--ml-info-soft);

  color:
    var(--ml-info);
}



.ml-table-reason {
  display: block;

  max-width: 280px;

  overflow: hidden;

  color:
    var(--ml-text-soft);

  font-size: 9.5px;
  font-weight: 720;

  white-space: nowrap;

  text-overflow: ellipsis;
}



.ml-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 5px;
}



.ml-row-actions button,
.ml-table-action {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    var(--ml-border);

  border-radius: 8px;

  background:
    var(--ml-surface);

  color:
    var(--ml-muted);

  cursor: pointer;

  transition:
    color
      var(--ml-transition),
    background-color
      var(--ml-transition),
    border-color
      var(--ml-transition),
    transform
      var(--ml-transition),
    box-shadow
      var(--ml-transition);
}



.ml-row-actions button:hover,
.ml-table-action:hover {
  transform:
    translateY(-1px);

  color:
    var(--ml-text);

  background:
    var(--ml-hover);

  border-color:
    var(--ml-border-strong);

  box-shadow:
    0 5px 14px
    rgba(
      15,
      23,
      42,
      0.06
    );
}



.ml-row-actions button.is-danger:hover {
  color:
    var(--ml-danger);

  background:
    var(--ml-danger-soft);

  border-color:
    var(--ml-danger-border);
}



.ml-row-actions svg,
.ml-table-action svg {
  width: 13px;
  height: 13px;
}



.ml-pagination {
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    8px
    11px;

  border-top:
    1px solid
    var(--ml-border);

  background:
    var(--ml-surface);
}



.ml-pagination-info {
  display: flex;
  align-items: baseline;

  gap: 5px;

  color:
    var(--ml-muted);

  font-size: 8.5px;
  font-weight: 700;
}



.ml-pagination-info strong {
  color:
    var(--ml-text);

  font-size: 12px;
  font-weight: 900;
}



.ml-pagination-controls {
  display: flex;
  align-items: center;

  gap: 6px;
}



.ml-page-size {
  display: flex;
  align-items: center;

  gap: 5px;

  color:
    var(--ml-muted);

  font-size: 8.5px;
  font-weight: 720;
}



.ml-pagination select,
.ml-pagination button {
  min-height: 31px;

  border:
    1px solid
    var(--ml-border);

  border-radius: 8px;

  background:
    var(--ml-surface);

  color:
    var(--ml-text-soft);
}



.ml-pagination select {
  padding:
    0 7px;

  font-family: inherit;
  font-size: 8.5px;
  font-weight: 780;
}



.ml-pagination button {
  width: 31px;

  display: grid;
  place-items: center;

  padding: 0;

  cursor: pointer;

  transition:
    color
      var(--ml-transition),
    background-color
      var(--ml-transition),
    border-color
      var(--ml-transition),
    transform
      var(--ml-transition);
}



.ml-pagination button:hover:not(
  :disabled
) {
  transform:
    translateY(-1px);

  color:
    var(--ml-text);

  background:
    var(--ml-hover);

  border-color:
    var(--ml-border-strong);
}



.ml-pagination button:disabled {
  opacity: 0.3;

  cursor: not-allowed;
}



.ml-pagination button svg {
  width: 12px;
  height: 12px;
}



.ml-pagination-page {
  min-width: 118px;

  color:
    var(--ml-muted);

  text-align: center;

  font-size: 8.5px;
  font-weight: 720;
}



.ml-pagination-page strong {
  color:
    var(--ml-text);

  font-size: 9px;
  font-weight: 850;
}



.ml-empty {
  min-height: 250px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 24px;

  text-align: center;

  color:
    var(--ml-muted);
}



.ml-empty-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  margin-bottom: 11px;

  border:
    1px solid
    var(--ml-border);

  border-radius: 14px;

  background:
    var(--ml-soft);

  color:
    var(--ml-muted);
}



.ml-empty-icon svg {
  width: 20px;
  height: 20px;
}



.ml-empty > strong {
  color:
    var(--ml-text);

  font-size: 12px;
  font-weight: 850;
}



.ml-empty > span {
  max-width: 420px;

  margin-top: 5px;

  color:
    var(--ml-text-soft);

  font-size: 9.5px;
  font-weight: 700;

  line-height: 1.45;
}



.ml-empty .ml-button {
  margin-top: 13px;
}



.ml-modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 7000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;

  overflow-y: auto;

  background:
    rgba(
      0,
      0,
      0,
      0.48
    );

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);

  animation:
    mlBackdropEnter
    180ms
    ease
    both;
}



.ml-modal {
  width:
    min(
      100%,
      680px
    );

  max-height:
    calc(
      100dvh - 36px
    );

  overflow-y: auto;
  overflow-x: hidden;

  border:
    1px solid
    var(--ml-border-strong);

  border-radius:
    var(--ml-radius-lg);

  background:
    var(--ml-surface);

  box-shadow:
    var(--ml-modal-shadow);

  scrollbar-width: thin;

  scrollbar-color:
    var(--ml-border-strong)
    transparent;

  animation:
    mlModalEnter
    240ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}



.ml-modal::-webkit-scrollbar {
  width: 6px;
}



.ml-modal::-webkit-scrollbar-thumb {
  background:
    var(--ml-border-strong);

  border-radius: 999px;
}



.ml-sale-modal {
  width:
    min(
      96vw,
      820px
    );
}



.ml-full-management-modal {
  width:
    min(
      96vw,
      760px
    );
}



.ml-detail-modal {
  width:
    min(
      96vw,
      980px
    );
}



.ml-modal-small {
  width:
    min(
      100%,
      460px
    );
}



.ml-modal-header {
  position: sticky;

  top: 0;

  z-index: 4;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;

  padding:
    16px
    18px;

  border-bottom:
    1px solid
    var(--ml-border);

  background:
    var(--ml-surface);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}



.ml-modal-heading {
  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 10px;
}



.ml-modal-heading-icon {
  width: 34px;
  height: 34px;

  flex: 0 0
    34px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 10px;

  background:
    var(--ml-soft);

  color:
    var(--ml-text-soft);
}



.ml-modal-heading-icon svg {
  width: 15px;
  height: 15px;
}



.ml-modal-heading > div:last-child {
  min-width: 0;
}



.ml-modal-heading > div:last-child > span {
  display: block;

  margin-bottom: 3px;

  color:
    var(--ml-muted);

  font-size: 8.5px;
  font-weight: 850;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}



.ml-modal-header h2 {
  margin: 0;

  color:
    var(--ml-text);

  font-size: 19px;
  font-weight: 900;

  line-height: 1.15;

  letter-spacing:
    -0.03em;
}



.ml-modal-header p {
  margin:
    5px 0 0;

  max-width: 620px;

  color:
    var(--ml-text-soft);

  font-size: 10px;
  font-weight: 720;

  line-height: 1.4;
}



.ml-modal-header > button {
  width: 32px;
  height: 32px;

  flex: 0 0
    32px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    var(--ml-border);

  border-radius: 9px;

  background:
    var(--ml-soft);

  color:
    var(--ml-muted);

  cursor: pointer;

  transition:
    color
      var(--ml-transition),
    background-color
      var(--ml-transition),
    border-color
      var(--ml-transition),
    transform
      var(--ml-transition);
}



.ml-modal-header > button:hover {
  transform:
    rotate(4deg);

  color:
    var(--ml-text);

  background:
    var(--ml-hover);

  border-color:
    var(--ml-border-strong);
}



.ml-modal-header > button svg {
  width: 13px;
  height: 13px;
}



.ml-modal form {
  padding: 17px;
}



.ml-form-intro {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  margin-bottom: 14px;

  padding: 10px;

  border:
    1px solid
    var(--ml-info-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-info-soft);
}



.ml-form-intro-icon {
  width: 28px;
  height: 28px;

  flex: 0 0
    28px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background:
    var(--ml-surface);

  color:
    var(--ml-info);
}



.ml-form-intro-icon svg {
  width: 13px;
  height: 13px;
}



.ml-form-intro > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}



.ml-form-intro strong {
  color:
    var(--ml-info);

  font-size: 9.5px;
  font-weight: 850;
}



.ml-form-intro span {
  color:
    var(--ml-text-soft);

  font-size: 8.8px;
  font-weight: 700;

  line-height: 1.45;
}



.ml-form-section {
  margin-top: 16px;

  padding-top: 14px;

  border-top:
    1px solid
    var(--ml-border);
}



.ml-form-section:first-of-type {
  margin-top: 0;

  padding-top: 0;

  border-top: 0;
}



.ml-form-section-head {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  margin-bottom: 10px;
}



.ml-form-section-number,
.ml-form-section-icon {
  width: 26px;
  height: 26px;

  flex: 0 0
    26px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 8px;

  background:
    var(--ml-soft);

  color:
    var(--ml-text);

  font-size: 9px;
  font-weight: 900;
}



.ml-form-section-icon svg {
  width: 12px;
  height: 12px;
}



.ml-form-section-head > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}



.ml-form-section-head
> div:last-child
> strong {
  color:
    var(--ml-text);

  font-size: 10.5px;
  font-weight: 850;
}



.ml-form-section-head
> div:last-child
> span {
  color:
    var(--ml-muted);

  font-size: 8.5px;
  font-weight: 700;

  line-height: 1.35;
}



.ml-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px
    13px;
}



.ml-form-grid label {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 5px;
}



.ml-form-grid label.is-wide {
  grid-column:
    1 / -1;
}



.ml-form-grid label > span,
.ml-confirm-field > span {
  color:
    var(--ml-text);

  font-size: 9.8px;
  font-weight: 850;
}



.ml-form-grid label > small,
.ml-confirm-field > small {
  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 680;

  line-height: 1.4;
}



.ml-form-grid input,
.ml-form-grid select,
.ml-confirm-field input {
  width: 100%;
  min-width: 0;

  min-height: 38px;

  padding:
    0 10px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-sm);

  outline: none;

  background:
    var(--ml-soft);

  color:
    var(--ml-text);

  font-family: inherit;
  font-size: 10.2px;
  font-weight: 760;

  transition:
    border-color
      var(--ml-transition),
    background-color
      var(--ml-transition),
    box-shadow
      var(--ml-transition);
}



.ml-form-grid input:hover,
.ml-form-grid select:hover,
.ml-confirm-field input:hover {
  border-color:
    var(--ml-border-strong);
}



.ml-form-grid input:focus,
.ml-form-grid select:focus,
.ml-confirm-field input:focus {
  background:
    var(--ml-surface);

  border-color:
    var(--ml-border-strong);

  box-shadow:
    0 0 0 3px
    rgba(
      127,
      127,
      127,
      0.08
    );
}



.ml-product-search {
  min-height: 40px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    0 10px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-soft);

  transition:
    border-color
      var(--ml-transition),
    box-shadow
      var(--ml-transition),
    background-color
      var(--ml-transition);
}



.ml-product-search:focus-within {
  border-color:
    var(--ml-border-strong);

  background:
    var(--ml-surface);

  box-shadow:
    0 0 0 3px
    rgba(
      127,
      127,
      127,
      0.08
    );
}



.ml-product-search > svg {
  width: 14px;
  height: 14px;

  flex: 0 0
    14px;

  color:
    var(--ml-muted);
}



.ml-product-search input {
  min-width: 0;
  min-height: auto;

  flex: 1;

  padding: 0;

  border: 0;

  background:
    transparent;

  box-shadow: none;

  font-size: 10.2px;
  font-weight: 750;
}



.ml-product-search input:focus {
  box-shadow: none;

  background:
    transparent;
}



.ml-product-search button {
  width: 26px;
  height: 26px;

  flex: 0 0
    26px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 7px;

  background:
    transparent;

  color:
    var(--ml-muted);

  cursor: pointer;
}



.ml-product-search button:hover {
  color:
    var(--ml-text);

  background:
    var(--ml-hover);
}



.ml-product-search button svg {
  width: 12px;
  height: 12px;
}



.ml-product-results {
  max-height: 290px;

  display: grid;

  gap: 5px;

  margin-top: 7px;

  overflow-y: auto;

  overflow-x: hidden;

  scrollbar-width: thin;

  scrollbar-color:
    var(--ml-border-strong)
    transparent;
}



.ml-product-results > button {
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    80px
    70px
    110px;

  align-items: center;

  gap: 9px;

  padding:
    9px
    10px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-surface);

  color:
    var(--ml-text);

  text-align: left;

  cursor: pointer;

  transition:
    transform
      var(--ml-transition),
    background-color
      var(--ml-transition),
    border-color
      var(--ml-transition),
    box-shadow
      var(--ml-transition);
}



.ml-product-results > button:hover {
  transform:
    translateY(-1px);

  background:
    var(--ml-hover);

  border-color:
    var(--ml-border-strong);

  box-shadow:
    var(--ml-shadow);
}



.ml-product-result-main {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}



.ml-product-result-icon {
  width: 30px;
  height: 30px;

  flex: 0 0
    30px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 8px;

  background:
    var(--ml-soft);

  color:
    var(--ml-muted);
}



.ml-product-result-icon svg {
  width: 12px;
  height: 12px;
}



.ml-product-result-main > div {
  min-width: 0;
}



.ml-product-result-main strong {
  display: block;

  overflow: hidden;

  color:
    var(--ml-text);

  font-size: 9.8px;
  font-weight: 850;

  white-space: nowrap;

  text-overflow: ellipsis;
}



.ml-product-result-main span,
.ml-product-result-stock span {
  display: block;

  margin-top: 2px;

  color:
    var(--ml-muted);

  font-size: 7.8px;
  font-weight: 700;
}



.ml-product-result-stock strong {
  display: block;

  margin-top: 2px;

  color:
    var(--ml-text);

  font-size: 10px;
  font-weight: 880;
}



.ml-product-result-price {
  color:
    var(--ml-text);

  text-align: right;

  font-size: 10px;
  font-weight: 900;

  white-space: nowrap;
}



.ml-product-results-empty {
  min-height: 110px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 3px;

  margin-top: 7px;

  padding: 14px;

  border:
    1px dashed
    var(--ml-border-strong);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-soft);

  text-align: center;
}



.ml-product-results-empty-icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  margin-bottom: 4px;

  border:
    1px solid
    var(--ml-border);

  border-radius: 8px;

  background:
    var(--ml-surface);

  color:
    var(--ml-muted);
}



.ml-product-results-empty-icon svg {
  width: 13px;
  height: 13px;
}



.ml-product-results-empty strong {
  color:
    var(--ml-text);

  font-size: 9.5px;
  font-weight: 820;
}



.ml-product-results-empty span {
  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 690;
}



.ml-selected-product {
  padding: 11px;

  border:
    1px solid
    var(--ml-info-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-info-soft);
}



.ml-selected-product-head {
  display: flex;
  align-items: center;

  gap: 9px;
}



.ml-selected-product-icon {
  width: 34px;
  height: 34px;

  flex: 0 0
    34px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 9px;

  background:
    var(--ml-surface);

  color:
    var(--ml-info);
}



.ml-selected-product-icon svg {
  width: 14px;
  height: 14px;
}



.ml-selected-product-copy {
  min-width: 0;

  flex: 1;
}



.ml-selected-product-copy > span {
  display: block;

  color:
    var(--ml-info);

  font-size: 7.8px;
  font-weight: 820;

  text-transform: uppercase;
}



.ml-selected-product-copy > strong {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color:
    var(--ml-text);

  font-size: 10.5px;
  font-weight: 860;

  white-space: nowrap;

  text-overflow: ellipsis;
}



.ml-selected-product-copy > small {
  display: block;

  margin-top: 2px;

  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 700;
}



.ml-selected-product-head > button {
  width: 28px;
  height: 28px;

  flex: 0 0
    28px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    var(--ml-border);

  border-radius: 8px;

  background:
    var(--ml-surface);

  color:
    var(--ml-muted);

  cursor: pointer;
}



.ml-selected-product-head > button:hover {
  color:
    var(--ml-text);

  background:
    var(--ml-hover);
}



.ml-selected-product-head > button svg {
  width: 12px;
  height: 12px;
}



.ml-selected-product-grid,
.ml-full-modal-summary,
.ml-detail-summary {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 7px;

  margin-top: 10px;
}



.ml-selected-product-grid > div,
.ml-full-modal-summary > div,
.ml-detail-summary > div {
  min-width: 0;

  padding: 9px;

  border:
    1px solid
    var(--ml-border);

  border-radius: 8px;

  background:
    var(--ml-surface);
}



.ml-selected-product-grid span,
.ml-full-modal-summary span,
.ml-detail-summary span {
  display: block;

  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 750;
}



.ml-selected-product-grid strong,
.ml-full-modal-summary strong,
.ml-detail-summary strong {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color:
    var(--ml-text);

  font-size: 11.5px;
  font-weight: 900;

  white-space: nowrap;

  text-overflow: ellipsis;
}



.ml-selected-product-grid small,
.ml-full-modal-summary small {
  display: block;

  margin-top: 3px;

  color:
    var(--ml-muted);

  font-size: 7.5px;
  font-weight: 680;
}



.ml-sale-total {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    8px
    10px;

  border:
    1px solid
    var(--ml-success-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-success-soft);
}



.ml-sale-total > span {
  color:
    var(--ml-success);

  font-size: 8.5px;
  font-weight: 800;
}



.ml-sale-total > strong {
  display: block;

  margin-top: 4px;

  color:
    var(--ml-success);

  font-size: 16px;
  font-weight: 900;

  letter-spacing:
    -0.025em;
}



.ml-sale-total > small {
  display: block;

  margin-top: 3px;

  color:
    var(--ml-text-soft);

  font-size: 7.5px;
  font-weight: 680;
}



.ml-form-error {
  margin-top: 12px;

  padding:
    10px
    11px;

  border:
    1px solid
    var(--ml-danger-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-danger-soft);

  color:
    var(--ml-danger);

  font-size: 9px;
  font-weight: 760;

  line-height: 1.4;
}



.ml-form-error[hidden],
.ml-page [hidden] {
  display:
    none !important;
}



.ml-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  margin-top: 16px;

  padding-top: 14px;

  border-top:
    1px solid
    var(--ml-border);
}



.ml-confirm {
  padding: 25px;

  text-align: center;
}



.ml-confirm-icon {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  margin:
    0 auto
    10px;

  border:
    1px solid
    var(--ml-danger-border);

  border-radius: 15px;

  background:
    var(--ml-danger-soft);

  color:
    var(--ml-danger);
}



.ml-confirm-icon svg {
  width: 21px;
  height: 21px;
}



.ml-confirm-kicker {
  display: block;

  margin-bottom: 4px;

  color:
    var(--ml-danger);

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}



.ml-confirm h2 {
  margin: 0;

  color:
    var(--ml-text);

  font-size: 19px;
  font-weight: 900;
}



.ml-confirm > p {
  max-width: 390px;

  margin:
    7px auto
    13px;

  color:
    var(--ml-text-soft);

  font-size: 9.5px;
  font-weight: 710;

  line-height: 1.5;
}



.ml-confirm-sale {
  display: flex;
  flex-direction: column;

  gap: 3px;

  margin-bottom: 14px;

  padding: 10px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-soft);
}



.ml-confirm-sale span {
  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 750;
}



.ml-confirm-sale strong {
  color:
    var(--ml-text);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size: 10px;
  font-weight: 850;
}



.ml-confirm form {
  padding: 0;

  text-align: left;
}



.ml-confirm-field {
  display: flex;
  flex-direction: column;

  gap: 5px;
}



.ml-confirm
.ml-modal-footer {
  justify-content: center;
}.ml-detail-content {
  padding: 17px;
}



.ml-detail-summary {
  margin:
    0 0
    15px;
}



.ml-detail-section {
  margin-top: 16px;
}



.ml-detail-section:first-child {
  margin-top: 0;
}



.ml-detail-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 9px;
}



.ml-detail-section-head > div {
  min-width: 0;
}



.ml-detail-section-head span {
  display: block;

  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 850;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}



.ml-detail-section-head h3 {
  margin:
    3px 0 0;

  color:
    var(--ml-text);

  font-size: 11px;
  font-weight: 900;
}



.ml-detail-section-head small {
  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 700;
}



.ml-detail-items {
  display: grid;

  gap: 6px;
}



.ml-detail-items article {
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(
      0,
      1.4fr
    )
    90px
    120px
    130px;

  align-items: center;

  gap: 9px;

  padding:
    10px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-soft);

  transition:
    background-color
      var(--ml-transition),
    border-color
      var(--ml-transition),
    transform
      var(--ml-transition);
}



.ml-detail-items article:hover {
  transform:
    translateY(-1px);

  background:
    var(--ml-hover);

  border-color:
    var(--ml-border-strong);
}



.ml-detail-product {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}



.ml-detail-product-icon {
  width: 31px;
  height: 31px;

  flex: 0 0
    31px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 8px;

  background:
    var(--ml-surface);

  color:
    var(--ml-muted);
}



.ml-detail-product-icon svg {
  width: 13px;
  height: 13px;
}



.ml-detail-product > div {
  min-width: 0;
}



.ml-detail-product strong {
  display: block;

  overflow: hidden;

  color:
    var(--ml-text);

  font-size: 10px;
  font-weight: 850;

  white-space: nowrap;

  text-overflow: ellipsis;
}



.ml-detail-product span {
  display: block;

  margin-top: 2px;

  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 700;
}



.ml-detail-item-value {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}



.ml-detail-item-value span {
  color:
    var(--ml-muted);

  font-size: 7.8px;
  font-weight: 730;
}



.ml-detail-item-value strong {
  color:
    var(--ml-text);

  font-size: 10px;
  font-weight: 850;

  font-variant-numeric:
    tabular-nums;
}



.ml-detail-item-value.is-total {
  text-align: right;
}



.ml-detail-item-value.is-total strong {
  font-size: 10.5px;
  font-weight: 900;
}



.ml-detail-note {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  padding: 10px;

  border:
    1px solid
    var(--ml-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-soft);
}



.ml-detail-note > svg {
  width: 14px;
  height: 14px;

  flex: 0 0
    14px;

  margin-top: 1px;

  color:
    var(--ml-muted);
}



.ml-detail-note p {
  margin: 0;

  color:
    var(--ml-text-soft);

  font-size: 9.5px;
  font-weight: 710;

  line-height: 1.5;
}



.ml-cancelled-info {
  padding: 11px;

  border:
    1px solid
    var(--ml-danger-border);

  border-radius:
    var(--ml-radius-sm);

  background:
    var(--ml-danger-soft);
}



.ml-cancelled-content {
  display: flex;
  align-items: flex-start;

  gap: 8px;
}



.ml-cancelled-content > svg {
  width: 15px;
  height: 15px;

  flex: 0 0
    15px;

  color:
    var(--ml-danger);
}



.ml-cancelled-content > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}



.ml-cancelled-content strong {
  color:
    var(--ml-danger);

  font-size: 9.5px;
  font-weight: 820;

  line-height: 1.4;
}



.ml-cancelled-content span {
  color:
    var(--ml-text-soft);

  font-size: 8px;
  font-weight: 700;
}



.ml-detail-loading {
  min-height: 220px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 20px;
}



.ml-detail-loading-icon {
  width: 38px;
  height: 38px;

  flex: 0 0
    38px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 10px;

  background:
    var(--ml-soft);

  color:
    var(--ml-text-soft);
}



.ml-detail-loading-icon svg {
  width: 16px;
  height: 16px;

  animation:
    mlSpin
    800ms
    linear
    infinite;
}



.ml-detail-loading > div:last-child {
  display: flex;
  flex-direction: column;

  gap: 3px;
}



.ml-detail-loading strong {
  color:
    var(--ml-text);

  font-size: 10.5px;
  font-weight: 850;
}



.ml-detail-loading span {
  color:
    var(--ml-muted);

  font-size: 8.5px;
  font-weight: 700;
}



.ml-state {
  min-height: 360px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  padding: 24px;
}



.ml-state-visual {
  position: relative;

  width: 48px;
  height: 48px;

  flex: 0 0
    48px;
}



.ml-state-icon {
  position: relative;

  z-index: 2;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ml-border);

  border-radius: 13px;

  background:
    var(--ml-surface);

  color:
    var(--ml-text-soft);

  box-shadow:
    var(--ml-shadow);
}



.ml-state-icon svg {
  width: 19px;
  height: 19px;
}



.ml-state-ring {
  position: absolute;

  inset: -5px;

  border:
    1px solid
    var(--ml-border);

  border-radius: 16px;

  animation:
    mlStatePulse
    1.5s
    ease-in-out
    infinite;
}



.ml-state-copy {
  display: flex;
  flex-direction: column;

  gap: 3px;
}



.ml-state-kicker {
  color:
    var(--ml-muted);

  font-size: 8px;
  font-weight: 850;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}



.ml-state-copy > strong {
  color:
    var(--ml-text);

  font-size: 12px;
  font-weight: 850;
}



.ml-state-copy > span:last-child {
  color:
    var(--ml-text-soft);

  font-size: 9px;
  font-weight: 700;
}



body.ml-modal-open {
  overflow: hidden;
}



html[data-theme="dark"]
.ml-input,
html[data-theme="dark"]
.ml-select,
html[data-theme="dark"]
.ml-form-grid input,
html[data-theme="dark"]
.ml-form-grid select,
html[data-theme="dark"]
.ml-confirm-field input,
html[data-theme="dark"]
.ml-search input,
html[data-theme="dark"]
.ml-product-search input,
html[data-theme="dark"]
.ml-pagination select {
  color-scheme: dark;
}



html[data-theme="light"]
.ml-input,
html[data-theme="light"]
.ml-select,
html[data-theme="light"]
.ml-form-grid input,
html[data-theme="light"]
.ml-form-grid select,
html[data-theme="light"]
.ml-confirm-field input,
html[data-theme="light"]
.ml-search input,
html[data-theme="light"]
.ml-product-search input,
html[data-theme="light"]
.ml-pagination select {
  color-scheme: light;
}



.ml-enter {
  opacity: 0;

  transform:
    translateY(7px)
    scale(0.997);

  animation:
    mlEnter
    420ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    var(
      --ml-enter-delay,
      0ms
    )
    forwards;
}



.ml-kpi {
  animation-delay:
    calc(
      var(
        --ml-index,
        0
      )
      *
      35ms
    );
}



.ml-tabs button {
  animation-delay:
    calc(
      var(
        --ml-tab-index,
        0
      )
      *
      28ms
    );
}



.ml-recent-item {
  animation-delay:
    calc(
      var(
        --ml-item-index,
        0
      )
      *
      22ms
    );
}



.ml-table tbody tr {
  animation:
    mlRowEnter
    300ms
    ease
    both;

  animation-delay:
    calc(
      var(
        --ml-row-index,
        0
      )
      *
      18ms
    );
}



.ml-product-results > button {
  animation:
    mlResultEnter
    260ms
    ease
    both;

  animation-delay:
    calc(
      var(
        --ml-result-index,
        0
      )
      *
      18ms
    );
}



.ml-detail-items article {
  animation:
    mlResultEnter
    260ms
    ease
    both;

  animation-delay:
    calc(
      var(
        --ml-detail-index,
        0
      )
      *
      20ms
    );
}



@keyframes mlEnter {
  from {
    opacity: 0;

    transform:
      translateY(7px)
      scale(0.997);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}



@keyframes mlRowEnter {
  from {
    opacity: 0;

    transform:
      translateY(4px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}



@keyframes mlResultEnter {
  from {
    opacity: 0;

    transform:
      translateY(5px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}



@keyframes mlBackdropEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



@keyframes mlModalEnter {
  from {
    opacity: 0;

    transform:
      translateY(12px)
      scale(0.975);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}



@keyframes mlSpin {
  to {
    transform:
      rotate(360deg);
  }
}



@keyframes mlStatePulse {
  0%,
  100% {
    opacity: 0.35;

    transform:
      scale(0.96);
  }

  50% {
    opacity: 0.8;

    transform:
      scale(1.05);
  }
}



@media (
  max-width: 1380px
) {
  .ml-kpis {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }



  .ml-tabs {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}



@media (
  max-width: 1180px
) {
  .ml-dashboard {
    grid-template-columns:
      1fr;
  }



  .ml-dashboard-side {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }



  .ml-toolbar-sales {
    flex-direction: column;
    align-items: stretch;
  }



  .ml-toolbar-filters {
    width: 100%;
  }



  .ml-filter-field {
    flex: 1;

    min-width: 145px;
  }
}



@media (
  max-width: 980px
) {
  .ml-heading {
    flex-direction: column;
  }



  .ml-heading-actions {
    width: 100%;

    justify-content: flex-start;
  }



  .ml-section-heading {
    align-items: flex-start;

    flex-direction: column;
  }



  .ml-section-badge {
    align-self: flex-start;
  }



  .ml-data-card-head {
    align-items: flex-start;

    flex-direction: column;
  }



  .ml-data-card-head > small {
    max-width: none;

    text-align: left;
  }



  .ml-toolbar {
    align-items: stretch;

    flex-direction: column;
  }



  .ml-search {
    min-width: 100%;
  }



  .ml-table-wrap {
    overflow-x: auto;
  }



  .ml-detail-items article {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      72px
      100px
      110px;
  }
}



@media (
  max-width: 760px
) {
  .ml-heading h1 {
    font-size: 25px;
  }



  .ml-heading p {
    font-size: 10.5px;
  }



  .ml-heading-actions {
    display: grid;

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }



  .ml-heading-actions
  .ml-button {
    width: 100%;
  }



  .ml-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }



  .ml-navigation-head {
    align-items: flex-start;

    flex-direction: column;

    gap: 5px;
  }



  .ml-tabs {
    grid-template-columns:
      1fr;
  }



  .ml-tab-copy small {
    white-space: normal;
  }



  .ml-dashboard-side {
    grid-template-columns:
      1fr;
  }



  .ml-toolbar-filters {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }



  .ml-filter-field {
    min-width: 0;
  }



  .ml-toolbar-filters
  .ml-icon-button {
    align-self: end;
  }



  .ml-form-grid {
    grid-template-columns:
      1fr;
  }



  .ml-form-grid
  label.is-wide {
    grid-column: auto;
  }



  .ml-selected-product-grid,
  .ml-full-modal-summary,
  .ml-detail-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }



  .ml-product-results > button {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      72px
      62px;
  }



  .ml-product-result-price {
    grid-column:
      1 / -1;

    padding-top: 5px;

    border-top:
      1px solid
      var(--ml-border);

    text-align: left;
  }



  .ml-detail-items article {
    grid-template-columns:
      1fr
      1fr;

    gap: 8px;
  }



  .ml-detail-product {
    grid-column:
      1 / -1;

    padding-bottom: 7px;

    border-bottom:
      1px solid
      var(--ml-border);
  }



  .ml-detail-item-value.is-total {
    text-align: left;
  }



  .ml-modal-backdrop {
    align-items: flex-start;

    padding: 10px;
  }



  .ml-modal {
    max-height:
      calc(
        100dvh - 20px
      );

    border-radius: 14px;
  }



  .ml-modal-header {
    padding: 14px;
  }



  .ml-modal form,
  .ml-detail-content {
    padding: 14px;
  }



  .ml-pagination {
    align-items: stretch;

    flex-direction: column;
  }



  .ml-pagination-controls {
    justify-content: space-between;
  }
}



@media (
  max-width: 560px
) {
  .ml-heading-actions {
    grid-template-columns:
      1fr;
  }



  .ml-kpis {
    grid-template-columns:
      1fr;
  }



  .ml-kpi {
    min-height: 98px;
  }



  .ml-kpi-value {
    font-size: 18px;
  }



  .ml-content-head {
    align-items: flex-start;
  }



  .ml-content-body {
    padding: 9px;
  }



  .ml-panel {
    padding: 11px;
  }



  .ml-toolbar-filters {
    grid-template-columns:
      1fr;
  }



  .ml-toolbar-filters
  .ml-icon-button {
    width: 100%;
  }



  .ml-selected-product-grid,
  .ml-full-modal-summary,
  .ml-detail-summary {
    grid-template-columns:
      1fr;
  }



  .ml-product-results > button {
    grid-template-columns:
      1fr;
  }



  .ml-product-result-stock,
  .ml-product-result-price {
    text-align: left;
  }



  .ml-detail-items article {
    grid-template-columns:
      1fr;
  }



  .ml-detail-product {
    grid-column: auto;
  }



  .ml-detail-item-value {
    display: grid;

    grid-template-columns:
      90px
      minmax(
        0,
        1fr
      );

    align-items: center;
  }



  .ml-detail-item-value.is-total {
    text-align: left;
  }



  .ml-modal-heading-icon {
    display: none;
  }



  .ml-modal-header h2 {
    font-size: 17px;
  }



  .ml-modal-footer {
    flex-direction:
      column-reverse;
  }



  .ml-modal-footer
  .ml-button {
    width: 100%;
  }



  .ml-confirm {
    padding: 19px;
  }



  .ml-pagination-controls {
    flex-wrap: wrap;
  }



  .ml-page-size {
    width: 100%;

    justify-content: space-between;
  }



  .ml-pagination-page {
    flex: 1;
  }
}



@media (
  max-width: 390px
) {
  .ml-heading h1 {
    font-size: 23px;
  }



  .ml-heading-context {
    gap: 5px;
  }



  .ml-heading-divider {
    width: 12px;
  }



  .ml-tab-copy small {
    display: none;
  }



  .ml-tabs button {
    min-height: 52px;
  }



  .ml-full-summary {
    grid-template-columns:
      1fr;
  }



  .ml-recent-item {
    grid-template-columns:
      8px
      44px
      minmax(
        0,
        1fr
      )
      86px;
  }



  .ml-recent-origin {
    display: none;
  }



  .ml-recent-amount {
    font-size: 9.5px;
  }
}



@media (
  hover: none
) {
  .ml-kpi:hover,
  .ml-panel:hover,
  .ml-card:hover,
  .ml-tabs button:hover,
  .ml-button:hover:not(
    :disabled
  ),
  .ml-icon-button:hover,
  .ml-row-actions button:hover,
  .ml-table-action:hover,
  .ml-product-results > button:hover,
  .ml-detail-items article:hover {
    transform: none;
  }
}



@media (
  prefers-reduced-motion:
  reduce
) {
  .ml-enter,
  .ml-table tbody tr,
  .ml-product-results > button,
  .ml-detail-items article,
  .ml-modal,
  .ml-modal-backdrop,
  .ml-state-ring,
  .ml-state-icon svg,
  .ml-button.is-loading svg,
  .ml-detail-loading svg {
    animation:
      none !important;
  }



  .ml-button,
  .ml-kpi,
  .ml-panel,
  .ml-card,
  .ml-tabs button,
  .ml-icon-button,
  .ml-link-button,
  .ml-row-actions button,
  .ml-table-action,
  .ml-product-results > button,
  .ml-detail-items article,
  .ml-modal-header > button {
    transition:
      none !important;
  }



  .ml-enter {
    opacity: 1;

    transform: none;
  }
}