.guide-progress { display: grid; gap: 10px; max-width: 500px; margin: 24px auto 35px; text-align: center; font-size: 14px; color: #cecae1; }
.guide-progress progress { width: 100%; height: 9px; accent-color: #b2a0ff; border-radius: 8px; }
.guide-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px; align-items: start; }
.guide-steps { display: grid; gap: 16px; }
.guide-step { display: flex; gap: 16px; padding: 23px; border-radius: 18px; border: 1px solid #77709066; background: #1b1b3299; }
.guide-step > div:last-child { min-width: 0; }
.guide-step-number { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #42315d; color: #ddcfff; font-weight: 800; }
.guide-step h2 { margin: 3px 0 12px; font-size: 20px; }
.guide-step p, .guide-step li { color: #c7bfd7; line-height: 1.65; font-size: 14px; }
.guide-step ul { padding-left: 18px; }
.guide-step label { display: flex; gap: 9px; align-items: flex-start; color: #bfd8ce; font-size: 13px; margin-top: 18px; cursor: pointer; }
.guide-step input { width: 18px; height: 18px; flex: none; accent-color: #ad91ee; }
.guide-step a, .guide-preview a { color: #dfd1ff; font-size: 14px; }
.guide-step .primary-button { color: #151228; padding: 13px; }
.guide-preview { position: sticky; top: 22px; padding: 20px; border-radius: 18px; border: 1px solid #77709066; }
.guide-preview img { display: block; width: 100%; border-radius: 11px; }
.guide-preview p { color: #b4adc5; font-size: 13px; line-height: 1.6; }
.guide-help { text-align: center; margin-top: 42px; padding: 24px; border-top: 1px solid #554b67; }
.guide-help p { color: #c7bfd7; line-height: 1.6; }
.guide-help a { color: #dfd1ff; overflow-wrap: anywhere; }
@media (max-width: 760px) { .guide-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .guide-preview { position: static; } .guide-step { padding: 18px; gap: 12px; } }