/* SDK installation card (onboarding + overview). Every rule is scoped to .sdk-setup.
   Relies on brand.css tokens; shared .pn-code/.pn-copy styles come from panel.css. */
.sdk-setup {
  --sdk-ok: #4ade80; --sdk-wait: #fbbf24; --sdk-muted: #a59db8; --sdk-ring: var(--brand-tint, #c4b5fd);
  position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0; max-width: 100%;
  padding: 26px 28px; border: 1px solid var(--brand-border, #2f2640); border-radius: 18px; color: #e4e1ec;
  background: var(--brand-surface, #1a1426);
}
.sdk-setup [hidden] { display: none !important; }
.sdk-setup *, .sdk-setup *::before, .sdk-setup *::after { box-sizing: border-box; }

/* Header */
.sdk-setup .sdk-setup-head h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: #fafafa; }
.sdk-setup .sdk-setup-head p { margin: 0; max-width: 62ch; font-size: .9rem; line-height: 1.55; color: var(--sdk-muted); }

/* Platform tabs: segmented rail with a gradient-edged active tab */
.sdk-setup .sdk-platforms {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px;
  border: 1px solid var(--brand-border, #2f2640); border-radius: 14px; background: var(--brand-inset, #221b33);
}
.sdk-setup .sdk-platforms button {
  min-width: 0; min-height: 42px; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--sdk-muted); font: inherit; font-size: .86rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.sdk-setup .sdk-platforms button:hover { color: #fafafa; background: rgba(255,255,255,.04); }
.sdk-setup .sdk-platforms button[aria-pressed="true"] {
  color: #fff; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.08);
}

/* Options: billing select + Manual / AI mode switch */
.sdk-setup .sdk-options { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; }
.sdk-setup .sdk-options label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sdk-muted);
}
.sdk-setup .sdk-options select {
  min-width: 180px; max-width: 100%; height: 40px; padding: 0 34px 0 12px; border-radius: 10px;
  border: 1px solid var(--brand-border-strong, #43385a); background-color: var(--brand-inset, #221b33);
  color: #fafafa; font: inherit; font-size: .88rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.sdk-setup .sdk-options button {
  height: 40px; padding: 0 16px; border: 1px solid var(--brand-border-strong, #43385a); background: transparent;
  color: var(--sdk-muted); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.sdk-setup .sdk-options button:first-of-type { border-radius: 10px 0 0 10px; }
.sdk-setup .sdk-options button:last-of-type { border-radius: 0 10px 10px 0; margin-left: -1px; }
.sdk-setup .sdk-options button:hover { color: #fafafa; }
.sdk-setup .sdk-options button[aria-pressed="true"] {
  position: relative; z-index: 1; color: #fff; background: var(--brand-violet-deep, #7c3aed); border-color: var(--brand-violet-deep, #7c3aed);
}

/* Milestones: connected timeline, stacks vertically on narrow screens */
.sdk-setup .sdk-milestones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: sdk-ms; }
.sdk-setup .sdk-milestone {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 12px 14px 12px 46px; border: 1px solid var(--brand-border, #2f2640); border-radius: 12px;
  background: rgba(255,255,255,.02); counter-increment: sdk-ms;
}
.sdk-setup .sdk-milestone::before {
  content: counter(sdk-ms); position: absolute; left: 13px; top: 13px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%; font-size: .72rem; font-weight: 800;
  color: var(--sdk-muted); border: 1.5px solid var(--brand-border-strong, #43385a); background: var(--brand-surface, #1a1426);
}
.sdk-setup .sdk-milestone:not(:last-child)::after {
  content: ""; position: absolute; top: 24px; right: -13px; width: 14px; height: 1.5px; background: var(--brand-border-strong, #43385a);
}
.sdk-setup .sdk-milestone strong { font-size: .88rem; font-weight: 700; color: #fafafa; overflow-wrap: anywhere; }
.sdk-setup .sdk-milestone span { font-size: .78rem; line-height: 1.45; color: var(--sdk-muted); overflow-wrap: anywhere; }
.sdk-setup .sdk-milestone.is-done { border-color: var(--brand-border, #2f2640); background: transparent; }
.sdk-setup .sdk-milestone.is-done::before { content: "\2713"; color: #052e16; background: var(--sdk-ok); border-color: var(--sdk-ok); }

.sdk-setup .sdk-milestone.is-waiting { border-color: var(--brand-border, #2f2640); }
.sdk-setup .sdk-milestone.is-waiting::before { color: var(--sdk-muted); border-color: var(--brand-border-strong, #43385a); }

.sdk-setup .sdk-status-note {
  padding: 11px 14px; border-radius: 12px; font-size: .85rem; line-height: 1.5; color: #d6d1e2;
  border: 1px solid var(--brand-border, #2f2640); background: rgba(255,255,255,.03); color: var(--sdk-muted);
}
.sdk-setup .sdk-status-note:empty { display: none; }

/* Manual steps */
.sdk-setup .sdk-manual, .sdk-setup .sdk-ai { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sdk-setup .sdk-code-step { min-width: 0; counter-increment: sdk-step; }
.sdk-setup .sdk-manual { counter-reset: sdk-step; }
.sdk-setup .sdk-code-step h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .92rem; font-weight: 700; color: #fafafa; }
.sdk-setup .sdk-code-step h4::before {
  content: counter(sdk-step); flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 8px; font-size: .74rem; font-weight: 800; color: #d4d4d8;
  background: rgba(255,255,255,.06); border: 1px solid var(--brand-border-strong, #43385a);
}
.sdk-setup .pn-code { min-width: 0; max-width: 100%; }
.sdk-setup .pn-code pre { max-width: 100%; min-width: 0; margin: 0; padding: 42px 16px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sdk-setup .pn-code pre code { white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sdk-setup .sdk-ai p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--sdk-muted); }
.sdk-setup .sdk-ai .pn-code pre { max-height: 360px; overflow-y: auto; }
.sdk-setup .sdk-ai .pn-code pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.sdk-setup .sdk-notes { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 2px solid var(--brand-border-strong, #43385a); }
.sdk-setup .sdk-notes p { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--sdk-muted); }
.sdk-setup .sdk-notes code { color: var(--brand-tint-soft, #ddd6fe); overflow-wrap: anywhere; }

/* Footer */
.sdk-setup .sdk-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--brand-border, #2f2640);
}
.sdk-setup .sdk-footer a { color: var(--brand-tint, #c4b5fd); font-size: .86rem; font-weight: 700; text-underline-offset: 3px; }
.sdk-setup .sdk-footer a:hover { color: var(--brand-tint-soft, #ddd6fe); }
.sdk-setup .sdk-footer button {
  height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--brand-border-strong, #43385a);
  background: var(--brand-border, #2f2640); color: #fafafa; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.sdk-setup .sdk-footer button:hover { background: var(--brand-surface-hover, #211a30); border-color: rgba(var(--brand-violet-rgb, 139,92,246), .55); }
.sdk-setup button:disabled { opacity: .55; cursor: not-allowed; }

/* Focus */
.sdk-setup button:focus-visible, .sdk-setup a:focus-visible, .sdk-setup select:focus-visible {
  outline: 2px solid var(--sdk-ring); outline-offset: 2px; box-shadow: var(--brand-focus, 0 0 0 3px rgba(139,92,246,.35));
}
.sdk-setup .pn-code pre:focus-visible { outline: 2px solid var(--sdk-ring); outline-offset: 2px; }

/* Responsive */
@media (max-width: 720px) {
  .sdk-setup .sdk-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdk-setup .sdk-milestones { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sdk-setup .sdk-milestone:not(:last-child)::after { top: auto; bottom: -9px; right: auto; left: 23px; width: 1.5px; height: 8px; }
}
@media (max-width: 480px) {
  .sdk-setup { padding: 20px 16px; gap: 16px; border-radius: 16px; }
  .sdk-setup .sdk-options { flex-direction: column; align-items: stretch; }
  .sdk-setup .sdk-options select { width: 100%; min-width: 0; }
  .sdk-setup .sdk-options button { flex: 1; }
  .sdk-setup .sdk-footer { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .sdk-setup .pn-code pre { padding: 40px 12px 12px; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sdk-setup *, .sdk-setup *::before, .sdk-setup *::after { animation: none !important; transition: none !important; }
}

.sdk-setup .sdk-options > [role="group"] { display: flex; min-width: 0; flex-wrap: wrap; }
.sdk-setup .sdk-options > [role="group"] button { min-height: 42px; }
.sdk-setup .sdk-milestone time { font-size: .72rem; overflow-wrap: anywhere; color: var(--brand-tint); }

/* Setup method chooser */
.sdk-choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sdk-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 20px; border-radius: 16px; border: 1px solid var(--brand-border-strong, #3a2f52); background: rgba(255,255,255,.02); color: #cfc8de; overflow: hidden; transition: border-color .15s, transform .15s, background .15s; font: inherit; cursor: pointer; }
.sdk-choice:hover { border-color: rgba(167,139,250,.55); }
.sdk-choice:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.sdk-choice.is-featured { border-color: rgba(139,92,246,.55); }
.sdk-choice-art { display: block; width: 100%; background: rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.05); margin-bottom: 8px; }
.sdk-choice-art svg { display: block; width: 100%; height: 120px; }
.sdk-choice strong { padding: 0; color: #fff; font-size: 1rem; padding-right: 64px; }
.sdk-choice > span:not(.sdk-choice-art):not(.sdk-choice-badge) { padding: 0; font-size: .88rem; line-height: 1.5; color: #a59db8; }
.sdk-choice.is-featured strong { color: #fff; }
.sdk-choice-badge { position: absolute; top: 14px; right: 14px; padding: 2px 9px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #e4e4e7; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* AI tool prompt */
.sdk-ai { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sdk-tools { display: flex; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.08); overflow-x: auto; scrollbar-width: none; }
.sdk-tools button { flex: none; border: 0; background: none; color: #a59db8; font-weight: 700; font-size: .88rem; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.sdk-tools button:hover { color: #fff; }
.sdk-tools button.on { color: #fff; border-bottom-color: #8b5cf6; }
.sdk-tools button:focus-visible { outline: 2px solid #a78bfa; outline-offset: -2px; border-radius: 6px; }
.sdk-ai-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: #cfc8de; font-size: .9rem; }
.sdk-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sdk-ai-code pre { max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; }
.sdk-ai-note { margin: 0; font-size: .8rem; color: #9b96ab; }
.sdk-ai-next { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 14px; background: rgba(255,255,255,.02); }
.sdk-ai-next summary { cursor: pointer; font-weight: 700; color: #ddd6fe; font-size: .9rem; }
.sdk-ai-next p { margin: 10px 0; font-size: .86rem; color: #a59db8; }
@media (max-width: 640px) { .sdk-choose-grid { grid-template-columns: 1fr; } .sdk-ai-head { flex-wrap: wrap; } }
.sdk-ai-code pre { padding-top: 14px; }