/* ============================================
   onboarding.css — first-visit wizard
   ============================================ */
#solveza-ob {
  position: fixed; inset: 0; z-index: 99000;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  padding: 16px;
}
.ob-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(20,22,28,0.85) 0%, rgba(8,10,14,0.95) 100%);
  backdrop-filter: blur(6px);
}
.ob-card {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: rgba(14,16,20,0.98);
  border: 1px solid rgba(212,168,83,0.22);
  border-radius: 16px;
  box-shadow: 0 24px 96px rgba(0,0,0,0.6);
  padding: 24px 28px 22px;
  color: #f5f3ee;
  display: flex; flex-direction: column;
  gap: 12px;
}

/* Progress + skip */
.ob-progress {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.ob-pip {
  width: 36px; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  flex-shrink: 0;
}
.ob-pip.on { background: #d4a853; }
.ob-skip {
  margin-left: auto;
  background: none; border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a8f99; cursor: pointer;
  transition: color 120ms ease;
}
.ob-skip:hover { color: #cfd2d8; }

.ob-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #d4a853;
}
.ob-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 28px; line-height: 1.15;
  color: #f5f3ee; margin: 0;
}
.ob-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; line-height: 1.55; color: #b8bcc4;
  margin: 0; max-width: 560px;
}
.ob-sub em { color: #d4a853; font-style: italic; }
.ob-sub strong { color: #f5f3ee; }

.ob-body { padding: 8px 0 6px; }

/* Step 1 — platform chips */
.ob-grid-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.ob-pchip {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  color: inherit;
  font-family: 'Inter', sans-serif;
}
.ob-pchip:hover {
  background: rgba(212,168,83,0.07);
  border-color: rgba(212,168,83,0.32);
  transform: translateY(-1px);
}
.ob-pchip.on {
  background: rgba(212,168,83,0.1);
  border-color: #d4a853;
}
.ob-pmark {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600; font-size: 14.5px;
  color: #f5f3ee;
  background: linear-gradient(135deg, #0e8a8a, #10b981);
  flex-shrink: 0;
}
.ob-pmark.mark-ig { background: linear-gradient(135deg, #c75d6b, #d4a853); }
.ob-pmark.mark-tt { background: linear-gradient(135deg, #1d1f24, #c75d6b); }
.ob-pmark.mark-x  { background: linear-gradient(135deg, #1d1f24, #3b3d44); }
.ob-pmark.mark-yt { background: linear-gradient(135deg, #b91c1c, #7f1d1d); }
.ob-pmark.mark-li { background: linear-gradient(135deg, #0e6ba8, #0a4d7a); }
.ob-pmark.mark-nl { background: linear-gradient(135deg, #fb8b03, #c46400); }
.ob-pname { flex: 1; font-size: 14px; color: #f5f3ee; }
.ob-pcheck {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #d4a853;
}
.ob-aside-link {
  display: inline-block;
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #d4a853; text-decoration: none;
}
.ob-aside-link:hover { text-decoration: underline; }

/* Step 2 — voice samples */
.ob-voice-stack { display: flex; flex-direction: column; gap: 10px; }
.ob-vsample {
  width: 100%;
  background: rgba(8,10,14,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.55;
  color: #f5f3ee;
  resize: vertical; min-height: 70px;
  outline: none;
  transition: border-color 120ms ease;
}
.ob-vsample:focus { border-color: #d4a853; }
.ob-voice-meta {
  margin-top: 10px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ob-voice-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a8f99;
}
.ob-voice-skip {
  margin-left: auto;
  background: none; border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #d4a853; cursor: pointer;
}
.ob-voice-skip:hover { text-decoration: underline; }

/* Step 3 — Lab picker */
.ob-grid-labs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.ob-labtile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  color: inherit;
}
.ob-labtile:hover { background: rgba(212,168,83,0.07); border-color: rgba(212,168,83,0.32); transform: translateY(-1px); }
.ob-labtile.on { background: rgba(212,168,83,0.1); border-color: #d4a853; }
.ob-labmark {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600; font-size: 16px;
  color: #f5f3ee; flex-shrink: 0;
  background: linear-gradient(135deg, #0e8a8a, #10b981);
}
.ob-labmark.mark-ig    { background: linear-gradient(135deg, #c75d6b, #d4a853); }
.ob-labmark.mark-tt    { background: linear-gradient(135deg, #1d1f24, #c75d6b); }
.ob-labmark.mark-x     { background: linear-gradient(135deg, #1d1f24, #3b3d44); }
.ob-labmark.mark-yt    { background: linear-gradient(135deg, #b91c1c, #7f1d1d); }
.ob-labmark.mark-nl    { background: linear-gradient(135deg, #fb8b03, #c46400); }
.ob-labmark.mark-merch { background: linear-gradient(135deg, #d4a853, #b87f30); color: #1a1a1a; }
.ob-labtxt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ob-labname {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: 17px;
  color: #f5f3ee;
}
.ob-labtag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #8a8f99;
}

/* Step 4 — idea input */
.ob-idea {
  width: 100%;
  background: rgba(8,10,14,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; line-height: 1.5;
  color: #f5f3ee;
  resize: vertical; min-height: 130px;
  outline: none;
  transition: border-color 120ms ease;
}
.ob-idea:focus { border-color: #d4a853; }

/* Footer buttons */
.ob-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.ob-back {
  background: none; border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a8f99; cursor: pointer;
}
.ob-back:hover { color: #cfd2d8; }
.ob-next {
  padding: 11px 18px;
  background: linear-gradient(135deg, #d4a853, #b87f30);
  color: #1a1a1a; border: none;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease, opacity 200ms ease;
  min-height: 40px;
}
.ob-next:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,168,83,0.25); }
.ob-next:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 480px) {
  .ob-card { padding: 20px 18px 18px; gap: 10px; }
  .ob-title { font-size: 24px; }
  .ob-pip { width: 28px; }
}