.page.implementation-admin-page {
 max-width: none;
 display: flex;
 flex-direction: column;
 gap: 8px;
 min-height: 100%;
}

.impl-zone {
 margin-top: 32px;
 padding-top: 14px;
 border-top: 2px solid var(--foreground);
}

.impl-zone h2 {
 margin: 0;
 font-size: var(--text-xl);
}

.impl-zone h3 {
 margin: 0 0 4px;
 font-size: var(--text-lg);
}

.impl-tiles {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 margin-top: 18px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.impl-tile {
 padding: 16px 18px;
 border-right: 1px solid var(--border);
}

.impl-tile:last-child {
 border-right: 0;
}

.impl-tile-name {
 font-weight: 650;
 font-size: var(--text-sm);
}

.impl-tile-pool {
 display: inline-block;
 font-size: var(--text-xs);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 padding: 1px 6px;
 margin: 6px 0 10px;
}

.impl-tile-kpi {
 font-size: 36px;
 font-weight: 750;
 letter-spacing: -0.02em;
 line-height: 1.05;
}

.impl-tile-kpi small {
 font-size: 16px;
 font-weight: 600;
 color: var(--muted-foreground);
}

.impl-tile-vs {
 font-size: var(--text-sm);
 margin-top: 6px;
}

.impl-duo {
 display: grid;
 grid-template-columns: 1.25fr 1fr;
 gap: 32px;
 margin-top: 22px;
}

.impl-trend {
 margin-top: 22px;
}

.impl-trend svg {
 display: block;
 color: var(--foreground);
}

.impl-trend-muted {
 opacity: 0.65;
}

.impl-trend-now,
.impl-trend-now-label {
 fill: var(--destructive);
}

.impl-bucket-row {
 display: grid;
 grid-template-columns: 64px 1fr 72px;
 gap: 12px;
 align-items: center;
 padding: 7px 0;
 border-bottom: 1px solid var(--border);
 font-size: var(--text-sm);
}

.impl-bucket-bar {
 height: 20px;
 border-radius: 2px;
 position: relative;
 min-width: 28px;
}

.impl-bucket-bar span {
 position: absolute;
 left: 8px;
 top: 1px;
 font-size: var(--text-xs);
 font-weight: 700;
 color: var(--foreground);
}

.impl-bucket-bar.impl-tone-ok {
 background: color-mix(
  in srgb,
  var(--message-success) 22%,
  transparent
 );
 border-left: 3px solid
  var(--message-success);
}

.impl-bucket-bar.impl-tone-warn {
 background: color-mix(
  in srgb,
  var(--message-warning) 28%,
  transparent
 );
 border-left: 3px solid
  var(--message-warning);
}

.impl-bucket-bar.impl-tone-hot {
 background: color-mix(
  in srgb,
  var(--destructive) 22%,
  transparent
 );
 border-left: 3px solid
  var(--destructive);
}

.impl-bucket-arr {
 text-align: right;
 font-variant-numeric: tabular-nums;
}

.impl-cause-stack {
 display: flex;
 height: 30px;
 border-radius: 2px;
 overflow: hidden;
 margin: 10px 0 8px;
}

.impl-cause-seg,
.impl-cause-dot {
 background: var(--muted-foreground);
}

.impl-cause-dot {
 display: inline-block;
 width: 10px;
 height: 10px;
 border-radius: 2px;
 margin-right: 5px;
 vertical-align: -1px;
}

.impl-cause-client {
 background: #8a94a0;
}

.impl-cause-unresponsive {
 background: #5b6b7a;
}

.impl-cause-product {
 background: #c9cfca;
}

.impl-cause-sales {
 background: #b7a98c;
}

.impl-cause-billing {
 background: #ddd3bc;
}

.impl-cause-untagged {
 background: var(--destructive);
}

.impl-cause-legend {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 font-size: var(--text-xs);
}

.impl-cause-hot-label {
 color: var(--destructive);
 font-weight: 650;
}

.impl-callouts {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 margin-top: 28px;
 padding-top: 18px;
 border-top: 1px solid var(--border);
}

.impl-callout-value {
 font-size: 28px;
 font-weight: 750;
 letter-spacing: -0.02em;
}

.impl-callout-label {
 font-size: var(--text-sm);
 font-weight: 600;
}

.impl-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin: 14px 0;
}

.impl-chip.is-active {
 background: var(--foreground);
 color: var(--background);
 border-color: var(--foreground);
}

.impl-search {
 width: 230px;
}

.impl-coverage {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 130px;
}

.impl-coverage-track {
 flex: 1;
 height: 9px;
 background: var(--secondary);
 border-radius: 2px;
}

.impl-coverage-fill {
 height: 100%;
 border-radius: 2px;
}

.impl-coverage-fill.impl-tone-ok,
.impl-tone-ok {
 color: var(--message-success);
}

.impl-coverage-fill.impl-tone-ok {
 background: var(--message-success);
}

.impl-coverage-fill.impl-tone-warn,
.impl-tone-warn {
 color: var(--message-warning);
}

.impl-coverage-fill.impl-tone-warn {
 background: var(--message-warning);
}

.impl-coverage-fill.impl-tone-hot,
.impl-tone-hot {
 color: var(--destructive);
}

.impl-coverage-fill.impl-tone-hot {
 background: var(--destructive);
}

.impl-days {
 font-weight: 700;
 font-variant-numeric: tabular-nums;
}

.impl-nodoc {
 color: var(--destructive);
 font-size: var(--text-xs);
 font-weight: 700;
}

.impl-source {
 margin-top: 40px;
 padding-top: 14px;
 border-top: 1px solid var(--border);
 max-width: 80ch;
 font-size: var(--text-xs);
}

@media (max-width: 900px) {
 .impl-tiles {
  grid-template-columns: 1fr 1fr;
 }

 .impl-tile {
  border-bottom: 1px solid var(--border);
 }

 .impl-duo,
 .impl-callouts {
  grid-template-columns: 1fr;
 }
}