.res-page { display: grid; gap: 14px; }
.res-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.res-cards { display: grid; gap: 12px; }
.res-card { display: grid; gap: 8px; }
.res-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.res-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.res-use { display: grid; gap: 4px; }
.res-bar { height: 8px; background: var(--hx-border-soft); border-radius: 99px; overflow: hidden; }
.res-bar > span { display: block; height: 100%; background: var(--hx-accent); }
.res-bar.near > span { background: var(--hx-warn); }
.res-ai-near { font-weight: 600; }
.res-bar .reserved { background: var(--hx-warn); }
.res-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.res-drawer-back { position: fixed; inset: 0; background: color-mix(in srgb, var(--hx-fg) 28%, transparent); z-index: 30; }
.res-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 100%);
  background: var(--hx-card); color: var(--hx-fg); border-left: 1px solid var(--hx-border);
  z-index: 31; overflow: auto; padding: 16px; display: grid; gap: 12px; align-content: start;
}
.res-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.res-grant { border-top: 1px solid var(--hx-border-soft); padding-top: 8px; }
.res-strip { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.res-strip-text { flex: 1 1 220px; }
.run-start-line { margin: 0; }
.run-picker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.run-dialog-checks { display: grid; gap: 6px; margin: 8px 0; }
@media (max-width: 420px) {
  .res-strip { display: grid; }
  .res-strip-text { flex-basis: auto; }
}