:root {
  --ff-bg: #0a0a0b;
  --ff-bg-accent: #0d0d10;
  --ff-panel: #121214;
  --ff-panel-alt: #1a1a1e;
  --ff-border: rgba(192, 197, 206, 0.14);
  --ff-border-strong: rgba(192, 197, 206, 0.28);
  --ff-metal: #c0c5ce;
  --ff-text: #f4f4f5;
  --ff-text-muted: #9a9aa3;
  --ff-accent: #e10600;
  --ff-green: #2f9e6b;
  --ff-green-bg: rgba(47, 158, 107, 0.14);
  --ff-orange: #d4a017;
  --ff-orange-bg: rgba(212, 160, 23, 0.14);
  --ff-red: #d64545;
  --ff-red-bg: rgba(214, 69, 69, 0.14);
  --ff-blue: #6b8499;
  --ff-blue-bg: rgba(107, 132, 153, 0.14);
  --ff-radius: 8px;
  --ff-radius-sm: 7px;
  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 10px;
  --ff-space-4: 14px;
  --ff-space-5: 20px;
  --ff-max-width: 1280px;
  --ff-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ff-ok: var(--ff-green);
  --ff-ok-bg: var(--ff-green-bg);
  --ff-attention: var(--ff-orange);
  --ff-attention-bg: var(--ff-orange-bg);
  --ff-error: var(--ff-red);
  --ff-error-bg: var(--ff-red-bg);
  --ff-unavailable: var(--ff-metal);
  --ff-unavailable-bg: rgba(192, 197, 206, 0.08);
  --ff-info: var(--ff-blue);
  --ff-info-bg: var(--ff-blue-bg);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ff-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ff-font);
  color: var(--ff-text);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(225, 6, 0, 0.08), transparent 55%),
    linear-gradient(180deg, #0d0d10 0%, var(--ff-bg) 40%, #080809 100%);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.app {
  width: min(100%, var(--ff-max-width));
  margin: 0 auto;
  padding: 12px 16px 28px;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 10px;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--ff-border);
}

.brand {
  min-width: 0;
}

.brand-name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ff-text);
  line-height: 1.15;
}

.brand-sub {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ff-text-muted);
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  text-align: right;
  max-width: 100%;
}

.header-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-summary[hidden] {
  display: none;
}

