:root,body{--font:'Inter',sans-serif;--font-inter:'Inter',sans-serif;--font-system:'Inter',sans-serif}
html body,html body *,html body *::before,html body *::after{font-family:'Inter',sans-serif!important}
#modal[data-kind="official-intro"]{width:min(600px,calc(100vw - 32px));max-height:calc(100dvh - 28px);margin:auto;padding:0;border:1px solid #292929;border-radius:16px;background:#141414;color:#d8d8d8;overflow:auto}
#modal[data-kind="official-intro"] .modal-head{padding:18px 24px;border-bottom:1px solid #303030;background:#141414}
#modal[data-kind="official-intro"] .modal-head h2{display:flex;align-items:center;font-size:21px;font-weight:700;letter-spacing:-.4px}
#modal[data-kind="official-intro"] .modal-head h2::before{content:'';width:0}
#modal[data-kind="official-intro"] #modal-content{padding:0}
.official-intro{padding:24px;display:grid;gap:16px}
.official-capacity{padding:14px 16px;border:1px solid #304c60;background:#161e27;border-radius:10px}
.official-capacity h3,.official-benefits h3{font-size:14px;font-weight:750;margin:0 0 8px}
.official-capacity>div{display:flex;gap:10px;align-items:center}
.official-capacity .icon{width:22px;height:22px;color:#187afa}
.official-capacity strong{display:block;font-size:16px}.official-capacity small{display:block;font-size:12px;color:#94999f;margin-top:2px}
.official-disconnected{display:flex;gap:22px;align-items:center;padding:16px 22px;border:1px solid #ffa000;border-radius:15px;background:#38280e}
.official-disconnected>.icon{width:36px;height:36px;color:#ffa000}
.official-disconnected b{display:inline-block;padding:3px 9px;border-radius:7px;background:#ff9900;color:white;font-size:13px;font-weight:800}
.official-disconnected p{font-size:16px;font-weight:600;line-height:1.55;margin:9px 0 0}
.official-connect{display:flex;justify-content:center;padding:16px 0 0}
.official-connect-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:51px;padding:14px 28px;background:#1879ef;color:#fff;border:0;border-radius:12px;font-size:16px;font-weight:700;cursor:default}
.official-benefits{padding:18px 16px;background:#272727;border-radius:12px}
.official-benefits ul{padding-left:20px;margin:0;font-size:14px;font-weight:500;line-height:1.45}
.official-footer{padding:12px 20px;border-top:1px solid #303030;display:flex;justify-content:flex-end}.official-footer .btn{color:#398dff;background:transparent}
@media(max-width:480px){.official-intro{padding:18px}.official-disconnected{padding:14px;gap:12px}.official-disconnected p{font-size:14px}#modal[data-kind="official-intro"] .modal-head h2{font-size:18px}}
#modal[data-kind="official-intro"] .modal-head h2>.icon{color:#398dff;width:25px;height:25px}
.official-connect-button{cursor:pointer}
#real-qr{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:#b1b1b9;text-align:center;padding:20px}
#real-qr img{width:100%;max-width:360px;height:auto;background:white;padding:12px;border-radius:10px}
.qr-loading-spinner{width:52px;height:52px;border:4px solid #ffffff15;border-top-color:#18afe9;border-radius:50%;animation:qr-spin 1s linear infinite}
@keyframes qr-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.qr-loading-spinner{animation-duration:3s}}