/* ═══════════════════════════════════════════════════════════════
   OmicsLab — GATK Command Builder
   ═══════════════════════════════════════════════════════════════ */
.gatk-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.gatk-header { margin-bottom: 2rem; }
.gatk-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #e3b341; margin-bottom: .35rem; }
.gatk-title { font-size: clamp(1.4rem,3vw,2rem); font-weight: 800; color: #e6edf3; margin: 0 0 .5rem; }
.gatk-sub { font-size: .85rem; color: #8b949e; max-width: 700px; line-height: 1.6; }

.gatk-tools-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.gatk-tool-btn {
  padding: .35rem .8rem; background: #21262d; border: 1px solid #30363d;
  border-radius: 6px; font-size: .78rem; font-weight: 600; color: #8b949e;
  cursor: pointer; transition: all .12s;
}
.gatk-tool-btn:hover { background: #2d333b; color: #e6edf3; }
.gatk-tool-active { background: #e3b34122 !important; border-color: #e3b34155 !important; color: #e3b341 !important; }
.gatk-tool-desc { font-size: .78rem; color: #8b949e; margin-bottom: 1.25rem; font-style: italic; }

.gatk-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.25rem; }

.gatk-fields-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #8b949e; margin-bottom: .75rem; }
.gatk-fields { display: flex; flex-direction: column; gap: .65rem; }
.gatk-field { display: flex; flex-direction: column; gap: .25rem; }
.gatk-label { font-size: .75rem; font-weight: 600; color: #c9d1d9; }
.gatk-input {
  padding: .4rem .65rem; background: #0d1117; border: 1px solid #30363d;
  border-radius: 6px; color: #e6edf3; font-size: .8rem; font-family: inherit;
  outline: none; transition: border-color .12s;
}
.gatk-input:focus { border-color: #e3b341; }
.gatk-flag-hint { font-size: .62rem; color: #484f58; font-family: monospace; }

.gatk-cmd-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.gatk-cmd-title { font-size: .75rem; font-weight: 700; color: #c9d1d9; text-transform: uppercase; letter-spacing: .06em; }
.gatk-copy-btn {
  padding: .25rem .65rem; background: #21262d; border: 1px solid #30363d;
  border-radius: 5px; font-size: .72rem; color: #c9d1d9; cursor: pointer;
  transition: background .1s;
}
.gatk-copy-btn:hover { background: #2d333b; }
.gatk-cmd-out {
  background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
  padding: 1rem; font-family: 'Courier New', Courier, monospace; font-size: .75rem;
  color: #e3b341; line-height: 1.75; white-space: pre-wrap; word-break: break-all;
  min-height: 160px; overflow-x: auto;
}
.gatk-tip { font-size: .72rem; color: #484f58; line-height: 1.5; margin-top: .75rem; }
.gatk-tip strong { color: #8b949e; }

@media (max-width: 700px) {
  .gatk-layout { grid-template-columns: 1fr; }
  .gatk-wrap { padding: 1.25rem .75rem 5rem; }
}