:root {
  --ops-green-900: #063f2d;
  --ops-green-700: #08734d;
  --ops-green-500: #13a66c;
  --ops-ink: #18372a;
  --ops-muted: #6d8278;
  --ops-line: #e1ebe5;
  --ops-surface: #ffffff;
  --ops-canvas: #f3f7f5;
}

.ops-shell {
  padding: 0 !important;
  background: var(--ops-canvas) !important;
  color: var(--ops-ink);
}

.ops-shell [class$="-hero"] {
  position: relative;
  padding: 26px 28px 24px !important;
  border-radius: 16px !important;
  background: linear-gradient(112deg, var(--ops-green-900) 0%, var(--ops-green-700) 52%, var(--ops-green-500) 100%) !important;
  box-shadow: 0 10px 24px rgba(6, 63, 45, .18) !important;
  color: #fff !important;
}

.ops-shell [class$="-eyebrow"] {
  margin-bottom: 7px !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 1.25px !important;
  text-transform: uppercase;
}

.ops-shell [class$="-hero"] h2 {
  margin: 0 0 7px !important;
  color: #fff !important;
  font-size: 23px !important;
  line-height: 1.25;
}

.ops-shell [class$="-hero"] p {
  margin: 0 0 15px !important;
  max-width: 820px;
  color: rgba(255, 255, 255, .84) !important;
  font-size: 13px !important;
  line-height: 1.6;
}

.ops-shell [class$="-actions"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
}

.ops-shell [class$="-hero"] [class$="-metrics"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px !important;
  margin-top: 21px !important;
}

.ops-shell [class$="-hero"] [class$="-metric"] {
  min-width: 0;
  padding: 14px 15px !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
}

.ops-shell [class$="-hero"] [class$="-metric"] .k,
.ops-shell [class$="-hero"] [class$="-metric-label"] {
  color: rgba(255, 255, 255, .7) !important;
  font-size: 11px !important;
}

.ops-shell [class$="-hero"] [class$="-metric"] .v,
.ops-shell [class$="-hero"] [class$="-metric-value"] {
  margin-top: 5px !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.15;
}

.ops-shell [class$="-body"],
.ops-shell [class$="-workspace"] {
  padding: 20px 24px 28px !important;
}

.ops-shell [class$="-panel"] {
  margin-bottom: 16px !important;
  overflow: hidden;
  border: 1px solid var(--ops-line) !important;
  border-radius: 11px !important;
  background: var(--ops-surface) !important;
  box-shadow: 0 4px 14px rgba(11, 71, 44, .055) !important;
}

.ops-shell [class$="-panel-hd"],
.ops-shell [class$="-panel-head"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--c-edf2ef);
}

.ops-shell [class$="-panel-hd"] h3,
.ops-shell [class$="-panel-title"] {
  margin: 0 !important;
  color: var(--ops-green-900) !important;
  font-size: 15px !important;
}

.ops-shell [class$="-panel-bd"] {
  padding: 15px 18px !important;
  overflow-x: auto;
}

.ops-shell [class$="-filter-row"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--c-e6eee9) !important;
  border-radius: 9px !important;
  background: var(--c-f7faf8) !important;
}

.ops-shell select,
.ops-shell input {
  min-height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--c-d6e3dc) !important;
  border-radius: 7px !important;
  background: #fff;
  color: var(--c-29453a);
}

.ops-shell [class$="-btn"] {
  min-height: 34px;
  padding: 0 13px !important;
  border-radius: 7px !important;
  font-size: 12px;
  font-weight: 600;
}

.ops-shell table {
  width: 100%;
  border-collapse: collapse;
}

.ops-shell th {
  background: var(--c-f2f7f4) !important;
  color: var(--c-547064) !important;
  font-size: 11px !important;
  font-weight: 600;
}

.ops-shell th,
.ops-shell td {
  padding: 10px 9px !important;
  border-bottom: 1px solid var(--c-edf2ef) !important;
  white-space: nowrap;
  text-align: left;
}

.ops-shell td {
  color: var(--c-334f42);
  font-size: 12px;
}

.ops-shell tr:hover td { background: var(--c-fbfdfc); }

@media (max-width: 980px) {
  .ops-shell [class$="-metrics"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .ops-shell [class$="-hero"] { padding: 22px 18px 20px !important; }
  .ops-shell [class$="-body"],
  .ops-shell [class$="-workspace"] { padding: 16px 14px 22px !important; }
  .ops-shell [class$="-metrics"] { gap: 8px !important; }
  .ops-shell [class$="-metric"] { padding: 12px !important; }
  .ops-shell [class$="-metric"] .v,
  .ops-shell [class$="-metric-value"] { font-size: 18px !important; }
}