.case-filter-card { gap: 24px; }
.case-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  white-space: nowrap;
}
.case-count strong { color: #fff; font-size: 1.05rem; }
.case-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px,1.4fr) repeat(3,minmax(150px,.7fr));
  gap: 16px;
  align-items: end;
}
.case-filter-actions { display: flex; gap: 10px; grid-column: 1 / -1; }
.case-list { display: grid; gap: 10px; }
.case-row {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) minmax(200px,.55fr) 110px;
  gap: 18px;
  align-items: center;
  min-height: 88px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  color: inherit;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.case-row:hover {
  transform: translateY(-1px);
  border-color: rgba(0,197,255,.34);
  background: linear-gradient(110deg,rgba(255,49,89,.05),rgba(0,197,255,.04),rgba(143,73,255,.05));
}
.case-row-id,.case-row-main,.case-row-meta,.case-row-date { min-width: 0; }
.case-row-id { display: grid; gap: 6px; }
.case-number { font-family: Syne,sans-serif; font-size: 1.1rem; font-weight: 800; color: #fff; }
.case-action { text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-size: .72rem; font-weight: 800; }
.case-row-main { display: grid; gap: 5px; }
.case-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-row-main span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.case-row-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.case-row-meta small { width: 100%; color: var(--muted); }
.case-row-date { display: grid; gap: 3px; justify-items: end; color: #ddd; }
.case-row-date small { color: var(--muted); }
.status-pill,.outcome-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.status-pill.open { color: #b9f7cf; background: rgba(77,220,123,.12); border: 1px solid rgba(77,220,123,.28); }
.status-pill.closed { color: #c6c6cf; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.outcome-pill.completed { color: #aee9ff; background: rgba(0,197,255,.10); border: 1px solid rgba(0,197,255,.24); }
.outcome-pill.pending { color: #ffe39a; background: rgba(255,190,11,.10); border: 1px solid rgba(255,190,11,.24); }
.outcome-pill.failed { color: #ffadbb; background: rgba(255,49,89,.10); border: 1px solid rgba(255,49,89,.28); }
.case-detail-heading { align-items: end; }
.case-status-action { display: flex; align-items: center; gap: 10px; }
.case-detail-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); gap: 22px; align-items: start; }
.case-detail-side { position: sticky; top: 20px; }
.case-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.case-facts > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
}
.case-facts span,.case-reason > span { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.case-facts strong { overflow-wrap: anywhere; }
.case-reason { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.025); }
.case-reason p { margin: 0; white-space: pre-wrap; }
.case-add-form { display: grid; gap: 14px; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(0,0,0,.18); }
.case-add-form .button { justify-self: start; }
.case-timeline { display: grid; gap: 0; }
.case-timeline-item { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 12px; padding: 14px 0; }
.case-timeline-item:not(:last-child)::after { content:""; position:absolute; left:7px; top:30px; bottom:-4px; width:1px; background:rgba(255,255,255,.10); }
.case-timeline-dot { width: 15px; height: 15px; margin-top: 4px; border-radius: 50%; background: var(--elixir-rainbow); box-shadow: 0 0 0 4px rgba(0,197,255,.06); }
.case-timeline-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.case-timeline-meta span { color: var(--muted); font-size: .8rem; }
.case-timeline-item p { margin: 7px 0 0; white-space: pre-wrap; color: #ddd; }
.case-evidence-list { display: grid; gap: 10px; }
.case-evidence-item { display: grid; gap: 5px; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.025); text-decoration: none; color: inherit; }
.case-evidence-item:hover { border-color: rgba(143,73,255,.38); }
.case-evidence-item span { color: #9fdfff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.case-evidence-item small { color: var(--muted); }
.case-json { margin: 0; max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #d9d9df; font-size: .78rem; }

@media (max-width: 1180px) {
  .case-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .case-row { grid-template-columns: 100px minmax(0,1fr) 190px; }
  .case-row-date { display: none; }
  .case-detail-grid { grid-template-columns: 1fr; }
  .case-detail-side { position: static; }
}
@media (max-width: 760px) {
  .case-filter-grid { grid-template-columns: 1fr; }
  .case-filter-actions { flex-direction: column; }
  .case-filter-actions .button { width: 100%; }
  .case-row { grid-template-columns: 1fr; gap: 10px; }
  .case-row-main span { white-space: normal; }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .case-detail-heading { align-items: stretch; }
  .case-status-action { justify-content: space-between; }
}
@media (max-width: 480px) { .case-facts { grid-template-columns: 1fr; } }