.topbar {
  background: #45a677;
  border-bottom: 0;
}
.topbar .brand { background: #3a9a6b }
.rail a[aria-current="page"] {
  background: #17191a;
  box-shadow: inset 4px 0 #45a677;
}
.rail a[aria-current="page"] img { opacity: 1 }
.top-actions .panel-tool {
  width: 48px;
  height: var(--header);
  padding: 0;
  display: grid;
  place-items: center;
}
.panel-tool img { width: 25px; height: 25px; filter: invert(1); opacity: .8 }
.panel-tool:hover img, .panel-tool:focus-visible img { opacity: 1 }
.commerce-dashboard {
  position: fixed;
  inset: var(--header) 0 0 var(--rail);
  min-height: 0;
  margin: 0;
  padding: 20px;
  overflow: auto;
  scrollbar-gutter: stable;
}
.dash-tools { height: 48px }
.dash-tools > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 151px;
  height: 38px;
  margin-left: 5px;
  border: 0;
  border-radius: 9px;
  background: #2f8b5d;
  box-shadow: 0 0 0 5px #e7eeea, 0 2px 8px #325f4626;
  color: white;
  font-weight: 600;
}
.dash-tools > a img { width: 16px; height: 16px; filter: invert(1) }
.dash-period > button img { width: 14px; height: 14px; opacity: .45 }
.dash-period > button { justify-content: space-between; min-width: 170px }
.dash-indicator { padding: 10px 20px }
.dash-indicator > header {
  display: flex;
  align-items: center;
  margin-inline: -16px; padding: 10px 0 13px;
  border-bottom: 1px solid #eee;
}
.dash-indicator h2 {
  width: 66.6667%;
  border: 0;
  padding: 0 16px;
  line-height: 22.5px;
  font-weight: 500;
}
.dash-indicator:has(.dash-accounts) h2 { width: 50% }
.dash-accounts { width: 50%; margin: 0; padding: 0 16px }
.dash-choices { left: auto; min-width: 160px; padding: 6px 0 }
.dash-fields { padding: 0 }
.dash-field { height: 76px; border: 0 }
.dash-field img { width: 35px; height: 50px; object-fit: contain }
.dash-lower { padding-top: 0; grid-template-columns: minmax(0,2.09fr) minmax(0,1fr) }
.dash-sales, .dash-figures { padding: 10px 20px 20px }
.dash-sales h2 { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0; border: 0; margin-bottom: 10px }
.dash-sales h2 span { background: #eaf5ef; color: #2f8b5d; border-radius: 8px; width: 32px; height: 32px; display: grid; place-items: center }
.dash-sales h2 img { width: 18px; height: 18px; filter: invert(44%) sepia(21%) saturate(1157%) hue-rotate(96deg) }
.dash-sales th { background: #2f8b5d; padding: 12px 20px 10px; font-weight: 600 }
.dash-sales table { min-width: 1200px }
.dash-no-sales { display: grid; place-content: center; justify-items: center; gap: 8px; height: 165px; color: #8c8c8c; font-size: 13px }
.dash-no-sales img { width: 64px }
.dash-figures h2 { font-weight: 500; padding-left: 0 }
.dash-figures [data-chart] { height: 400px; max-height: none; overflow: auto }
.dash-pie { display: flex; align-items: center; gap: 10px; min-height: 100%; margin: 0; position: relative }
.dash-pie figcaption { position: absolute; top: 0; right: 0; color: #777; font-size: 12px }
.dash-pie svg { width: 65%; flex: 1; min-width: 0 }
.dash-pie ul { max-width: 40%; padding: 0; list-style: none; margin: 0 }
.dash-pie li { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 5px 0; overflow-wrap: anywhere }
.dash-pie li i { flex: none; width: 9px; height: 9px; border-radius: 50% }
@media (max-width: 950px) { .dash-lower { grid-template-columns: 1fr } }
@media (max-width: 650px) {
  .commerce-dashboard { padding: 12px }
  .dash-tools { height: auto; padding: 5px 0 }
  .top-actions .panel-tool { width: 30px }
  .dash-figures [data-chart] { height: 240px }
}