/* ============================================================
   GPU PODS PANEL — PatchWork Standard, "Instrument" layout
   (GpuPanel.dc.html variant b, Setup = GpuSetup.dc.html "timeline").

   Replaces the old `RunPod control panel` section of style.css, which is
   neutralised in place (wrapped in an @supports block that never matches).
   Everything here is scoped to `.runpod-panel` and drawn from the Standard
   tokens in css/slate.css — no hexes. Status colours appear only as a 6px
   dot plus coloured text, with two thin exceptions that carry state on a
   pod row: a 3px left edge and a 2px progress line.

   Local tokens (not in slate.css):
     --gp-mono-data  data mono colour (a touch brighter than text-2)
   ============================================================ */

.runpod-panel {
    --gp-mono-data: oklch(0.85 0.005 250);
    --gp-state-boot: var(--sl-accent);
    --gp-state-gen: var(--sl-success);
    --gp-state-idle: var(--sl-warning);
    --gp-state-dark: var(--sl-error);
    --gp-state-off: oklch(0.5 0.005 250);
    /* Retained for dock.css, which still reads it for its badge. */
    --rp-mono: var(--sl-font-mono);

    position: relative;
    flex-shrink: 0;
    width: 520px; min-width: 320px; max-width: 55vw;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--sl-panel);
    border-left: 1px solid var(--sl-border);
    color: var(--sl-text-1);
    font-family: var(--sl-font-ui);
    font-size: 13px; line-height: 1.5;
}
/* The dock hosts the panel as a full-height item; the old section forced this
   with !important and the dock rules in dock.css still rely on it. */
.runpod-panel {
    max-height: none !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.runpod-panel button { font-family: inherit; }
.runpod-panel .rp-mono { font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums; }
.runpod-panel .rp-i { display: block; flex: none; }
.runpod-panel .rp-grow { flex: 1 1 auto; min-width: 0; }

.rp-resize-handle-left {
    position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    cursor: ew-resize; z-index: 5;
}
.rp-resize-handle-left:hover { background: var(--sl-accent-line); }

@keyframes rp-spin { to { transform: rotate(360deg); } }
@keyframes rp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.runpod-panel .rp-spin { animation: rp-spin 0.7s linear; }
.runpod-panel .rp-pulse.rp-dot,
.runpod-panel .rp-pulse.sl-status::before { animation: rp-pulse 1.6s ease-in-out infinite; }

/* ---- header ------------------------------------------------ */
.runpod-panel .rp-head {
    flex: none; display: flex; align-items: center; gap: 9px;
    padding: 10px 10px 8px 14px;
}
.runpod-panel .rp-head-mark { display: inline-flex; color: var(--sl-link); }
.runpod-panel .rp-title { font-size: 14px; font-weight: 700; letter-spacing: -0.005em; }
.runpod-panel .rp-bill { font-size: 11.5px; }
.runpod-panel .rp-head-acts { margin-left: auto; display: flex; gap: 2px; }

/* icon buttons: 28px quiet, tooltip via title */
.runpod-panel .rp-ico {
    width: 28px; height: 28px; flex: none; padding: 0; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: var(--sl-r-6); background: transparent;
    color: var(--sl-text-3); cursor: pointer; text-decoration: none;
}
.runpod-panel .rp-ico:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.runpod-panel .rp-ico:focus-visible,
.runpod-panel button:focus-visible,
.runpod-panel [role="radio"]:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 1px; }

.runpod-panel .rp-info {
    display: inline-flex; align-items: center; color: var(--sl-text-3);
    cursor: help; vertical-align: -1px;
}
.runpod-panel .rp-info:hover,
.runpod-panel .rp-info.is-active { color: var(--sl-text-1); }
.runpod-panel .rp-info { cursor: pointer; border-radius: 50%; }
.runpod-panel .rp-info:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; }

/* The info popover (one per page, on <body>): the Standard's menu surface. */
.rp-info-pop {
    position: fixed; z-index: 10400; display: none; box-sizing: border-box;
    max-width: 280px; padding: 9px 11px;
    background: var(--sl-raised); border: 1px solid var(--sl-line-pop); border-radius: var(--sl-r-10);
    box-shadow: var(--sl-shadow-pop);
    font-family: var(--sl-font-ui); font-size: 12px; line-height: 1.5; color: var(--sl-text-2);
    text-wrap: pretty; pointer-events: auto;
}
.rp-info-pop.is-open { display: block; animation: rp-info-in 120ms ease-out; }
@keyframes rp-info-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rp-info-pop.is-open { animation: none; } }

