/* ═══════════════════════════════════════════════════════════════
   OmicsLab — Visual Pipeline Builder
   ═══════════════════════════════════════════════════════════════ */
.pvl-page { max-width: 1280px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.pvl-header { text-align: center; margin-bottom: 2rem; }
.pvl-title { font-size: clamp(1.6rem,3.2vw,2.3rem); font-weight: 800; margin: 0 0 0.5rem; background: linear-gradient(135deg,#58a6ff,#3fb950,#e3b341); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pvl-sub { font-size: 0.86rem; color: #8b949e; max-width: 700px; margin: 0 auto; line-height: 1.65; }

/* Pipeline tabs */
.pvl-pipeline-tabs { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pvl-pipe-btn { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 1rem; background: var(--bg-card,#161b22); border: 1px solid #21262d; border-radius: 10px; cursor: pointer; text-align: left; transition: all 0.2s; }
.pvl-pipe-btn:hover { border-color: #58a6ff; }
.pvl-pipe-abbr { font-size: 0.72rem; font-weight: 900; min-width: 40px; font-family: monospace; padding: 0.25rem 0.5rem; background: rgba(255,255,255,0.05); border-radius: 5px; }
.pvl-pipe-name { font-size: 0.8rem; font-weight: 700; color: #c9d1d9; }

/* Meta bar */
.pvl-meta-bar { font-size: 0.74rem; color: #6e7681; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pvl-meta-sep { color: #30363d; }

/* Layout */
.pvl-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }

/* Graph card */
.pvl-graph-card { background: #0d1117; border: 1px solid #21262d; border-radius: 12px; overflow: hidden; }
.pvl-graph { padding: 1.5rem 1rem 0.5rem; overflow-x: auto; min-height: 160px; }
.pvl-graph-footer { padding: 0.75rem 1rem; display: flex; align-items: center; gap: 1rem; border-top: 1px solid #21262d; }
.pvl-run-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.25rem; background: #3fb950; border: none; border-radius: 8px; color: #000; font-size: 0.8rem; font-weight: 800; cursor: pointer; transition: all 0.18s; }
.pvl-run-btn:hover:not(:disabled) { background: #2ea043; }
.pvl-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pvl-run-status { font-size: 0.76rem; font-family: monospace; }

/* Sidebar */
.pvl-sidebar { position: sticky; top: 1rem; }
.pvl-sb-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #6e7681; margin-bottom: 0.75rem; }
.pvl-detail { background: var(--bg-card,#161b22); border: 1px solid #21262d; border-radius: 12px; padding: 1.1rem; max-height: 70vh; overflow-y: auto; }
.pvl-detail-hint { font-size: 0.78rem; color: #6e7681; line-height: 1.65; }

/* Detail content */
.pvl-detail-header { padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 2px solid; }
.pvl-detail-name { font-size: 1.1rem; font-weight: 800; }
.pvl-detail-ver { font-size: 0.72rem; color: #6e7681; font-family: monospace; margin-bottom: 0.3rem; }
.pvl-type-badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 10px; font-size: 0.65rem; font-weight: 700; }
.pvl-detail-purpose { font-size: 0.78rem; color: #8b949e; line-height: 1.65; margin: 0 0 0.75rem; }
.pvl-detail-section { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #6e7681; margin: 0.75rem 0 0.4rem; }

.pvl-io-row { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.5rem; }
.pvl-io-col { flex: 1; }
.pvl-io-label { font-size: 0.6rem; text-transform: uppercase; color: #6e7681; margin-bottom: 0.25rem; }
.pvl-io-item { font-size: 0.7rem; padding: 0.2rem 0.4rem; border-radius: 4px; margin-bottom: 0.2rem; }
.pvl-input { background: rgba(88,166,255,0.1); color: #58a6ff; }
.pvl-output { background: rgba(63,185,80,0.1); color: #3fb950; }
.pvl-io-arrow { font-size: 1.2rem; color: #30363d; padding-top: 1rem; }

.pvl-params-tbl { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.pvl-params-tbl tr { border-bottom: 1px solid #0d1117; }
.pvl-param-key { font-family: monospace; color: #e3b341; padding: 0.3rem 0.4rem 0.3rem 0; white-space: nowrap; }
.pvl-param-val { font-family: monospace; color: #58a6ff; padding: 0.3rem 0.4rem; font-size: 0.67rem; }
.pvl-param-desc { color: #6e7681; padding: 0.3rem 0; }

.pvl-resource-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pvl-resource { display: flex; flex-direction: column; gap: 0.1rem; background: #0d1117; border-radius: 6px; padding: 0.35rem 0.6rem; font-size: 0.78rem; color: #c9d1d9; font-family: monospace; }
.pvl-r-label { font-size: 0.55rem; text-transform: uppercase; color: #6e7681; font-family: inherit; }

.pvl-tips { padding-left: 1rem; margin: 0; }
.pvl-tips li { font-size: 0.74rem; color: #8b949e; line-height: 1.65; margin-bottom: 0.3rem; }

.pvl-africa-context { font-size: 0.76rem; color: #6e7681; line-height: 1.65; margin: 0; padding: 0.6rem 0.75rem; background: rgba(63,185,80,0.05); border-radius: 6px; border-left: 2px solid #3fb950; }

/* SVG node interactivity */
.pvl-node:hover rect:first-of-type { opacity: 0.9; }

@media (max-width: 1000px) { .pvl-layout { grid-template-columns: 1fr; } .pvl-sidebar { position: static; } }
@media (max-width: 640px) { .pvl-page { padding: 1.5rem 0.75rem 3rem; } .pvl-pipe-btn { min-width: 45%; } }