* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; }

.bl-hero, .bl-social, .bl-links, .bl-featured, .bl-posts, .bl-contact, .bl-footer {
    width: 100%;
    padding: 2rem 1.5rem;
}
.bl-hero .inner, .bl-social .inner, .bl-links .inner, .bl-featured .inner, .bl-posts .inner, .bl-contact .inner, .bl-footer .inner {
    max-width: 480px;
    margin: 0 auto;
}

/* Hero */
.bl-hero { text-align: center; }
.bl-hero .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 0.75rem; }
.bl-hero .name { font-size: 1.5rem; font-weight: 700; margin: 0; }
.bl-hero .verified-badge { color: #1d9bf0; font-size: 1.2rem; }
.bl-hero .bio { font-size: 0.95rem; margin-top: 0.5rem; opacity: 0.85; }

/* Social */
.bl-social { text-align: center; }
.bl-social .social-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bl-social .social-item a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,0.08); text-decoration: none; font-size: 1.3rem; transition: transform 0.2s; }
.bl-social .social-item a:hover { transform: scale(1.1); }

/* Links */
.bl-links .link-list { display: flex; flex-direction: column; gap: 12px; }
.bl-links .link-btn { display: block; width: 100%; padding: 14px 20px; text-align: center; text-decoration: none; font-weight: 600; font-size: 1rem; transition: opacity 0.2s; }
.bl-links .link-btn:hover { opacity: 0.85; }
.bl-links .link-btn .icon { margin-right: 6px; }

/* Featured */
.bl-featured .featured-img { width: 100%; border-radius: 12px; margin-bottom: 1rem; }
.bl-featured .featured-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; }
.bl-featured .featured-desc { font-size: 0.95rem; opacity: 0.85; margin-bottom: 1rem; }
.bl-featured .featured-btn { display: inline-block; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: opacity 0.2s; }
.bl-featured .featured-btn:hover { opacity: 0.85; }

/* Posts */
.bl-posts .posts-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }
.bl-posts .posts-list { display: flex; flex-direction: column; gap: 1rem; }
.bl-posts .post-item { display: flex; gap: 12px; padding-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.08); }
.bl-posts .post-item:last-child { border-bottom: none; }
.bl-posts .post-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.bl-posts .post-info { flex: 1; }
.bl-posts .post-title-link { font-weight: 600; text-decoration: none; font-size: 0.95rem; color: inherit; display: block; }
.bl-posts .post-title-link:hover { text-decoration: underline; }
.bl-posts .post-date { font-size: 0.8rem; opacity: 0.6; margin-top: 4px; }

/* Contact */
.bl-contact { text-align: center; }
.bl-contact .contact-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.75rem; }
.bl-contact .contact-info { font-size: 0.95rem; margin-bottom: 0.5rem; opacity: 0.9; }
.bl-contact .contact-btn { display: inline-block; margin-top: 1rem; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: opacity 0.2s; }
.bl-contact .contact-btn:hover { opacity: 0.85; }

/* Footer */
.bl-footer { text-align: center; font-size: 0.85rem; }
.bl-footer p { margin: 0.25rem 0; }
.bl-footer a { color: inherit; text-decoration: none; }
.bl-footer a:hover { text-decoration: underline; }

/* Text */
.bl-text .text-content { font-size: 1rem; line-height: 1.7; }
.bl-text .text-content p { margin-bottom: 1rem; }
.bl-text .text-content h1, .bl-text .text-content h2, .bl-text .text-content h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; font-weight: 700; }
.bl-text .text-content h1 { font-size: 1.8rem; }
.bl-text .text-content h2 { font-size: 1.5rem; }
.bl-text .text-content h3 { font-size: 1.2rem; }
.bl-text .text-content ul, .bl-text .text-content ol { margin-left: 1.5rem; margin-bottom: 1rem; }
.bl-text .text-content a { color: inherit; text-decoration: underline; }
.bl-text .text-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* Responsive */
@media (max-width: 480px) {
    .bl-hero, .bl-social, .bl-links, .bl-featured, .bl-posts, .bl-contact, .bl-footer {
        padding: 1.5rem 1rem;
    }
}