/* ---- money strip: NOW / TODAY / IDLE WASTE / PER GEN ------- */
.runpod-panel .rp-stats {
    flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--sl-app);
    border-top: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-stat {
    min-width: 0; padding: 8px 12px;
    display: flex; flex-direction: column; gap: 3px;
    border-left: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-stat:first-child { border-left: 0; }
.runpod-panel .rp-stat-k {
    font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--sl-text-3); white-space: nowrap;
}
.runpod-panel .rp-stat-v {
    font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums;
    font-size: 13.5px; font-weight: 500; color: var(--sl-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.runpod-panel .rp-stat-warn { color: var(--sl-warning); }

/* today's spend against the daily cap: a 2px line under the strip */
.runpod-panel .rp-budget {
    flex: none; height: 2px; background: var(--sl-app);
    border-bottom: 1px solid var(--sl-hairline); overflow: hidden;
}
.runpod-panel .rp-budget-fill { display: block; height: 100%; background: var(--sl-accent-line); transition: width 0.4s ease; }
.runpod-panel .rp-budget-hot { background: var(--sl-warning); }

/* ---- tabs -------------------------------------------------- */
.runpod-panel .rp-tabs {
    flex: none; flex-wrap: nowrap; gap: 0 20px;
    padding: 10px 14px 0;
}
.runpod-panel .rp-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 1px 10px; font-size: 12.5px;
}

/* ---- body + sections --------------------------------------- */
.runpod-panel .rp-body {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column;
    padding: 12px 14px 18px;
}
.runpod-panel .rp-sect {
    flex: none; display: flex; align-items: center; gap: 8px;
    min-height: 24px; margin: 16px 0 6px;
}
.runpod-panel .rp-body > .rp-sect:first-child,
.runpod-panel .rp-body > .rp-busy + .rp-sect,
.runpod-panel .rp-group > .rp-sect:first-child { margin-top: 0; }
.runpod-panel .rp-sect-k {
    font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--sl-text-3); white-space: nowrap;
}
.runpod-panel .rp-sect-n { font-size: 11.5px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-rule { flex: 1; }
.runpod-panel .rp-sect-acts { display: inline-flex; align-items: center; gap: 12px; }
.runpod-panel .rp-group { flex: none; display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.runpod-panel .rp-body > .rp-group:first-child { margin-top: 0; }

/* inline text actions */
.runpod-panel .rp-link {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 11.5px; font-weight: 600; color: var(--sl-link); white-space: nowrap;
}
.runpod-panel .rp-link:hover { color: var(--sl-link-hover); }
.runpod-panel .rp-link-danger { color: var(--sl-danger-text); }
.runpod-panel .rp-link-danger:hover { color: oklch(0.85 0.1 25); }

.runpod-panel .rp-dim { color: var(--sl-text-3); font-size: 12px; line-height: 1.5; }
.runpod-panel .rp-bright { color: var(--sl-text-1); }
.runpod-panel .rp-hot, .runpod-panel .rp-warnc { color: var(--sl-warning); }
.runpod-panel .rp-good { color: var(--sl-success); }
.runpod-panel .rp-badc { color: var(--sl-error); }
.runpod-panel .rp-on { color: var(--sl-text-1); }
.runpod-panel .rp-caption { font-size: 11px; line-height: 1.45; color: var(--sl-text-3); }

.runpod-panel .rp-blank {
    flex: none; padding: 16px 14px; text-align: center;
    border: 1px dashed var(--sl-border); border-radius: var(--sl-r-12);
    font-size: 12px; line-height: 1.5; color: var(--sl-text-3); text-wrap: pretty;
}
.runpod-panel .rp-blank-inline { padding: 0; border: 0; text-align: left; }

/* ---- buttons (legacy class names, Standard look) ----------- */
.runpod-panel .rp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--sl-h); padding: 0 12px; box-sizing: border-box;
    border-radius: var(--sl-r-8); border: 1px solid oklch(1 0 0 / 0.1);
    background: var(--sl-control); color: var(--sl-text-1);
    font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.runpod-panel .rp-btn:hover { background: var(--sl-control-hover); border-color: oklch(1 0 0 / 0.2); }
.runpod-panel .rp-btn-sm { height: var(--sl-h-sm); padding: 0 10px; font-size: 11.5px; }
.runpod-panel .rp-btn-lg { height: var(--sl-h-lg); padding: 0 15px; font-size: 12.5px; }
.runpod-panel .rp-btn-primary {
    border: 0; background: var(--sl-accent); color: var(--sl-on-accent); font-weight: 700;
    padding: 0 14px;
}
.runpod-panel .rp-btn-primary:hover { background: var(--sl-accent); filter: brightness(1.07); }
.runpod-panel .rp-btn[disabled] { opacity: 0.45; cursor: default; filter: none; }

/* segmented controls — 2-4 options, active grey */
.runpod-panel .rp-seg, .runpod-panel .rp-opts {
    display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 3px; box-sizing: border-box;
    background: var(--sl-app); border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8);
}
.runpod-panel .rp-seg-wrap, .runpod-panel .rp-opts-wrap { flex-wrap: wrap; }
.runpod-panel .rp-seg-b, .runpod-panel .rp-opt {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 22px; padding: 0 9px; border: 0; border-radius: var(--sl-r-6);
    background: transparent; color: oklch(0.62 0.005 250);
    font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.runpod-panel .rp-opt { height: 24px; }
.runpod-panel .rp-seg-b:hover, .runpod-panel .rp-opt:hover { color: var(--sl-text-1); }
.runpod-panel .rp-seg-on, .runpod-panel .rp-opt-on { background: var(--sl-segment-on); color: var(--sl-text-1); }
.runpod-panel .rp-seg-b.rp-mono, .runpod-panel .rp-opt.rp-mono { font-size: 11px; }
.runpod-panel .rp-chip-n {
    font-family: var(--sl-font-mono); font-size: 10.5px; font-weight: 500; color: var(--sl-text-3);
}

/* status boxes */
.runpod-panel .rp-busy {
    flex: none; margin-bottom: 10px;
    font-size: 12px; color: var(--sl-link);
    display: flex; align-items: center; gap: 6px;
}
.runpod-panel .rp-busy::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    animation: rp-pulse 1.2s ease-in-out infinite;
}
.runpod-panel .rp-err {
    flex: none; margin-bottom: 10px; padding: 10px 12px;
    border: 1px solid var(--sl-danger-line); border-radius: var(--sl-r-12);
    font-size: 12px; line-height: 1.5; color: var(--sl-danger-text); white-space: pre-wrap; text-wrap: pretty;
}
.runpod-panel .rp-cap {
    flex: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    margin-bottom: 12px; padding: 12px 14px; border-radius: var(--sl-r-12);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
    font-size: 12px; line-height: 1.5; color: var(--sl-text-2); text-wrap: pretty;
}
.runpod-panel .rp-cap p { margin: 0; }
.runpod-panel .rp-cap-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--sl-warning);
}
.runpod-panel .rp-cap-head::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.runpod-panel .rp-cap-acts { display: flex; gap: 8px; }

/* the no-key screen */
.runpod-panel .rp-empty {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 24px 6px; color: var(--sl-text-2); line-height: 1.55;
}
.runpod-panel .rp-empty p { margin: 0; font-size: 13px; text-wrap: pretty; }
.runpod-panel .rp-empty .rp-empty-t { font-size: 13.5px; font-weight: 600; color: var(--sl-text-1); }
.runpod-panel .rp-empty-ic { color: var(--sl-text-3); display: inline-flex; }

/* ---- dots -------------------------------------------------- */
.runpod-panel .rp-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--gp-state-off); }
.runpod-panel .rp-dot-gen, .runpod-panel .rp-dot-ok { background: var(--gp-state-gen); }
.runpod-panel .rp-dot-idle, .runpod-panel .rp-dot-wait, .runpod-panel .rp-dot-queued { background: var(--gp-state-idle); }
.runpod-panel .rp-dot-boot { background: var(--gp-state-boot); }
.runpod-panel .rp-dot-dark, .runpod-panel .rp-dot-bad { background: var(--gp-state-dark); }
.runpod-panel .rp-dot-paused, .runpod-panel .rp-dot-off { background: var(--gp-state-off); }

