* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0e1116; color: #e6edf3;
  font-size: 13px;
}

/* ---- Header ---------------------------------------------------------- */
header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1.4rem;
  padding: 0.6rem 1rem;
  background: #161b22; border-bottom: 1px solid #30363d;
}
.logos {
  display: flex; align-items: center; gap: 1rem;
}
.logo-rck { height: 38px; width: auto; }
.logo-sp  { height: 30px; width: auto; opacity: 0.9; }

.title-block { display: flex; flex-direction: column; gap: 4px; }
.title-block h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.header-stats {
  font-family: ui-monospace, monospace; font-size: 0.78rem; color: #8b949e;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.header-stats .pill {
  display: inline-block; padding: 1px 7px;
  border: 1px solid #30363d; border-radius: 4px;
}
.header-stats .pill-warn { border-color: #9e6a03; color: #e3b341; }
.header-stats .pill-err  { border-color: #da3633; color: #f85149; }

nav { display: flex; gap: 0.5rem; }
.tab {
  background: transparent; border: 1px solid #30363d; color: #e6edf3;
  padding: 0.35rem 0.8rem; border-radius: 4px; cursor: pointer; font-size: 0.85rem;
}
.tab.active { background: #1f6feb; border-color: #1f6feb; }

main { padding: 1rem; padding-bottom: 3rem; }
.view { display: none; }
.view.active { display: block; }

/* ---- Slot grid ------------------------------------------------------- */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 0.85rem;
}
.slot-card {
  background: #161b22; border: 1px solid #30363d; border-radius: 6px;
  padding: 0.8rem; display: grid; gap: 0.45rem;
}
.slot-card.free     { opacity: 0.55; }
.slot-card.live     { border-color: #238636; }
.slot-card.cooling  { border-color: #d29922; }
.slot-card.starting { border-color: #1f6feb; }

.slot-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem;
}
.slot-head .left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slot-id {
  font-family: ui-monospace, monospace; color: #8b949e; font-size: 0.78rem;
}
.slot-driver {
  font-weight: 600; font-size: 0.95rem; color: #f0f6fc;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.slot-driver-none { color: #6e7681; font-style: italic; }
.slot-state {
  display: inline-block; padding: 1px 9px; border-radius: 4px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.state-free     { background: #21262d; color: #8b949e; }
.state-starting { background: #0d419d; color: #c9e1ff; }
.state-live     { background: #1a7f37; color: #d2f8d2; }
.state-cooling  { background: #9e6a03; color: #fff3c4; }

.badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 0.72rem; font-family: ui-monospace, monospace;
  border: 1px solid #30363d; background: #0d1117;
}
.badge.ok    { color: #56d364; border-color: #238636; }
.badge.warn  { color: #e3b341; border-color: #9e6a03; }
.badge.err   { color: #f85149; border-color: #da3633; }
.badge.muted { color: #8b949e; }
.badge.region { color: #79c0ff; border-color: #1f6feb; }

.kv-row {
  display: grid;
  grid-template-columns: 70px 1fr 1fr auto;
  font-family: ui-monospace, monospace; font-size: 0.78rem;
  color: #c9d1d9; padding: 3px 0;
  border-bottom: 1px dashed #21262d;
  align-items: center;
}
.kv-row .lbl { color: #8b949e; font-weight: 600; }
.kv-row .pid { color: #6e7681; font-size: 0.72rem; }

/* Fragment-age coloring */
.age-fresh { color: #56d364; }    /* <= 5s */
.age-warn  { color: #e3b341; }    /* 5-30s */
.age-stale { color: #f85149; font-weight: 600; }    /* > 30s */

.kds-row { grid-template-columns: 70px 1fr; }
.kds-preview {
  font-family: ui-monospace, monospace; font-size: 0.72rem;
  color: #8b949e; word-break: break-all;
  max-height: 2.6em; overflow: hidden;
  padding: 2px 0 0;
}

.slot-actions { display: flex; gap: 0.4rem; justify-content: space-between; align-items: center; }
.slot-actions .view-link {
  color: #79c0ff; text-decoration: none; font-size: 0.8rem;
  font-family: ui-monospace, monospace;
}
.slot-actions .view-link:hover { text-decoration: underline; }
.btn-tiny {
  background: #21262d; border: 1px solid #30363d; color: #e6edf3;
  padding: 2px 9px; font-size: 0.75rem; border-radius: 3px; cursor: pointer;
}
.btn-tiny:hover { background: #30363d; }
.btn-tiny:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Detector log ---------------------------------------------------- */
.log-meta { font-family: ui-monospace, monospace; font-size: 0.8rem; color: #8b949e; margin-bottom: 0.5rem; }
.log-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
  font-family: ui-monospace, monospace;
}
.log-table th, .log-table td {
  border-bottom: 1px solid #21262d; padding: 5px 8px; vertical-align: top; text-align: left;
}
.log-table th { color: #8b949e; font-weight: 600; }
.log-table td.err { color: #f85149; }

footer {
  padding: 0.5rem 1rem; border-top: 1px solid #30363d; background: #161b22;
  font-family: ui-monospace, monospace; font-size: 0.75rem; color: #8b949e;
  position: fixed; bottom: 0; left: 0; right: 0;
}

.muted { color: #8b949e; }