* { box-sizing: border-box; }
body {
  margin: 0; background: #f4f6fb; color: #23283a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 1040px; margin: 0 auto; padding: 24px 18px 48px; }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
h1 { font-size: 24px; margin: 0 0 4px; }
.sub { margin: 0; color: #6b7288; font-size: 14px; }
.refresh-box { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#refreshBtn {
  border: 0; background: #315cf6; color: #fff; font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 10px; cursor: pointer; box-shadow: 0 6px 16px rgba(49,92,246,.25);
}
#refreshBtn:disabled { opacity: .6; cursor: default; }
.stamp { color: #8990a4; font-size: 12px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kpi { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(40,45,70,.06); display: flex; flex-direction: column; gap: 4px; }
.kpi-val { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.kpi-label { color: #6b7288; font-size: 12.5px; }

.card { background: #fff; border-radius: 16px; padding: 18px 18px 8px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(40,45,70,.06); }
.card h2 { font-size: 16px; margin: 0 0 12px; }
.muted { color: #9097a8; font-weight: 400; font-size: 13px; }
.center { text-align: center; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #eef0f5; white-space: nowrap; }
th { color: #7b8295; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.strong { font-weight: 700; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.small { font-size: 12px; color: #6b7288; }
tbody tr:hover { background: #f8faff; }

/* app-name bar sits behind the name */
td .bar { position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--w); background: rgba(49,92,246,.12); border-radius: 6px; z-index: 0; }
#appsTable td:first-child { position: relative; }
.app-name { position: relative; z-index: 1; font-weight: 600; }
.apps-cell { white-space: normal; color: #4a5069; font-size: 13px; max-width: 340px; }

footer { color: #9097a8; font-size: 12.5px; margin-top: 8px; }
footer a { color: #5e6680; }

@media (prefers-color-scheme: dark) {
  body { background: #14161c; color: #e7e9ef; }
  .kpi, .card { background: #1d2029; box-shadow: none; border: 1px solid #262a35; }
  .kpi-label, .sub, .small { color: #9aa1b4; }
  th { color: #8a91a6; }
  th, td { border-color: #262a35; }
  tbody tr:hover { background: #222634; }
  td .bar { background: rgba(90,130,255,.2); }
  #refreshBtn { box-shadow: none; }
}