.mn-panel { min-width: 0; color: #303b4d; }
.mn-panel *, .mn-panel *::before, .mn-panel *::after { box-sizing: border-box; letter-spacing: 0; }
.mn-panel [hidden] { display: none !important; }
.mn-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 24px; }
.mn-heading p { margin: 0 0 7px; color: #8b97a8; font-size: 12px; }
.mn-heading h2 { margin: 0; color: #26364d; font-size: 20px; font-weight: 650; }
.mn-state { display: inline-flex; align-items: center; gap: 7px; color: #21885f; font-size: 13px; }
.mn-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mn-state.is-error { color: #c34c4c; }
.mn-content { min-height: 250px; padding: 28px; border: 1px solid #e4ebf4; border-radius: 8px; background: linear-gradient(135deg,#fbfdff,#f5f9ff); }
.mn-loading, .mn-error, .mn-empty { display: grid; place-items: center; min-height: 190px; color: #8795a8; text-align: center; font-size: 13px; }
.mn-empty h3, .mn-connect h3, .mn-bound h3, .mn-qr h3 { margin: 0 0 9px; color: #26364d; font-size: 18px; }
.mn-empty p, .mn-connect p, .mn-bound p, .mn-qr p { margin: 0; color: #7b899b; line-height: 1.75; }
.mn-icon, .mn-connect-icon, .mn-bound-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 15px; border-radius: 16px; background: #eaf3ff; color: #2878ed; }
.mn-icon svg, .mn-connect-icon svg, .mn-bound-mark svg { width: 24px; height: 24px; }
.mn-link { display: inline-block; margin-top: 17px; color: #2878ed; text-decoration: none; }
.mn-link:hover { text-decoration: underline; }
.mn-connect, .mn-bound { display: flex; align-items: center; gap: 22px; max-width: 720px; margin: 10px auto; }
.mn-connect-icon, .mn-bound-mark { flex: 0 0 54px; margin: 0; }
.mn-bound-mark { background: #e7f7ef; color: #21885f; }
.mn-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; margin-top: 20px; padding: 8px 15px; border: 1px solid #d7e3f1; border-radius: 5px; background: #fff; color: #536982; font: inherit; font-size: 13px; cursor: pointer; }
.mn-button svg { width: 16px; height: 16px; }
.mn-button:hover { border-color: #2878ed; color: #2878ed; }
.mn-primary { border-color: #2878ed; background: #2878ed; color: #fff; }
.mn-primary:hover { background: #196be2; color: #fff; }
.mn-danger { color: #c34c4c; }
.mn-hint { margin: 25px 0 0; padding-top: 18px; border-top: 1px solid #e5edf7; color: #93a0b1; font-size: 12px; }
.mn-actions { display: flex; justify-content: flex-end; }
.mn-bound dl { display: grid; gap: 8px; margin: 15px 0 0; }
.mn-bound dl div { display: flex; gap: 18px; font-size: 12px; }
.mn-bound dt { min-width: 60px; color: #97a4b5; }
.mn-bound dd { margin: 0; color: #52647c; }
.mn-error { gap: 4px; color: #bf4d4d; }
.mn-error .mn-button { margin-top: 10px; }
.mn-qr { display: flex; align-items: center; justify-content: center; gap: 38px; min-height: 250px; }
.mn-qr-image { display: grid; place-items: center; width: 220px; height: 220px; padding: 10px; border: 1px solid #e0e9f4; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(42,85,135,.1); }
.mn-qr-image img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.mn-qr-copy { max-width: 280px; }
.mn-qr-copy strong { display: block; margin-top: 18px; color: #2878ed; font-size: 13px; font-weight: 500; }
@media(max-width:600px) { .mn-content { padding: 20px 16px; } .mn-connect,.mn-bound,.mn-qr { flex-direction: column; align-items: center; gap: 18px; text-align: center; } .mn-bound dl div { justify-content: center; } .mn-qr-copy { max-width: none; } .mn-actions { justify-content: center; } }