<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", sans-serif; -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; color: #1f3a5f; padding: 60px 16px 40px; background: linear-gradient(160deg, #eef4ff 0%, #dceaff 35%, #c9dfff 70%, #bcd8ff 100%); position: relative; overflow-x: hidden; }
.top-user-row{position:fixed;top:14px;left:14px;right:14px;z-index:10001;display:flex;justify-content:space-between;align-items:center}
.user-top-btn{background:rgba(255,255,255,0.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:7px 14px;border-radius:20px;box-shadow:0 2px 10px rgba(64,128,255,0.12);color:#2b6ed9;font-size:12px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,0.9);transition:all .18s;white-space:nowrap}
.user-top-btn:active{transform:scale(0.94)}
body::before { content: ""; position: fixed; top: -120px; right: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(93,160,255,0.35), transparent 70%); z-index: 0; animation: float1 8s ease-in-out infinite alternate; }
body::after { content: ""; position: fixed; bottom: -100px; left: -60px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247,0.22), transparent 70%); z-index: 0; animation: float2 10s ease-in-out infinite alternate; }
@keyframes float1 { from { transform: translate(0,0); } to { transform: translate(-30px,20px); } }
@keyframes float2 { from { transform: translate(0,0); } to { transform: translate(25px,-25px); } }
.container { position: relative; z-index: 1; }
.header-card { width: 78%; max-width: 320px; margin: 0 auto 16px; padding: 5px; border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 12px 32px rgba(64,128,255,0.18); text-align: center; }
.header-card-inner { border: none; border-radius: 20px; padding: 18px 12px; background: linear-gradient(160deg, #ffffff 0%, #f3f8ff 100%); text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); }
.header-card h1 { font-size: 26px; font-weight: 900; background: linear-gradient(135deg, #2b6ed9, #7c5cfc, #2b6ed9); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; letter-spacing: 2px; animation: shine 4s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }
.header-card p { color: #5f7aa5; font-size: 12px; font-weight: 500; line-height: 1.6; }
.icon-row { display: flex; justify-content: center; gap: 28px; margin: 16px 0 22px; }
.icon-circle { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.95); box-shadow: 0 8px 20px rgba(64,128,255,0.18), inset 0 1px 0 #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; transition: all 0.25s cubic-bezier(.4,0,.2,1); border: 1px solid rgba(255,255,255,0.9); }
.icon-circle:active { transform: scale(0.9) translateY(2px); box-shadow: 0 4px 10px rgba(64,128,255,0.15); }
.menu-container { background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 26px; padding: 14px; box-shadow: 0 16px 40px rgba(64,128,255,0.14); border: 1px solid rgba(255,255,255,0.9); }
.btn-item { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; margin-bottom: 12px; background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%); border: 1px solid #e3eeff; border-radius: 18px; font-size: 16px; font-weight: 600; color: #1f3a5f; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 3px 10px rgba(64,128,255,0.05); cursor: pointer; user-select: none; position: relative; overflow: hidden; }
.btn-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #3a7bf0, #7c5cfc); opacity: 0; transition: opacity 0.2s; }
.btn-item:active::before { opacity: 1; }
.btn-item:last-child { margin-bottom: 0; }
.btn-item:active { transform: scale(0.98); background: #eef4ff; box-shadow: inset 0 2px 6px rgba(64,128,255,0.08); }
.arrow { color: #a0c0e8; font-size: 16px; font-weight: 700; transition: all 0.2s; }
.btn-item:active .arrow { color: #2b6ed9; transform: translateX(4px); }
.footer-tip { text-align: center; margin-top: 30px; margin-bottom: 10px; color: #8fa8c8; font-size: 13px; line-height: 1.8; padding: 0 20px; letter-spacing: 0.5px; }
.notice-mask { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index: 19998; backdrop-filter: blur(2px); }
.notice-box { display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:86%; max-width:480px; background:#fff; z-index:19999; padding:28px 22px; border-radius:24px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,0.15); }
.notice-box h3{ color:#2b6ed9; font-size:22px; margin-bottom:16px; font-weight: 700;}
.notice-content{ color:#444; font-size:16px; line-height:1.8; margin-bottom:24px;}
.notice-close-btn{ padding:12px 36px; background:linear-gradient(135deg, #3a7bf0, #2b6ed9); color:white; border:none; border-radius:14px; font-size:16px; font-weight: 600; cursor:pointer; width: 100%; }
.wechat-tip { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 520px; background: #fff; z-index: 9999; padding: 26px 20px; border-radius: 20px; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); }
.copy-domain { margin-top: 14px; background: #2b6ed9; color: #fff; border: none; padding: 12px 18px; border-radius: 12px; font-size: 16px; width: 100%; font-weight: 500; }
.copy-success { margin-top: 12px; color: #23a848; display: none; font-weight: 500;}
.close-pop { position: absolute; top: 12px; right: 16px; font-size: 24px; color: #999; cursor: pointer; }
.mask { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 9998; backdrop-filter: blur(2px); }
.toast { position: fixed; left: 50%; top: 45%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.75); color:#fff; padding:12px 24px; border-radius: 12px; z-index:10000; display:none; font-size: 15px; font-weight: 500; }
/* 联系方式弹窗 */
.contact-modal { display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:86%; max-width:400px; background:#fff; z-index:20000; padding:28px 22px; border-radius:22px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,0.18); }
.contact-modal .cm-icon { font-size:44px; margin-bottom:10px; }
.contact-modal h3 { color:#2b6ed9; font-size:19px; margin-bottom:10px; }
.contact-modal .cm-num { background:#f0f6ff; color:#2b6ed9; font-size:22px; font-weight:bold; letter-spacing:1px; padding:14px; border-radius:12px; margin:10px 0 16px; word-break:break-all; }
.contact-modal .cm-btn { width:100%; padding:13px; border:none; border-radius:12px; background:linear-gradient(135deg,#3a7bf0,#2b6ed9); color:#fff; font-size:16px; font-weight:600; cursor:pointer; }
.contact-modal .cm-tip { color:#8fa8c8; font-size:12px; margin-top:10px; }
</style>
