/* ============================================================
   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-head { display: flex; align-items: center; }
.runpod-panel .rp-console-head > .rp-console-bar { flex: 1; min-width: 0; }
.runpod-panel .rp-console-head > .rp-console-saved { flex: none; padding: 0 12px 0 4px; }
.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); }
/* The GPU logs kept for this session: Download, Clear. */
.runpod-panel .rp-console-saved { display: inline-flex; align-items: center; gap: 8px; }
.runpod-panel .rp-console-saved[hidden] { display: none; }
.runpod-panel .rp-console-saved .rp-link { color: var(--sl-text-2); }
.runpod-panel .rp-console-saved .rp-link: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);
}
/* Activity / Problems: the creator's plain-language console rows. */
.runpod-panel .rp-say { align-items: flex-start; padding: 4px 4px; font-family: var(--sl-font-ui); font-size: 12px; line-height: 1.45; }
.runpod-panel .rp-say .rp-log-t { font-family: var(--sl-font-mono); font-size: 11px; padding-top: 1px; }
.runpod-panel .rp-say-d { align-self: flex-start; margin-top: 6px; background: var(--gp-state-off); }
.runpod-panel .rp-say-ok .rp-say-d { background: var(--sl-success); }
.runpod-panel .rp-say-error .rp-say-d { background: var(--sl-error); }
.runpod-panel .rp-say-warn .rp-say-d { background: var(--sl-warning); }
.runpod-panel .rp-say-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.runpod-panel .rp-say-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.runpod-panel .rp-say-title { color: var(--sl-text-1); font-weight: 500; word-break: break-word; }
.runpod-panel .rp-say-error .rp-say-title { color: var(--sl-error); }
.runpod-panel .rp-say-warn .rp-say-title { color: var(--sl-warning); }
.runpod-panel .rp-say-info .rp-say-title { color: var(--sl-text-2); font-weight: 400; }
.runpod-panel .rp-say-pod { font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-say-detail { color: var(--sl-text-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runpod-panel .rp-say-hint { color: var(--sl-text-1); font-size: 11.5px; }
.runpod-panel .rp-say-hint::before { content: '→ '; 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-bprice { flex: none; margin: -8px 0 12px; }

.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 3: the LoRA install list */
.runpod-panel .rp-lora-list {
    max-height: 340px; overflow-y: auto; margin: 2px 0 4px;
    border: 1px solid oklch(1 0 0 / 0.07); border-radius: var(--sl-r-8);
}
.runpod-panel .rp-lora-list > .rp-gpu-div:first-child { border-top: 0; }
.runpod-panel .rp-lora {
    display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 9px; align-items: start;
    padding: 7px 10px; border-top: 1px solid oklch(1 0 0 / 0.05); cursor: pointer;
}
.runpod-panel .rp-lora:hover { background: var(--sl-wash); }
.runpod-panel .rp-lora:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: -2px; }
.runpod-panel .rp-lora-box {
    width: 14px; height: 14px; margin-top: 1px; border-radius: 3px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid oklch(1 0 0 / 0.25); color: var(--sl-app);
}
.runpod-panel .rp-lora.is-on .rp-lora-box { background: var(--sl-accent); border-color: var(--sl-accent); }
.runpod-panel .rp-lora-l { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.runpod-panel .rp-lora-n { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.runpod-panel .rp-lora-w { font-size: 11px; line-height: 1.4; color: var(--sl-text-3); text-wrap: pretty; }
.runpod-panel .rp-lora-r {
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
    font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); white-space: nowrap;
}
/* step 3: add a LoRA from a link, and the LoRAs added that way */
.runpod-panel .rp-lora-add-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.runpod-panel .rp-lora-card {
    display: flex; flex-direction: column; gap: 6px;
    margin: 4px 0 6px; padding: 10px 12px; border-radius: var(--sl-r-8);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-lora-card.is-bad { border-color: var(--sl-danger-line); }
.runpod-panel .rp-lora-card .rp-lora-n { flex-wrap: wrap; }
.runpod-panel .rp-lora-checks { display: flex; flex-direction: column; gap: 3px; }
.runpod-panel .rp-lora-check {
    display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; align-items: start;
    font-size: 11.5px; line-height: 1.45; color: var(--sl-text-2); text-wrap: pretty;
}
.runpod-panel .rp-lora-check > span:first-child { display: inline-flex; margin-top: 2px; color: var(--sl-text-3); }
.runpod-panel .rp-lora-check > .rp-good { color: var(--sl-success); }
.runpod-panel .rp-lora-check > .rp-badc { color: var(--sl-error); }
.runpod-panel .rp-lora-check > .rp-warn-t { color: var(--sl-warning); }
.runpod-panel .rp-lora-add-pick {
    max-width: 100%; margin-left: 4px; font: inherit; font-size: 11px;
    background: var(--sl-app); color: var(--sl-text-2);
    border: 1px solid var(--sl-hairline); border-radius: 5px; padding: 2px 4px;
}
.runpod-panel .rp-lora-add-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.runpod-panel .rp-lora-trig { display: flex; flex-direction: column; gap: 3px; }
.runpod-panel .rp-lora-trig-input {
    font: inherit; font-size: 11.5px; color: var(--sl-text);
    background: var(--sl-app); border: 1px solid var(--sl-hairline); border-radius: 5px; padding: 4px 6px;
}
.runpod-panel .rp-lora-trig-input:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 0; }
.runpod-panel .rp-lora-mine { cursor: default; }
.runpod-panel .rp-lora-mine .rp-lora-w { overflow-wrap: anywhere; }

/* 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; }
}

/* ---- Opened over the home screen (js/runpod-panel.js _syncHome) ----------
   The dock lives in #app, under Home (fixed, z 9999). While Home is up it
   becomes a right-hand sheet at the same z — later in the DOM, so it paints
   over Home and still under the z 10000+ dialogs — and Home narrows by its
   width, so Studio and the Renders page lay out beside it rather than under
   it. Only the GPU item shows: the other docked panels belong to the canvas. */
body.pw-gpu-sheet:not(.pw-mobile) .panels-dock {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 9999;
    /* Its top edge is the window's: a tablet app drawn under the status bar
       would put the header's close button where taps never reach the page.
       (The Windows caption strip gets the same treatment in desktop.css.) */
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
}
body.pw-gpu-sheet:not(.pw-mobile) .panels-dock > .dock-item:not(#dock-item-gpu),
body.pw-gpu-sheet:not(.pw-mobile) .panels-dock > .dock-splitter {
    display: none !important;
}
body.pw-gpu-sheet:not(.pw-mobile) #dock-item-gpu {
    flex: 1 1 auto !important;
}
body.pw-gpu-sheet:not(.pw-mobile) .home-screen {
    right: var(--pw-gpu-sheet-w, 420px);
}
/* The agent chat docked too (css/brain.css): the sheet sits left of it instead of
   under it, and Home clears both. More specific than either side's own rule, so
   stylesheet order cannot undo it. Under 900px the chat covers the page instead. */
body.pw-gpu-sheet.pw-agent-open:not(.pw-agent-page):not(.pw-mobile) .panels-dock {
    right: var(--agc-ws-w, var(--agc-dock-w, 400px));
}
body.pw-gpu-sheet.pw-agent-open:not(.pw-agent-page):not(.pw-mobile) .home-screen {
    right: calc(var(--pw-gpu-sheet-w, 420px) + var(--agc-ws-w, var(--agc-dock-w, 400px)));
}
@media (max-width: 900px) {
    body.pw-gpu-sheet.pw-agent-open:not(.pw-agent-page):not(.pw-mobile) .panels-dock { right: 0; }
    body.pw-gpu-sheet.pw-agent-open:not(.pw-agent-page):not(.pw-mobile) .home-screen { right: var(--pw-gpu-sheet-w, 420px); }
}
/* Floating: Home keeps its width, the window just has to clear it. */
body.pw-gpu-home:not(.pw-mobile) #dock-item-gpu.adobe-window-floating {
    z-index: 10000 !important;
}

/* ---- GPU list: three honest stock states ----------------------------------
   Only "Available" is a promise. "Low stock — may be refused" is muted amber
   so it never reads as green; "Sold out" is grey. The refusal box keeps
   RunPod's raw reply folded under "Details". */
.runpod-panel .rp-gpu-a.is-yes { color: var(--sl-success); }
.runpod-panel .rp-gpu-a.is-maybe { color: var(--sl-warning); opacity: 0.8; }
.runpod-panel .rp-gpu-a.is-no { color: var(--sl-text-3); }
.runpod-panel .rp-gpu-div-yes { color: var(--sl-success); }
.runpod-panel .rp-gpu-div-maybe { color: var(--sl-warning); }
.runpod-panel .rp-cap-note { font-size: 11.5px; color: var(--sl-text-3); }
.runpod-panel .rp-cap-raw { font-size: 11px; color: var(--sl-text-3); }
.runpod-panel .rp-cap-raw summary { cursor: pointer; }
.runpod-panel .rp-cap-raw > div {
    margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere;
    font-family: var(--sl-font-mono);
}

/* ---- the simple view (js/gpu-session.js) --------------------
   One flow, top to bottom: how it works, the range, Start, what
   the GPU is doing, recent activity, then the extras. Status keeps
   the panel's rule: a dot, coloured words and a thin bar. */
.runpod-panel .rp-body-simple { container-type: inline-size; gap: 0; }
.runpod-panel .rp-view-simple { margin-left: auto; padding: 0 0 10px; }

/* how it works: choose, Start, generate */
.runpod-panel .rp-flow {
    flex: none; display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
    font-size: 12px; color: var(--sl-text-2);
}
.runpod-panel .rp-flow-i { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.runpod-panel .rp-flow-n {
    width: 20px; height: 20px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 11px var(--sl-font-ui); color: var(--sl-text-2);
    border: 1px solid var(--sl-hairline); background: var(--sl-app);
}
.runpod-panel .rp-flow-i.is-on { color: var(--sl-text-1); font-weight: 600; }
.runpod-panel .rp-flow-i.is-on .rp-flow-n { color: var(--sl-on-accent); background: var(--sl-accent); border-color: transparent; }
.runpod-panel .rp-flow-i.is-done { color: var(--sl-text-2); }
.runpod-panel .rp-flow-i.is-done .rp-flow-n { color: var(--sl-success); border-color: oklch(0.75 0.15 155 / 0.4); }
.runpod-panel .rp-flow-sep { flex: 1; min-width: 10px; height: 1px; background: var(--sl-hairline); }

/* the workflow's memory need */
.runpod-panel .rp-need {
    flex: none; display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
    font-size: 12px; color: var(--sl-text-2);
}
.runpod-panel .rp-need b { font-weight: 700; color: var(--sl-text-1); }

/* the four ranges: two by two, one row when the panel is wide */
.runpod-panel .rp-tiers {
    flex: none; display: grid; gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container (min-width: 760px) {
    .runpod-panel .rp-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.runpod-panel .rp-tier {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 10px; row-gap: 8px; align-items: start; min-width: 0;
    padding: 12px; box-sizing: border-box; text-align: left; cursor: pointer;
    background: var(--sl-card); border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-12);
    color: var(--sl-text-1); transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.runpod-panel .rp-tier:hover { background: var(--sl-row-hover); border-color: oklch(1 0 0 / 0.16); }
.runpod-panel .rp-tier:active { transform: scale(0.98); }
.runpod-panel .rp-tier:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; }
.runpod-panel .rp-tier.is-on {
    border-color: var(--sl-accent); box-shadow: inset 0 0 0 1px var(--sl-accent);
    background: color-mix(in oklch, var(--sl-accent) 10%, var(--sl-card));
}
.runpod-panel .rp-tier.is-empty { opacity: 0.6; }
/* a radio mark: the chosen range is filled */
.runpod-panel .rp-tier-radio {
    width: 16px; height: 16px; margin-top: 1px; flex: none; box-sizing: border-box; border-radius: 50%;
    border: 1.5px solid var(--sl-text-3); background: transparent;
}
.runpod-panel .rp-tier.is-on .rp-tier-radio,
.runpod-panel .rp-tier-radio.is-on { border: 5px solid var(--sl-accent); background: var(--sl-on-accent); }
.runpod-panel .rp-tier-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.runpod-panel .rp-tier-t { font-size: 14px; font-weight: 600; }
.runpod-panel .rp-tier-tag { font-size: 12px; line-height: 1.35; color: var(--sl-text-2); }
.runpod-panel .rp-tier-f { font-size: 11.5px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.runpod-panel .rp-tier-p { grid-column: 2; display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.runpod-panel .rp-tier-pv {
    font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; color: var(--sl-text-1); white-space: nowrap;
}
.runpod-panel .rp-tier-pu { font-size: 11.5px; color: var(--sl-text-2); white-space: nowrap; }

/* the range, folded to one line once Start is pressed */
.runpod-panel .rp-tier-sum {
    flex: none; display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 9px 12px; border-radius: var(--sl-r-8); background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.runpod-panel .rp-tier-sum-t { font-size: 13px; font-weight: 600; white-space: nowrap; }
.runpod-panel .rp-tier-sum-n {
    min-width: 0; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--sl-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.runpod-panel .rp-tier-sum .rp-link { margin-left: auto; }

/* every GPU in the chosen range */
.runpod-panel .rp-tier-more { margin: 8px 0 0; align-self: flex-start; }
.runpod-panel .rp-tier-more > svg { transition: transform 0.15s ease; }
.runpod-panel .rp-tier-more.is-open > svg { transform: rotate(180deg); }
.runpod-panel .rp-tier-list {
    flex: none; margin-top: 8px; border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8); overflow: hidden;
}
.runpod-panel .rp-tier-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 56px 78px minmax(0, 104px); align-items: center; gap: 10px;
    min-height: 32px; padding: 0 12px; background: var(--sl-card); border-top: 1px solid oklch(1 0 0 / 0.05);
    font-size: 12px;
}
.runpod-panel .rp-tier-row:first-child { border-top: 0; }
.runpod-panel .rp-tier-row-n { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; }
.runpod-panel .rp-tier-row-n > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.runpod-panel .rp-tier-row-t {
    flex: none; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--sl-success); border: 1px solid currentColor;
}
.runpod-panel .rp-tier-row-m, .runpod-panel .rp-tier-row-p {
    font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--gp-mono-data); text-align: right;
}
.runpod-panel .rp-tier-row-s { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sl-text-2); white-space: nowrap; overflow: hidden; }
.runpod-panel .rp-tier-row-s.is-ok { color: var(--sl-success); }
.runpod-panel .rp-tier-row-s.is-low { color: var(--sl-warning); }
.runpod-panel .rp-tier-row-s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.runpod-panel .rp-tier-note { flex: none; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--sl-text-2); }

/* Start */
.runpod-panel .rp-simple-start { flex: none; width: 100%; height: 40px; margin-top: 14px; font-size: 13.5px; font-weight: 600; gap: 8px; }
.runpod-panel .rp-gadd { flex: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sl-hairline); }
.runpod-panel .rp-gadd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.runpod-panel .rp-gadd-t { font-size: 12.5px; font-weight: 600; color: var(--sl-text-1); }
.runpod-panel .rp-gadd-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.runpod-panel .rp-gadd-btns .rp-btn { flex: 1 1 140px; justify-content: center; }
.runpod-panel .rp-gadd-note { font-size: 12px; line-height: 1.45; color: var(--sl-text-2); }
.runpod-panel .rp-simple-start-note { flex: none; margin-top: 8px; text-align: center; font-size: 12px; line-height: 1.45; color: var(--sl-text-2); }

/* what the GPU is doing */
.runpod-panel .rp-simple-status { flex: none; display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.runpod-panel .rp-gcard {
    --gp-state: var(--gp-state-off);
    display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
    background: var(--sl-card); border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-12);
}
.runpod-panel .rp-gcard[data-state="boot"], .runpod-panel .rp-gcard[data-state="ready"], .runpod-panel .rp-gcard[data-state="renting"] { --gp-state: var(--gp-state-boot); }
.runpod-panel .rp-gcard[data-state="gen"], .runpod-panel .rp-gcard[data-state="download"] { --gp-state: var(--gp-state-gen); }
.runpod-panel .rp-gcard[data-state="idle"] { --gp-state: var(--gp-state-idle); }
.runpod-panel .rp-gcard[data-state="dark"] { --gp-state: var(--gp-state-dark); }
.runpod-panel .rp-gcard-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.runpod-panel .rp-gcard-head .rp-dot { width: 7px; height: 7px; background: var(--gp-state); }
.runpod-panel .rp-gcard-t { font-size: 13.5px; font-weight: 600; color: var(--gp-state); white-space: nowrap; }
.runpod-panel .rp-gcard[data-state="off"] .rp-gcard-t { color: var(--sl-text-1); }
.runpod-panel .rp-gcard-gpu {
    margin-left: auto; font-family: var(--sl-font-mono); font-size: 11.5px; color: var(--sl-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.runpod-panel .rp-gcard-text { font-size: 12.5px; line-height: 1.45; color: var(--sl-text-2); min-width: 0; overflow-wrap: anywhere; }
.runpod-panel .rp-gcard-bar { display: flex; align-items: center; gap: 10px; }
.runpod-panel .rp-gcard-track { position: relative; flex: 1; height: 4px; border-radius: 4px; background: oklch(1 0 0 / 0.07); overflow: hidden; }
.runpod-panel .rp-gcard-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--gp-state); transition: width 0.4s linear; }
.runpod-panel .rp-gcard-fill.is-busy { width: 35% !important; animation: rp-slide 1.4s ease-in-out infinite; }
.runpod-panel .rp-gcard-pct { font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--sl-text-3); min-width: 34px; text-align: right; }
.runpod-panel .rp-gcard-foot {
    display: flex; align-items: center; gap: 10px; margin-top: 2px;
    font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--sl-text-3);
}
.runpod-panel .rp-gcard-foot .rp-link { margin-left: auto; font-family: var(--sl-font-ui); }
@keyframes rp-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
.runpod-panel .rp-simple-err {
    display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--sl-r-8);
    font-size: 12px; line-height: 1.45; color: var(--sl-warning);
    background: oklch(0.8 0.15 80 / 0.07); border: 1px solid oklch(0.8 0.15 80 / 0.25);
}
.runpod-panel .rp-simple-err > svg { flex: none; margin-top: 2px; }
.runpod-panel .rp-simple-ctl { flex: none; display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.runpod-panel .rp-simple-money {
    font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--sl-text-3);
}
.runpod-panel .rp-simple-stop { margin-left: auto; }
.runpod-panel .rp-simple-stop:hover,
.runpod-panel .rp-simple-stop.is-armed {
    border-color: var(--sl-danger-line); background: var(--sl-danger-wash); color: var(--sl-danger-text);
}