.header-summary li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ff-text-muted);
  font-size: 0.72rem;
  padding: 4px 8px;
  border: 1px solid var(--ff-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.header-summary strong {
  color: var(--ff-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.header-updated,
.header-refresh {
  margin: 0;
  color: var(--ff-text-muted);
  font-size: 0.72rem;
}

.header-updated strong {
  color: var(--ff-text);
  font-weight: 550;
}

.refresh-notice {
  margin: 0;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--ff-orange) 35%, var(--ff-border));
  background: var(--ff-orange-bg);
  color: var(--ff-orange);
  font-size: 0.72rem;
}

.refresh-notice[hidden] {
  display: none;
}

.dashboard {
  display: grid;
  gap: 10px;
  align-items: start;
}

.panel {
  background: color-mix(in srgb, var(--ff-panel) 92%, #000);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  padding: 10px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ff-border);
}

.panel-header h2 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ff-metal);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.tone-ok {
  color: var(--ff-ok);
  background: var(--ff-ok-bg);
  border-color: color-mix(in srgb, var(--ff-ok) 30%, transparent);
}

.tone-attention {
  color: var(--ff-attention);
  background: var(--ff-attention-bg);
  border-color: color-mix(in srgb, var(--ff-attention) 30%, transparent);
}

.tone-error {
  color: var(--ff-error);
  background: var(--ff-error-bg);
  border-color: color-mix(in srgb, var(--ff-error) 30%, transparent);
}

.tone-unavailable {
  color: var(--ff-unavailable);
  background: var(--ff-unavailable-bg);
  border-color: var(--ff-border);
}

.tone-info {
  color: var(--ff-info);
  background: var(--ff-info-bg);
  border-color: color-mix(in srgb, var(--ff-info) 28%, transparent);
}

.overview-grid,
.ops-grid,
.service-grid {
  display: grid;
  gap: 8px;
}

.overview-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.top-status-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.trend-group {
  margin-top: 12px;
}

.trend-group h3 {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.trend-card {
  min-width: 0;
  background: var(--ff-panel-alt);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  padding: 10px;
}

.trend-svg {
  color: var(--ff-ok);
  margin: 4px 0;
}

.trend-svg .sparkline {
  display: block;
  width: 100%;
  height: 56px;
}

.trend-svg .sparkline-empty {
  fill: var(--ff-text-muted);
  font-size: 11px;
}

.trend-stats {
  margin: 0;
  color: var(--ff-text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.cause-list,
.incident-list {
  margin: 0 0 12px;
  padding-left: 1.1rem;
  font-size: 0.78rem;
}

.table-wrap-wide {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tournament-table,
.incident-table,
.fenrir-proc-table,
.avail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
}

.tournament-table th,
.tournament-table td,
.incident-table th,
.incident-table td,
.fenrir-proc-table th,
.fenrir-proc-table td,
.avail-table th,
.avail-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ff-border);
  text-align: left;
  vertical-align: top;
}

.tournament-table th,
.incident-table th,
.fenrir-proc-table th,
.avail-table th {
  color: var(--ff-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.muted {
  color: var(--ff-text-muted);
  font-weight: 400;
}

.tech-details {
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--ff-text-muted);
}

.tech-details summary {
  cursor: pointer;
  color: var(--ff-metal);
}

.event-item.severity-error .event-message {
  color: var(--ff-accent);
}

.event-item.severity-warning .event-message {
  color: var(--ff-attention);
}

.event-item.severity-recovery .event-message,
.event-item.severity-ok .event-message {
  color: var(--ff-ok);
}

.fenrir-procs-block {
  margin-top: 12px;
}

.ongoing-note,
.ongoing-banner {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ff-accent) 40%, var(--ff-border));
  border-radius: var(--ff-radius-sm);
  background: color-mix(in srgb, var(--ff-accent) 10%, transparent);
  color: var(--ff-text);
  font-size: 0.78rem;
}

.ops-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stack-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stack-row {
  padding: 10px 12px;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  background: color-mix(in srgb, var(--ff-surface) 88%, transparent);
}

.stack-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.stack-detail {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--ff-text);
  line-height: 1.35;
}

.stack-meta {
  margin: 4px 0 0;
  font-size: 0.7rem;
  color: var(--ff-metal);
}

@media (max-width: 960px) {
  .stack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .stack-grid {
    grid-template-columns: 1fr;
  }
}

.service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.overview-card,
.ops-card,
.service-card {
  min-width: 0;
  background: var(--ff-panel-alt);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  padding: 10px;
}

.overview-card.overall {
  border-color: var(--ff-border-strong);
  background: var(--ff-panel-alt);
}

.overview-card.overall.tone-ok {
  border-color: color-mix(in srgb, var(--ff-ok) 35%, var(--ff-border));
  background:
    linear-gradient(180deg, rgba(47, 158, 107, 0.08), transparent 60%),
    var(--ff-panel-alt);
}

.overview-card.overall.tone-attention {
  border-color: color-mix(in srgb, var(--ff-attention) 40%, var(--ff-border));
  background:
    linear-gradient(180deg, rgba(212, 160, 23, 0.08), transparent 60%),
    var(--ff-panel-alt);
}

.overview-card.overall.tone-error {
  border-color: color-mix(in srgb, var(--ff-accent) 45%, var(--ff-border));
  background:
    linear-gradient(180deg, rgba(225, 6, 0, 0.1), transparent 60%),
    var(--ff-panel-alt);
}

.card-kicker {
  margin: 0 0 4px;
  color: var(--ff-text-muted);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-detail {
  margin: 8px 0 0;
  color: var(--ff-text-muted);
  font-size: 0.74rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.ops-value {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.metric-cards {
  display: grid;
  gap: 8px;
  margin: 0;
}

.metric-cards-primary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-cards-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-sub {
  margin: 0 0 10px;
  color: var(--ff-text-muted);
  font-size: 0.78rem;
}

.availability-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.avail-scope h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.table-wrap {
  overflow-x: auto;
}

.avail-table,
.tournament-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.avail-table th,
.avail-table td,
.tournament-table th,
.tournament-table td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--ff-border);
  vertical-align: top;
}

.avail-table th,
.tournament-table th {
  color: var(--ff-text-muted);
  font-weight: 500;
}

.ops-meta {
  margin: 4px 0 0;
  color: var(--ff-text-muted);
  font-size: 0.72rem;
}

.extrema-list,
.top-procs-list,
.incident-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.72rem;
  color: var(--ff-text-muted);
}