/* ---- pods: 32px table rows --------------------------------- */
.runpod-panel .rp-pods {
    flex: none; max-height: 262px; overflow-y: auto;
    border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8);
}
.runpod-panel .rp-pods-empty { border: 0; overflow: visible; max-height: none; }
.runpod-panel .rp-pod {
    --gp-state: var(--gp-state-off);
    position: relative;
    display: grid; grid-template-columns: 7px minmax(48px, auto) minmax(0, 1fr) auto 40px auto;
    align-items: center; gap: 8px;
    height: 32px; padding: 0 2px 0 11px; box-sizing: border-box;
    background: var(--sl-card);
    border-top: 1px solid oklch(1 0 0 / 0.05);
    box-shadow: inset 3px 0 0 var(--gp-state);
}
.runpod-panel .rp-pod:first-child { border-top: 0; }
.runpod-panel .rp-pod:hover { background: var(--sl-row-hover); }
.runpod-panel .rp-pod-gen { --gp-state: var(--gp-state-gen); }
.runpod-panel .rp-pod-boot { --gp-state: var(--gp-state-boot); }
.runpod-panel .rp-pod-idle { --gp-state: var(--gp-state-idle); }
.runpod-panel .rp-pod-dark { --gp-state: var(--gp-state-dark); }
.runpod-panel .rp-pod .rp-dot { width: 7px; height: 7px; background: var(--gp-state); }
.runpod-panel .rp-pod-name {
    font-family: var(--sl-font-mono); font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px;
}
.runpod-panel .rp-pod-desc {
    min-width: 0; display: flex; align-items: center; gap: 0;
    font-size: 11.5px; color: var(--sl-text-2);
    white-space: nowrap; overflow: hidden;
}
.runpod-panel .rp-pod-state { flex: none; font-weight: 600; color: var(--gp-state); }
.runpod-panel .rp-pod-paused .rp-pod-state { color: var(--sl-text-2); }
.runpod-panel .rp-pod-desc-t, .runpod-panel .rp-pod-desc-m {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.runpod-panel .rp-pod-desc-t { flex: 0 1 auto; }
.runpod-panel .rp-pod-desc-t:not(:empty)::before,
.runpod-panel .rp-pod-desc-m:not(:empty)::before { content: " · "; white-space: pre; color: var(--sl-text-3); }
.runpod-panel .rp-pod-desc-m { flex: 0 0 auto; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-pod-desc .rp-info { margin-left: 4px; }
.runpod-panel .rp-pod-cost {
    font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums;
    font-size: 11.5px; text-align: right; white-space: nowrap;
}
.runpod-panel .rp-pod-cost-off { color: var(--sl-text-3); }
.runpod-panel .rp-pod-up {
    font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums;
    font-size: 11px; color: var(--sl-text-3); text-align: right; white-space: nowrap;
}
.runpod-panel .rp-pod-acts { display: inline-flex; align-items: center; gap: 2px; }
/* terminate: outlined; armed = "Terminate now" */
.runpod-panel .rp-pod-acts .rp-term {
    width: 28px; height: 28px; border-radius: var(--sl-r-6);
    border: 1px solid oklch(1 0 0 / 0.1); color: var(--sl-text-2);
}
.runpod-panel .rp-pod-acts .rp-term:hover {
    border-color: var(--sl-danger-line); background: var(--sl-danger-wash); color: var(--sl-danger-text);
}
.runpod-panel .rp-pod-acts .rp-term.is-armed {
    border-color: var(--sl-danger-line); background: var(--sl-danger-wash); color: var(--sl-danger-text);
}
.runpod-panel .rp-keep {
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--sl-r-6);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--sl-text-3); cursor: pointer;
}
.runpod-panel .rp-keep:hover { background: var(--sl-wash); color: var(--sl-text-1); }
/* the 2px progress line under a pod */
.runpod-panel .rp-pod-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.runpod-panel .rp-pod-bar-f { display: block; height: 100%; width: 0; background: var(--gp-state); transition: width 0.4s linear; }
.runpod-panel .rp-bar-dark, .runpod-panel .rp-bar-paused { background: transparent; }