/* the queue: every GPU take, in the order the GPU gets to it */
.runpod-panel .rp-queue { flex: none; display: flex; flex-direction: column; }
.runpod-panel .rp-queue-i {
    --gp-state: var(--gp-state-gen);
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 8px 0; border-top: 1px solid oklch(1 0 0 / 0.06);
}
.runpod-panel .rp-queue-i:first-child { border-top: 0; }
.runpod-panel .rp-queue-n {
    display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
    font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--sl-text-2);
    background: oklch(1 0 0 / 0.05);
}
.runpod-panel .rp-queue-n.is-on { background: none; }
.runpod-panel .rp-queue-n .rp-dot { width: 7px; height: 7px; background: var(--gp-state); }
.runpod-panel .rp-queue-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.runpod-panel .rp-queue-t {
    font-size: 12.5px; font-weight: 600; color: var(--sl-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.runpod-panel .rp-queue-i.is-waiting .rp-queue-t, .runpod-panel .rp-queue-i.is-queued .rp-queue-t,
.runpod-panel .rp-queue-i.is-submitting .rp-queue-t, .runpod-panel .rp-queue-i.is-foreign .rp-queue-t { font-weight: 500; color: var(--sl-text-2); }
.runpod-panel .rp-queue-s { font-size: 11.5px; line-height: 1.4; color: var(--sl-text-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.runpod-panel .rp-queue-i.is-running .rp-queue-s, .runpod-panel .rp-queue-i.is-downloading .rp-queue-s { color: var(--gp-state); }
.runpod-panel .rp-queue-bar { flex: none; display: block; margin-top: 2px; }
.runpod-panel .rp-queue-x { min-width: 26px; padding: 0 7px; color: var(--sl-text-3); }
.runpod-panel .rp-queue-x:hover,
.runpod-panel .rp-queue-x.is-armed {
    border-color: var(--sl-danger-line); background: var(--sl-danger-wash); color: var(--sl-danger-text);
}
.runpod-panel .rp-queue-empty { font-size: 12px; color: var(--sl-text-3); }

/* recent activity */
.runpod-panel .rp-feed { flex: none; display: flex; flex-direction: column; }
.runpod-panel .rp-feed-i {
    display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline;
    padding: 7px 0; border-top: 1px solid oklch(1 0 0 / 0.06); font-size: 12.5px; color: var(--sl-text-1);
}
.runpod-panel .rp-feed-i:first-child { border-top: 0; }
.runpod-panel .rp-feed-t { font-size: 11.5px; color: var(--sl-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.runpod-panel .rp-feed-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.runpod-panel .rp-feed-x { display: flex; align-items: baseline; gap: 7px; line-height: 1.4; }
/* a dot says what kind of line it is: green finished, amber a problem */
.runpod-panel .rp-feed-x::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; transform: translateY(-1px);
    background: var(--sl-text-3);
}
.runpod-panel .rp-feed-i.is-good .rp-feed-x::before { background: var(--sl-success); }
.runpod-panel .rp-feed-i.is-warn .rp-feed-x { color: var(--sl-warning); }
.runpod-panel .rp-feed-i.is-warn .rp-feed-x::before { background: var(--sl-warning); }
.runpod-panel .rp-feed-who {
    padding-left: 13px; font-size: 11.5px; color: var(--sl-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* folded extras (LoRA by link) */
.runpod-panel .rp-fold {
    flex: none; display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 18px; padding: 10px 0 0;
    border: 0; border-top: 1px solid var(--sl-hairline); background: none; color: var(--sl-text-1);
    font: 600 12.5px var(--sl-font-ui); text-align: left; cursor: pointer;
}
.runpod-panel .rp-fold:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; }
.runpod-panel .rp-fold-n { font-weight: 400; font-size: 11.5px; color: var(--sl-text-3); }
.runpod-panel .rp-fold > svg:last-child { margin-left: auto; color: var(--sl-text-3); transition: transform 0.15s ease; }
.runpod-panel .rp-fold.is-open > svg:last-child { transform: rotate(180deg); }
.runpod-panel .rp-simple-loras { flex: none; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.runpod-panel .rp-simple-foot { flex: none; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--sl-hairline); }
.runpod-panel .rp-simple-foot .rp-link { white-space: normal; text-align: left; }

/* a phone, or a narrow dock: ranges become rows */
@container (max-width: 430px) {
    .runpod-panel .rp-tiers { grid-template-columns: 1fr; }
    .runpod-panel .rp-tier { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; }
    .runpod-panel .rp-tier-p {
        grid-column: 3; grid-row: 1; align-self: center; flex-direction: column; align-items: flex-end; gap: 0;
    }
    .runpod-panel .rp-tier-row { grid-template-columns: minmax(0, 1fr) 50px 72px; }
    .runpod-panel .rp-tier-row-s { display: none; }
}
/* only a very narrow panel drops the names of the other steps */
@container (max-width: 340px) {
    .runpod-panel .rp-flow-t { display: none; }
    .runpod-panel .rp-flow-i.is-on .rp-flow-t { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
    .runpod-panel .rp-tier, .runpod-panel .rp-tier-more > svg, .runpod-panel .rp-fold > svg:last-child { transition: none; }
    .runpod-panel .rp-tier:active { transform: none; }
    .runpod-panel .rp-gcard-fill.is-busy { animation: none; }
}