*{box-sizing:border-box}
:root{--blue:#12aee3;--text:#25282b;--muted:#8b949c;--line:#e8ebee;--bg:#f5f7f8}
html,body{margin:0;padding:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{min-height:100vh}
.app{max-width:720px;margin:auto;background:#fff;min-height:100vh;padding-bottom:30px}
.cover{height:300px;position:relative;overflow:hidden;background:#ddd}
.cover-photo{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.topbar{position:absolute;left:0;right:0;top:0;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:linear-gradient(#0005,transparent);color:#fff}
.top-title{font-size:20px;font-weight:700;text-shadow:0 1px 3px #0007}
.icon-btn{border:0;background:transparent;color:#fff;font-size:38px;line-height:1;cursor:pointer}
.profile{position:relative;padding:92px 26px 24px;background:#fff;border-bottom:1px solid var(--line)}
.avatar-wrap{position:absolute;top:-58px;left:26px;width:126px;height:126px}
.avatar{width:100%;height:100%;border-radius:50%;border:5px solid #fff;object-fit:cover;object-position:center top;box-shadow:0 2px 8px #0002}
.online{position:absolute;right:1px;bottom:7px;width:21px;height:21px;border-radius:50%;background:#27c56c;border:3px solid #fff}
.profile-actions{position:absolute;right:24px;top:28px;display:flex;gap:14px}
.round-btn{width:58px;height:58px;border-radius:50%;border:1px solid #e3e6e9;background:#fff;color:var(--blue);font-size:31px;display:flex;align-items:center;justify-content:center;padding:0}
.share span{display:block;transform:translate(1px,-1px)}
h1{display:flex;align-items:center;gap:5px;font-size:29px;margin:0 0 7px;font-weight:700}
.verified{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:2px solid currentColor;border-radius:50%;font-size:12px;line-height:1;font-weight:800}
.handle{font-size:18px;color:var(--muted);margin-bottom:26px}.handle span{color:#8e979e}
.bio{font-size:19px;line-height:1.5;margin:0 0 10px}.more{border:0;background:transparent;color:var(--blue);padding:8px 0;font-size:17px}
.subscription{padding:26px;background:#fff;border-bottom:1px solid var(--line)}
.section-label{font-size:22px;color:#89929a;font-weight:700;margin-bottom:22px}
.cta{display:flex;align-items:center;justify-content:space-between;text-decoration:none;background:var(--blue);color:#fff;font-weight:700;font-size:18px;padding:21px 36px;border-radius:44px}
.native-ad-section{padding:18px 20px;background:#fff;border-bottom:1px solid var(--line)}
.ad-label{text-align:center;color:#a1a8ae;font-size:10px;letter-spacing:1px;margin-bottom:8px}
.native-ad-box{min-height:90px;border:1px dashed #d7dce0;border-radius:8px;background:#fafbfc;display:flex;align-items:center;justify-content:center;overflow:hidden}
.native-placeholder{color:#adb4ba;font-size:13px}
.tabs{height:92px;display:flex;background:#fff;border-bottom:1px solid var(--line)}
.tab{position:relative;flex:1;border:0;background:#fff;color:#8c959d;font-weight:700;font-size:19px}.tab.active{color:#222}.tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#222}
.locked{min-height:390px;background:linear-gradient(180deg,#f7f8f9,#eef0f2);padding:58px 26px 100px;text-align:center}
.lock{font-size:75px;color:#d9dde1;margin-bottom:52px;transform:rotate(180deg)}
.locked-card{border:1px solid #d8dde1;border-radius:10px;background:#ffffffaa;padding:18px 24px}
.stats{text-align:left;color:#87919a;font-size:16px;margin-bottom:20px}.stats span{float:right}
.cta.small{justify-content:center;font-size:16px;padding:18px 15px}
.bottom-ad{margin-top:0}
@media(max-width:520px){
 .cover{height:300px}.profile{padding-left:26px;padding-right:26px}
 .profile-actions{top:27px;right:18px;gap:12px}
 .round-btn{width:58px;height:58px}
 h1{font-size:27px}.bio{font-size:18px}
 .cta{font-size:17px;padding:20px 34px}
}

.top-banner-ad{padding:8px 10px;background:#fff;border-bottom:1px solid #e8ebee}
.top-banner-ad a{min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-decoration:none;background:#f4f6f8;border:1px solid #e0e4e7;border-radius:7px;color:#7c858c}
.top-banner-ad span{font-size:9px;letter-spacing:1px}
.top-banner-ad strong{font-size:15px;color:#555}


/* Ad placement fix: keep the 320x50 banner in its own slot so the profile photo never overlaps it. */
.top-banner-ad{min-height:66px;padding:8px 10px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.top-banner-ad iframe{display:block;max-width:100%;border:0}
.profile .avatar-wrap{top:12px;z-index:2}
.profile{padding-top:155px}
.native-ad-section{clear:both}
.native-ad-box iframe{max-width:100%;border:0}

/* Requested placement for the moved 320x50 banner ad. */
.top-banner-placement{min-height:90px}
.top-banner-placement iframe{width:320px;height:50px;max-width:100%;border:0;display:block}