button.btn { font-family: inherit; cursor: pointer; }
#quote-message { color: #b42318; margin-bottom: 15px; }
[hidden] { display: none !important; }
#quote-loading, #quote-step { position: fixed; inset: 0; z-index: 100; background: rgba(235,237,243,.78); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.loading-card { text-align: center; padding: 24px; color: #18265a; }
.blue-spinner { width: 52px; height: 52px; margin: 0 auto 18px; border: 5px solid #dbeafe; border-top-color: #006cd8; border-radius: 50%; animation: quote-spin .8s linear infinite; }
@keyframes quote-spin { to { transform: rotate(360deg); } }
.step-card { background: #fff; color: #18265a; padding: 28px; border-radius: 8px; box-shadow: 0 10px 40px #18265a33; width: min(100%, 480px); max-height: calc(100dvh - 40px); overflow-y: auto; }
.step-card h2 { font-size: 22px; margin-bottom: 20px; line-height: 1.3; }
.step-card p { margin: 14px 0; }
.step-card label { display: block; margin: 18px 0 8px; }
#serial-guide { display: block; max-width: 100%; max-height: 55dvh; object-fit: contain; margin: 0 auto 20px; }
.step-card.guide-mode { width: min(100%, 590px); padding: 0 0 20px; }
.guide-mode #serial-guide { width: 100%; height: auto; max-height: max(0px, calc(100dvh - 150px)); object-fit: contain; margin: 0; }
.guide-mode #understood { width: calc(100% - 40px); margin: 20px auto 0; }
.guide-mode #serial-guide-fallback { margin: 20px; }
.step-button { display: block; width: 100%; padding: 12px 16px; margin-top: 20px; border: 1px solid #ff9600; border-radius: 4px; background: #ff9600; color: #fff; font: inherit; font-size: 18px; cursor: pointer; }
.step-button:disabled { opacity: .6; cursor: wait; }
#step-error { color: #b42318; }