:root { --ink: #34383a; --teal: #12c5bf; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: #f8fbf8; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { overflow: hidden; }.page-shell { width: 100%; max-width: 430px; height: 100vh; margin: 0 auto; background: #f8fbf8; }.profile-content { height: 100%; overflow-y: auto; padding-bottom: 105px; scrollbar-width: none; }.profile-content::-webkit-scrollbar { display: none; }
.profile-hero { position: relative; min-height: 430px; overflow: hidden; padding: 30px 20px 0; background: #9bded6; }.hero-image { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }.hero-mask { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(238, 255, 243, .42) 0%, rgba(158, 232, 217, .28) 48%, rgba(91, 202, 190, .48) 100%); }.hero-sea-light { position: absolute; z-index: 2; right: -18%; bottom: -21%; left: -18%; height: 48%; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at center, rgba(239, 255, 244, .43), rgba(176, 237, 223, .03) 65%); filter: blur(12px); }.profile-hero h1 { position: relative; z-index: 3; margin: 0; color: #172726; font-size: 26px; font-weight: 650; letter-spacing: .06em; text-align: center; }.profile-summary { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; margin-top: 193px; }.profile-summary strong { color: #263a38; font-size: 22px; font-weight: 650; }.avatar-slot { position: relative; display: grid; width: 84px; height: 84px; overflow: hidden; place-content: center; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 6px 18px rgba(52,109,98,.1); }.avatar-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }.avatar-slot img.is-missing { display: none; }.avatar-slot small { display: none; color: #8a9b98; font-size: 12px; }.avatar-slot:has(img.is-missing) small { display: block; }
.profile-stats { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1px 1fr; align-items: end; margin-top: 37px; }.profile-stats a { display: flex; flex-direction: column; align-items: center; color: #405956; text-decoration: none; }.profile-stats b { margin-bottom: 4px; color: #263c39; font-size: 27px; line-height: 1; }.profile-stats span { font-size: 14px; }.profile-stats i { width: 1px; height: 22px; margin-bottom: 1px; background: rgba(75,115,108,.5); }
.profile-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 530px; margin-top: -1px; padding: 54px 14px 40px; border-radius: 24px 24px 0 0; background: #fbfdf9; row-gap: 43px; }.menu-item { display: flex; min-width: 0; flex-direction: column; align-items: center; color: #383d3d; font-size: 14px; line-height: 1.35; text-align: center; text-decoration: none; }.menu-item:active { opacity: .65; transform: scale(.96); }.icon-slot { position: relative; display: grid; width: 43px; height: 43px; margin-bottom: 8px; place-content: center; }.icon-slot img { position: relative; z-index: 1; display: block; width: 39px; height: 39px; object-fit: contain; }.icon-slot img.is-missing { display: none; }.icon-slot small { display: none; color: #7e9191; font-size: 8px; line-height: 1.3; }.icon-slot:has(img.is-missing) { border: 2px dashed rgba(67,94,96,.4); border-radius: 12px; }.icon-slot:has(img.is-missing) small { display: block; }
.tab-bar { position: fixed; z-index: 10; bottom: 0; left: 50%; display: flex; align-items: center; justify-content: space-around; width: 100%; max-width: 430px; height: 82px; padding-bottom: env(safe-area-inset-bottom); border-radius: 22px 22px 0 0; background: rgba(255,255,255,.96); box-shadow: 0 -5px 20px rgba(45,65,73,.11); transform: translateX(-50%); }.tab-bar a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #687b86; font-size: 11px; text-decoration: none; }.tab-bar a.is-current { color: #10aaa5; font-weight: 700; }.tab-icon { height: 27px; font-size: 23px; line-height: 24px; }.ai-icon { display: grid; width: 42px; height: 42px; margin-top: -16px; place-content: center; border-radius: 50%; background: #15c6c9; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 5px 13px rgba(21,198,201,.28); }
@media (max-width: 360px) { .profile-hero { min-height: 405px; padding-right: 16px; padding-left: 16px; }.profile-summary { margin-top: 178px; }.profile-menu { padding-right: 9px; padding-left: 9px; row-gap: 38px; }.menu-item { font-size: 13px; }.profile-stats span { font-size: 13px; } }