/* Device frames and product screens drawn in HTML/CSS, so they stay sharp at every size.
   Screen content is sized in em from a container-relative base, so a mockup scales as one picture. */

.phone {
  --pw: 270px;
  position: relative;
  flex: none;
  width: var(--pw);
  aspect-ratio: 9 / 19;
  padding: 9px;
  border-radius: 42px;
  background: #0d141b;
  box-shadow:
    inset 0 0 0 1px #2c3946,
    0 40px 80px -24px rgb(15 27 45 / 45%),
    0 16px 32px -16px rgb(15 27 45 / 30%);
  container-type: inline-size;
}
.phone::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: calc(9px + 3cqw);
  left: 50%;
  width: 26cqw;
  height: 7cqw;
  border-radius: 99px;
  background: #0d141b;
  transform: translateX(-50%);
}
.screen {
  position: absolute;
  inset: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 34px;
  font-family: var(--body);
  font-size: 4.3cqw;
  line-height: 1.35;
  letter-spacing: 0;
  color: #0f1b2d;
  background: #eef2f8;
  transition: opacity 0.45s ease;
}
.screen.dark {
  color: #e8eefb;
  background: #0f1b2d;
}
.phone [data-panel] {
  opacity: 0;
  pointer-events: none;
}
.phone [data-panel].is-active {
  opacity: 1;
  pointer-events: auto;
}
.sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.15em 1.9em 0.5em;
  font-size: 0.74em;
  font-weight: 700;
}
.sb i {
  display: inline-flex;
  gap: 0.35em;
  align-items: flex-end;
  font-style: normal;
}
.sb i::before {
  content: "";
  width: 1.4em;
  height: 0.8em;
  background: linear-gradient(90deg, currentColor 0 18%, transparent 18% 27%, currentColor 27% 45%, transparent 45% 54%, currentColor 54% 72%, transparent 72% 81%, currentColor 81%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.sb i::after {
  content: "";
  width: 1.6em;
  height: 0.8em;
  border: 0.12em solid currentColor;
  border-radius: 0.25em;
  background: linear-gradient(90deg, currentColor 70%, transparent 70%) content-box;
  padding: 0.1em;
  box-sizing: border-box;
}
.sb i.off::before {
  opacity: 0.35;
}
.sc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 0.6em 1.3em 1.3em;
  min-height: 0;
}
.sc .t {
  display: block;
  margin: 0;
  font-family: var(--heading);
  font-size: 1.32em;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sc small {
  display: block;
  font-size: 0.78em;
  color: #6b7a90;
}
.dark .sc small {
  color: #93a3c0;
}
.card {
  padding: 0.95em 1em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 27 45 / 6%);
}
.dark .card {
  background: #18273d;
  box-shadow: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28em 0.7em;
  border-radius: 99px;
  font-size: 0.72em;
  font-weight: 700;
  white-space: nowrap;
  background: #e6ecf6;
  color: #33425a;
}
.chip.ok {
  background: #dcf5e8;
  color: #0b7a47;
}
.chip.warn {
  background: #fdf0d9;
  color: #9a5a00;
}
.chip.info {
  background: #e1eaff;
  color: #1f4fd6;
}
.chip.bad {
  background: #fde4e2;
  color: #b42318;
}
.chip.start {
  align-self: flex-start;
}
.chip.dot::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: currentColor;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9em;
  padding: 0 1em;
  border-radius: 0.85em;
  font-weight: 700;
  font-size: 0.92em;
  background: #2457e6;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgb(36 87 230 / 70%);
}
.btn.light {
  background: #fff;
  color: #0f1b2d;
  box-shadow: none;
  border: 1px solid #d8e0ec;
}
.btn.ghost {
  background: transparent;
  color: inherit;
  box-shadow: none;
  border: 1px solid #3a4c68;
}
.btn.good {
  background: #8fb4ff;
  color: #0f1b2d;
  box-shadow: none;
}
.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
}
.btn-row.wide-right {
  grid-template-columns: 0.75fr 1.25fr;
}
.push {
  margin-top: auto;
}

