/* ==========================================================
   TrainersEye · No Rule Workouts · Agent 20 UI Styles
   Design System: dark #0A0A0A · amber #FFC107 · Barlow
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@300;400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Barlow', sans-serif;
  background: #0A0A0A;
  color: #F5F5F5;
  line-height: 1.55;
  min-height: 100vh;
}

/* ====== HEADER ====== */
.qb-header {
  background: linear-gradient(180deg, #0f2341 0%, #0a1a2e 100%);
  border-bottom: 3px solid #FFC107;
  padding: 20px 32px;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 50;
}
.qb-brand-line1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 24px;
  color: #FFC107; letter-spacing: 1.5px;
}
.qb-brand-line2 {
  font-size: 10px; letter-spacing: 1.8px;
  color: #A0A0A0; font-weight: 500; margin-top: 2px;
}
.qb-meta { text-align: right; }
.qb-meta-line1 {
  font-family: 'Barlow Condensed';
  font-weight: 700; color: #FFC107; font-size: 14px;
}
.qb-meta-line2 {
  font-size: 10px; color: #888; letter-spacing: 1.2px; margin-top: 2px;
}

/* ====== MAIN LAYOUT ====== */
.qb-main {
  max-width: 920px; margin: 0 auto;
  padding: 32px 24px 60px;
}

.qb-step {
  background: #121212;
  border: 1px solid #2A2A2A;
  border-radius: 4px;
  padding: 28px;
  margin-bottom: 24px;
  position: relative;
}

.qb-step-label {
  font-family: 'Barlow Condensed';
  font-size: 11px; letter-spacing: 2px; font-weight: 700;
  color: #FFC107; margin-bottom: 8px;
}
.qb-step-title {
  font-family: 'Barlow Condensed';
  font-size: 28px; font-weight: 800; letter-spacing: 1px;
  color: #F5F5F5; margin-bottom: 6px;
}
.qb-step-sub {
  color: #A0A0A0; font-size: 13px; margin-bottom: 20px;
}

/* ====== ELIGIBILITY GATE ====== */
.qb-gate { border-left: 4px solid #E53935; }

.qb-warning-banner {
  background: linear-gradient(90deg, #1a0d0d, #121212);
  border-left: 3px solid #FF6B35;
  padding: 12px 16px; margin-bottom: 20px;
  font-size: 13px; color: #FFB088;
}

.qb-ack-list {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 20px;
}
.qb-ack-row {
  background: #0A0A0A;
  border: 1px solid #2A2A2A;
  border-left: 3px solid #2A2A2A;
  padding: 14px 16px;
  display: flex; gap: 14px;
  cursor: pointer; transition: all 0.15s;
}
.qb-ack-row:hover { border-color: #FFC107; }
.qb-ack-row:has(input:checked) {
  background: #0d1a0d;
  border-left-color: #4CAF50;
}
.qb-ack-cb {
  width: 20px; height: 20px;
  margin-top: 2px; flex-shrink: 0;
  accent-color: #FFC107;
  cursor: pointer;
}
.qb-ack-body { display: flex; flex-direction: column; gap: 4px; }
.qb-ack-label {
  font-family: 'Barlow Condensed';
  font-weight: 700; font-size: 14px; letter-spacing: 1px;
  color: #FFC107; text-transform: uppercase;
}
.qb-ack-text { font-size: 12px; color: #C0C0C0; line-height: 1.5; }

.qb-block-message {
  background: #1a0d0d;
  border-left: 3px solid #E53935;
  padding: 12px 16px; margin-top: 16px;
  font-size: 12px; color: #FFB088;
}

/* ====== FILTERS ====== */
.qb-filters { border-left: 4px solid #FFC107; }

.qb-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.qb-filter-group:nth-child(4) { grid-column: 1 / -1; }

.qb-filter-label {
  font-family: 'Barlow Condensed';
  font-size: 11px; letter-spacing: 1.8px; font-weight: 700;
  color: #888; display: block; margin-bottom: 8px;
}

.qb-filter-options {
  display: flex; flex-wrap: wrap; gap: 6px;
}

.qb-chip {
  background: #0A0A0A;
  border: 1px solid #2A2A2A;
  color: #C0C0C0;
  padding: 8px 14px;
  font-family: 'Barlow', sans-serif;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.3px;
}
.qb-chip:hover {
  border-color: #FFC107;
  color: #FFC107;
}
.qb-chip-active {
  background: #FFC107;
  border-color: #FFC107;
  color: #0A0A0A;
  font-weight: 700;
}

/* ====== BUTTONS ====== */
.qb-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: 1.5px;
  padding: 12px 24px;
  border: 0;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.qb-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.qb-btn-primary {
  background: #FFC107; color: #0A0A0A;
}
.qb-btn-primary:not(:disabled):hover {
  background: #FFD54F;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}
.qb-btn-secondary {
  background: #1A1A1A; color: #FFC107; border: 1px solid #FFC107;
}
.qb-btn-secondary:hover { background: #2A2A2A; }
.qb-btn-block { width: 100%; padding: 16px; font-size: 16px; }
.qb-btn-locked { background: #2E7D32 !important; color: white !important; }

.qb-action-row {
  display: flex; flex-wrap: wrap;
  gap: 10px; align-items: center;
  margin-top: 8px;
}
.qb-action-row-bottom {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #2A2A2A;
}

.qb-candidate-count {
  font-size: 12px; color: #888; margin-left: 12px;
  font-family: 'Barlow Condensed'; letter-spacing: 1px;
}

/* ====== SESSION DISPLAY ====== */
.qb-session { border-left: 4px solid #FF6B35; padding: 16px; }
.qb-session-frame {
  width: 100%;
  min-height: 1400px;
  border: 0;
  background: #0A0A0A;
}

/* ====== FOOTER ====== */
.qb-footer {
  background: #0f2341;
  color: #FFC107;
  padding: 14px 32px;
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.8px;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 720px) {
  .qb-header { padding: 14px 18px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .qb-meta { text-align: left; }
  .qb-main { padding: 18px 14px 40px; }
  .qb-step { padding: 18px; }
  .qb-step-title { font-size: 22px; }
  .qb-filter-grid { grid-template-columns: 1fr; gap: 16px; }
  .qb-footer { padding: 10px 14px; flex-direction: column; gap: 4px; text-align: center; }
}