:root { --page-width: 480px; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #050505; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
.wrap-body { width: 100%; max-width: var(--page-width); min-height: 100svh; margin: 0 auto; background: radial-gradient(circle at 50% 18%, #382719 0, #0b0907 54%, #030303 100%); }
.header-area { position: relative; z-index: 5; width: 100%; }
.header-activity { display: flex; align-items: center; justify-content: space-between; padding: .55rem .8rem; }
.logo img { display: block; width: auto; height: 3rem; }
.contact-list { display: flex; align-items: center; gap: .55rem; }
.btnimg { display: block; }
.icon-img { display: block; width: auto; height: 2.35rem; }
.main-content { width: 100%; padding: .25rem .75rem 1rem; }
.img-area { display: flex; justify-content: center; }
.hero-image { display: block; width: min(100%, 410px); height: auto; object-fit: contain; }
.ad-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; width: 100%; margin-top: .75rem; padding: 0 .15rem; }
.ad-slot { display: block; width: 4.25rem; flex: 0 0 4.25rem; overflow: hidden; border: 2px solid #ffcb21; border-radius: .35rem; background: #050505; box-shadow: 0 0 12px rgba(255, 188, 20, .32); }
.ad-slot img { display: block; width: 100%; height: auto; }
.footer-area { position: relative; z-index: 10; width: 100%; padding: .35rem .35rem .45rem; background: #080604; }
.app { display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.btn_list { display: block; flex: 1; min-width: 0; }
.btn_list img { display: block; width: 100%; height: auto; }
.setup-tips-container { display: flex; justify-content: center; gap: .6rem; padding-top: .28rem; }
.setup-tips-container img { display: block; width: auto; max-width: 47%; height: .72rem; object-fit: contain; }
.spinner-container { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.55); }
.spinner { width: 2rem; height: 2rem; border: 3px solid #ffd31c; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 360px) { .logo img { height: 2.55rem; } .icon-img { height: 1.85rem; } .ad-slot { width: 3.7rem; flex-basis: 3.7rem; } }