:root {
    --blue: #007aff;
    --glass: rgba(255, 255, 255, 0.7);
    --shadow: 0 8px 25px rgba(0,0,0,0.08);
}

* { margin:0; padding:0; box-sizing:border-box; font-family:-apple-system, sans-serif; }

body {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    background-attachment: fixed; padding: 85px 20px 40px;
}

/* 玻璃卡片 */
.glass-panel {
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

/* 导航与层级 */
.top-bar { position:fixed; top:15px; width:calc(100% - 40px); max-width:800px; height:56px; z-index:900; display:flex; align-items:center; justify-content:space-between; padding:0 20px; left:50%; transform:translateX(-50%); }
.sidebar-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.15); z-index:1000; display:none; backdrop-filter:blur(3px); }
.sidebar-overlay.active { display:block; }
.sidebar { position:fixed; top:0; left:-280px; width:260px; height:100vh; z-index:1001; transition:0.4s cubic-bezier(0.4, 0, 0.2, 1); padding:80px 20px; }
.sidebar.active { left:0; }
.sidebar a { display:block; padding:16px; color:#333; text-decoration:none; border-radius:14px; margin-bottom:8px; font-weight:500; }
.sidebar a.active-link { background:rgba(0,122,255,0.1); color:var(--blue); }

/* 首页卡片修复 */
.profile-card { width:100%; max-width:800px; overflow:hidden; margin:0 auto 25px; position:relative; }
.card-bg { height:200px; width:100%; }
.card-bg img { width:100%; height:100%; object-fit:cover; }
.avatar-box { position:absolute; top:130px; right:30px; z-index:10; }
.avatar-img { width:90px; height:90px; border-radius:50%; border:4px solid white; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.profile-body { padding:40px 25px 30px; background:rgba(255,255,255,0.25); }

/* 名字与标签强制同行 */
.name-row, .f-name-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
h1 { font-size:24px; color:#1d1d1f; }
.tag-creator { background:rgba(0,122,255,0.1); color:var(--blue); padding:3px 10px; border-radius:8px; font-size:12px; font-weight:bold; }
.tag-creator-mini { background:rgba(0,122,255,0.08); color:var(--blue); padding:2px 7px; border-radius:6px; font-size:11px; font-weight:bold; white-space:nowrap; }

/* 按钮样式：修复果冻质感 */
.visit-btn { 
    background:var(--blue); color:white; padding:12px 28px; border-radius:15px; 
    text-decoration:none; font-weight:600; display:inline-block; 
    box-shadow: 0 4px 15px rgba(0,122,255,0.35); transition:0.2s;
}
.visit-btn:active { transform: scale(0.96); }

.lang-btn { border:none; padding:7px 15px; border-radius:12px; background:rgba(255,255,255,0.4); cursor:pointer; font-size:14px; }
.lang-btn.active { background:var(--blue); color:white; box-shadow:0 4px 10px rgba(0,122,255,0.2); }

.friend-card { 
    max-width:800px; margin:0 auto 15px; display:flex; align-items:center; padding:18px 20px; gap:15px;
}
.f-avatar { width:55px; height:55px; border-radius:15px; object-fit:cover; }
.f-info { flex:1; }
.f-name { font-weight:700; color:#333; font-size:16px; }
.f-bio { font-size:13px; color:#666; margin-top:2px; }

.btn-go { 
    background:white; color:var(--blue); padding:9px 18px; border-radius:12px; 
    text-decoration:none; font-weight:600; font-size:14px; box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* 在线统计 */
.online-stat { width:fit-content; margin:30px auto; padding:10px 20px; display:flex; align-items:center; gap:8px; font-size:13px; }
.online-dot { width:8px; height:8px; background:#34c759; border-radius:50%; box-shadow:0 0 8px #34c759; animation:p 2s infinite; }
@keyframes p { 0%,100% {opacity:0.6;} 50% {opacity:1;} }

/* 弹窗修复 */
.modal-mask { position:fixed; top:0; left:0; width:100%; height:100%; z-index:2000; background:rgba(0,0,0,0.3); display:none; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.modal-mask.active { display:flex; }
.modal-box { width:85%; max-width:380px; padding:30px; text-align:center; animation:in 0.3s ease-out; }
@keyframes in { from{transform:scale(0.9); opacity:0;} to{transform:scale(1); opacity:1;} }
.modal-btns { display:flex; gap:12px; margin-top:25px; }
.modal-btns button { flex:1; padding:13px; border-radius:15px; border:none; font-weight:600; cursor:pointer; }
.m-btn-ok { background:var(--blue); color:white; box-shadow: 0 4px 12px rgba(0,122,255,0.3); }

/* 子页面 */
.page-section { display:none; }
.page-section.active { display:block; animation: fade 0.4s; }
@keyframes fade { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.sub-page { max-width:800px; margin:0 auto; padding:40px 30px; min-height:300px; }
.line { height:1px; background:rgba(0,0,0,0.1); margin:15px 0; }

/* 版权信息 */
.footer-copyright {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.footer-copyright p {
    letter-spacing: 1px;
    text-transform: uppercase;
}
.auth-btn { width: 100%; padding: 10px; background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; cursor: pointer; font-size: 12px; color: #666; transition: 0.3s; }
.auth-btn:hover { background: rgba(255,255,255,0.8); }

/* 侧边栏高亮 */
.sidebar-links a.active-link { background: rgba(0,122,255,0.1); color: #007aff; }

/* 弹窗按钮样式 */
.m-btn-cancel { background: #eee; color: #666; }
.m-btn-ok { background: #007aff; color: white; }

/* 强制头像统一大小 */
.f-avatar { width: 50px !important; height: 50px !important; border-radius: 50%; object-fit: cover; }