/* Oxford Nanopore QC */
.np-wrap { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.np-header { margin-bottom: 1.5rem; }
.np-header-title { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 700; color: #e6edf3; }
.np-header-sub { font-size: .78rem; color: #8b949e; margin-top: .2rem; }
.np-layout { display: grid; grid-template-columns: 360px 1fr; gap: 1.25rem; }
.np-mode-row { display: flex; gap: 1rem; margin-bottom: .75rem; }
.np-mode-opt { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #c9d1d9; cursor: pointer; }
.np-textarea { width: 100%; min-height: 200px; padding: .65rem; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #e6edf3; font-size: .75rem; font-family: 'Cascadia Code','Fira Mono',monospace; line-height: 1.65; resize: vertical; outline: none; box-sizing: border-box; transition: border-color .15s; }
.np-textarea:focus { border-color: #e3b341; }
.np-field { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.np-label { font-size: .72rem; color: #8b949e; font-weight: 600; }
.np-input { padding: .38rem .65rem; background: #0d1117; border: 1px solid #30363d; border-radius: 5px; color: #e6edf3; font-size: .82rem; font-family: inherit; outline: none; transition: border-color .15s; }
.np-input:focus { border-color: #e3b341; }
.np-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.np-run-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .9rem; background: #e3b341; color: #0d1117; border: none; border-radius: 6px; font-size: .83rem; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.np-run-btn:hover { opacity: .9; }
.np-ex-btn { padding: .4rem .75rem; background: #21262d; border: 1px solid #30363d; border-radius: 5px; color: #8b949e; font-size: .78rem; cursor: pointer; font-family: inherit; transition: color .15s; }
.np-ex-btn:hover { color: #e6edf3; }
.np-empty { padding: 3rem 1rem; text-align: center; color: #484f58; font-size: .85rem; }
.np-error { padding: 1rem; background: rgba(255,107,107,.06); border: 1px solid rgba(255,107,107,.2); border-radius: 6px; color: #ff6b6b; font-size: .82rem; }
.np-overall { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.1rem; background: #161b22; border: 2px solid; border-radius: 10px; margin-bottom: 1rem; }
.np-overall-grade { font-size: 1.5rem; font-weight: 900; }
.np-overall-sub { font-size: .72rem; color: #8b949e; margin-top: .1rem; }
.np-overall-stats { display: flex; gap: .85rem; font-size: .85rem; font-weight: 700; }
.np-metrics-list { display: flex; flex-direction: column; gap: .5rem; }
.np-metric-row { display: flex; align-items: flex-start; gap: .75rem; padding: .65rem .8rem; background: #161b22; border: 1px solid #21262d; border-radius: 7px; }
.np-status-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 900; color: #0d1117; flex-shrink: 0; margin-top: .1rem; }
.np-metric-body { flex: 1; min-width: 0; }
.np-metric-name { font-size: .82rem; font-weight: 600; color: #e6edf3; margin-bottom: .15rem; }
.np-metric-tip { font-size: .7rem; color: #8b949e; line-height: 1.45; }
.np-metric-right { text-align: right; flex-shrink: 0; }
.np-metric-val { font-size: .95rem; font-weight: 700; }
.np-metric-thresh { font-size: .65rem; color: #484f58; margin-top: .1rem; }
@media (max-width: 720px) { .np-layout { grid-template-columns: 1fr; } }