/* Driver: home */
.hello {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.avatar {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: #2457e6;
  color: #fff;
  font-weight: 800;
  font-size: 0.85em;
}
.vehicle-card {
  padding: 0;
  overflow: hidden;
}
.vehicle-card .art {
  display: grid;
  place-items: center;
  height: 7.4em;
  background: linear-gradient(160deg, #e7eefb, #d3def3);
}
.vehicle-card .art img {
  width: 82%;
}
.vehicle-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85em 1em;
}
.vehicle-card b {
  display: block;
  font-family: var(--heading);
  font-size: 1.15em;
}
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
}
.tiles .card {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: 0.86em;
  font-weight: 700;
}
.tiles .card::before {
  content: "";
  width: 1.9em;
  height: 1.9em;
  margin-bottom: 0.3em;
  border-radius: 0.6em;
  background: radial-gradient(circle, #2457e6 0 28%, #e1eaff 30%);
}
.tiles .card.alert-tile::before {
  background: radial-gradient(circle, #d92d20 0 28%, #fde4e2 30%);
}
.tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.7em 1em 1.1em;
  background: #fff;
  border-top: 1px solid #e1e7f0;
  font-size: 0.68em;
  font-weight: 700;
  color: #8190a7;
  text-align: center;
}
.tabbar span::before {
  content: "";
  display: block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 auto 0.3em;
  border-radius: 0.55em;
  background: #e6ecf6;
}
.tabbar .on {
  color: #2457e6;
}
.tabbar .on::before {
  background: #2457e6;
}

/* Driver: capture */
.cap-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 0.92em;
}
.progress {
  display: grid;
  grid-template-columns: repeat(var(--n, 8), 1fr);
  gap: 0.3em;
}
.progress i {
  height: 0.28em;
  border-radius: 99px;
  background: #33435d;
}
.progress i.done {
  background: #8fb4ff;
}
.viewfinder {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 1.1em;
  background:
    linear-gradient(180deg, transparent 58%, rgb(0 0 0 / 28%) 58%),
    linear-gradient(180deg, #5d7a8f, #9eb3bf 58%, #6f7f87 58%, #4f5c64);
}
.viewfinder img {
  width: 78%;
  margin-top: 12%;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 25%));
}
.viewfinder.side img {
  width: 92%;
  margin-top: 26%;
}
.viewfinder::before {
  content: "";
  position: absolute;
  inset: 9% 7%;
  background:
    linear-gradient(#fff, #fff) left top / 1.4em 0.18em,
    linear-gradient(#fff, #fff) left top / 0.18em 1.4em,
    linear-gradient(#fff, #fff) right top / 1.4em 0.18em,
    linear-gradient(#fff, #fff) right top / 0.18em 1.4em,
    linear-gradient(#fff, #fff) left bottom / 1.4em 0.18em,
    linear-gradient(#fff, #fff) left bottom / 0.18em 1.4em,
    linear-gradient(#fff, #fff) right bottom / 1.4em 0.18em,
    linear-gradient(#fff, #fff) right bottom / 0.18em 1.4em;
  background-repeat: no-repeat;
  opacity: 0.9;
}
.stamp {
  position: absolute;
  left: 0.7em;
  bottom: 0.7em;
  padding: 0.5em 0.65em;
  border-radius: 0.6em;
  background: rgb(10 16 26 / 82%);
  color: #fff;
  font-size: 0.68em;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.rec {
  position: absolute;
  top: 0.8em;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.75em;
  border-radius: 99px;
  background: rgb(10 16 26 / 75%);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rec::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #f04438;
  animation: blink 1.4s infinite;
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
.shutter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.6em;
}
.shutter b {
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  border: 0.25em solid #fff;
  display: grid;
  place-items: center;
}
.shutter b::before {
  content: "";
  width: 1.3em;
  height: 1.3em;
  border-radius: 0.3em;
  background: #f04438;
}
.shutter span {
  font-size: 0.78em;
  color: #93a3c0;
  width: 5.5em;
}
.shutter span:last-child {
  text-align: right;
}

/* Driver: odometer */
.odo-shot {
  height: 9.5em;
  border-radius: 1em;
  overflow: hidden;
  background: #1b252c url(/assets/inspect/van-dashboard.svg) center 75% / cover;
}
.odo-input {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35em;
  padding: 0.6em;
  border: 2px solid #2457e6;
  border-radius: 0.9em;
  background: #fff;
  font-family: var(--heading);
  font-size: 1.6em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.odo-input em {
  font-size: 0.5em;
  font-style: normal;
  color: #6b7a90;
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45em;
}
.keypad span {
  display: grid;
  place-items: center;
  height: 2.6em;
  border-radius: 0.7em;
  background: #fff;
  font-weight: 700;
}

/* Driver: summary */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em 0.8em;
}
.facts small + b,
.row-fact b {
  display: block;
  font-size: 0.95em;
}
.row-fact {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.banner {
  padding: 0.75em 0.9em;
  border-radius: 0.9em;
  background: #fdf0d9;
  color: #8a4d00;
  font-size: 0.78em;
  line-height: 1.5;
}

/* Driver: sync center */
.sync-status {
  display: flex;
  gap: 0.8em;
  align-items: center;
  color: #fff;
  background: linear-gradient(135deg, #2457e6, #1838a8);
}
.sync-status::before {
  content: "";
  flex: none;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  border: 0.28em solid rgb(255 255 255 / 30%);
  border-top-color: #fff;
  animation: spin 1.2s linear infinite;
}
.sync-status small {
  color: #c9d7ff !important;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.queue {
  display: grid;
  gap: 0.55em;
}
.queue .card {
  display: grid;
  gap: 0.45em;
}
.queue .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 0.9em;
}
.bar {
  height: 0.4em;
  border-radius: 99px;
  background: #e6ecf6;
  overflow: hidden;
}
.bar i {
  display: block;
  width: var(--v, 50%);
  height: 100%;
  border-radius: inherit;
  background: #2457e6;
}

/* Browser frame and manager web app */
.browser {
  overflow: hidden;
  border: 1px solid #d9dfe5;
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 40px 90px -30px rgb(15 27 45 / 35%),
    0 12px 30px -14px rgb(15 27 45 / 20%);
  container-type: inline-size;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  height: 4.6cqw;
  min-height: 24px;
  padding: 0 1.6cqw;
  background: #f1f4f7;
  border-bottom: 1px solid #e1e6eb;
}
.browser-bar i {
  width: 1.1cqw;
  min-width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d3dae1;
  box-shadow:
    1.9cqw 0 #d3dae1,
    3.8cqw 0 #d3dae1;
}
.browser-bar span {
  margin: 0 auto;
  padding: 0.45cqw 3cqw;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #e1e6eb;
  color: #6b7a90;
  font-size: max(1.25cqw, 8px);
  font-family: var(--body);
}
.app {
  position: relative;
  display: grid;
  grid-template-columns: 13.5em 1fr;
  aspect-ratio: 16 / 9.4;
  font-family: var(--body);
  font-size: 1.3cqw;
  line-height: 1.35;
  letter-spacing: 0;
  color: #0f1b2d;
  background: #eef2f8;
}
.side {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  padding: 1.5em 0.9em;
  background: #0f1b33;
  color: #b8c3d9;
  font-size: 0.92em;
}
.side b {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0.4em 1.2em;
  color: #fff;
  font-family: var(--heading);
  font-size: 1.1em;
}
.side b::before {
  content: "";
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.45em;
  background: linear-gradient(135deg, #3b82f6, #2457e6);
}
.side span {
  padding: 0.6em 0.75em;
  border-radius: 0.55em;
}
.side span.on {
  background: #2457e6;
  color: #fff;
  font-weight: 700;
}
.side span:last-child {
  margin-top: auto;
}
.main {
  position: relative;
  min-width: 0;
  padding: 1.6em 1.8em;
  overflow: hidden;
}
.app [data-panel] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.6em 1.8em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.app [data-panel].is-active {
  opacity: 1;
  pointer-events: auto;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1em;
}
.page-head .t {
  display: block;
  margin: 0;
  font-family: var(--heading);
  font-size: 1.55em;
  letter-spacing: -0.02em;
}
.page-head small,
.app small {
  display: block;
  color: #6b7a90;
  font-size: 0.82em;
}
.page-head .tools {
  display: flex;
  gap: 0.6em;
  align-items: center;
}
.search {
  width: 12em;
  padding: 0.65em 0.9em;
  border-radius: 0.7em;
  background: #fff;
  border: 1px solid #dde4ee;
  color: #95a3b8;
  font-size: 0.85em;
  white-space: nowrap;
}
.app .btn {
  min-height: 2.6em;
  font-size: 0.85em;
  border-radius: 0.7em;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75em;
}
.kpis div {
  padding: 0.85em 1em;
  border-radius: 0.85em;
  background: #fff;
}
.kpis b {
  display: block;
  font-family: var(--heading);
  font-size: 1.7em;
  font-variant-numeric: tabular-nums;
}
.kpis .blue {
  color: #2457e6;
}
.kpis .amber {
  color: #b45309;
}
.kpis .red {
  color: #c42b1c;
}
.cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85em;
}
.cols.wide-left {
  grid-template-columns: 1.55fr 1fr;
}
.panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  padding: 1em 1.1em;
  border-radius: 0.95em;
  background: #fff;
  overflow: hidden;
}
.panel > strong {
  font-family: var(--heading);
  font-size: 1em;
  margin-bottom: 0.35em;
}
.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0;
  border-top: 1px solid #eef1f6;
}
.list-row b {
  display: block;
  font-size: 0.95em;
}
.map {
  position: relative;
  flex: 1;
  min-height: 6em;
  border-radius: 0.7em;
  overflow: hidden;
  background: #e5ecef;
}
.map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.alert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: 0.95em 1.1em;
  border-radius: 0.95em;
  background: #fff;
  box-shadow: inset 0.28em 0 0 #c42b1c;
}
.alert b {
  display: block;
}

/* Manager: inspection details */
.photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6em;
}
.photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.6em;
  background: linear-gradient(160deg, #e3eaf5, #cad6e8);
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8% 10% 16%;
}
.photo.fill img {
  object-fit: cover;
  padding: 0;
}
.photo.flip img {
  transform: scaleX(-1);
}
.photo > span {
  position: absolute;
  left: 0.45em;
  bottom: 0.4em;
  padding: 0.15em 0.5em;
  border-radius: 0.35em;
  background: rgb(10 16 26 / 72%);
  color: #fff;
  font-size: 0.68em;
  font-weight: 700;
}
.photo.video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2.5v5l4-2.5z' fill='%230f1b2d'/%3E%3C/svg%3E") center / 60% no-repeat;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 16px rgb(0 0 0 / 25%);
}
.photo.flag {
  outline: 0.18em solid #d97706;
  outline-offset: -0.18em;
}
.dent {
  position: absolute;
  left: var(--x, 40%);
  top: var(--y, 50%);
  width: 2.2em;
  height: 2.2em;
  border: 0.16em dashed #f97316;
  border-radius: 50%;
  background: rgb(249 115 22 / 18%);
  transform: translate(-50%, -50%);
}
.dent::before,
.dent::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 46%;
  width: 56%;
  height: 0.12em;
  background: #7c2d12;
  transform: rotate(-18deg);
}
.dent::after {
  top: 60%;
  left: 30%;
  width: 40%;
  transform: rotate(-24deg);
}
.dl {
  display: grid;
  gap: 0.15em;
}
.dl div {
  display: flex;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.5em 0;
  border-top: 1px solid #eef1f6;
  font-size: 0.9em;
}
.dl div:first-child {
  border-top: 0;
}
.dl dt,
.dl span {
  color: #6b7a90;
}
.dl b {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Manager: before & after */
.video-row {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 0.9em;
  align-items: center;
  margin-top: 0.7em;
}
.video-row b {
  display: block;
  font-size: 0.92em;
}
.photos.two {
  grid-template-columns: 1fr 1fr;
  margin: 0.5em 0;
}
.app p.note {
  margin: 0 0 0.6em;
  color: #33425a;
  font-size: 0.85em;
  line-height: 1.5;
}
.viewer {
  display: grid;
  place-items: center;
  border-radius: 0.95em;
  background:
    radial-gradient(circle at 50% 45%, #33475e, #0b1220 75%);
}
.viewer-img {
  position: relative;
  width: 82%;
}
.viewer-img img {
  display: block;
  width: 100%;
  transform: scaleX(-1);
}
.viewer .dent {
  width: 4em;
  height: 4em;
}
.compare {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 6em 1fr 1fr;
  grid-template-rows: auto repeat(4, 1fr);
  gap: 0.55em 0.7em;
  align-items: stretch;
  padding: 1em 1.1em;
  border-radius: 0.95em;
  background: #fff;
}
.compare > b {
  align-self: center;
  font-size: 0.95em;
}
.compare .photo {
  aspect-ratio: auto;
}
.compare .photo img {
  padding: 6% 0;
}
.compare .photo.wide img {
  padding: 4% 0;
}
.flag-note {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
}

/* Manager: incidents */
.table {
  display: grid;
  font-size: 0.88em;
}
.table > div {
  display: grid;
  grid-template-columns: 0.9fr 1.55fr 0.95fr 1fr;
  gap: 0.8em;
  align-items: center;
  padding: 0.62em 0.2em;
  border-top: 1px solid #eef1f6;
}
.table > div:first-child {
  border-top: 0;
  color: #6b7a90;
  font-size: 0.9em;
  font-weight: 700;
}
.table > div.sel {
  margin: 0 -0.5em;
  padding-left: 0.7em;
  padding-right: 0.7em;
  border-radius: 0.6em;
  background: #eef3ff;
}

/* Fleetiva ERP: Sales & Inventory analytics dashboard */
.erp {
  --erp: #8a3d86;
  --erp-soft: #f5edf5;
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  padding: 1.3em 1.4em 1.4em;
  font-family: var(--body);
  font-size: 2.15cqw;
  line-height: 1.35;
  letter-spacing: 0;
  color: #1d2433;
  background: #fafafc;
}
.erp small {
  display: block;
  color: #6b7385;
  font-size: 0.78em;
}
.erp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1em;
}
.erp-head small {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.erp-head b {
  display: block;
  font-family: var(--heading);
  font-size: 1.45em;
  letter-spacing: -0.02em;
}
.erp-actions {
  display: flex;
  gap: 0.45em;
}
.erp-actions span {
  padding: 0.4em 0.75em;
  border: 1px solid #dde1ea;
  border-radius: 0.45em;
  background: #fff;
  font-size: 0.78em;
  font-weight: 700;
}
.erp-tabs {
  display: flex;
  gap: 1.3em;
  padding: 0.6em 0.9em;
  border: 1px solid #e6e8ef;
  border-radius: 0.6em;
  background: #fff;
  font-size: 0.8em;
  font-weight: 700;
  color: #4b5366;
}
.erp-tabs span::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: #c3c8d4;
  vertical-align: 0.15em;
}
.erp-tabs .on {
  color: var(--erp);
}
.erp-tabs .on::before {
  background: var(--erp);
}
.erp-kpis {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1.25fr;
  gap: 0.6em;
}
.erp-kpis div,
.erp-card {
  padding: 0.75em 0.85em;
  border: 1px solid #e6e8ef;
  border-radius: 0.6em;
  background: #fff;
}
.erp-kpis div:first-child {
  box-shadow: inset 0.22em 0 0 var(--erp);
}
.erp-kpis b {
  display: block;
  margin-top: 0.2em;
  font-family: var(--heading);
  font-size: 1.3em;
  font-variant-numeric: tabular-nums;
}
.erp-kpis em {
  font-style: normal;
  color: var(--erp);
}
.erp-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.1fr;
  gap: 0.6em;
}
.erp-card small {
  margin-bottom: 0.55em;
  font-weight: 700;
  color: #1d2433;
}
.erp-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.35em;
  height: 6.2em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #e6e8ef;
}
.erp-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 0.2em 0.2em 0 0;
  background: linear-gradient(#a3569f, var(--erp));
}
.erp-donut {
  width: 6.2em;
  aspect-ratio: 1;
  margin: 0.2em auto 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 52%, transparent 53%),
    conic-gradient(var(--erp) 0 48%, #d38fcf 48% 80%, #5e2a5b 80% 88%, #b569b1 88% 95%, #f1c6ee 95%);
}
.erp-trend small {
  display: flex;
  justify-content: space-between;
}
.erp-trend em {
  font-style: normal;
  color: var(--erp);
}
.erp-trend svg {
  display: block;
  width: 100%;
  height: 4.2em;
}
.erp-stream > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4em;
  padding: 0.38em 0;
  border-top: 1px solid #eef0f4;
  font-size: 0.78em;
}
.erp-stream b {
  color: var(--erp);
  font-family: ui-monospace, monospace;
  font-size: 0.95em;
}
.erp-stream span {
  padding: 0.1em 0.5em;
  border-radius: 99px;
  font-size: 0.85em;
  font-weight: 700;
}
.erp-stream .ok {
  background: #ecedf3;
  color: #4b5366;
}
.erp-stream .wait {
  background: #fdf0d9;
  color: #9a5a00;
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .app [data-panel] {
    transition: none;
  }
  .rec::before,
  .sync-status::before {
    animation: none;
  }
}