/* the empty state: one recommended card, one Start */
.runpod-panel .rp-rec {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 10px 10px 12px; border-radius: var(--sl-r-12);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-rec .rp-dot { width: 7px; height: 7px; }
.runpod-panel .rp-rec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.runpod-panel .rp-rec-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.runpod-panel .rp-rec-name { font-family: var(--sl-font-mono); font-size: 12.5px; font-weight: 600; }
.runpod-panel .rp-rec-meta { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-rec-why { font-size: 11.5px; line-height: 1.45; color: var(--sl-text-2); text-wrap: pretty; }
.runpod-panel .rp-rec-dead { margin-top: 4px; font-size: 11.5px; font-weight: 500; }
.runpod-panel .rp-rec-acts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.runpod-panel .rp-rec-change { color: var(--sl-text-2); font-size: 11px; }
.runpod-panel .rp-rec-change:hover { color: var(--sl-text-1); }

/* ---- jobs: 28px rows --------------------------------------- */
.runpod-panel .rp-jobs {
    flex: none; max-height: 172px; overflow-y: auto;
    border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8);
}
.runpod-panel .rp-job {
    display: flex; align-items: center; gap: 10px;
    height: 28px; padding: 0 2px 0 12px; box-sizing: border-box;
    background: var(--sl-card); border-top: 1px solid oklch(1 0 0 / 0.05);
}
.runpod-panel .rp-job:first-child { border-top: 0; }
.runpod-panel .rp-job:hover { background: var(--sl-row-hover); }
.runpod-panel .rp-job-n {
    flex: 1; min-width: 0; font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.runpod-panel .rp-job-queued .rp-job-n { color: var(--sl-text-2); font-weight: 500; }
.runpod-panel .rp-job-g, .runpod-panel .rp-job-m {
    flex: none; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); white-space: nowrap;
}
.runpod-panel .rp-job-x { width: 24px; height: 24px; }
.runpod-panel .rp-job-x:hover { color: var(--sl-danger-text); background: var(--sl-danger-wash); }

/* ---- activity ---------------------------------------------- */
.runpod-panel .rp-activity {
    flex: none; display: flex; flex-direction: column; gap: 10px;
    padding: 10px 12px; border-radius: var(--sl-r-12);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-track { display: flex; flex-direction: column; gap: 6px; }
.runpod-panel .rp-track-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.runpod-panel .rp-track-n { flex: none; font-family: var(--sl-font-mono); font-size: 12px; font-weight: 600; color: var(--sl-text-2); }
.runpod-panel .rp-track-n.rp-on { color: var(--sl-text-1); }
.runpod-panel .rp-track-note { font-size: 11.5px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-track-b { flex: none; font-family: var(--sl-font-mono); font-size: 11.5px; }
.runpod-panel .rp-strip {
    display: flex; height: 10px; border-radius: 3px; overflow: hidden;
    background: oklch(1 0 0 / 0.05);
}
.runpod-panel .rp-cell { flex: 1; min-width: 1px; }
.runpod-panel .rp-cell-gen { background: var(--gp-state-gen); }
.runpod-panel .rp-cell-idle { background: var(--gp-state-idle); }
.runpod-panel .rp-cell-boot { background: var(--gp-state-boot); }
.runpod-panel .rp-cell-paused { background: oklch(1 0 0 / 0.1); }
.runpod-panel .rp-cell-off { background: transparent; }
.runpod-panel .rp-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-legend-i { display: inline-flex; align-items: center; gap: 5px; }
.runpod-panel .rp-legend-i .rp-cell { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.runpod-panel .rp-legend-n { white-space: nowrap; }

/* ---- Today breakdown (the old Overview) -------------------- */
.runpod-panel .rp-bar-row { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.runpod-panel .rp-bar-k { flex: none; min-width: 64px; font-family: var(--sl-font-mono); font-size: 11.5px; font-weight: 600; color: var(--sl-text-2); }
.runpod-panel .rp-fail-k { flex: 1; min-width: 0; font-size: 12px; color: var(--sl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-bar { flex: 1; height: 6px; border-radius: 3px; background: oklch(1 0 0 / 0.06); overflow: hidden; }
.runpod-panel .rp-bar-sm { flex: none; width: 96px; }
.runpod-panel .rp-bar-f { display: block; height: 100%; border-radius: 3px; background: var(--gp-state-idle); }
.runpod-panel .rp-bar-hot { background: var(--gp-state-idle); }
.runpod-panel .rp-bar-cool { background: var(--sl-accent); }
.runpod-panel .rp-bar-bad { background: var(--sl-error); }
.runpod-panel .rp-bar-v, .runpod-panel .rp-bar-n {
    flex: none; min-width: 44px; text-align: right;
    font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--sl-text-2);
}
.runpod-panel .rp-bar-n { min-width: 20px; }
.runpod-panel .rp-bar-v2 { min-width: 52px; }
.runpod-panel .rp-tp-wrap {
    border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8); overflow: hidden;
}
.runpod-panel .rp-tp-head, .runpod-panel .rp-tp {
    display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr));
    gap: 6px; align-items: center; padding: 0 12px;
}
.runpod-panel .rp-tp-head {
    height: 28px; background: var(--sl-panel);
    font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--sl-text-3);
}
.runpod-panel .rp-tp { height: 32px; background: var(--sl-card); border-top: 1px solid oklch(1 0 0 / 0.05); }
.runpod-panel .rp-tp span, .runpod-panel .rp-tp-head span { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-tp .rp-c1, .runpod-panel .rp-tp-head .rp-c1 { text-align: left; }
.runpod-panel .rp-tp span { font-family: var(--sl-font-mono); font-size: 11.5px; color: var(--sl-text-2); }
.runpod-panel .rp-tp .rp-bright { color: var(--sl-text-1); }
.runpod-panel .rp-failbox {
    flex: none; display: flex; flex-direction: column; gap: 6px; margin-top: 18px;
    padding: 12px 14px; border-radius: var(--sl-r-12);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-failbox-k {
    font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--sl-text-3);
}

/* ---- console: Monitor's pinned footer ---------------------- */
.runpod-panel .rp-console {
    flex: none; display: flex; flex-direction: column;
    border-top: 1px solid oklch(1 0 0 / 0.07); background: var(--sl-app);
}
.runpod-panel .rp-console-bar {
    display: flex; align-items: center; gap: 8px; width: 100%;
    height: 36px; padding: 0 12px 0 14px; box-sizing: border-box;
    background: transparent; border: 0; color: var(--sl-text-3); cursor: pointer; text-align: left;
}
.runpod-panel .rp-console-bar:hover { background: var(--sl-wash); }
.runpod-panel .rp-console-ic { display: inline-flex; color: var(--sl-text-2); }
.runpod-panel .rp-console-title { font-size: 12px; font-weight: 600; color: var(--sl-text-1); }
.runpod-panel .rp-console-err { font-size: 11.5px; font-weight: 500; color: var(--sl-text-3); }
.runpod-panel .rp-console-err.is-error { color: var(--sl-error); font-weight: 600; }
.runpod-panel .rp-console-tools {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 0 12px 8px 14px;
}
.runpod-panel .rp-console-tools .rp-seg { background: var(--sl-panel); }
.runpod-panel .rp-console-copy { color: var(--sl-text-2); }
.runpod-panel .rp-console-copy:hover { color: var(--sl-text-1); }
.runpod-panel .rp-console-body {
    max-height: 220px; overflow-y: auto;
    padding: 0 12px 12px 14px;
    display: flex; flex-direction: column;
}
.runpod-panel .rp-console-body[hidden] { display: none; }
.runpod-panel .rp-console-body .rp-blank { padding: 4px 0; border: 0; text-align: left; font-family: var(--sl-font-ui); }
.runpod-panel .rp-log {
    flex: none; display: flex; align-items: baseline; gap: 8px; min-width: 0;
    padding: 1px 4px; border-radius: 4px;
    font-family: var(--sl-font-mono); font-size: 11.5px; line-height: 1.7;
}
.runpod-panel .rp-log:hover { background: var(--sl-wash); }
.runpod-panel button.rp-log { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.runpod-panel .rp-log-group .rp-log-x { color: oklch(0.78 0.005 250); }
.runpod-panel .rp-log-group > .rp-i { align-self: center; color: var(--sl-text-3); }
.runpod-panel .rp-log-nested { padding-left: 18px; }
.runpod-panel .rp-log-t { flex: none; color: var(--sl-text-3); }
.runpod-panel .rp-log-t-approx { font-style: italic; }
.runpod-panel .rp-log-p {
    flex: 0 0 auto; max-width: 72px; font-weight: 600; color: var(--sl-text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.runpod-panel .rp-log-i { flex: none; font-size: 10.5px; color: var(--sl-text-3); }
.runpod-panel .rp-log-i:empty { display: none; }
.runpod-panel .rp-log-d { align-self: center; }
.runpod-panel .rp-log-d-gen { background: var(--sl-success); }
.runpod-panel .rp-log-d-error { background: var(--sl-error); }
.runpod-panel .rp-log-d-event { background: var(--sl-accent); }
.runpod-panel .rp-log-d-info { background: var(--gp-state-off); }
.runpod-panel .rp-log-node { flex: none; font-family: var(--sl-font-ui); font-size: 11px; font-weight: 600; color: var(--sl-text-1); }
.runpod-panel .rp-log-x {
    flex: 1 1 auto; min-width: 0; color: var(--sl-text-1);
    white-space: pre-wrap; word-break: break-word;
}
.runpod-panel .rp-log-error .rp-log-x { color: var(--sl-error); }
.runpod-panel .rp-log-info .rp-log-x { color: var(--sl-text-2); }
.runpod-panel .rp-log-foot {
    margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--sl-hairline);
    font-size: 11px; line-height: 1.45; color: var(--sl-text-3);
}

/* ---- Benchmarks -------------------------------------------- */
.runpod-panel .rp-bpick { flex: none; display: flex; gap: 8px; }
.runpod-panel .rp-bpick > .rp-dd { flex: 1; min-width: 0; }
.runpod-panel .rp-bview { flex: none; display: flex; align-items: center; gap: 8px; margin: 14px 0 14px; }
.runpod-panel .rp-bview-n { font-size: 11px; color: var(--sl-text-3); white-space: nowrap; }

.runpod-panel .rp-dd { position: relative; min-width: 0; }
.runpod-panel .rp-dd-btn {
    width: 100%; display: flex; align-items: center; gap: 8px;
    height: var(--sl-h); padding: 0 10px; box-sizing: border-box;
    border-radius: var(--sl-r-8); border: 1px solid oklch(1 0 0 / 0.1);
    background: var(--sl-control); color: var(--sl-text-1);
    font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left;
}
.runpod-panel .rp-dd-btn:hover { background: var(--sl-control-hover); }
.runpod-panel .rp-dd.is-open > .rp-dd-btn { border-color: var(--sl-accent-line); }
.runpod-panel .rp-dd-btn > .rp-i { color: var(--sl-text-3); }
.runpod-panel .rp-dd-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-dd-label.rp-mono { font-size: 12px; }
.runpod-panel .rp-dd-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.runpod-panel .rp-dd-sm .rp-dd-btn { height: 24px; margin-top: 4px; font-size: 11.5px; background: var(--sl-app); border-color: var(--sl-hairline); color: var(--sl-text-2); }

.runpod-panel .rp-pop {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
    width: 224px; max-height: min(320px, 60vh); overflow-y: auto;
}
.runpod-panel .rp-pop-right { left: auto; right: 0; }
.runpod-panel .rp-pop-search {
    display: flex; align-items: center; gap: 8px;
    height: var(--sl-h-sm); padding: 0 9px; margin-bottom: 4px; box-sizing: border-box;
    border-radius: var(--sl-r-6); background: var(--sl-panel); border: 1px solid var(--sl-border);
    color: var(--sl-text-3);
}
.runpod-panel .rp-pop-search input {
    flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
    font-family: var(--sl-font-ui); font-size: 12px; color: var(--sl-text-1);
}
.runpod-panel .rp-pop-search input::placeholder { color: oklch(0.5 0.005 250); }
.runpod-panel .rp-pop-none { padding: 6px 9px; font-size: 11.5px; color: var(--sl-text-3); }
.runpod-panel .rp-menu-item.is-dim .rp-menu-l { color: var(--sl-text-2); }
.runpod-panel .rp-menu-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-menu-check { width: 12px; flex: none; display: inline-flex; color: var(--sl-link); }

/* Simple */
.runpod-panel .rp-simple {
    flex: none; padding: 16px; border-radius: var(--sl-r-12);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-simple-top { display: flex; align-items: center; gap: 8px; }
.runpod-panel .rp-simple-k { flex: 1; min-width: 0; font-size: 11.5px; color: var(--sl-text-2); }
.runpod-panel .rp-simple-v { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.runpod-panel .rp-simple-big { font-family: var(--sl-font-mono); font-size: 30px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.runpod-panel .rp-simple-u { font-size: 12px; color: var(--sl-text-3); }
.runpod-panel .rp-simple-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-simple-s { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.runpod-panel .rp-simple-sk { font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-simple-sv { font-family: var(--sl-font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.runpod-panel .rp-pair2 {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
    border-radius: var(--sl-r-12); overflow: hidden; background: var(--sl-hairline);
}
.runpod-panel .rp-pair2-c { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--sl-card); }
.runpod-panel .rp-pair2-v { font-family: var(--sl-font-mono); font-size: 14px; }
.runpod-panel .rp-pair2-n { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-rows { border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-12); overflow: hidden; }
.runpod-panel .rp-row {
    display: flex; align-items: center; gap: 10px;
    min-height: 36px; padding: 0 12px; box-sizing: border-box;
    background: var(--sl-card); border-top: 1px solid oklch(1 0 0 / 0.05);
}
.runpod-panel .rp-row:first-child { border-top: 0; }
.runpod-panel .rp-row-k { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-row-v { flex: none; font-family: var(--sl-font-mono); font-size: 12px; font-weight: 600; }
.runpod-panel .rp-row-n { flex: none; width: 56px; text-align: right; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-noruns {
    flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 16px; border-radius: var(--sl-r-12);
    background: var(--sl-card); border: 1px dashed var(--sl-border-strong);
}
.runpod-panel .rp-noruns-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.runpod-panel .rp-noruns p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--sl-text-2); }
.runpod-panel .rp-noruns .rp-btn { margin-top: 6px; }

/* Run a test clip (Benchmarks > Simple) */
.runpod-panel .rp-tc-idle { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.runpod-panel .rp-tc-note { display: flex; align-items: center; gap: 6px; }
.runpod-panel .rp-tc {
    flex: none; align-self: stretch; display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 10px; padding: 14px; border-radius: var(--sl-r-12);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-noruns .rp-tc { margin: 6px 0 0; background: var(--sl-app); }
.runpod-panel .rp-tc-confirm { border-color: oklch(0.72 0.13 230 / 0.45); }
.runpod-panel .rp-tc-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.runpod-panel .rp-tc-h .rp-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-tc-sub { font-size: 11.5px; color: var(--sl-text-2); }
.runpod-panel .rp-tc-rows { border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8); overflow: hidden; }
.runpod-panel .rp-tc-row {
    display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 10px;
    border-top: 1px solid oklch(1 0 0 / 0.05); font-size: 12px;
}
.runpod-panel .rp-tc-row:first-child { border-top: 0; }
.runpod-panel .rp-tc-k { width: 48px; flex: none; color: var(--sl-text-3); }
.runpod-panel .rp-tc-v { flex: 1; min-width: 0; font-family: var(--sl-font-mono); font-size: 11.5px; color: var(--sl-text-2); overflow-wrap: anywhere; }
.runpod-panel .rp-tc-usd { flex: none; font-family: var(--sl-font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.runpod-panel .rp-tc-total { background: oklch(1 0 0 / 0.03); font-weight: 600; }
.runpod-panel .rp-tc-total .rp-tc-k { color: var(--sl-text-1); }
.runpod-panel .rp-tc-keep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; cursor: pointer; }
.runpod-panel .rp-tc-keep-box { padding: 0; }
.runpod-panel .rp-tc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.runpod-panel .rp-tc-clock { font-family: var(--sl-font-mono); font-size: 12px; font-weight: 500; color: var(--sl-text-2); }
.runpod-panel .rp-tc-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.runpod-panel .rp-tc-step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sl-text-3); }
.runpod-panel .rp-tc-step.is-on { color: var(--sl-text-1); font-weight: 600; }
.runpod-panel .rp-tc-step.is-done { color: var(--sl-text-2); }
.runpod-panel .rp-tc-step-dot {
    width: 14px; height: 14px; flex: none; border-radius: 50%; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid oklch(1 0 0 / 0.18);
}
.runpod-panel .rp-tc-step.is-on .rp-tc-step-dot { border-color: var(--sl-accent); }
.runpod-panel .rp-tc-step.is-done .rp-tc-step-dot { border: 0; background: var(--sl-success); color: var(--sl-on-accent); }
.runpod-panel .rp-tc-video {
    display: block; width: 100%; max-height: 260px; border-radius: var(--sl-r-8);
    background: var(--sl-app); object-fit: contain;
}
.runpod-panel .rp-tc-grid { margin-top: 2px; }
.runpod-panel .rp-tc-err { font-size: 12px; line-height: 1.45; color: var(--sl-danger-text); overflow-wrap: anywhere; }
@media (max-width: 420px) {
    .runpod-panel .rp-tc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Compare */
.runpod-panel .rp-cmp-pick { display: grid; gap: 6px; align-items: start; }
.runpod-panel .rp-cmp-col { min-width: 0; }
.runpod-panel .rp-cmp-row { display: flex; align-items: stretch; min-width: 0; }
.runpod-panel .rp-cmp-row > .rp-dd { flex: 1; min-width: 0; }
.runpod-panel .rp-cmp-row .rp-dd-btn { padding: 0 6px 0 9px; gap: 6px; }
.runpod-panel .rp-cmp-row .rp-dd-btn > .rp-i:first-of-type:not(:last-child) { display: none; }
.runpod-panel .rp-cmp-x {
    flex: none; width: 24px; margin-left: -1px; padding: 0; border: 1px solid oklch(1 0 0 / 0.1);
    border-radius: 0 var(--sl-r-8) var(--sl-r-8) 0; background: var(--sl-control);
    color: var(--sl-text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.runpod-panel .rp-cmp-row > .rp-dd + .rp-cmp-x { margin-left: 0; }
.runpod-panel .rp-cmp-row:has(.rp-cmp-x) .rp-dd-btn { border-radius: var(--sl-r-8) 0 0 var(--sl-r-8); }
.runpod-panel .rp-cmp-x:hover { color: var(--sl-text-1); }
.runpod-panel .rp-cmp-add {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: var(--sl-h); padding: 0 10px; border-radius: var(--sl-r-8);
    border: 1px dashed var(--sl-border-strong); background: transparent;
    color: var(--sl-link); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.runpod-panel .rp-cmp-add:hover { background: var(--sl-accent-tint); }
.runpod-panel .rp-cmp-t { border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-12); overflow: hidden; }
.runpod-panel .rp-cmp-h, .runpod-panel .rp-cmp-r { display: grid; gap: 8px; align-items: center; padding: 0 12px; }
.runpod-panel .rp-cmp-h { height: 28px; background: var(--sl-panel); }
.runpod-panel .rp-cmp-hc {
    display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0;
    font-family: var(--sl-font-mono); font-size: 9.5px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden;
}
.runpod-panel .rp-cmp-hc > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-cmp-r { min-height: 36px; background: var(--sl-card); border-top: 1px solid oklch(1 0 0 / 0.05); }
.runpod-panel .rp-cmp-k { font-size: 12px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-cmp-v { font-family: var(--sl-font-mono); font-size: 12px; text-align: right; white-space: nowrap; }
.runpod-panel .rp-cmp-v.rp-good { font-weight: 600; }
.runpod-panel .rp-cmp-note { margin-top: 12px; }

/* Advanced (the full analysis) */
.runpod-panel .rp-plot { display: block; width: 100%; height: auto; }
.runpod-panel .rp-plot-grid { stroke: oklch(1 0 0 / 0.06); stroke-width: 1; }
.runpod-panel .rp-plot-lab { fill: var(--sl-text-3); font-family: var(--sl-font-mono); font-size: 9.5px; }
.runpod-panel .rp-plot-fit { stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.9; }
.runpod-panel .rp-plot-pt { stroke-width: 1; }
.runpod-panel .rp-plot-pt-cold { stroke-width: 1.6; }
.runpod-panel .rp-ovl-legend { display: flex; flex-direction: column; gap: 2px; }
.runpod-panel .rp-ovl-row { display: flex; align-items: baseline; gap: 7px; min-width: 0; font-size: 11.5px; }
.runpod-panel .rp-ovl-btn {
    width: 100%; padding: 3px 6px; margin: 0 -6px; border: 0; border-radius: var(--sl-r-6);
    background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.runpod-panel .rp-ovl-btn:hover { background: var(--sl-wash); }
.runpod-panel .rp-ovl-off { opacity: 0.4; }
.runpod-panel .rp-ovl-sw { flex: none; width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.runpod-panel .rp-ovl-g { flex: none; font-family: var(--sl-font-mono); font-weight: 600; color: var(--sl-text-1); }
.runpod-panel .rp-ovl-f { flex: 1; min-width: 0; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-cost {
    display: flex; flex-direction: column; gap: 5px;
    padding: 10px 12px; border-radius: var(--sl-r-8);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-cost-best { box-shadow: inset 3px 0 0 var(--sl-success); }
.runpod-panel .rp-cost-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.runpod-panel .rp-cost-t { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-cost-g { flex: none; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-cost-v { flex: none; font-family: var(--sl-font-mono); font-size: 12px; font-weight: 600; }
.runpod-panel .rp-cost-best .rp-cost-v { color: var(--sl-success); }
.runpod-panel .rp-cost-bar { height: 3px; border-radius: 2px; overflow: hidden; background: oklch(1 0 0 / 0.06); }
.runpod-panel .rp-cost-fill { display: block; height: 100%; background: var(--sl-accent-line); }
.runpod-panel .rp-cost-best .rp-cost-fill { background: var(--sl-success); }
.runpod-panel .rp-cost-sub { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-cost-sub > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runpod-panel .rp-cost-x { flex: none; font-family: var(--sl-font-mono); font-weight: 600; }
.runpod-panel .rp-fac {
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px; border-radius: var(--sl-r-8);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-fac-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.runpod-panel .rp-fac-k { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; }
.runpod-panel .rp-fac-r { flex: none; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-fac-l { display: flex; align-items: baseline; gap: 8px; min-height: 20px; }
.runpod-panel .rp-fac-v { flex: 1; min-width: 0; font-size: 12px; color: var(--sl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-fac-d { flex: none; min-width: 44px; text-align: right; font-family: var(--sl-font-mono); font-size: 12px; font-weight: 600; color: var(--sl-text-2); }
.runpod-panel .rp-fac-down { color: var(--sl-success); }
.runpod-panel .rp-fac-up { color: var(--sl-warning); }
.runpod-panel .rp-fac-u, .runpod-panel .rp-fac-n { flex: none; min-width: 60px; text-align: right; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-fac-note, .runpod-panel .rp-fac-no { margin-top: 4px; font-size: 11px; line-height: 1.45; color: var(--sl-text-3); text-wrap: pretty; }
.runpod-panel .rp-bench {
    flex: none; display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
    padding: 12px; border-radius: var(--sl-r-12);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-bench-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.runpod-panel .rp-bench-t { flex: none; font-size: 13px; font-weight: 600; }
.runpod-panel .rp-bench-n { flex: 1; min-width: 0; font-size: 11px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-bench-m { flex: none; font-family: var(--sl-font-mono); font-size: 12px; font-weight: 600; }
.runpod-panel .rp-bench-fit { font-size: 11px; color: var(--sl-text-3); line-height: 1.45; }
.runpod-panel .rp-ovs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: var(--sl-r-12); overflow: hidden; background: var(--sl-hairline); }
.runpod-panel .rp-ov { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--sl-card); min-width: 0; }
.runpod-panel .rp-ov-k { font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--sl-text-3); }
.runpod-panel .rp-ov-v { font-family: var(--sl-font-mono); font-size: 14px; }
.runpod-panel .rp-ov-n { font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--sl-r-12); background: var(--sl-card); border: 1px solid var(--sl-hairline); }
.runpod-panel .rp-card-k { font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--sl-text-3); display: flex; gap: 6px; align-items: center; }
.runpod-panel .rp-card-v { font-family: var(--sl-font-mono); font-size: 17px; }
.runpod-panel .rp-card-n { font-size: 11.5px; color: var(--sl-text-3); }

/* ---- Setup: numbered boot steps ---------------------------- */
.runpod-panel .rp-steps { padding-top: 14px; }
.runpod-panel .rp-step {
    position: relative; flex: none;
    margin-left: 10px; padding: 0 0 16px 22px;
    border-left: 1px solid var(--sl-border-strong);
}
.runpod-panel .rp-step + .rp-step { padding-top: 14px; border-top: 0; }
.runpod-panel .rp-step + .rp-step::before {
    content: ""; position: absolute; left: 22px; right: 0; top: 0; height: 1px; background: var(--sl-hairline);
}
.runpod-panel .rp-step:last-child { padding-bottom: 4px; }
.runpod-panel .rp-step-head { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 6px; }
.runpod-panel .rp-step-n {
    position: absolute; left: -11px; width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--sl-r-6); background: var(--sl-selected);
    box-shadow: 0 0 0 3px var(--sl-panel);
    font-family: var(--sl-font-mono); font-size: 10.5px; font-weight: 600; color: var(--sl-text-1);
}
.runpod-panel .rp-step-t { font-size: 13px; font-weight: 600; white-space: nowrap; }
.runpod-panel .rp-step-state {
    font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.runpod-panel .rp-step-state.is-warn { color: var(--sl-warning); }
.runpod-panel .rp-step-body { display: flex; flex-direction: column; }
.runpod-panel .rp-step-foot { margin-top: 6px; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-step-ctl { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.runpod-panel .rp-step-ctl > .rp-ico { border: 1px solid oklch(1 0 0 / 0.1); background: var(--sl-app); width: 28px; height: 28px; }
.runpod-panel .rp-step-v { font-family: var(--sl-font-mono); font-size: 12.5px; font-weight: 600; min-width: 36px; text-align: center; }

/* settings rows: label + description left, control right */
.runpod-panel .rp-set {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    padding: 9px 0; border-top: 1px solid oklch(1 0 0 / 0.04);
}
.runpod-panel .rp-step-body > .rp-set:first-child { border-top: 0; padding-top: 4px; }
.runpod-panel .rp-set > .rp-opts, .runpod-panel .rp-set > .rp-step-ctl { margin-left: auto; }
.runpod-panel .rp-set-l { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.runpod-panel .rp-set-t { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.runpod-panel .rp-set-h { font-size: 11.5px; line-height: 1.4; color: var(--sl-text-3); text-wrap: pretty; }
.runpod-panel .rp-set-stack .rp-opts { flex-wrap: wrap; }
.runpod-panel .rp-set-toggle.is-off .rp-opts { opacity: 0.45; }
.runpod-panel .rp-sw.sl-switch { flex: none; }

.runpod-panel .rp-hint {
    display: flex; align-items: center; gap: 6px; padding: 2px 0 6px;
    font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3);
}
.runpod-panel .rp-hint > .rp-i { flex: none; }
.runpod-panel .rp-warn {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 6px 0; padding: 10px 12px; border-radius: var(--sl-r-8);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
    font-size: 12px; line-height: 1.5; color: var(--sl-text-2); text-wrap: pretty;
}
.runpod-panel .rp-warn > .rp-i { color: var(--sl-warning); margin-top: 2px; }
.runpod-panel .rp-warn-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; }

/* step 1: search, filter, and the GPU list */
.runpod-panel .rp-gpu-filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.runpod-panel .rp-gpu-search-wrap { flex: 1; min-width: 0; background: var(--sl-app); cursor: text; }
.runpod-panel .rp-gpu-search-clear {
    flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--sl-text-3); cursor: pointer;
}
.runpod-panel .rp-gpu-search-clear:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.runpod-panel .rp-gpus {
    container-type: inline-size;
    max-height: 300px; overflow-y: auto;
    border: 1px solid oklch(1 0 0 / 0.07); border-radius: var(--sl-r-8);
}
.runpod-panel .rp-gpu-div {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px 5px; background: oklch(0.175 0.004 250);
    border-top: 1px solid oklch(1 0 0 / 0.05);
    font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--sl-text-3);
}
.runpod-panel .rp-gpus > .rp-gpu-div:first-child { border-top: 0; }
.runpod-panel .rp-gpu {
    display: grid; grid-template-columns: 14px minmax(58px, 92px) 44px minmax(0, 1fr) auto 66px;
    align-items: center; gap: 8px;
    height: 34px; padding: 0 10px; box-sizing: border-box;
    border-top: 1px solid oklch(1 0 0 / 0.05); cursor: pointer;
}
.runpod-panel .rp-gpus > .rp-gpu:first-child { border-top: 0; }
.runpod-panel .rp-gpu:hover { background: var(--sl-wash); }
.runpod-panel .rp-gpu-on { background: oklch(0.72 0.13 230 / 0.1); box-shadow: inset 3px 0 0 var(--sl-accent); }
.runpod-panel .rp-gpu-on:hover { background: oklch(0.72 0.13 230 / 0.14); }
.runpod-panel .rp-radio {
    width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
    border: 1.5px solid oklch(1 0 0 / 0.25);
}
.runpod-panel .rp-radio-on { border: 4px solid var(--sl-accent); }
.runpod-panel .rp-gpu-n {
    font-family: var(--sl-font-mono); font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.runpod-panel .rp-gpu-m { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); white-space: nowrap; }
.runpod-panel .rp-gpu-m-bad { color: var(--sl-warning); }
.runpod-panel .rp-gpu-mid { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.runpod-panel .rp-tag {
    flex: none; font-size: 11px; font-weight: 600; white-space: nowrap;
    padding: 1px 6px; border-radius: var(--sl-r-6);
    background: oklch(1 0 0 / 0.07); color: var(--sl-text-2);
}
.runpod-panel .rp-tag-warn { background: transparent; padding: 0; color: var(--sl-warning); }
.runpod-panel .rp-tag-ok { background: transparent; padding: 0; color: var(--sl-success); }
.runpod-panel .rp-gpu-bench {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    height: 22px; padding: 0 7px; border-radius: var(--sl-r-6);
    border: 1px solid oklch(1 0 0 / 0.1); background: transparent;
    color: var(--sl-link); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.runpod-panel .rp-gpu-bench:hover { background: var(--sl-accent-tint); }
.runpod-panel .rp-gpu-a {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--sl-text-3); white-space: nowrap;
}
.runpod-panel .rp-gpu-r { font-family: var(--sl-font-mono); font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; }
.runpod-panel .rp-gpu-more {
    display: flex; align-items: center; gap: 6px; width: 100%;
    height: 30px; padding: 0 10px; border: 0; border-top: 1px solid oklch(1 0 0 / 0.05);
    background: transparent; color: var(--sl-link); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.runpod-panel .rp-gpu-more:hover { background: var(--sl-wash); }
.runpod-panel .rp-gpu-none { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px; font-size: 12px; color: var(--sl-text-2); }
/* a narrow dock: the Benchmarks shortcut drops its label, tags give way first */
@container (max-width: 420px) {
    .runpod-panel .rp-gpu-bench > span { display: none; }
    .runpod-panel .rp-gpu-bench { width: 22px; padding: 0; justify-content: center; }
    .runpod-panel .rp-gpu .rp-tag:not(.rp-tag-warn) { display: none; }
    .runpod-panel .rp-gpu { grid-template-columns: 14px minmax(54px, 84px) 40px minmax(0, 1fr) auto 60px; gap: 6px; }
}
@container (max-width: 340px) {
    .runpod-panel .rp-gpu-a > span:last-child { display: none; }
}

/* the pinned footer: what a start costs, and the one primary button */
.runpod-panel .rp-foot {
    flex: none; display: flex; align-items: center; gap: 12px;
    padding: 10px 12px 10px 14px;
    border-top: 1px solid oklch(1 0 0 / 0.07); background: var(--sl-card);
}
.runpod-panel .rp-foot-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.runpod-panel .rp-foot-v { display: flex; align-items: center; gap: 6px; min-width: 0; }
.runpod-panel .rp-foot-cost { font-family: var(--sl-font-mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.runpod-panel .rp-foot-eta { font-size: 12px; color: var(--sl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.runpod-panel .rp-foot-n { font-size: 11px; line-height: 1.4; color: var(--sl-text-3); text-wrap: pretty; }

/* docked + collapsed: hide the new pinned parts with the rest */
.dock-item.is-collapsed .runpod-panel .rp-console,
.dock-item.is-collapsed .runpod-panel .rp-budget { display: none !important; }

@media (max-width: 620px) {
    .runpod-panel { width: 100%; min-width: 0; max-width: none; }
    .rp-resize-handle-left { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .runpod-panel .rp-spin, .runpod-panel .rp-pulse.rp-dot,
    .runpod-panel .rp-pulse.sl-status::before, .runpod-panel .rp-busy::before { animation: none; }
    .runpod-panel .rp-budget-fill, .runpod-panel .rp-pod-bar-f { transition: none; }
}