.incident-evidence {
  display: block;
  opacity: 0.85;
}

.muted {
  color: var(--ff-text-muted);
  font-weight: 400;
}

.tournaments-block,
.incidents-block,
.extrema-block,
.top-procs {
  margin-top: 12px;
}

.metric-card {
  margin: 0;
  padding: 6px 8px;
  background: var(--ff-panel-alt);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.metric-card dt {
  margin: 0 0 2px;
  color: var(--ff-text-muted);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.metric-card dd {
  margin: 0;
  display: grid;
  gap: 2px;
  flex: 1;
}

.metric-primary {
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.metric-cards-secondary .metric-primary {
  font-size: 0.86rem;
  font-weight: 600;
}

.metric-secondary {
  color: var(--ff-text-muted);
  font-size: 0.66rem;
  font-weight: 450;
  line-height: 1.25;
}

.metric-bar {
  margin-top: auto;
  padding-top: 4px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ff-border) 80%, transparent);
  overflow: hidden;
}

.metric-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: currentColor;
}

.metric-bar-fill.bar-w-0 { width: 0%; }
.metric-bar-fill.bar-w-1 { width: 1%; }
.metric-bar-fill.bar-w-2 { width: 2%; }
.metric-bar-fill.bar-w-3 { width: 3%; }
.metric-bar-fill.bar-w-4 { width: 4%; }
.metric-bar-fill.bar-w-5 { width: 5%; }
.metric-bar-fill.bar-w-6 { width: 6%; }
.metric-bar-fill.bar-w-7 { width: 7%; }
.metric-bar-fill.bar-w-8 { width: 8%; }
.metric-bar-fill.bar-w-9 { width: 9%; }
.metric-bar-fill.bar-w-10 { width: 10%; }
.metric-bar-fill.bar-w-11 { width: 11%; }
.metric-bar-fill.bar-w-12 { width: 12%; }
.metric-bar-fill.bar-w-13 { width: 13%; }
.metric-bar-fill.bar-w-14 { width: 14%; }
.metric-bar-fill.bar-w-15 { width: 15%; }
.metric-bar-fill.bar-w-16 { width: 16%; }
.metric-bar-fill.bar-w-17 { width: 17%; }
.metric-bar-fill.bar-w-18 { width: 18%; }
.metric-bar-fill.bar-w-19 { width: 19%; }
.metric-bar-fill.bar-w-20 { width: 20%; }
.metric-bar-fill.bar-w-21 { width: 21%; }
.metric-bar-fill.bar-w-22 { width: 22%; }
.metric-bar-fill.bar-w-23 { width: 23%; }
.metric-bar-fill.bar-w-24 { width: 24%; }
.metric-bar-fill.bar-w-25 { width: 25%; }
.metric-bar-fill.bar-w-26 { width: 26%; }
.metric-bar-fill.bar-w-27 { width: 27%; }
.metric-bar-fill.bar-w-28 { width: 28%; }
.metric-bar-fill.bar-w-29 { width: 29%; }
.metric-bar-fill.bar-w-30 { width: 30%; }
.metric-bar-fill.bar-w-31 { width: 31%; }
.metric-bar-fill.bar-w-32 { width: 32%; }
.metric-bar-fill.bar-w-33 { width: 33%; }
.metric-bar-fill.bar-w-34 { width: 34%; }
.metric-bar-fill.bar-w-35 { width: 35%; }
.metric-bar-fill.bar-w-36 { width: 36%; }
.metric-bar-fill.bar-w-37 { width: 37%; }
.metric-bar-fill.bar-w-38 { width: 38%; }
.metric-bar-fill.bar-w-39 { width: 39%; }
.metric-bar-fill.bar-w-40 { width: 40%; }
.metric-bar-fill.bar-w-41 { width: 41%; }
.metric-bar-fill.bar-w-42 { width: 42%; }
.metric-bar-fill.bar-w-43 { width: 43%; }
.metric-bar-fill.bar-w-44 { width: 44%; }
.metric-bar-fill.bar-w-45 { width: 45%; }
.metric-bar-fill.bar-w-46 { width: 46%; }
.metric-bar-fill.bar-w-47 { width: 47%; }
.metric-bar-fill.bar-w-48 { width: 48%; }
.metric-bar-fill.bar-w-49 { width: 49%; }
.metric-bar-fill.bar-w-50 { width: 50%; }
.metric-bar-fill.bar-w-51 { width: 51%; }
.metric-bar-fill.bar-w-52 { width: 52%; }
.metric-bar-fill.bar-w-53 { width: 53%; }
.metric-bar-fill.bar-w-54 { width: 54%; }
.metric-bar-fill.bar-w-55 { width: 55%; }
.metric-bar-fill.bar-w-56 { width: 56%; }
.metric-bar-fill.bar-w-57 { width: 57%; }
.metric-bar-fill.bar-w-58 { width: 58%; }
.metric-bar-fill.bar-w-59 { width: 59%; }
.metric-bar-fill.bar-w-60 { width: 60%; }
.metric-bar-fill.bar-w-61 { width: 61%; }
.metric-bar-fill.bar-w-62 { width: 62%; }
.metric-bar-fill.bar-w-63 { width: 63%; }
.metric-bar-fill.bar-w-64 { width: 64%; }
.metric-bar-fill.bar-w-65 { width: 65%; }
.metric-bar-fill.bar-w-66 { width: 66%; }
.metric-bar-fill.bar-w-67 { width: 67%; }
.metric-bar-fill.bar-w-68 { width: 68%; }
.metric-bar-fill.bar-w-69 { width: 69%; }
.metric-bar-fill.bar-w-70 { width: 70%; }
.metric-bar-fill.bar-w-71 { width: 71%; }
.metric-bar-fill.bar-w-72 { width: 72%; }
.metric-bar-fill.bar-w-73 { width: 73%; }
.metric-bar-fill.bar-w-74 { width: 74%; }
.metric-bar-fill.bar-w-75 { width: 75%; }
.metric-bar-fill.bar-w-76 { width: 76%; }
.metric-bar-fill.bar-w-77 { width: 77%; }
.metric-bar-fill.bar-w-78 { width: 78%; }
.metric-bar-fill.bar-w-79 { width: 79%; }
.metric-bar-fill.bar-w-80 { width: 80%; }
.metric-bar-fill.bar-w-81 { width: 81%; }
.metric-bar-fill.bar-w-82 { width: 82%; }
.metric-bar-fill.bar-w-83 { width: 83%; }
.metric-bar-fill.bar-w-84 { width: 84%; }
.metric-bar-fill.bar-w-85 { width: 85%; }
.metric-bar-fill.bar-w-86 { width: 86%; }
.metric-bar-fill.bar-w-87 { width: 87%; }
.metric-bar-fill.bar-w-88 { width: 88%; }
.metric-bar-fill.bar-w-89 { width: 89%; }
.metric-bar-fill.bar-w-90 { width: 90%; }
.metric-bar-fill.bar-w-91 { width: 91%; }
.metric-bar-fill.bar-w-92 { width: 92%; }
.metric-bar-fill.bar-w-93 { width: 93%; }
.metric-bar-fill.bar-w-94 { width: 94%; }
.metric-bar-fill.bar-w-95 { width: 95%; }
.metric-bar-fill.bar-w-96 { width: 96%; }
.metric-bar-fill.bar-w-97 { width: 97%; }
.metric-bar-fill.bar-w-98 { width: 98%; }
.metric-bar-fill.bar-w-99 { width: 99%; }
.metric-bar-fill.bar-w-100 { width: 100%; }

