/* ═══════════════════════════════════════════════════════════════
   OmicsLab — Recombination Scanner Styles
   ═══════════════════════════════════════════════════════════════ */

.rc-page { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.rc-header { text-align: center; margin-bottom: 2rem; }
.rc-badge { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .12em;
  color: #f97316; border: 1px solid #f9731640; background: #f973160d;
  padding: .2rem .6rem; border-radius: 99px; margin-bottom: .7rem; }
.rc-title { font-size: clamp(1.3rem, 3.5vw, 1.8rem); font-weight: 700; color: #e6edf3; margin: 0 0 .4rem; }
.rc-sub { font-size: .84rem; color: #8b949e; max-width: 560px; margin: 0 auto; }

/* ── Input panel ── */
.rc-input-panel { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; }
.rc-input-hdr { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; flex-wrap: wrap; }
.rc-input-title { font-size: .85rem; font-weight: 700; color: #c9d1d9; flex: 1; }
.rc-btn-demo { font-size: .76rem; background: #f9731615; border: 1px solid #f9731640; color: #f97316;
  border-radius: 5px; padding: .3rem .75rem; cursor: pointer; font-family: inherit; }
.rc-btn-demo:hover { background: #f9731625; }
.rc-btn-clear { font-size: .76rem; background: none; border: 1px solid #30363d; color: #6e7681;
  border-radius: 5px; padding: .3rem .65rem; cursor: pointer; font-family: inherit; }
.rc-btn-clear:hover { color: #f85149; border-color: #f8514940; }
.rc-fasta-input { width: 100%; box-sizing: border-box; min-height: 120px; background: #0d1117;
  border: 1px solid #21262d; border-radius: 6px; color: #c9d1d9; font-family: 'Consolas','Monaco',monospace;
  font-size: .76rem; padding: .65rem .75rem; resize: vertical; outline: none; }
.rc-fasta-input:focus { border-color: #f97316; }
.rc-btn-load { display: flex; align-items: center; gap: .4rem; font-size: .82rem;
  background: #f9731620; border: 1px solid #f9731650; color: #f97316; border-radius: 6px;
  padding: .5rem 1.1rem; cursor: pointer; font-family: inherit; font-weight: 600; margin-top: .75rem; }
.rc-btn-load:hover { background: #f9731635; }

/* ── Controls ── */
.rc-controls { background: #161b22; border: 1px solid #30363d; border-radius: 10px;
  padding: 1rem 1.25rem; margin-bottom: .75rem;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.rc-ctrl-group { display: flex; flex-direction: column; gap: .3rem; min-width: 160px; }
.rc-label { font-size: .76rem; font-weight: 600; color: #c9d1d9; display: flex; align-items: center; gap: .4rem; }
.rc-ctrl-hint { font-size: .72rem; color: #6e7681; font-weight: 400; }
.rc-select { background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #e6edf3;
  font-size: .8rem; padding: .35rem .6rem; outline: none; font-family: inherit; }
.rc-select:focus { border-color: #f97316; }
.rc-range { width: 130px; accent-color: #f97316; cursor: pointer; }
.rc-ctrl-right { display: flex; gap: .5rem; align-items: flex-end; margin-left: auto; }
.rc-btn-run { display: flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 700;
  background: #f9731620; border: 1px solid #f9731660; color: #f97316; border-radius: 6px;
  padding: .55rem 1.2rem; cursor: pointer; font-family: inherit; }
.rc-btn-run:hover { background: #f9731635; }
.rc-btn-export { display: flex; align-items: center; gap: .35rem; font-size: .78rem;
  background: #3fb95015; border: 1px solid #3fb95040; color: #3fb950; border-radius: 6px;
  padding: .45rem .9rem; cursor: pointer; font-family: inherit; }
.rc-btn-export:hover { background: #3fb95025; }
.rc-seq-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.rc-seq-chip { font-size: .7rem; border: 1px solid; border-radius: 99px; padding: .15rem .55rem; }

/* ── Plot ── */
.rc-plot-wrap { background: #161b22; border: 1px solid #30363d; border-radius: 10px;
  padding: 1rem 1.25rem; margin-bottom: .75rem; }
.rc-plot-title { font-size: .85rem; font-weight: 600; color: #c9d1d9; margin-bottom: .75rem; }
.rc-bp-summary { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: .75rem; font-size: .74rem; color: #8b949e; }
.rc-bp-chip { background: #f8514915; border: 1px solid #f8514950; color: #f85149;
  border-radius: 99px; padding: .15rem .5rem; font-size: .7rem; }
.rc-bp-note { font-size: .68rem; color: #6e7681; margin-left: .25rem; }
.rc-no-bp { font-size: .76rem; color: #6e7681; margin-top: .75rem; }

/* ── Informative sites ── */
.rc-info-sites { background: #161b22; border: 1px solid #30363d; border-radius: 10px;
  padding: 1rem 1.25rem; }
.rc-is-title { font-size: .85rem; font-weight: 700; color: #c9d1d9; margin-bottom: .3rem; }
.rc-is-desc { font-size: .75rem; color: #8b949e; margin-bottom: .75rem; }
.rc-is-table-wrap { overflow-x: auto; max-height: 300px; overflow-y: auto; }
.rc-is-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.rc-is-table th { position: sticky; top: 0; background: #1c2128; color: #8b949e; font-weight: 600;
  text-align: left; padding: .4rem .65rem; border-bottom: 1px solid #30363d; font-size: .7rem; }
.rc-is-table td { padding: .35rem .65rem; border-bottom: 1px solid #21262d; color: #c9d1d9; }
.rc-is-table tr:hover td { background: rgba(255,255,255,.025); }
.rc-is-pos { font-family: monospace; color: #58a6ff; }
.rc-is-freq { font-size: .68rem; color: #6e7681; }
.rc-is-gap { font-size: .68rem; color: #6e7681; }
.rc-char-chip { display: inline-block; min-width: 18px; text-align: center; border-radius: 3px;
  font-family: monospace; font-size: .75rem; font-weight: 700; padding: .05rem .2rem; margin-right: .2rem; }

/* ── Method selection panel ── */
.rc-method-panel { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: .75rem; }
.rc-method-title { font-size: .78rem; font-weight: 700; color: #8b949e; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .75rem; }
.rc-method-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.rc-method-card { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; background: #0d1117; border: 1px solid #21262d; border-radius: 8px; cursor: pointer; transition: border-color .15s; }
.rc-method-card:hover { border-color: var(--mc, #58a6ff); }
.rc-method-on { border-color: var(--mc, #58a6ff); background: rgba(88,166,255,.04); }
.rc-method-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #30363d; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .15rem; transition: all .15s; }
.rc-method-name { font-size: .78rem; font-weight: 700; margin-bottom: .2rem; }
.rc-method-desc { font-size: .7rem; color: #6e7681; line-height: 1.5; }

/* ── Result tabs ── */
.rc-result-tabs { display: flex; gap: .35rem; margin-bottom: .5rem; flex-wrap: wrap; }
.rc-result-tab { font-size: .78rem; padding: .3rem .8rem; background: #161b22; border: 1px solid #21262d; border-radius: 6px; color: #8b949e; cursor: pointer; font-family: inherit; }
.rc-result-tab:hover { border-color: #f97316; color: #f97316; }
.rc-rtab-active { border-color: #f97316; color: #f97316; background: rgba(249,115,22,.08); }

/* ── Query chip ── */
.rc-seq-query { font-weight: 700; }

/* ── Summary results table ── */
.rc-results-table-wrap { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: .75rem; }
.rc-summary-tbl { width: 100%; border-collapse: collapse; font-size: .76rem; }
.rc-summary-tbl th { position: sticky; top: 0; background: #1c2128; color: #8b949e; font-weight: 600; text-align: left; padding: .4rem .65rem; border-bottom: 1px solid #30363d; font-size: .7rem; white-space: nowrap; }
.rc-summary-tbl td { padding: .4rem .65rem; border-bottom: 1px solid #21262d; color: #c9d1d9; vertical-align: middle; }
.rc-summary-tbl tr:hover td { background: rgba(255,255,255,.02); }
.rc-method-badge { font-size: .67rem; font-weight: 700; border: 1px solid; border-radius: 99px; padding: .1rem .45rem; }
.rc-results-note { font-size: .72rem; color: #6e7681; margin-top: .75rem; line-height: 1.55; }

/* ── RDP4 note ── */
.rc-rdp4-note { background: rgba(188,140,255,.05); border: 1px solid rgba(188,140,255,.2); border-radius: 8px; padding: .85rem 1rem; margin-top: .75rem; }
.rc-rdp4-title { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: #bc8cff; margin-bottom: .5rem; }
.rc-rdp4-note p { font-size: .76rem; color: #8b949e; line-height: 1.65; margin: 0; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .rc-controls { flex-direction: column; align-items: stretch; }
  .rc-ctrl-right { margin-left: 0; }
  .rc-method-grid { grid-template-columns: 1fr; }
}