.metric-card-cpu,
.metric-card-ram,
.metric-card-disk,
.metric-card-uptime {
  color: var(--ff-metal);
}

.metric-card-cpu .metric-primary,
.metric-card-cpu .metric-secondary,
.metric-card-ram .metric-primary,
.metric-card-ram .metric-secondary,
.metric-card-disk .metric-primary,
.metric-card-disk .metric-secondary,
.metric-card-uptime .metric-primary,
.metric-card-uptime .metric-secondary {
  color: var(--ff-text);
}

.service-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}

.service-card-header h3 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 650;
}

.service-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
  margin: 0;
}

.service-meta .metric {
  min-width: 0;
}

.service-meta .metric.span-2 {
  grid-column: 1 / -1;
}

.service-meta dt {
  margin: 0;
  color: var(--ff-text-muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.service-meta dd {
  margin: 1px 0 0;
  font-size: 0.74rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.guardian-raw {
  color: var(--ff-metal);
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  font-weight: 400;
  margin-top: 2px;
}

.error-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.sync-chain {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  overflow: hidden;
}

.sync-node {
  flex: 1 1 0;
  min-width: 0;
  background: var(--ff-panel-alt);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sync-node-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sync-node h3 {
  margin: 0;
  font-size: 0.84rem;
}

.sync-meta {
  margin: 0;
  color: var(--ff-text-muted);
  font-size: 0.72rem;
}

.sync-meta strong {
  color: var(--ff-text);
  font-weight: 550;
}

.sync-details {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.sync-connector {
  flex: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ff-metal);
  font-size: 0.9rem;
  opacity: 0.75;
}

.sync-connector.tone-attention {
  color: var(--ff-attention);
}

.sync-connector.tone-error {
  color: var(--ff-error);
}

.match-overview {
  border: 1px dashed color-mix(in srgb, var(--ff-border) 85%, transparent);
  border-radius: var(--ff-radius-sm);
  padding: 8px 10px;
  background: color-mix(in srgb, var(--ff-panel-alt) 70%, transparent);
}

.match-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.match-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  background: var(--ff-panel-alt);
  font-size: 0.74rem;
}

.match-row-name {
  font-weight: 600;
  min-width: 0;
}

.match-row-meta {
  color: var(--ff-text-muted);
  font-size: 0.68rem;
}

.empty-state {
  margin: 0;
  color: var(--ff-text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.empty-state-ok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ff-green);
  background: var(--ff-green-bg);
  border: 1px solid color-mix(in srgb, var(--ff-green) 28%, transparent);
  border-radius: 999px;
  padding: 4px 9px;
  width: fit-content;
  font-size: 0.74rem;
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.event-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  background: var(--ff-panel-alt);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
}

.event-body {
  min-width: 0;
}

.event-message {
  margin: 0;
  font-size: 0.82rem;
}

.event-cat {
  margin: 2px 0 0;
  color: var(--ff-text-muted);
  font-size: 0.7rem;
}

.event-time {
  color: var(--ff-metal);
  font-size: 0.7rem;
  white-space: nowrap;
}

.site-footer {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--ff-border);
  text-align: center;
  color: var(--ff-text-muted);
  font-size: 0.72rem;
}

.site-footer p {
  margin: 0;
}

@media (max-width: 1100px) {
  .overview-grid,
  .top-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-grid,
  .service-grid,
  .metric-cards-primary,
  .availability-grid,
  .trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .match-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-meta {
    justify-content: flex-start;
    text-align: left;
  }

  .overview-grid,
  .top-status-grid,
  .ops-grid,
  .service-grid,
  .availability-grid,
  .trend-grid {
    grid-template-columns: 1fr 1fr;
  }

  .metric-cards-primary,
  .metric-cards-secondary {
    grid-template-columns: 1fr 1fr;
  }

  .sync-chain {
    flex-direction: column;
    gap: 4px;
  }

  .sync-connector {
    flex: 0 0 auto;
    height: 16px;
    transform: rotate(90deg);
  }
}

@media (max-width: 430px) {
  .app {
    padding: 10px 12px 24px;
  }

  .overview-grid,
  .top-status-grid,
  .ops-grid,
  .service-grid,
  .metric-cards-primary,
  .metric-cards-secondary,
  .trend-grid {
    grid-template-columns: 1fr;
  }

  .event-item {
    grid-template-columns: auto 1fr;
  }

  .event-time {
    grid-column: 2;
  }
}