* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(255, 64, 129, 0.22), transparent 30%),
        linear-gradient(135deg, #110817 0%, #1c0b28 45%, #07040a 100%);
    color: #ffffff;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

.topbar {
    width: 100%;
    padding: 24px 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
}

.logo span {
    color: #ff4f93;
}

.menu {
    display: flex;
    align-items: center;
    gap: 28px;
    color: #dfd5e8;
    font-size: 15px;
}

.btn-menu {
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
}

.hero {
    padding: 60px 7% 90px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;
}

.badge {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 79, 147, 0.14);
    border: 1px solid rgba(255, 79, 147, 0.35);
    color: #ffd4e5;
    font-size: 14px;
    margin-bottom: 24px;
}

.hero h1 {
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: -3px;
    max-width: 850px;
}

.hero p {
    margin-top: 24px;
    max-width: 650px;
    font-size: 20px;
    line-height: 1.6;
    color: #d8cde3;
}

.hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 700;
    transition: 0.25s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #ff4f93, #ff7a59);
    color: #fff;
    box-shadow: 0 18px 45px rgba(255, 79, 147, 0.28);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 55px rgba(255, 79, 147, 0.36);
}

.btn-secondary {
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.12);
}

.trust {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 28px;
    color: #cdbed8;
    font-size: 14px;
}

.hero-card {
    display: flex;
    justify-content: center;
}

.profile-card {
    width: min(390px, 100%);
    padding: 22px;
    border-radius: 32px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 90px rgba(0,0,0,0.35);
}

.profile-cover {
    height: 180px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,79,147,0.65), rgba(255,122,89,0.55)),
        linear-gradient(45deg, #2f123d, #62305f);
}

.profile-avatar {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    margin: -43px auto 16px;
    background: linear-gradient(135deg, #ffffff, #ffb7d2);
    border: 5px solid #24102f;
}

.profile-card h2 {
    text-align: center;
    font-size: 26px;
    margin-bottom: 10px;
}

.profile-card p {
    text-align: center;
    color: #dccfe8;
    line-height: 1.5;
}

.stats {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stats div {
    padding: 16px 10px;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    text-align: center;
}

.stats strong {
    display: block;
    font-size: 22px;
}

.stats span {
    display: block;
    color: #c8b8d4;
    font-size: 13px;
    margin-top: 4px;
}

.features,
.plans,
.cta {
    padding: 80px 7%;
}

.features h2,
.plans h2,
.cta h2 {
    text-align: center;
    font-size: 42px;
    letter-spacing: -1.5px;
    margin-bottom: 38px;
}

.feature-grid,
.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature-grid article,
.plan-card {
    padding: 30px;
    border-radius: 28px;
    background: rgba(255,255,255,0.075);
    border: 1px solid rgba(255,255,255,0.12);
}

.feature-grid h3,
.plan-card h3 {
    font-size: 24px;
    margin-bottom: 14px;
}

.feature-grid p,
.plan-card li,
.cta p {
    color: #d5c8df;
    line-height: 1.6;
}

.plans-grid {
    max-width: 900px;
    margin: 0 auto;
    grid-template-columns: repeat(2, 1fr);
}

.plan-card {
    position: relative;
}

.plan-card.premium {
    border-color: rgba(255,79,147,0.5);
    box-shadow: 0 30px 80px rgba(255,79,147,0.16);
}

.plan-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255,79,147,0.22);
    color: #ffd4e5;
}

.price {
    font-size: 42px;
    font-weight: 800;
    margin: 10px 0 22px;
}

.plan-card ul {
    list-style: none;
    display: grid;
    gap: 12px;
    margin-bottom: 28px;
}

.plan-card li::before {
    content: "✔ ";
    color: #ff7aab;
}

.full {
    width: 100%;
}

.cta {
    text-align: center;
}

.cta p {
    margin-bottom: 28px;
}

.footer {
    padding: 28px 7%;
    text-align: center;
    color: #bcaeca;
    border-top: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 900px) {
    .topbar {
        flex-direction: column;
        gap: 20px;
    }

    .menu {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 35px;
    }

    .feature-grid,
    .plans-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        letter-spacing: -2px;
    }
}

.auth-page {
    min-height: calc(100vh - 96px);
    padding: 50px 7%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: min(540px, 100%);
    padding: 34px;
    border-radius: 30px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 30px 90px rgba(0,0,0,0.35);
    backdrop-filter: blur(18px);
}

.auth-card h1 {
    font-size: 42px;
    letter-spacing: -1.5px;
    margin-bottom: 12px;
}

.auth-card p {
    color: #d8cde3;
    line-height: 1.6;
    margin-bottom: 24px;
}

.auth-form {
    display: grid;
    gap: 12px;
}

.auth-form label {
    color: #f2e8fa;
    font-weight: 700;
    margin-top: 8px;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.09);
    color: #ffffff;
    padding: 0 14px;
    outline: none;
}

.auth-form select option {
    color: #111111;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
    border-color: rgba(255,79,147,0.75);
    box-shadow: 0 0 0 4px rgba(255,79,147,0.14);
}

.auth-form ul,
.form-errors {
    list-style: none;
    color: #ffb6c8;
    font-size: 14px;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: #d8cde3;
}

.checkbox-line input {
    width: 18px;
    min-height: 18px;
}

.dashboard-card {
    width: min(680px, 100%);
}

.dashboard-info {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.dashboard-info p {
    margin: 0;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.07);
}

.dashboard-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 24px;
}

@media (max-width: 700px) {
    .dashboard-actions {
        grid-template-columns: 1fr;
    }
}

.social-page {
    padding: 50px 7% 90px;
}

.social-hero {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 32px;
}

.social-hero h1 {
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 18px;
}

.social-hero p {
    max-width: 760px;
    color: #d8cde3;
    font-size: 18px;
    line-height: 1.6;
}

.social-plan-card {
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 30px 90px rgba(0,0,0,0.28);
}

.social-plan-card span {
    display: block;
    color: #d8cde3;
    margin-bottom: 8px;
}

.social-plan-card strong {
    display: block;
    font-size: 32px;
    margin-bottom: 12px;
}

.social-plan-card p {
    color: #d8cde3;
    line-height: 1.5;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.social-card {
    padding: 28px;
    border-radius: 28px;
    background: rgba(255,255,255,0.075);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

.social-card h2 {
    font-size: 25px;
    margin-bottom: 14px;
}

.social-card p {
    color: #d5c8df;
    line-height: 1.6;
    margin-bottom: 22px;
}

.social-card a {
    margin-top: auto;
}

.limit-alert {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 79, 147, 0.14);
    border: 1px solid rgba(255, 79, 147, 0.35);
    color: #ffd4e5;
    font-size: 14px;
    margin-bottom: 18px;
}

.disabled-link {
    opacity: 0.68;
    cursor: not-allowed;
}

@media (max-width: 1000px) {
    .social-hero {
        grid-template-columns: 1fr;
    }

    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .social-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   REDE SOCIAL - LAYOUT ESTILO FACEBOOK
   ========================================================= */

.social-body {
    background: #f0f2f5;
    color: #1c1e21;
    min-height: 100vh;
}

.social-topbar {
    height: 64px;
    padding: 0 24px;
    background: #ffffff;
    border-bottom: 1px solid #dddfe2;
    display: grid;
    grid-template-columns: 230px 1fr auto;
    align-items: center;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.social-logo {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #231f20;
}

.social-logo span {
    color: #e91e63;
}

.social-search input {
    width: min(520px, 100%);
    height: 42px;
    border: none;
    outline: none;
    border-radius: 999px;
    background: #f0f2f5;
    padding: 0 18px;
    color: #1c1e21;
    font-size: 15px;
}

.social-nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

.social-nav a {
    color: #65676b;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 10px;
}

.social-nav a:hover,
.social-nav a.active {
    background: #f0f2f5;
    color: #e91e63;
}

.social-layout {
    display: grid;
    grid-template-columns: 280px minmax(420px, 720px) 320px;
    gap: 24px;
    padding: 24px;
    max-width: 1480px;
    margin: 0 auto;
}

.social-sidebar-left,
.social-sidebar-right {
    position: sticky;
    top: 88px;
    align-self: start;
}

.mini-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 12px;
}

.mini-profile:hover {
    background: rgba(0,0,0,0.05);
}

.mini-avatar,
.composer-avatar,
.post-avatar,
.suggestion-avatar {
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e63, #ff7a59);
    flex-shrink: 0;
}

.mini-avatar {
    width: 46px;
    height: 46px;
}

.mini-profile strong {
    display: block;
    color: #1c1e21;
    font-size: 15px;
}

.mini-profile span {
    display: block;
    color: #65676b;
    font-size: 13px;
    margin-top: 2px;
}

.side-link {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    color: #1c1e21;
    font-weight: 700;
    margin-bottom: 4px;
}

.side-link:hover,
.side-link.active {
    background: rgba(0,0,0,0.06);
}

.side-link.locked {
    color: #b00020;
    background: rgba(176, 0, 32, 0.08);
}

.social-feed {
    display: grid;
    gap: 18px;
}

.composer-card,
.feed-post,
.right-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #dddfe2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.composer-card {
    padding: 14px;
}

.composer-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.composer-avatar {
    width: 44px;
    height: 44px;
}

.composer-top input {
    width: 100%;
    height: 44px;
    border: none;
    outline: none;
    border-radius: 999px;
    background: #f0f2f5;
    padding: 0 18px;
    color: #65676b;
    font-size: 15px;
}

.composer-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #edf0f2;
    margin-top: 14px;
    padding-top: 10px;
    gap: 8px;
}

.composer-actions button {
    border: none;
    background: transparent;
    min-height: 38px;
    border-radius: 10px;
    color: #65676b;
    font-weight: 700;
    cursor: not-allowed;
}

.composer-actions button:hover {
    background: #f0f2f5;
}

.feed-post {
    padding: 0;
    overflow: hidden;
}

.post-header {
    padding: 14px 16px 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-avatar {
    width: 46px;
    height: 46px;
}

.post-header strong {
    display: block;
    color: #1c1e21;
    font-size: 15px;
}

.post-header span {
    display: block;
    color: #65676b;
    font-size: 13px;
    margin-top: 2px;
}

.feed-post p {
    padding: 8px 16px 14px;
    color: #1c1e21;
    line-height: 1.55;
    font-size: 15px;
}

.post-image {
    height: 330px;
    background-size: cover;
    background-position: center;
}

.mock-image-one {
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.7), transparent 22%),
        linear-gradient(135deg, #5e1742, #e91e63 48%, #ff7a59);
}

.profile-preview-box {
    margin: 0 16px 14px;
    padding: 18px;
    border-radius: 14px;
    background: #f7f8fa;
    border: 1px solid #e4e6eb;
}

.profile-preview-box strong {
    display: block;
    color: #1c1e21;
    margin-bottom: 4px;
}

.profile-preview-box span {
    display: block;
    color: #e91e63;
    font-weight: 800;
    margin-bottom: 8px;
}

.profile-preview-box p {
    padding: 0;
    color: #65676b;
}

.post-stats {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    color: #65676b;
    font-size: 14px;
}

.post-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #edf0f2;
    padding: 6px;
}

.post-actions button,
.post-actions a {
    min-height: 40px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: #65676b;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-actions button:hover,
.post-actions a:hover {
    background: #f0f2f5;
}

.right-card {
    padding: 16px;
    margin-bottom: 16px;
}

.right-card h3 {
    font-size: 18px;
    color: #1c1e21;
    margin-bottom: 14px;
}

.right-card p {
    color: #65676b;
    font-size: 14px;
    line-height: 1.5;
}

.plan-status {
    padding: 14px;
    border-radius: 14px;
    background: #f7f8fa;
    border: 1px solid #e4e6eb;
    margin-bottom: 12px;
}

.plan-status span {
    display: block;
    color: #65676b;
    font-size: 13px;
}

.plan-status strong {
    display: block;
    color: #e91e63;
    font-size: 24px;
    margin-top: 4px;
}

.upgrade-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 14px;
    border-radius: 10px;
    background: #e91e63;
    color: #ffffff;
    font-weight: 800;
}

.suggestion-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f2;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-avatar {
    width: 42px;
    height: 42px;
}

.suggestion-item strong {
    display: block;
    color: #1c1e21;
    font-size: 14px;
}

.suggestion-item span {
    display: block;
    color: #65676b;
    font-size: 13px;
}

.gradient-one {
    background: linear-gradient(135deg, #e91e63, #ff7a59);
}

.gradient-two {
    background: linear-gradient(135deg, #7b1fa2, #e91e63);
}

.gradient-three {
    background: linear-gradient(135deg, #3949ab, #e91e63);
}

@media (max-width: 1200px) {
    .social-layout {
        grid-template-columns: 240px minmax(420px, 1fr);
    }

    .social-sidebar-right {
        display: none;
    }
}

@media (max-width: 850px) {
    .social-topbar {
        grid-template-columns: 1fr;
        height: auto;
        padding: 14px;
        gap: 12px;
    }

    .social-search input {
        width: 100%;
    }

    .social-nav {
        overflow-x: auto;
    }

    .social-layout {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .social-sidebar-left {
        position: static;
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
    }

    .mini-profile {
        display: none;
    }

    .side-link {
        white-space: nowrap;
        background: #ffffff;
        border: 1px solid #dddfe2;
    }

    .post-image {
        height: 240px;
    }
}

.photo-upload-card {
    padding: 18px;
}

.photo-upload-card h2 {
    color: #1c1e21;
    font-size: 22px;
    margin-bottom: 8px;
}

.photo-upload-card p {
    color: #65676b;
    line-height: 1.5;
    margin-bottom: 18px;
}

.social-body .auth-form label {
    color: #1c1e21;
}

.social-body .auth-form input,
.social-body .auth-form select,
.social-body .auth-form textarea {
    background: #f0f2f5;
    border: 1px solid #dddfe2;
    color: #1c1e21;
}

.social-body .auth-form input[type="file"] {
    padding: 12px;
    min-height: auto;
}

.light-checkbox {
    color: #1c1e21;
}

.real-post-image {
    width: 100%;
    display: block;
    max-height: 560px;
    object-fit: cover;
    background: #f0f2f5;
}

.empty-feed {
    padding-bottom: 12px;
}

.composer-input-link {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    background: #f0f2f5;
    color: #65676b;
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-size: 15px;
}

.composer-input-link:hover {
    background: #e4e6eb;
}

.composer-actions a {
    border: none;
    background: transparent;
    min-height: 38px;
    border-radius: 10px;
    color: #65676b;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.composer-actions a:hover {
    background: #f0f2f5;
}

.feed-section-title {
    padding: 18px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #dddfe2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.feed-section-title h2 {
    color: #1c1e21;
    font-size: 20px;
    margin-bottom: 6px;
}

.feed-section-title p {
    color: #65676b;
    font-size: 14px;
    line-height: 1.5;
}

.private-post {
    border: 1px solid rgba(233, 30, 99, 0.22);
}

.suggestion-item a {
    color: #65676b;
}

.suggestion-item a:hover {
    color: #e91e63;
}

.comments-area {
    padding: 10px 16px 16px;
    border-top: 1px solid #edf0f2;
}

.comment-item {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.comment-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
}

.comment-bubble {
    background: #f0f2f5;
    border-radius: 16px;
    padding: 8px 12px;
    max-width: calc(100% - 42px);
}

.comment-bubble strong {
    display: block;
    color: #1c1e21;
    font-size: 13px;
    margin-bottom: 3px;
}

.comment-bubble p {
    padding: 0;
    margin: 0;
    color: #1c1e21;
    font-size: 14px;
    line-height: 1.4;
}

.comment-bubble span {
    display: block;
    margin-top: 4px;
    color: #65676b;
    font-size: 11px;
}

.no-comments {
    padding: 0;
    color: #65676b;
    font-size: 14px;
    margin-bottom: 10px;
}

.comment-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 10px;
}

.comment-input {
    width: 100%;
    min-height: 40px;
    border: none;
    outline: none;
    border-radius: 999px;
    background: #f0f2f5;
    padding: 0 14px;
    color: #1c1e21;
}

.comment-form button {
    border: none;
    border-radius: 999px;
    padding: 0 18px;
    background: #e91e63;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.comment-form button:hover {
    background: #c2185b;
}

.friends-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #dddfe2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 16px;
}

.friends-card h2 {
    color: #1c1e21;
    font-size: 20px;
    margin-bottom: 14px;
}

.friend-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f2;
}

.friend-row:last-child {
    border-bottom: none;
}

.friend-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
}

.friend-info strong {
    display: block;
    color: #1c1e21;
    font-size: 15px;
    margin-bottom: 4px;
}

.friend-info span {
    display: block;
    color: #65676b;
    font-size: 13px;
    line-height: 1.35;
}

.friend-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.small-btn {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.small-btn.primary {
    background: #e91e63;
    color: #ffffff;
}

.small-btn.primary:hover {
    background: #c2185b;
}

.small-btn.secondary {
    background: #f0f2f5;
    color: #1c1e21;
}

.small-btn.secondary:hover {
    background: #e4e6eb;
}

.friend-empty {
    color: #65676b;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .friend-row {
        grid-template-columns: 44px 1fr;
    }

    .friend-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 56px;
    }
}

.profile-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
}

.profile-cover-card {
    background: #ffffff;
    border: 1px solid #dddfe2;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

.profile-cover-large {
    height: 280px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.45), transparent 24%),
        linear-gradient(135deg, #5e1742, #e91e63 48%, #ff7a59);
}

.profile-main-info {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 22px;
    align-items: end;
    padding: 0 28px 28px;
}

.profile-avatar-large {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 6px solid #ffffff;
    background: linear-gradient(135deg, #e91e63, #ff7a59);
    margin-top: -75px;
}

.profile-title-block h1 {
    color: #1c1e21;
    font-size: 36px;
    letter-spacing: -1px;
    margin-bottom: 8px;
}

.profile-title-block p {
    color: #65676b;
    line-height: 1.5;
    margin-bottom: 10px;
}

.profile-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-meta span {
    background: #f0f2f5;
    color: #65676b;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.profile-actions-box {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.profile-tabs-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
}

.profile-about-card,
.profile-content-card {
    background: #ffffff;
    border: 1px solid #dddfe2;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 18px;
    align-self: start;
}

.profile-about-card h2,
.profile-content-card h2 {
    color: #1c1e21;
    font-size: 21px;
    margin-bottom: 14px;
}

.profile-data-row {
    padding: 14px 0;
    border-bottom: 1px solid #edf0f2;
}

.profile-data-row:last-child {
    border-bottom: none;
}

.profile-data-row span {
    display: block;
    color: #65676b;
    font-size: 13px;
    margin-bottom: 5px;
}

.profile-data-row strong {
    display: block;
    color: #1c1e21;
    line-height: 1.45;
}

.profile-alert {
    margin-top: 16px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(233, 30, 99, 0.08);
    color: #b0004b;
    line-height: 1.45;
    font-size: 14px;
    font-weight: 700;
}

.profile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.profile-section-header p {
    color: #65676b;
    line-height: 1.5;
}

.profile-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.profile-photo-item {
    border-radius: 14px;
    overflow: hidden;
    background: #f0f2f5;
    border: 1px solid #e4e6eb;
}

.profile-photo-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.profile-photo-info {
    padding: 10px;
}

.profile-photo-info strong {
    display: block;
    color: #1c1e21;
    font-size: 13px;
    margin-bottom: 4px;
}

.profile-photo-info span {
    display: block;
    color: #65676b;
    font-size: 12px;
}

.profile-empty-photos {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    color: #65676b;
    background: #f7f8fa;
    border-radius: 14px;
    border: 1px dashed #ccd0d5;
}

@media (max-width: 900px) {
    .profile-main-info {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .profile-actions-box {
        justify-content: center;
    }

    .profile-tabs-layout {
        grid-template-columns: 1fr;
    }

    .profile-photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   CORREÇÃO DO MENU COMPARTILHADO - LAYOUT TIPO FACEBOOK
   Mantém menu em arquivo único, mas visualmente no lugar certo.
   ========================================================= */

.social-topbar {
    height: 64px;
    padding: 0 24px;
    background: #ffffff;
    border-bottom: 1px solid #dddfe2;
    display: grid;
    grid-template-columns: 240px minmax(260px, 1fr) auto;
    align-items: center;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.social-topbar-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.social-topbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.social-topbar-right a {
    color: #65676b;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 10px;
}

.social-topbar-right a:hover,
.social-topbar-right a.active {
    background: #f0f2f5;
    color: #e91e63;
}

.social-search {
    width: 100%;
    max-width: 520px;
}

.social-search input {
    width: 100%;
    height: 42px;
    border: none;
    outline: none;
    border-radius: 999px;
    background: #f0f2f5;
    padding: 0 18px;
    color: #1c1e21;
    font-size: 15px;
}

.social-layout {
    display: grid;
    grid-template-columns: 280px minmax(420px, 720px) 320px;
    gap: 24px;
    padding: 24px;
    max-width: 1480px;
    margin: 0 auto;
}

.social-sidebar-left {
    position: sticky;
    top: 88px;
    align-self: start;
}

.social-sidebar-right {
    position: sticky;
    top: 88px;
    align-self: start;
}

@media (max-width: 1200px) {
    .social-layout {
        grid-template-columns: 240px minmax(420px, 1fr);
    }

    .social-sidebar-right {
        display: none;
    }
}

@media (max-width: 850px) {
    .social-topbar {
        grid-template-columns: 1fr;
        height: auto;
        padding: 14px;
        gap: 12px;
    }

    .social-topbar-left,
    .social-topbar-center,
    .social-topbar-right {
        justify-content: flex-start;
        width: 100%;
    }

    .social-topbar-right {
        overflow-x: auto;
    }

    .social-layout {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .social-sidebar-left {
        position: static;
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
    }

    .mini-profile {
        display: none;
    }

    .side-link {
        white-space: nowrap;
        background: #ffffff;
        border: 1px solid #dddfe2;
    }
}

/* =========================================================
   FIX FINAL - RESTAURA TOPO ESTILO FACEBOOK
   Logo esquerda | busca centro | menu direita
   ========================================================= */

.social-topbar {
    height: 64px !important;
    padding: 0 24px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #dddfe2 !important;
    display: grid !important;
    grid-template-columns: 230px 1fr auto !important;
    align-items: center !important;
    gap: 24px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

.social-logo {
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: -1px !important;
    color: #231f20 !important;
    justify-self: start !important;
}

.social-logo span {
    color: #e91e63 !important;
}

.social-search {
    width: 100% !important;
    justify-self: start !important;
}

.social-search input {
    width: min(520px, 100%) !important;
    height: 42px !important;
    border: none !important;
    outline: none !important;
    border-radius: 999px !important;
    background: #f0f2f5 !important;
    padding: 0 18px !important;
    color: #1c1e21 !important;
    font-size: 15px !important;
}

.social-nav {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
}

.social-nav a {
    color: #65676b !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
}

.social-nav a:hover,
.social-nav a.active {
    background: #f0f2f5 !important;
    color: #e91e63 !important;
}

.social-layout {
    display: grid !important;
    grid-template-columns: 280px minmax(420px, 720px) 320px !important;
    gap: 24px !important;
    padding: 24px !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
}

.social-sidebar-left {
    position: sticky !important;
    top: 88px !important;
    align-self: start !important;
}

.social-sidebar-right {
    position: sticky !important;
    top: 88px !important;
    align-self: start !important;
}

@media (max-width: 1200px) {
    .social-layout {
        grid-template-columns: 240px minmax(420px, 1fr) !important;
    }

    .social-sidebar-right {
        display: none !important;
    }
}

@media (max-width: 850px) {
    .social-topbar {
        grid-template-columns: 1fr !important;
        height: auto !important;
        padding: 14px !important;
        gap: 12px !important;
    }

    .social-search input {
        width: 100% !important;
    }

    .social-nav {
        overflow-x: auto !important;
        justify-content: flex-start !important;
    }

    .social-layout {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }

    .social-sidebar-left {
        position: static !important;
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
    }

    .mini-profile {
        display: none !important;
    }

    .side-link {
        white-space: nowrap !important;
        background: #ffffff !important;
        border: 1px solid #dddfe2 !important;
    }
}

/* =========================================================
   FIX DEFINITIVO DO LAYOUT SOCIAL
   Menu lateral preso à esquerda | Feed no centro | Cards à direita
   ========================================================= */

.social-layout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px !important;

    display: grid !important;
    grid-template-columns: 280px minmax(520px, 720px) 320px !important;
    gap: 24px !important;

    justify-content: start !important;
    align-items: start !important;
}

.social-sidebar-left {
    grid-column: 1 !important;
    position: sticky !important;
    top: 88px !important;
    align-self: start !important;
    width: 280px !important;
}

.social-feed {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 720px !important;
}

.social-sidebar-right {
    grid-column: 3 !important;
    position: sticky !important;
    top: 88px !important;
    align-self: start !important;
    width: 320px !important;
}

.social-topbar {
    width: 100% !important;
    height: 64px !important;
    padding: 0 28px !important;

    display: grid !important;
    grid-template-columns: 260px minmax(360px, 1fr) auto !important;
    align-items: center !important;
    gap: 24px !important;

    background: #ffffff !important;
    border-bottom: 1px solid #dddfe2 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

.social-logo {
    justify-self: start !important;
}

.social-search {
    justify-self: start !important;
    width: 100% !important;
    max-width: 760px !important;
}

.social-search input {
    width: 100% !important;
}

.social-nav {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

@media (max-width: 1200px) {
    .social-layout {
        grid-template-columns: 260px minmax(480px, 1fr) !important;
    }

    .social-sidebar-left {
        grid-column: 1 !important;
        width: 260px !important;
    }

    .social-feed {
        grid-column: 2 !important;
        max-width: none !important;
    }

    .social-sidebar-right {
        display: none !important;
    }
}

@media (max-width: 850px) {
    .social-topbar {
        grid-template-columns: 1fr !important;
        height: auto !important;
        padding: 14px !important;
    }

    .social-layout {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }

    .social-sidebar-left {
        grid-column: 1 !important;
        width: 100% !important;
        position: static !important;
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
    }

    .social-feed {
        grid-column: 1 !important;
        max-width: none !important;
    }

    .mini-profile {
        display: none !important;
    }
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 700px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.search-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #dddfe2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 16px;
}

.search-form label {
    display: block;
    color: #1c1e21;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 6px;
}

.search-form input,
.search-form select {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid #dddfe2;
    background: #f0f2f5;
    color: #1c1e21;
    padding: 0 12px;
    outline: none;
}

.search-form input:focus,
.search-form select:focus {
    border-color: rgba(233, 30, 99, 0.65);
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.10);
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.search-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
}

.search-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: #65676b !important;
    font-weight: 700 !important;
}

.search-check input {
    width: 18px;
    min-height: 18px;
}

.search-result-row {
    align-items: start;
}

.verified-badge {
    display: inline-flex !important;
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(233, 30, 99, 0.10);
    color: #e91e63 !important;
    font-size: 11px !important;
    font-weight: 900;
}

@media (max-width: 700px) {
    .search-grid {
        grid-template-columns: 1fr;
    }

    .search-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

/* =========================================================
   FIX MENU LATERAL - BUSCAR CASAIS ATIVO
   ========================================================= */

.side-link {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.side-link.disabled-link {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.side-link.locked {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.side-link.active {
    background: rgba(0,0,0,0.06) !important;
    color: #1c1e21 !important;
}

.avatar-image {
    object-fit: cover !important;
    display: block !important;
}

.avatar-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #e91e63, #ff7a59) !important;
}

.mini-avatar,
.friend-avatar,
.post-avatar,
.comment-avatar,
.composer-avatar,
.suggestion-avatar {
    overflow: hidden !important;
}

.profile-avatar-large {
    overflow: hidden !important;
}

.profile-avatar-large.avatar-placeholder {
    font-size: 54px !important;
}

.mini-avatar.avatar-placeholder {
    font-size: 18px !important;
}

.friend-avatar.avatar-placeholder,
.post-avatar.avatar-placeholder,
.suggestion-avatar.avatar-placeholder {
    font-size: 18px !important;
}

.comment-avatar.avatar-placeholder {
    font-size: 13px !important;
}

.auth-form input[type="file"] {
    padding: 12px !important;
    min-height: auto !important;
}

/* =========================================================
   BUSCA DE PERFIS - CORREÇÃO DE LAYOUT DOS RESULTADOS
   ========================================================= */

.search-results-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #dddfe2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 16px;
}

.search-results-card h2 {
    color: #1c1e21;
    font-size: 22px;
    margin-bottom: 16px;
}

.search-result-item {
    display: grid;
    grid-template-columns: 72px 1fr 170px;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #edf0f2;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.search-avatar.avatar-placeholder {
    font-size: 24px !important;
    font-weight: 900 !important;
}

.search-result-info {
    min-width: 0;
}

.search-result-info h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    line-height: 1.2;
    color: #1c1e21;
}

.search-result-info h3 a {
    color: #1c1e21;
}

.search-result-info h3 a:hover {
    color: #e91e63;
}

.search-result-meta {
    margin: 0 0 6px 0;
    color: #65676b;
    font-size: 14px;
    line-height: 1.5;
}

.search-result-bio {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
}

.search-result-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
}

.search-action-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.search-action-btn.primary {
    background: #e91e63;
    color: #ffffff;
}

.search-action-btn.primary:hover {
    background: #c2185b;
}

.search-action-btn.secondary {
    background: #f0f2f5;
    color: #1c1e21;
}

.search-action-btn.secondary:hover {
    background: #e4e6eb;
}

.search-action-btn.muted {
    background: #f7f8fa;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    cursor: default;
}

@media (max-width: 900px) {
    .search-result-item {
        grid-template-columns: 64px 1fr;
        align-items: start;
    }

    .search-result-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 82px;
    }

    .search-action-btn {
        width: auto;
        min-width: 130px;
    }
}

@media (max-width: 600px) {
    .search-result-actions {
        margin-left: 0;
    }

    .search-action-btn {
        width: 100%;
    }
}

/* =========================================================
   FIX PERFIL PÚBLICO - AVATAR E BOTÕES PROPORCIONAIS
   ========================================================= */

.profile-cover-card {
    position: relative !important;
    overflow: hidden !important;
}

.profile-cover-large {
    height: 280px !important;
}

.profile-main-info {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 180px 1fr auto !important;
    gap: 24px !important;
    align-items: end !important;
    padding: 0 36px 34px !important;
    min-height: 145px !important;
}

.profile-avatar-large {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    border: 6px solid #ffffff !important;
    margin-top: -75px !important;
    justify-self: center !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18) !important;
}

.profile-title-block {
    align-self: center !important;
    min-width: 0 !important;
}

.profile-title-block h1 {
    font-size: 34px !important;
    margin-bottom: 8px !important;
}

.profile-title-block p {
    max-width: 620px !important;
}

.profile-actions-box {
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 180px !important;
    justify-content: center !important;
}

.profile-actions-box .btn-primary,
.profile-actions-box .btn-secondary {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-shadow: none !important;
}

.profile-actions-box .btn-primary:hover,
.profile-actions-box .btn-secondary:hover {
    transform: none !important;
}

@media (max-width: 900px) {
    .profile-main-info {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        text-align: center !important;
        justify-items: center !important;
        padding: 0 22px 28px !important;
    }

    .profile-avatar-large {
        margin-top: -75px !important;
    }

    .profile-actions-box {
        width: 100% !important;
        max-width: 320px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .profile-actions-box .btn-primary,
    .profile-actions-box .btn-secondary {
        flex: 1 1 140px !important;
    }
}

/* =========================================================
   PERFIL PÚBLICO - LAYOUT LIMPO
   Avatar à esquerda + botão pequeno abaixo
   ========================================================= */

.clean-profile-header {
    display: grid !important;
    grid-template-columns: 190px 1fr !important;
    gap: 28px !important;
    align-items: start !important;
    padding: 0 34px 34px !important;
    min-height: 190px !important;
}

.profile-left-stack {
    width: 170px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: -78px !important;
    position: relative !important;
    z-index: 2 !important;
}

.profile-left-stack .profile-avatar-large {
    width: 156px !important;
    height: 156px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 6px solid #ffffff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
    object-fit: cover !important;
}

.profile-left-stack .profile-actions-box {
    width: 100% !important;
    margin-top: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.profile-small-action {
    width: 100% !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.profile-small-action.primary {
    background: #e91e63 !important;
    color: #ffffff !important;
}

.profile-small-action.primary:hover {
    background: #c2185b !important;
}

.profile-small-action.secondary {
    background: #f0f2f5 !important;
    color: #1c1e21 !important;
}

.profile-small-action.secondary:hover {
    background: #e4e6eb !important;
}

.clean-profile-header .profile-title-block {
    padding-top: 24px !important;
    align-self: start !important;
}

.clean-profile-header .profile-title-block h1 {
    font-size: 34px !important;
    margin-bottom: 8px !important;
    color: #1c1e21 !important;
}

.clean-profile-header .profile-title-block p {
    max-width: 720px !important;
    margin-bottom: 12px !important;
    color: #65676b !important;
}

@media (max-width: 800px) {
    .clean-profile-header {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
        gap: 14px !important;
        padding: 0 22px 28px !important;
    }

    .profile-left-stack {
        margin-top: -78px !important;
    }

    .clean-profile-header .profile-title-block {
        padding-top: 0 !important;
    }

    .profile-meta {
        justify-content: center !important;
    }
}

/* =========================================================
   GALERIA REUTILIZÁVEL DE FOTOS
   ========================================================= */

.no-scroll {
    overflow: hidden !important;
}

.photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.photo-gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #f0f2f5;
    border: 1px solid #e4e6eb;
    cursor: pointer;
}

.photo-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.photo-gallery-item:hover img {
    transform: scale(1.04);
}

.photo-gallery-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 34px 12px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.photo-gallery-item:hover .photo-gallery-overlay {
    opacity: 1;
}

.photo-gallery-overlay strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 4px;
}

.photo-gallery-overlay span {
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
}

.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.photo-lightbox.active {
    display: flex;
}

.photo-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(4px);
}

.photo-lightbox-content {
    position: relative;
    z-index: 2;
    max-width: min(980px, 96vw);
    max-height: 92vh;
    background: #111111;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,0.45);
}

.photo-lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    background: #000000;
}

.photo-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.62);
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}

.photo-lightbox-close:hover {
    background: rgba(233, 30, 99, 0.9);
}

.photo-lightbox-info {
    padding: 14px 18px;
    background: #ffffff;
}

.photo-lightbox-info strong {
    display: block;
    color: #1c1e21;
    font-size: 15px;
    margin-bottom: 4px;
}

.photo-lightbox-info span {
    display: inline-flex;
    color: #e91e63;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 700px) {
    .photo-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .photo-lightbox {
        padding: 12px;
    }
}

/* =========================================================
   CS GALLERY - GALERIA MODERNA COM LIGHTBOX E SLIDESHOW
   ========================================================= */

.no-scroll {
    overflow: hidden !important;
}

.cs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* A primeira foto fica maior, estilo vitrine */
.cs-gallery-grid .cs-gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.cs-gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: #e4e6eb;
    cursor: pointer;
    display: block;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.cs-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.28s ease, filter 0.28s ease;
}

.cs-gallery-item:hover img {
    transform: scale(1.045);
    filter: brightness(0.82);
}

.cs-gallery-item-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 38px 12px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
    color: #ffffff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    text-align: left;
}

.cs-gallery-item:hover .cs-gallery-item-overlay {
    opacity: 1;
    transform: translateY(0);
}

.cs-gallery-item-overlay strong {
    display: block;
    font-size: 13px;
    line-height: 1.25;
    margin-bottom: 6px;
}

.cs-gallery-item-overlay small {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

/* LIGHTBOX */

.cs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.cs-lightbox.active {
    display: flex;
}

.cs-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(233,30,99,0.22), transparent 28%),
        rgba(0,0,0,0.86);
    backdrop-filter: blur(6px);
}

.cs-lightbox-panel {
    position: relative;
    z-index: 2;
    width: min(1120px, 96vw);
    max-height: 94vh;
    border-radius: 22px;
    overflow: hidden;
    background: #111111;
    box-shadow: 0 30px 110px rgba(0,0,0,0.62);
    display: grid;
    grid-template-rows: auto minmax(280px, 1fr) auto;
}

.cs-lightbox-header {
    min-height: 64px;
    padding: 14px 18px;
    background: rgba(17,17,17,0.96);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cs-lightbox-header strong {
    color: #ffffff;
    display: block;
    font-size: 15px;
    line-height: 1.3;
}

.cs-lightbox-header span {
    color: rgba(255,255,255,0.62);
    display: block;
    font-size: 12px;
    margin-top: 3px;
}

.cs-lightbox-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-lightbox-controls button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
}

.cs-lightbox-controls button:hover {
    background: #e91e63;
}

.cs-lightbox-stage {
    position: relative;
    min-height: 420px;
    background: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-lightbox-stage img {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    display: block;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.cs-lightbox-stage img.loaded {
    opacity: 1;
    transform: scale(1);
}

.cs-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 70px;
    border: none;
    border-radius: 14px;
    background: rgba(0,0,0,0.38);
    color: #ffffff;
    font-size: 58px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}

.cs-lightbox-nav:hover {
    background: rgba(233,30,99,0.92);
}

.cs-lightbox-nav.prev {
    left: 14px;
}

.cs-lightbox-nav.next {
    right: 14px;
}

.cs-lightbox-footer {
    background: #ffffff;
    border-top: 1px solid #e4e6eb;
    padding: 12px 14px 14px;
}

#csLightboxPrivacy {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(233,30,99,0.10);
    color: #e91e63;
    font-size: 12px;
    font-weight: 900;
}

.cs-lightbox-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
}

.cs-lightbox-thumb {
    width: 68px;
    height: 54px;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: #e4e6eb;
    flex: 0 0 auto;
    opacity: 0.7;
}

.cs-lightbox-thumb.active {
    border-color: #e91e63;
    opacity: 1;
}

.cs-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Remove conflitos da galeria antiga */
.photo-gallery-grid,
.photo-gallery-item,
.photo-lightbox {
    all: unset;
}

@media (max-width: 800px) {
    .cs-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-gallery-grid .cs-gallery-item:first-child {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 16 / 10;
    }

    .cs-lightbox {
        padding: 10px;
    }

    .cs-lightbox-panel {
        width: 100%;
        max-height: 96vh;
        border-radius: 16px;
    }

    .cs-lightbox-stage {
        min-height: 300px;
    }

    .cs-lightbox-nav {
        width: 42px;
        height: 58px;
        font-size: 44px;
    }

    .cs-lightbox-thumb {
        width: 58px;
        height: 46px;
    }
}

/* =========================================================
   FIX LIGHTBOX - MINIATURA ATIVA CORTADA NO CHROME
   ========================================================= */

.cs-lightbox-thumbs {
    padding: 4px 6px 8px !important;
    scroll-padding-left: 10px !important;
    scroll-padding-right: 10px !important;
}

.cs-lightbox-thumb {
    box-sizing: border-box !important;
    border: none !important;
    outline: 2px solid transparent !important;
    outline-offset: 0 !important;
    margin: 2px !important;
    flex: 0 0 auto !important;
}

.cs-lightbox-thumb.active {
    border: none !important;
    outline: 3px solid #e91e63 !important;
    outline-offset: 2px !important;
    opacity: 1 !important;
}

.cs-lightbox-thumb img {
    border-radius: 8px !important;
}

/* =========================================================
   FIX CHROME - MINIATURA ATIVA SEM CORTE
   Destaque interno, sem border/outline externo.
   ========================================================= */

.cs-lightbox-thumbs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 10px 10px 10px !important;
    box-sizing: border-box !important;
}

.cs-lightbox-thumb {
    width: 68px !important;
    height: 54px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    flex: 0 0 68px !important;

    border: none !important;
    outline: none !important;
    outline-offset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    background: #e4e6eb !important;
    opacity: 0.68 !important;
    transform: none !important;
}

.cs-lightbox-thumb.active {
    border: none !important;
    outline: none !important;
    outline-offset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    transform: none !important;

    box-shadow:
        inset 0 0 0 3px #e91e63,
        0 0 0 1px rgba(233, 30, 99, 0.15) !important;
}

.cs-lightbox-thumb img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

/* =========================================================
   FIX DEFINITIVO LIGHTBOX - MINIATURAS DENTRO DA TARJA BRANCA
   ========================================================= */

.cs-lightbox-panel {
    display: flex !important;
    flex-direction: column !important;
    max-height: 94vh !important;
    overflow: hidden !important;
    background: #111111 !important;
}

.cs-lightbox-stage {
    flex: 1 1 auto !important;
    min-height: 360px !important;
    max-height: calc(94vh - 170px) !important;
    background: #050505 !important;
    overflow: hidden !important;
}

.cs-lightbox-stage img {
    max-height: calc(94vh - 190px) !important;
}

/* Rodapé branco fixo e com espaço suficiente para miniaturas */
.cs-lightbox-footer {
    flex: 0 0 auto !important;
    min-height: 112px !important;
    background: #ffffff !important;
    border-top: 1px solid #e4e6eb !important;
    padding: 12px 18px 18px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

/* Badge Pública/Privada acima das miniaturas */
#csLightboxPrivacy {
    display: inline-flex !important;
    margin: 0 0 10px 0 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(233,30,99,0.10) !important;
    color: #e91e63 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* Área das miniaturas sempre dentro da faixa branca */
.cs-lightbox-thumbs {
    width: 100% !important;
    min-height: 64px !important;
    max-height: 64px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 4px 8px 8px 8px !important;
    box-sizing: border-box !important;

    background: transparent !important;
}

/* Miniatura nunca aumenta ao selecionar */
.cs-lightbox-thumb {
    width: 72px !important;
    height: 56px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex: 0 0 72px !important;

    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    background: #e4e6eb !important;
    opacity: 0.72 !important;
    transform: none !important;
    position: relative !important;
}

/* Destaque interno sem alterar tamanho externo */
.cs-lightbox-thumb.active {
    opacity: 1 !important;
    border: none !important;
    outline: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.cs-lightbox-thumb.active::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border: 4px solid #e91e63 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.cs-lightbox-thumb img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

/* Remove qualquer estilo anterior que empurre a miniatura ativa */
.cs-lightbox-thumb.active img {
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajuste responsivo */
@media (max-width: 800px) {
    .cs-lightbox-stage {
        max-height: calc(96vh - 160px) !important;
    }

    .cs-lightbox-stage img {
        max-height: calc(96vh - 180px) !important;
    }

    .cs-lightbox-footer {
        min-height: 104px !important;
        padding: 10px 14px 16px 14px !important;
    }

    .cs-lightbox-thumbs {
        min-height: 58px !important;
        max-height: 58px !important;
    }

    .cs-lightbox-thumb {
        width: 64px !important;
        height: 50px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        flex-basis: 64px !important;
    }
}

/* =========================================================
   AVATARES REUTILIZÁVEIS - PADRÃO GLOBAL
   ========================================================= */

.avatar-image {
    object-fit: cover !important;
    display: block !important;
}

.avatar-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #e91e63, #ff7a59) !important;
}

.mini-avatar,
.composer-avatar,
.post-avatar,
.comment-avatar,
.friend-avatar,
.search-avatar,
.suggestion-avatar,
.profile-avatar-large {
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.mini-avatar,
.mini-avatar.avatar-image,
.mini-avatar.avatar-placeholder {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
}

.composer-avatar,
.composer-avatar.avatar-image,
.composer-avatar.avatar-placeholder {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
}

.post-avatar,
.post-avatar.avatar-image,
.post-avatar.avatar-placeholder {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
}

.comment-avatar,
.comment-avatar.avatar-image,
.comment-avatar.avatar-placeholder {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
}

.friend-avatar,
.friend-avatar.avatar-image,
.friend-avatar.avatar-placeholder {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
}

.search-avatar,
.search-avatar.avatar-image,
.search-avatar.avatar-placeholder {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
}

.suggestion-avatar,
.suggestion-avatar.avatar-image,
.suggestion-avatar.avatar-placeholder {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
}

.profile-avatar-large,
.profile-avatar-large.avatar-image,
.profile-avatar-large.avatar-placeholder {
    width: 156px !important;
    height: 156px !important;
    border-radius: 50% !important;
}

.avatar-placeholder.mini-avatar {
    font-size: 18px !important;
}

.avatar-placeholder.composer-avatar,
.avatar-placeholder.post-avatar,
.avatar-placeholder.friend-avatar,
.avatar-placeholder.suggestion-avatar {
    font-size: 18px !important;
}

.avatar-placeholder.comment-avatar {
    font-size: 13px !important;
}

.avatar-placeholder.search-avatar {
    font-size: 24px !important;
}

.avatar-placeholder.profile-avatar-large {
    font-size: 54px !important;
}

/* =========================================================
   NOTIFICAÇÕES E BADGES
   ========================================================= */

.nav-notification-link {
    position: relative !important;
}

.nav-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e91e63;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(45%, -35%);
    box-shadow: 0 0 0 2px #ffffff;
}

.side-link {
    position: relative !important;
}

.side-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #e91e63;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notifications-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #dddfe2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 16px;
}

.notifications-card-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.notifications-card-header h2 {
    color: #1c1e21;
    font-size: 20px;
    margin-bottom: 5px;
}

.notifications-card-header p {
    color: #65676b;
    font-size: 14px;
    line-height: 1.4;
}

.notifications-count-pill {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(233,30,99,0.10);
    color: #e91e63;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f2;
}

.notification-row:last-child {
    border-bottom: none;
}

.notification-avatar,
.notification-avatar.avatar-image,
.notification-avatar.avatar-placeholder {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.notification-avatar.avatar-placeholder {
    font-size: 18px !important;
}

.notification-info strong {
    display: block;
    color: #1c1e21;
    font-size: 15px;
    margin-bottom: 4px;
}

.notification-info strong a {
    color: #1c1e21;
}

.notification-info strong a:hover {
    color: #e91e63;
}

.notification-info span {
    display: block;
    color: #65676b;
    font-size: 14px;
    margin-bottom: 4px;
}

.notification-info small {
    display: block;
    color: #8a8d91;
    font-size: 12px;
}

.notification-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notification-empty {
    padding: 18px;
    border-radius: 14px;
    background: #f7f8fa;
    border: 1px dashed #ccd0d5;
    color: #65676b;
}

.notification-empty strong {
    display: block;
    color: #1c1e21;
    margin-bottom: 6px;
}

.notification-empty p {
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .notification-row {
        grid-template-columns: 46px 1fr;
        align-items: start;
    }

    .notification-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 58px;
    }

    .nav-badge {
        position: static;
        transform: none;
        margin-left: 5px;
    }
}

/* =========================================================
   FIX FRIENDS - BOTÕES ALINHADOS E PROPORCIONAIS
   ========================================================= */

.friends-card .friend-row {
    display: grid !important;
    grid-template-columns: 52px 1fr 140px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
}

.friends-card .friend-row:last-child {
    border-bottom: none !important;
}

.friends-card .friend-avatar,
.friends-card .friend-avatar.avatar-image,
.friends-card .friend-avatar.avatar-placeholder {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    grid-column: 1 !important;
}

.friends-card .friend-info {
    grid-column: 2 !important;
    min-width: 0 !important;
}

.friends-card .friend-actions {
    grid-column: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 140px !important;
}

.friends-card .friend-actions .small-btn {
    width: 100% !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

@media (max-width: 700px) {
    .friends-card .friend-row {
        grid-template-columns: 46px 1fr !important;
    }

    .friends-card .friend-actions {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        flex-direction: row !important;
        padding-left: 58px !important;
    }

    .friends-card .friend-actions .small-btn {
        width: auto !important;
        min-width: 110px !important;
    }
}

.notification-unread {
    background: rgba(233, 30, 99, 0.045);
    border-radius: 12px;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.notification-unread .notification-info strong a,
.notification-unread .notification-info strong {
    color: #e91e63 !important;
}

/* =========================================================
   CHAT SIMPLES
   ========================================================= */

.chat-card {
    background: #ffffff;
    border: 1px solid #dddfe2;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 680px;
}

.chat-header {
    padding: 16px;
    border-bottom: 1px solid #edf0f2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar,
.chat-avatar.avatar-image,
.chat-avatar.avatar-placeholder {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.chat-avatar.avatar-placeholder {
    font-size: 18px !important;
}

.chat-header h2 {
    color: #1c1e21;
    font-size: 20px;
    margin: 0 0 4px;
}

.chat-header p {
    color: #65676b;
    font-size: 13px;
    margin: 0;
}

.chat-messages {
    height: 500px;
    overflow-y: auto;
    padding: 18px;
    background: #f0f2f5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-loading,
.chat-empty {
    color: #65676b;
    text-align: center;
    margin-top: 30px;
}

.chat-message {
    display: flex;
}

.chat-message.mine {
    justify-content: flex-end;
}

.chat-message.theirs {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 76%;
    padding: 10px 12px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.chat-message.mine .chat-bubble {
    background: #e91e63;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.chat-message.theirs .chat-bubble {
    background: #ffffff;
    color: #1c1e21;
    border-bottom-left-radius: 4px;
}

.chat-bubble p {
    margin: 0;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble span {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    opacity: 0.75;
    text-align: right;
}

.chat-form {
    padding: 12px;
    border-top: 1px solid #edf0f2;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.chat-form textarea {
    resize: none;
    min-height: 46px;
    max-height: 120px;
    border-radius: 14px;
    border: 1px solid #dddfe2;
    background: #f0f2f5;
    padding: 10px 12px;
    outline: none;
    font-family: inherit;
    color: #1c1e21;
}

.chat-form textarea:focus {
    border-color: rgba(233,30,99,0.65);
    box-shadow: 0 0 0 3px rgba(233,30,99,0.10);
}

.chat-form button {
    border: none;
    border-radius: 14px;
    padding: 0 18px;
    background: #e91e63;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.chat-form button:hover {
    background: #c2185b;
}

@media (max-width: 700px) {
    .chat-card {
        min-height: 560px;
    }

    .chat-messages {
        height: 390px;
    }

    .chat-form {
        grid-template-columns: 1fr;
    }

    .chat-form button {
        min-height: 42px;
    }
}

.chat-unread-label {
    display: inline-flex !important;
    margin-top: 4px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: rgba(233, 30, 99, 0.10) !important;
    color: #e91e63 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* =========================================================
   BILLING / PREMIUM / PIX
   ========================================================= */

.billing-card {
    background: #ffffff;
    border: 1px solid #dddfe2;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 24px;
}

.billing-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(233,30,99,0.10);
    color: #e91e63;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 16px;
}

.billing-card h2 {
    color: #1c1e21;
    font-size: 26px;
    margin-bottom: 10px;
}

.billing-card p {
    color: #65676b;
    line-height: 1.6;
}

.billing-price-box {
    margin: 18px 0;
    padding: 18px;
    border-radius: 16px;
    background: #f7f8fa;
    border: 1px solid #e4e6eb;
}

.billing-price-box span {
    display: block;
    color: #65676b;
    font-size: 13px;
    margin-bottom: 4px;
}

.billing-price-box strong {
    display: block;
    color: #e91e63;
    font-size: 34px;
    margin-bottom: 4px;
}

.billing-price-box small {
    display: block;
    color: #65676b;
}

.billing-primary-btn,
.billing-secondary-btn {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
}

.billing-primary-btn {
    background: #e91e63;
    color: #ffffff;
}

.billing-primary-btn:hover {
    background: #c2185b;
}

.billing-secondary-btn {
    background: #f0f2f5;
    color: #1c1e21;
}

.billing-alert,
.billing-success {
    padding: 14px;
    border-radius: 14px;
    margin: 16px 0;
    line-height: 1.5;
    font-weight: 700;
}

.billing-alert {
    background: rgba(233,30,99,0.10);
    color: #b0004b;
}

.billing-success {
    background: rgba(34,197,94,0.12);
    color: #166534;
}

.pix-box {
    margin: 18px 0;
}

.pix-box label {
    display: block;
    color: #1c1e21;
    font-weight: 900;
    margin-bottom: 8px;
}

.pix-copy-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.pix-copy-row input {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid #dddfe2;
    padding: 0 12px;
    background: #f7f8fa;
    color: #1c1e21;
}

.pix-copy-row button {
    border: none;
    border-radius: 12px;
    padding: 0 16px;
    background: #e91e63;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.pix-info-row {
    padding: 12px 0;
    border-bottom: 1px solid #edf0f2;
}

.pix-info-row span {
    display: block;
    color: #65676b;
    font-size: 13px;
}

.pix-info-row strong {
    display: block;
    color: #1c1e21;
    margin-top: 4px;
    word-break: break-word;
}

.billing-instructions {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    background: #f7f8fa;
    color: #4b5563;
    line-height: 1.5;
}

.billing-history-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f2;
}

.billing-history-row:last-child {
    border-bottom: none;
}

.billing-history-row strong {
    display: block;
    color: #1c1e21;
}

.billing-history-row span {
    display: block;
    color: #65676b;
    font-size: 13px;
    margin-top: 4px;
}

/* =========================================================
   FLOATING CHAT - ESTILO FACEBOOK SIMPLES
   ========================================================= */

.floating-chat-root {
    position: fixed;
    right: 18px;
    bottom: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;
}

.floating-chat-sidebar,
.floating-chat-window {
    pointer-events: auto;
}

.floating-chat-sidebar {
    width: 260px;
    max-height: 430px;
    background: #ffffff;
    border: 1px solid #dddfe2;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
    overflow: hidden;
}

.floating-chat-header {
    height: 46px;
    padding: 0 14px;
    border-bottom: 1px solid #edf0f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.floating-chat-header strong {
    color: #1c1e21;
    font-size: 16px;
}

.floating-chat-header span {
    color: #16a34a;
    font-size: 12px;
    font-weight: 800;
}

.floating-chat-friends {
    max-height: 384px;
    overflow-y: auto;
    padding: 8px;
}

.floating-chat-empty {
    padding: 16px;
    color: #65676b;
    font-size: 14px;
    text-align: center;
}

.floating-chat-friend {
    width: 100%;
    min-height: 48px;
    border: none;
    background: transparent;
    border-radius: 12px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.floating-chat-friend:hover {
    background: #f0f2f5;
}

.floating-chat-avatar-wrap {
    position: relative;
    width: 36px;
    height: 36px;
}

.floating-chat-avatar,
.floating-chat-avatar.avatar-placeholder {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    overflow: hidden !important;
}

.floating-chat-avatar.avatar-placeholder {
    font-size: 15px !important;
}

.floating-chat-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.floating-chat-dot.online {
    background: #22c55e;
}

.floating-chat-dot.offline {
    background: #9ca3af;
}

.floating-chat-name {
    color: #1c1e21;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floating-chat-unread {
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #e91e63;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.floating-chat-window {
    width: 340px;
    height: 430px;
    background: #ffffff;
    border: 1px solid #dddfe2;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.floating-chat-window[hidden] {
    display: none !important;
}

.floating-chat-window-header {
    height: 54px;
    padding: 0 12px;
    border-bottom: 1px solid #edf0f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.floating-chat-window-user {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.floating-chat-window-user strong {
    display: block;
    color: #1c1e21;
    font-size: 14px;
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.floating-chat-window-user span {
    display: block;
    color: #65676b;
    font-size: 12px;
}

.floating-chat-window-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.floating-chat-window-avatar-img,
.floating-chat-window-avatar-img.avatar-placeholder {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    overflow: hidden !important;
}

.floating-chat-window-avatar-img.avatar-placeholder {
    font-size: 15px !important;
}

#floatingChatClose {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f0f2f5;
    color: #65676b;
    font-size: 22px;
    cursor: pointer;
}

#floatingChatClose:hover {
    background: #e4e6eb;
    color: #e91e63;
}

.floating-chat-messages {
    background: #f0f2f5;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.floating-chat-message {
    display: flex;
}

.floating-chat-message.mine {
    justify-content: flex-end;
}

.floating-chat-message.theirs {
    justify-content: flex-start;
}

.floating-chat-bubble {
    max-width: 78%;
    padding: 8px 10px;
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.floating-chat-message.mine .floating-chat-bubble {
    background: #e91e63;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.floating-chat-message.theirs .floating-chat-bubble {
    background: #ffffff;
    color: #1c1e21;
    border-bottom-left-radius: 4px;
}

.floating-chat-bubble p {
    margin: 0;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
}

.floating-chat-bubble span {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    opacity: 0.75;
    text-align: right;
}

.floating-chat-form {
    padding: 8px;
    border-top: 1px solid #edf0f2;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.floating-chat-form textarea {
    resize: none;
    min-height: 38px;
    max-height: 80px;
    border: 1px solid #dddfe2;
    border-radius: 12px;
    background: #f0f2f5;
    padding: 9px 10px;
    outline: none;
    font-family: inherit;
    color: #1c1e21;
}

.floating-chat-form button {
    border: none;
    border-radius: 12px;
    padding: 0 12px;
    background: #e91e63;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.floating-chat-form button:hover {
    background: #c2185b;
}

@media (max-width: 900px) {
    .floating-chat-root {
        right: 10px;
        left: 10px;
        gap: 8px;
    }

    .floating-chat-sidebar {
        width: 220px;
    }

    .floating-chat-window {
        width: min(340px, calc(100vw - 20px));
    }
}

@media (max-width: 650px) {
    .floating-chat-root {
        display: none;
    }
}

/* =========================================================
   PERFIL PROFISSIONAL / DESCRIÇÃO / TAGS
   ========================================================= */

.profile-professional-panel {
    padding: 14px;
    border-radius: 16px;
    background: #f7f8fa;
    border: 1px solid #e4e6eb;
    margin: 10px 0 16px;
}

.profile-checkbox-box {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(233,30,99,0.08);
    color: #1c1e21 !important;
    font-weight: 800 !important;
    cursor: pointer;
}

.profile-checkbox-box input {
    width: 18px !important;
    height: 18px !important;
    min-height: auto !important;
}

.professional-fields {
    margin-top: 12px;
}

.professional-fields small {
    display: block;
    color: #65676b;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 8px;
}

.profile-tags-editor {
    margin-top: 10px;
}

.profile-tags-editor > label {
    display: block;
    margin-bottom: 10px;
}

.profile-tags-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-bottom: 18px;
}

.profile-tag-option {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 999px;
    background: #f0f2f5;
    border: 1px solid #dddfe2;
    color: #1c1e21 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer;
}

.profile-tag-option input {
    width: 16px !important;
    height: 16px !important;
    min-height: auto !important;
}

.profile-tag-option:has(input:checked) {
    background: rgba(233,30,99,0.12);
    border-color: rgba(233,30,99,0.42);
    color: #e91e63 !important;
}

.profile-avatar-wrap {
    position: relative;
}

.professional-badge {
    position: absolute;
    right: 2px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #16a34a;
    color: #ffffff;
    border: 4px solid #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.title-professional-badge {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #16a34a;
    color: #ffffff;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 6px;
}

.profile-professional-view {
    margin: 14px 0;
    padding: 14px;
    border-radius: 16px;
    background: rgba(22,163,74,0.08);
    border: 1px solid rgba(22,163,74,0.18);
}

.profile-professional-view h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #166534;
    font-size: 16px;
    margin: 0 0 10px;
}

.profile-professional-view h3 span {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
}

.premium-locked-info {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(233,30,99,0.10);
    color: #b0004b;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.4;
}

.profile-tags-view {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.profile-tags-view strong {
    display: inline-flex !important;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f0f2f5;
    color: #1c1e21;
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 700px) {
    .profile-tags-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CORREÇÃO VISUAL - CAMPOS DE PERFIL PROFISSIONAL
   ========================================================= */

.profile-professional-panel {
    background: #ffffff !important;
    border: 1px solid #d8dbe0 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
}

.profile-professional-panel label,
.professional-fields label {
    color: #1c1e21 !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

.profile-professional-panel .profile-checkbox-box {
    background: rgba(233, 30, 99, 0.10) !important;
    color: #1c1e21 !important;
    border: 1px solid rgba(233, 30, 99, 0.18) !important;
}

.profile-professional-panel .profile-checkbox-box span {
    color: #1c1e21 !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

.professional-fields input {
    background: #ffffff !important;
    color: #1c1e21 !important;
    border: 1px solid #cfd4dc !important;
    opacity: 1 !important;
}

.professional-fields input::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

.professional-fields small {
    color: #4b5563 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* =========================================================
   AVATAR GLOBAL COM INDICADOR DE PERFIL PROFISSIONAL
   ========================================================= */

.avatar-universal-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.avatar-universal-wrap .avatar-image,
.avatar-universal-wrap .avatar-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.avatar-professional-dollar {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #16a34a !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22) !important;
    z-index: 5 !important;
}

/* Avatar grande do perfil */
.avatar-universal-wrap:has(.profile-avatar-large) .avatar-professional-dollar {
    top: 4px !important;
    right: 4px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 18px !important;
    border-width: 4px !important;
}

/* Avatar médio de listas, amigos, busca e posts */
.avatar-universal-wrap:has(.friend-avatar) .avatar-professional-dollar,
.avatar-universal-wrap:has(.search-avatar) .avatar-professional-dollar,
.avatar-universal-wrap:has(.post-avatar) .avatar-professional-dollar,
.avatar-universal-wrap:has(.suggestion-avatar) .avatar-professional-dollar,
.avatar-universal-wrap:has(.notification-avatar) .avatar-professional-dollar,
.avatar-universal-wrap:has(.chat-avatar) .avatar-professional-dollar {
    top: -2px !important;
    right: -2px !important;
    width: 17px !important;
    height: 17px !important;
    font-size: 10px !important;
}

/* Avatar pequeno do menu lateral e comentários */
.avatar-universal-wrap:has(.mini-avatar) .avatar-professional-dollar,
.avatar-universal-wrap:has(.comment-avatar) .avatar-professional-dollar,
.avatar-universal-wrap:has(.composer-avatar) .avatar-professional-dollar {
    top: -4px !important;
    right: -4px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    border-width: 2px !important;
}

/* Compatibilidade caso algum layout force imagem direta */
.friend-row .avatar-universal-wrap,
.search-result-item .avatar-universal-wrap,
.post-header .avatar-universal-wrap,
.comment-row .avatar-universal-wrap,
.mini-profile .avatar-universal-wrap {
    width: fit-content !important;
    height: fit-content !important;
}

/* =========================================================
   CORREÇÃO FINA - ALINHAMENTO DAS NOTIFICAÇÕES
   ========================================================= */

.notifications-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.notification-item,
.notification-row,
.notification-card-row {
    display: grid !important;
    grid-template-columns: 54px 1fr 92px !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
}

.notification-item:last-child,
.notification-row:last-child,
.notification-card-row:last-child {
    border-bottom: none !important;
}

.notification-item .avatar-universal-wrap,
.notification-row .avatar-universal-wrap,
.notification-card-row .avatar-universal-wrap {
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: center !important;
}

.notification-content,
.notification-info,
.notification-text {
    grid-column: 2 !important;
    min-width: 0 !important;
    align-self: center !important;
}

.notification-content h3,
.notification-info h3,
.notification-text h3 {
    margin: 0 0 4px 0 !important;
    color: #1c1e21 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

.notification-content p,
.notification-info p,
.notification-text p {
    margin: 0 0 4px 0 !important;
    color: #65676b !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}

.notification-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.notification-actions .small-btn,
.notification-actions a,
.notification-item > a.small-btn,
.notification-row > a.small-btn,
.notification-card-row > a.small-btn {
    min-width: 76px !important;
    height: 40px !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
}

/* Caso o botão Abrir esteja vindo antes do avatar no HTML antigo */
.notification-item > a[href],
.notification-row > a[href],
.notification-card-row > a[href] {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
}

/* Caso o avatar esteja ficando solto no meio da tela */
.notifications-card .avatar-universal-wrap {
    margin: 0 !important;
}

/* Responsivo */
@media (max-width: 700px) {
    .notification-item,
    .notification-row,
    .notification-card-row {
        grid-template-columns: 46px 1fr !important;
        gap: 10px !important;
    }

    .notification-actions,
    .notification-item > a[href],
    .notification-row > a[href],
    .notification-card-row > a[href] {
        grid-column: 2 !important;
        justify-self: start !important;
        margin-top: 8px !important;
    }
}

/* =========================================================
   LIGHTBOX COM COMENTÁRIOS LATERAIS
   ========================================================= */

.cs-lightbox-panel {
    width: min(92vw, 1500px) !important;
    height: min(88vh, 820px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    background: #ffffff !important;
    border-radius: 22px !important;
    overflow: hidden !important;
}

.cs-lightbox-main {
    min-width: 0 !important;
    background: #050505 !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
}

.cs-lightbox-stage {
    min-height: 0 !important;
    background: #000000 !important;
}

.cs-lightbox-stage img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.cs-lightbox-comments {
    background: #ffffff !important;
    border-left: 1px solid #e4e6eb !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    min-width: 0 !important;
}

.cs-comments-header {
    padding: 16px !important;
    border-bottom: 1px solid #edf0f2 !important;
}

.cs-comments-header h3 {
    margin: 0 !important;
    color: #1c1e21 !important;
    font-size: 20px !important;
}

.cs-comments-header span {
    display: block !important;
    margin-top: 4px !important;
    color: #65676b !important;
    font-size: 13px !important;
}

.cs-comments-list {
    overflow-y: auto !important;
    padding: 12px !important;
    background: #f7f8fa !important;
}

.cs-comments-empty {
    color: #65676b !important;
    text-align: center !important;
    padding: 24px 12px !important;
    font-size: 14px !important;
}

.cs-comment-row {
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    gap: 9px !important;
    margin-bottom: 12px !important;
}

.cs-comment-avatar {
    width: 38px !important;
    height: 38px !important;
    position: relative !important;
}

.cs-comment-avatar img,
.cs-comment-avatar > span {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #e91e63 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
}

.cs-comment-dollar {
    position: absolute !important;
    right: -3px !important;
    top: -3px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #16a34a !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 1000 !important;
}

.cs-comment-body {
    min-width: 0 !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 9px 11px !important;
    border: 1px solid #edf0f2 !important;
}

.cs-comment-body strong {
    display: block !important;
    color: #1c1e21 !important;
    font-size: 13px !important;
    margin-bottom: 3px !important;
}

.cs-comment-body p {
    color: #1c1e21 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.cs-comment-body small {
    display: block !important;
    margin-top: 5px !important;
    color: #65676b !important;
    font-size: 11px !important;
}

.cs-comments-form {
    padding: 12px !important;
    border-top: 1px solid #edf0f2 !important;
    background: #ffffff !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
}

.cs-comments-form textarea {
    resize: none !important;
    border: 1px solid #d8dbe0 !important;
    background: #f0f2f5 !important;
    border-radius: 14px !important;
    padding: 10px !important;
    color: #1c1e21 !important;
    font-family: inherit !important;
    outline: none !important;
}

.cs-comments-form textarea::placeholder {
    color: #65676b !important;
    opacity: 1 !important;
}

.cs-comments-form button {
    border: none !important;
    border-radius: 14px !important;
    background: #e91e63 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    padding: 0 14px !important;
    cursor: pointer !important;
}

.cs-comments-form button:hover {
    background: #c2185b !important;
}

@media (max-width: 980px) {
    .cs-lightbox-panel {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) 300px !important;
    }

    .cs-lightbox-comments {
        border-left: none !important;
        border-top: 1px solid #e4e6eb !important;
    }
}

/* =========================================================
   CORREÇÃO - ABERTURA DO LIGHTBOX DE FOTOS
   ========================================================= */

.cs-lightbox[hidden] {
    display: none !important;
}

.cs-lightbox.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
}

.cs-lightbox.is-open .cs-lightbox-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.78) !important;
}

.cs-lightbox.is-open .cs-lightbox-panel {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   LIGHTBOX FINAL - FOTO + COMENTÁRIOS
   ========================================================= */

body.cs-lightbox-open {
    overflow: hidden !important;
}

.cs-lightbox[hidden] {
    display: none !important;
}

.cs-lightbox.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
}

.cs-lightbox-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(3px) !important;
}

.cs-lightbox-panel {
    position: relative !important;
    z-index: 2 !important;
    width: min(96vw, 1640px) !important;
    height: min(90vh, 880px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 390px !important;
    background: #ffffff !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 28px 80px rgba(0,0,0,0.45) !important;
}

.cs-lightbox-main {
    min-width: 0 !important;
    min-height: 0 !important;
    background: #050505 !important;
    display: grid !important;
    grid-template-rows: 74px minmax(0, 1fr) 86px !important;
}

.cs-lightbox-header {
    height: 74px !important;
    background: #090909 !important;
    color: #ffffff !important;
    padding: 0 22px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.cs-lightbox-header h3 {
    color: #ffffff !important;
    margin: 0 0 4px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
}

.cs-lightbox-header span {
    color: rgba(255,255,255,0.72) !important;
    font-size: 14px !important;
}

.cs-lightbox-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.cs-lightbox-round-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,0.14) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.cs-lightbox-round-btn:hover {
    background: rgba(255,255,255,0.24) !important;
}

.cs-lightbox-round-btn.close {
    font-size: 28px !important;
    padding-bottom: 3px !important;
}

.cs-lightbox-stage {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.cs-lightbox-stage img[data-lightbox-image] {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

.cs-lightbox-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0,0,0,0.52) !important;
    color: #ffffff !important;
    font-size: 46px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 0 6px 0 !important;
}

.cs-lightbox-nav:hover {
    background: rgba(233,30,99,0.85) !important;
}

.cs-lightbox-nav.prev {
    left: 22px !important;
}

.cs-lightbox-nav.next {
    right: 22px !important;
}

.cs-lightbox-footer {
    height: 86px !important;
    background: #ffffff !important;
    color: #1c1e21 !important;
    border-top: 1px solid #e4e6eb !important;
    display: grid !important;
    grid-template-columns: 90px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 18px !important;
    overflow: hidden !important;
}

.cs-lightbox-privacy {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    background: rgba(233,30,99,0.10) !important;
    color: #e91e63 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.cs-lightbox-thumbs {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: 66px !important;
    padding: 3px 2px !important;
}

.cs-lightbox-thumb {
    width: 64px !important;
    height: 48px !important;
    min-width: 64px !important;
    border: 3px solid transparent !important;
    border-radius: 10px !important;
    padding: 0 !important;
    background: #e4e6eb !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.cs-lightbox-thumb img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

.cs-lightbox-thumb.active {
    border-color: #e91e63 !important;
}

.cs-lightbox-comments {
    min-width: 0 !important;
    min-height: 0 !important;
    background: #ffffff !important;
    border-left: 1px solid #e4e6eb !important;
    display: grid !important;
    grid-template-rows: 82px minmax(0, 1fr) 92px !important;
}

.cs-comments-header {
    padding: 18px !important;
    border-bottom: 1px solid #edf0f2 !important;
    background: #ffffff !important;
}

.cs-comments-header h3 {
    margin: 0 0 6px !important;
    color: #1c1e21 !important;
    font-size: 22px !important;
}

.cs-comments-header span {
    color: #65676b !important;
    font-size: 13px !important;
}

.cs-comments-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px !important;
    background: #f0f2f5 !important;
}

.cs-comments-empty {
    color: #65676b !important;
    text-align: center !important;
    padding: 26px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.cs-comment-row {
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    gap: 9px !important;
    margin-bottom: 12px !important;
}

.cs-comment-avatar {
    width: 38px !important;
    height: 38px !important;
    position: relative !important;
}

.cs-comment-avatar img,
.cs-comment-avatar > span {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #e91e63 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
}

.cs-comment-dollar {
    position: absolute !important;
    right: -3px !important;
    top: -3px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #16a34a !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 1000 !important;
}

.cs-comment-body {
    min-width: 0 !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 9px 11px !important;
    border: 1px solid #edf0f2 !important;
}

.cs-comment-body strong {
    display: block !important;
    color: #1c1e21 !important;
    font-size: 13px !important;
    margin-bottom: 3px !important;
}

.cs-comment-body p {
    color: #1c1e21 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.cs-comment-body small {
    display: block !important;
    margin-top: 5px !important;
    color: #65676b !important;
    font-size: 11px !important;
}

.cs-comments-form {
    min-height: 92px !important;
    padding: 12px !important;
    border-top: 1px solid #edf0f2 !important;
    background: #ffffff !important;
    display: grid !important;
    grid-template-columns: 1fr 78px !important;
    gap: 8px !important;
    align-items: center !important;
}

.cs-comments-form textarea {
    width: 100% !important;
    height: 58px !important;
    resize: none !important;
    border: 1px solid #d8dbe0 !important;
    background: #f0f2f5 !important;
    border-radius: 14px !important;
    padding: 10px !important;
    color: #1c1e21 !important;
    font-family: inherit !important;
    outline: none !important;
}

.cs-comments-form textarea::placeholder {
    color: #65676b !important;
    opacity: 1 !important;
}

.cs-comments-form button {
    height: 44px !important;
    border: none !important;
    border-radius: 14px !important;
    background: #e91e63 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    padding: 0 12px !important;
    cursor: pointer !important;
}

.cs-comments-form button:hover {
    background: #c2185b !important;
}

@media (max-width: 1050px) {
    .cs-lightbox-panel {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) 320px !important;
    }

    .cs-lightbox-comments {
        border-left: none !important;
        border-top: 1px solid #e4e6eb !important;
        grid-template-rows: 70px minmax(0, 1fr) 86px !important;
    }
}

@media (max-width: 700px) {
    .cs-lightbox.is-open {
        padding: 8px !important;
    }

    .cs-lightbox-panel {
        width: 100vw !important;
        height: 96vh !important;
        border-radius: 16px !important;
    }

    .cs-lightbox-main {
        grid-template-rows: 62px minmax(0, 1fr) 76px !important;
    }

    .cs-lightbox-header {
        height: 62px !important;
        padding: 0 12px !important;
    }

    .cs-lightbox-footer {
        height: 76px !important;
        grid-template-columns: 72px 1fr !important;
        padding: 8px !important;
    }

    .cs-lightbox-thumb {
        width: 54px !important;
        height: 42px !important;
        min-width: 54px !important;
    }
}

/* =========================================================
   FIX DEFINITIVO DO LIGHTBOX - FOTO GRANDE + COMENTÁRIOS
   ========================================================= */

.cs-lightbox.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
    background: rgba(0, 0, 0, 0.84) !important;
}

.cs-lightbox.is-open .cs-lightbox-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.84) !important;
}

.cs-lightbox.is-open .cs-lightbox-panel {
    position: relative !important;
    z-index: 2 !important;
    width: min(96vw, 1680px) !important;
    height: min(92vh, 900px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 410px !important;
    grid-template-rows: 1fr !important;
    background: #ffffff !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 28px 90px rgba(0,0,0,0.55) !important;
}

/* ÁREA ESQUERDA DA FOTO */
.cs-lightbox.is-open .cs-lightbox-main {
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: 76px minmax(0, 1fr) 92px !important;
    background: #000000 !important;
    overflow: hidden !important;
}

/* CABEÇALHO */
.cs-lightbox.is-open .cs-lightbox-header {
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 24px !important;
    background: #090909 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.cs-lightbox.is-open .cs-lightbox-header h3 {
    color: #ffffff !important;
    font-size: 22px !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
}

.cs-lightbox.is-open .cs-lightbox-header span {
    color: rgba(255,255,255,0.70) !important;
    font-size: 14px !important;
}

/* BOTÕES PLAY E FECHAR */
.cs-lightbox.is-open .cs-lightbox-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.cs-lightbox.is-open .cs-lightbox-round-btn {
    width: 48px !important;
    height: 48px !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.cs-lightbox.is-open .cs-lightbox-round-btn:hover {
    background: #e91e63 !important;
}

.cs-lightbox.is-open .cs-lightbox-round-btn.close {
    font-size: 31px !important;
    padding-bottom: 4px !important;
}

/* PALCO DA FOTO GRANDE */
.cs-lightbox.is-open .cs-lightbox-stage {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* FORÇA FOTO A USAR ÁREA GRANDE */
.cs-lightbox.is-open .cs-lightbox-stage img[data-lightbox-image] {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #000000 !important;
}

/* SETAS */
.cs-lightbox.is-open .cs-lightbox-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 58px !important;
    height: 58px !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.52) !important;
    color: #ffffff !important;
    font-size: 48px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    padding: 0 0 7px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.cs-lightbox.is-open .cs-lightbox-nav:hover {
    background: #e91e63 !important;
}

.cs-lightbox.is-open .cs-lightbox-nav.prev {
    left: 24px !important;
}

.cs-lightbox.is-open .cs-lightbox-nav.next {
    right: 24px !important;
}

/* RODAPÉ DAS MINIATURAS */
.cs-lightbox.is-open .cs-lightbox-footer {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    background: #ffffff !important;
    border-top: 1px solid #e4e6eb !important;
    padding: 10px 18px !important;
    display: grid !important;
    grid-template-columns: 100px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    overflow: hidden !important;
}

.cs-lightbox.is-open .cs-lightbox-privacy {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    padding: 8px 15px !important;
    border-radius: 999px !important;
    background: rgba(233,30,99,0.10) !important;
    color: #e91e63 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.cs-lightbox.is-open .cs-lightbox-thumbs {
    height: 70px !important;
    max-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 2px !important;
}

.cs-lightbox.is-open .cs-lightbox-thumb {
    width: 72px !important;
    height: 54px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border: 3px solid transparent !important;
    border-radius: 12px !important;
    padding: 0 !important;
    background: #e4e6eb !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.cs-lightbox.is-open .cs-lightbox-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.cs-lightbox.is-open .cs-lightbox-thumb.active {
    border-color: #e91e63 !important;
}

/* COLUNA DIREITA DOS COMENTÁRIOS */
.cs-lightbox.is-open .cs-lightbox-comments {
    height: 100% !important;
    min-height: 0 !important;
    background: #ffffff !important;
    border-left: 1px solid #e4e6eb !important;
    display: grid !important;
    grid-template-rows: 88px minmax(0, 1fr) 104px !important;
    overflow: hidden !important;
}

.cs-lightbox.is-open .cs-comments-header {
    height: 88px !important;
    min-height: 88px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf0f2 !important;
    padding: 18px !important;
}

.cs-lightbox.is-open .cs-comments-header h3 {
    margin: 0 0 6px 0 !important;
    color: #1c1e21 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
}

.cs-lightbox.is-open .cs-comments-header span {
    color: #65676b !important;
    font-size: 14px !important;
}

.cs-lightbox.is-open .cs-comments-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px !important;
    background: #f0f2f5 !important;
}

.cs-lightbox.is-open .cs-comments-empty {
    color: #65676b !important;
    text-align: center !important;
    padding: 28px 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* FORM FIXO EMBAIXO */
.cs-lightbox.is-open .cs-comments-form {
    height: 104px !important;
    min-height: 104px !important;
    background: #ffffff !important;
    border-top: 1px solid #edf0f2 !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
    align-items: center !important;
    gap: 10px !important;
}

.cs-lightbox.is-open .cs-comments-form textarea {
    width: 100% !important;
    height: 66px !important;
    resize: none !important;
    border: 1px solid #d8dbe0 !important;
    background: #f0f2f5 !important;
    border-radius: 16px !important;
    padding: 12px !important;
    color: #1c1e21 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    outline: none !important;
}

.cs-lightbox.is-open .cs-comments-form button {
    height: 52px !important;
    border: none !important;
    border-radius: 16px !important;
    background: #e91e63 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    cursor: pointer !important;
}

.cs-lightbox.is-open .cs-comments-form button:hover {
    background: #c2185b !important;
}

/* COMENTÁRIOS */
.cs-lightbox.is-open .cs-comment-row {
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    gap: 9px !important;
    margin-bottom: 12px !important;
}

.cs-lightbox.is-open .cs-comment-body {
    background: #ffffff !important;
    border: 1px solid #edf0f2 !important;
    border-radius: 14px !important;
    padding: 9px 11px !important;
}

.cs-lightbox.is-open .cs-comment-body strong {
    display: block !important;
    color: #1c1e21 !important;
    font-size: 13px !important;
    margin-bottom: 3px !important;
}

.cs-lightbox.is-open .cs-comment-body p {
    color: #1c1e21 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.cs-lightbox.is-open .cs-comment-body small {
    display: block !important;
    color: #65676b !important;
    font-size: 11px !important;
    margin-top: 5px !important;
}

/* RESPONSIVO */
@media (max-width: 1100px) {
    .cs-lightbox.is-open .cs-lightbox-panel {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) 330px !important;
    }

    .cs-lightbox.is-open .cs-lightbox-comments {
        border-left: none !important;
        border-top: 1px solid #e4e6eb !important;
        grid-template-rows: 72px minmax(0, 1fr) 94px !important;
    }
}


/* =========================================================
   AJUSTES FINAIS - MINIATURA, V?DEO, UPLOAD E LOCAL
   ========================================================= */

.cs-lightbox.is-open .cs-lightbox-thumb {
    border-width: 2px !important;
}

.cs-lightbox.is-open .cs-lightbox-thumb.active {
    border-color: #e91e63 !important;
    box-shadow: 0 0 0 1px rgba(233,30,99,0.25) !important;
}

.cs-lightbox.is-open .cs-lightbox-thumbs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
}

.cs-lightbox.is-open .cs-lightbox-thumbs::-webkit-scrollbar {
    height: 7px !important;
}

.cs-lightbox.is-open .cs-lightbox-thumbs::-webkit-scrollbar-thumb {
    background: #cfd4dc !important;
    border-radius: 999px !important;
}

.cs-lightbox-stage video[data-lightbox-video] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    background: #000000 !important;
}

.cs-video-thumb {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #111827, #374151) !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.cs-video-thumb span {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

.cs-video-thumb strong {
    color: #ffffff !important;
    font-size: 13px !important;
}

.cs-lightbox-thumb.video-thumb {
    background: #111827 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cs-lightbox-thumb.video-thumb span {
    color: #ffffff !important;
    font-size: 20px !important;
}

.photos-manager-card {
    background: #ffffff !important;
    border: 1px solid #dddfe2 !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 22px !important;
}

.photos-manager-card h2 {
    color: #1c1e21 !important;
    margin: 0 0 8px !important;
}

.photos-manager-card p {
    color: #65676b !important;
    margin: 0 0 16px !important;
}

.photo-upload-form {
    display: grid !important;
    gap: 10px !important;
}

.photo-upload-form label {
    color: #1c1e21 !important;
    font-weight: 900 !important;
}

.photo-upload-form input[type="file"],
.photo-upload-form input[type="text"] {
    min-height: 46px !important;
    border: 1px solid #d8dbe0 !important;
    border-radius: 14px !important;
    background: #f7f8fa !important;
    color: #1c1e21 !important;
    padding: 10px 12px !important;
}

.photo-private-check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 0 !important;
}

.photo-private-check input {
    width: 18px !important;
    height: 18px !important;
}

.profile-location-panel {
    padding: 14px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #d8dbe0 !important;
    margin: 10px 0 16px !important;
}

.location-fields {
    margin-top: 12px !important;
}

.location-fields label {
    color: #1c1e21 !important;
    font-weight: 900 !important;
}

.location-fields input {
    background: #ffffff !important;
    color: #1c1e21 !important;
    border: 1px solid #cfd4dc !important;
}

.location-fields input::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

.location-fields small {
    display: block !important;
    color: #4b5563 !important;
    font-weight: 700 !important;
    margin-top: 8px !important;
}


/* =========================================================
   FIX VIDEO NO LIGHTBOX + AJUSTE DE BOTÕES DE EXCLUSÃO
   ========================================================= */

/* Quando for vídeo, o elemento img precisa sumir de verdade */
.cs-lightbox-stage img[data-lightbox-image][hidden],
.cs-lightbox-stage video[data-lightbox-video][hidden] {
    display: none !important;
}

/* Garante que o vídeo ocupe o palco corretamente */
.cs-lightbox.is-open .cs-lightbox-stage video[data-lightbox-video] {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    background: #000000 !important;
}

/* Se o vídeo estiver hidden, ele não aparece */
.cs-lightbox.is-open .cs-lightbox-stage video[data-lightbox-video][hidden] {
    display: none !important;
}

/* Se a imagem estiver hidden, ela não aparece */
.cs-lightbox.is-open .cs-lightbox-stage img[data-lightbox-image][hidden] {
    display: none !important;
}

/* Lista de gerenciamento de mídia */
.media-manage-list {
    display: grid !important;
    gap: 12px !important;
    margin-top: 18px !important;
}

.media-manage-item {
    display: grid !important;
    grid-template-columns: 88px 1fr auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px !important;
    border: 1px solid #edf0f2 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

.media-manage-thumb {
    width: 88px !important;
    height: 66px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #111827 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.media-manage-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.media-manage-thumb.video {
    color: #ffffff !important;
    font-weight: 900 !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.media-manage-thumb.video span {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.media-manage-info strong {
    display: block !important;
    color: #1c1e21 !important;
    font-size: 15px !important;
    margin-bottom: 4px !important;
}

.media-manage-info span {
    display: block !important;
    color: #65676b !important;
    font-size: 13px !important;
}

.media-delete-form {
    margin: 0 !important;
}

.media-delete-btn {
    height: 38px !important;
    padding: 0 14px !important;
    border: none !important;
    border-radius: 12px !important;
    background: #fee2e2 !important;
    color: #b91c1c !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.media-delete-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

@media (max-width: 700px) {
    .media-manage-item {
        grid-template-columns: 72px 1fr !important;
    }

    .media-delete-form {
        grid-column: 1 / -1 !important;
    }

    .media-delete-btn {
        width: 100% !important;
    }
}

/* =========================================================
   AJUSTE FINAL - ÍCONE SVG NAS MINIATURAS DE VÍDEO
   ========================================================= */

.cs-lightbox-thumb.video-thumb svg {
    width: 26px !important;
    height: 26px !important;
    color: #ffffff !important;
    display: block !important;
}

.cs-video-thumb span svg {
    width: 28px !important;
    height: 28px !important;
    color: #ffffff !important;
    display: block !important;
}

.cs-video-thumb span {
    color: #ffffff !important;
}

/* =========================================================
   FIX FINAL - SVG PLAY/PAUSE DO LIGHTBOX
   ========================================================= */

.cs-lightbox-round-btn svg {
    width: 24px !important;
    height: 24px !important;
    color: #ffffff !important;
    display: block !important;
    pointer-events: none !important;
}

.cs-lightbox-round-btn {
    font-family: Arial, sans-serif !important;
}

/* =========================================================
   PREVIEW DE VÍDEO NA GRADE DE MÍDIAS
   ========================================================= */

.cs-video-thumb {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, #0f172a, #374151) !important;
}

.cs-video-preview {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    background: #111827 !important;
    pointer-events: none !important;
}

.cs-video-thumb-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(to bottom, rgba(15,23,42,0.20), rgba(15,23,42,0.38)) !important;
    color: #ffffff !important;
    pointer-events: none !important;
}

.cs-video-play-badge {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.22) !important;
    backdrop-filter: blur(2px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;
}

.cs-video-play-badge svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    color: #ffffff !important;
}

.cs-video-thumb-overlay strong {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}

/* miniatura de vídeo no lightbox */
.cs-lightbox-thumb.video-thumb {
    position: relative !important;
    background: linear-gradient(135deg, #111827, #374151) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.cs-lightbox-thumb.video-thumb::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.15) !important;
}

.cs-lightbox-thumb.video-thumb svg {
    position: relative !important;
    z-index: 2 !important;
    width: 24px !important;
    height: 24px !important;
    color: #ffffff !important;
    display: block !important;
}

/* =========================================================
   BUSCA - BOTÃO PRINCIPAL MAIS PROFISSIONAL
   ========================================================= */

.search-submit-area {
    margin-top: 18px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.search-main-button {
    min-height: 52px !important;
    min-width: 210px !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 0 22px !important;
    background: linear-gradient(135deg, #e91e63, #c2185b) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    box-shadow: 0 14px 28px rgba(233, 30, 99, 0.28) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.search-main-button:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.03) !important;
    box-shadow: 0 18px 36px rgba(233, 30, 99, 0.36) !important;
}

.search-main-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 10px 20px rgba(233, 30, 99, 0.24) !important;
}

.search-main-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
}

.search-main-icon svg {
    display: block !important;
    color: #ffffff !important;
}

.search-card {
    background: #ffffff !important;
    border: 1px solid #dddfe2 !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 22px !important;
}

.search-card-header h2 {
    color: #1c1e21 !important;
    margin: 0 0 6px !important;
    font-size: 26px !important;
}

.search-card-header p {
    color: #65676b !important;
    margin: 0 0 18px !important;
}

.search-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.search-field label {
    display: block !important;
    color: #1c1e21 !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
}

.search-field input,
.search-field select {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid #d8dbe0 !important;
    background: #f7f8fa !important;
    color: #1c1e21 !important;
    padding: 0 12px !important;
    outline: none !important;
}

.search-field input:focus,
.search-field select:focus {
    border-color: rgba(233, 30, 99, 0.55) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.10) !important;
}

.search-check {
    margin-top: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1c1e21 !important;
    font-weight: 800 !important;
}

.search-check input {
    width: 18px !important;
    height: 18px !important;
}

@media (max-width: 700px) {
    .search-form-grid {
        grid-template-columns: 1fr !important;
    }

    .search-submit-area {
        justify-content: stretch !important;
    }

    .search-main-button {
        width: 100% !important;
    }
}

/* =========================================================
   VERIFICAÇÃO DE PERFIL
   ========================================================= */

.verification-card {
    background: #ffffff !important;
    border: 1px solid #dddfe2 !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 24px !important;
}

.verification-icon {
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
    background: rgba(37, 99, 235, 0.10) !important;
    color: #2563eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.verification-card h2 {
    color: #1c1e21 !important;
    font-size: 26px !important;
    margin: 0 0 8px !important;
}

.verification-card p {
    color: #65676b !important;
    line-height: 1.55 !important;
}

.verification-success {
    padding: 14px !important;
    border-radius: 14px !important;
    background: rgba(37, 99, 235, 0.10) !important;
    color: #1d4ed8 !important;
    font-weight: 900 !important;
    margin: 14px 0 !important;
}

.verification-status-box {
    margin: 16px 0 !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: #f7f8fa !important;
    border: 1px solid #e4e6eb !important;
}

.verification-status-box span {
    display: block !important;
    color: #65676b !important;
    font-size: 13px !important;
    margin-bottom: 5px !important;
}

.verification-status-box strong {
    display: block !important;
    color: #1c1e21 !important;
    font-size: 18px !important;
    word-break: break-word !important;
}

.verification-status-box small {
    display: block !important;
    color: #65676b !important;
    margin-top: 5px !important;
}

.verification-steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 18px 0 !important;
}

.verification-steps div {
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 12px !important;
    border: 1px solid #edf0f2 !important;
    border-radius: 14px !important;
    background: #f7f8fa !important;
}

.verification-steps strong {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #2563eb !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.verification-steps span {
    color: #1c1e21 !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.verification-download-btn,
.verification-submit-btn {
    min-height: 48px !important;
    border: none !important;
    border-radius: 15px !important;
    padding: 0 18px !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 26px rgba(37,99,235,0.24) !important;
    cursor: pointer !important;
}

.verification-download-btn:hover,
.verification-submit-btn:hover {
    filter: brightness(1.04) !important;
    transform: translateY(-1px) !important;
}

.verification-upload-form {
    display: grid !important;
    gap: 12px !important;
}

.verification-upload-form label {
    color: #1c1e21 !important;
    font-weight: 900 !important;
}

.verification-upload-form input[type="file"] {
    min-height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid #d8dbe0 !important;
    background: #f7f8fa !important;
    padding: 10px 12px !important;
    color: #1c1e21 !important;
}

.avatar-verified-badge {
    position: absolute !important;
    left: -3px !important;
    top: -3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #2563eb !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 6 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22) !important;
}

.avatar-universal-wrap:has(.profile-avatar-large) .avatar-verified-badge {
    width: 30px !important;
    height: 30px !important;
    left: 4px !important;
    top: 4px !important;
    border-width: 4px !important;
}

.profile-verified-title-icon {
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #2563eb !important;
    color: #ffffff !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
}

.side-verified-mini {
    margin-left: auto !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #2563eb !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 700px) {
    .verification-steps {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   VERIFICAÇÃO DE PERFIL - LAYOUT FINAL
   ========================================================= */

.verification-card {
    background: #ffffff !important;
    border: 1px solid #dddfe2 !important;
    border-radius: 20px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.07) !important;
    padding: 24px !important;
    margin-bottom: 18px !important;
}

.verification-hero-card {
    overflow: hidden !important;
}

.verification-hero-top {
    display: grid !important;
    grid-template-columns: 70px 1fr !important;
    gap: 16px !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

.verification-icon {
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
    background: rgba(37, 99, 235, 0.10) !important;
    color: #2563eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.verification-card h2 {
    color: #1c1e21 !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
    font-weight: 950 !important;
}

.verification-card p {
    color: #65676b !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 0 14px !important;
}

.verification-success {
    padding: 14px !important;
    border-radius: 14px !important;
    background: rgba(37, 99, 235, 0.10) !important;
    color: #1d4ed8 !important;
    font-weight: 900 !important;
    margin: 14px 0 !important;
}

.verification-status-box,
.verification-profile-box {
    margin: 16px 0 !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: #f7f8fa !important;
    border: 1px solid #e4e6eb !important;
}

.verification-profile-box {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.verification-status-box span,
.verification-profile-box span {
    display: block !important;
    color: #65676b !important;
    font-size: 13px !important;
    margin-bottom: 5px !important;
}

.verification-status-box strong,
.verification-profile-box strong {
    display: block !important;
    color: #1c1e21 !important;
    font-size: 16px !important;
    word-break: break-word !important;
}

.verification-status-box small {
    display: block !important;
    color: #65676b !important;
    margin-top: 5px !important;
}

.verification-steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 18px 0 !important;
}

.verification-steps div {
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 13px !important;
    border: 1px solid #edf0f2 !important;
    border-radius: 15px !important;
    background: #f7f8fa !important;
}

.verification-steps strong {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #2563eb !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
}

.verification-steps span {
    color: #1c1e21 !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.verification-download-area {
    margin-top: 20px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(233,30,99,0.08)) !important;
    border: 1px solid rgba(37,99,235,0.16) !important;
}

.verification-download-area small {
    display: block !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-top: 10px !important;
}

.verification-download-btn,
.verification-submit-btn {
    min-height: 52px !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 0 20px !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-weight: 950 !important;
    font-size: 15px !important;
    box-shadow: 0 14px 28px rgba(37,99,235,0.28) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.verification-download-btn:hover,
.verification-submit-btn:hover {
    filter: brightness(1.04) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.verification-download-btn span {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.verification-upload-form {
    display: grid !important;
    gap: 12px !important;
}

.verification-upload-form label {
    color: #1c1e21 !important;
    font-weight: 900 !important;
}

.verification-upload-form input[type="file"] {
    min-height: 48px !important;
    border-radius: 14px !important;
    border: 1px solid #d8dbe0 !important;
    background: #f7f8fa !important;
    padding: 10px 12px !important;
    color: #1c1e21 !important;
}

@media (max-width: 700px) {
    .verification-hero-top,
    .verification-profile-box,
    .verification-steps {
        grid-template-columns: 1fr !important;
    }

    .verification-download-btn,
    .verification-submit-btn {
        width: 100% !important;
    }
}

/* =========================================================
   CADASTRO - CAMPOS EXTRAS E MUNICÍPIO FECHADO
   ========================================================= */

.register-card {
    max-width: 860px !important;
}

.register-form .form-section-title {
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
}

.register-form .form-section-title h2 {
    color: #ffffff !important;
    font-size: 18px !important;
    margin: 0 0 10px !important;
}

.register-form select,
.register-form input,
.register-form textarea {
    width: 100% !important;
}

.register-form textarea {
    resize: vertical !important;
}

.register-form .profile-professional-panel,
.register-form .profile-location-panel {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
}

.register-form .profile-checkbox-box {
    background: rgba(233,30,99,0.16) !important;
    color: #ffffff !important;
}

.register-form .profile-checkbox-box span {
    color: #ffffff !important;
}

.register-form .professional-fields label,
.register-form .location-fields label {
    color: #ffffff !important;
}

.register-form .professional-fields small,
.register-form .location-fields small {
    color: rgba(255,255,255,0.78) !important;
}

.register-form .profile-tags-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.register-form .profile-tag-option {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

.register-form .profile-tag-option span {
    color: #ffffff !important;
}

.register-form .profile-tag-option:has(input:checked) {
    background: rgba(233,30,99,0.28) !important;
    border-color: rgba(233,30,99,0.60) !important;
}

.terms-check {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 12px 0 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.terms-check input {
    width: 18px !important;
    height: 18px !important;
    min-height: auto !important;
}

@media (max-width: 700px) {
    .register-form .profile-tags-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   CADASTRO - AJUSTES VISUAIS FINAIS
   ========================================================= */

.birth-fields-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 10px !important;
}

.birth-field-box {
    display: block !important;
}

.register-tags-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 10px !important;
}

.profile-tag-card {
    position: relative !important;
    min-height: 78px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 18px 24px !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.profile-tag-card input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.profile-tag-card-text {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    padding-left: 34px !important;
    position: relative !important;
}

.profile-tag-card-text::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    border: 2px solid rgba(255,255,255,0.80) !important;
    background: transparent !important;
}

.profile-tag-card:has(input:checked) {
    background: linear-gradient(135deg, rgba(233,30,99,0.34), rgba(156,39,176,0.28)) !important;
    border-color: rgba(255,255,255,0.32) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
}

.profile-tag-card:has(input:checked) .profile-tag-card-text::before {
    background: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: inset 0 0 0 5px #e91e63 !important;
}

.toggle-panels-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.toggle-panel-card {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 24px !important;
    padding: 18px !important;
}

.toggle-card {
    position: relative !important;
    min-height: 96px !important;
    border-radius: 22px !important;
    background: rgba(233,30,99,0.18) !important;
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 18px 22px !important;
    cursor: pointer !important;
}

.toggle-card input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.toggle-check-ui {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    border: 2px solid rgba(255,255,255,0.86) !important;
    background: transparent !important;
}

.toggle-card-text {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
}

.toggle-card:has(input:checked) {
    background: linear-gradient(135deg, rgba(233,30,99,0.42), rgba(156,39,176,0.32)) !important;
}

.toggle-card:has(input:checked) .toggle-check-ui {
    background: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: inset 0 0 0 6px #e91e63 !important;
}

.toggle-extra-fields {
    display: none;
    margin-top: 16px !important;
}

.toggle-extra-fields label {
    display: block !important;
    margin-top: 10px !important;
}

.toggle-extra-fields small {
    display: block !important;
    margin-top: 10px !important;
    color: rgba(255,255,255,0.78) !important;
    line-height: 1.4 !important;
}

@media (max-width: 700px) {
    .birth-fields-grid,
    .register-tags-grid,
    .toggle-panels-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   RESULTADOS DA BUSCA - LAYOUT AJUSTADO
   ========================================================= */

.search-results-card {
    background: #ffffff !important;
    border: 1px solid #dddfe2 !important;
    border-radius: 20px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06) !important;
    padding: 22px !important;
}

.search-result-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 22px 0 !important;
    border-top: 1px solid #edf0f2 !important;
}

.search-result-item:first-of-type {
    border-top: none !important;
    padding-top: 8px !important;
}

.search-result-main {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.search-result-avatar {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.search-avatar {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.search-result-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.search-result-name {
    display: block !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    color: #111827 !important;
    margin-bottom: 6px !important;
}

.search-result-name a {
    color: #111827 !important;
    text-decoration: none !important;
}

.search-result-name a:hover {
    color: #e91e63 !important;
}

.search-result-meta {
    display: block !important;
    font-size: 15px !important;
    color: #4b5563 !important;
    margin-bottom: 8px !important;
}

.search-result-bio {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #374151 !important;
}

.search-result-bio.muted {
    color: #6b7280 !important;
}

.search-result-actions {
    flex: 0 0 150px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 10px !important;
}

.search-action-btn {
    min-width: 132px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    border: none !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.search-action-btn.primary {
    background: linear-gradient(135deg, #e91e63, #c2185b) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(233, 30, 99, 0.22) !important;
}

.search-action-btn.primary:hover {
    filter: brightness(1.03) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.search-action-btn.secondary {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}

.search-action-btn.secondary:hover {
    background: #eceff3 !important;
    color: #111827 !important;
}

.search-action-btn.muted {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    border: 1px solid #e5e7eb !important;
}

.search-action-btn.disabled {
    cursor: default !important;
    pointer-events: none !important;
}

@media (max-width: 860px) {
    .search-result-item {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .search-result-main {
        align-items: center !important;
    }

    .search-result-actions {
        flex: 1 1 auto !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .search-action-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 640px) {
    .search-result-main {
        flex-direction: column !important;
        text-align: center !important;
    }

    .search-result-info {
        align-items: center !important;
    }

    .search-result-name,
    .search-result-meta,
    .search-result-bio {
        text-align: center !important;
    }
}


/* CS_FIX_SOCIAL_TOP_SPACING_START */
/*
   Correção definitiva do espaço excessivo entre a faixa de stories
   e o início do feed.

   O problema estava no container:
   <main class="social-layout">
*/
main.social-layout,
.social-layout {
    margin-top: 0 !important;
    padding-top: 18px !important;
}

.cs-online-stories-fixed + main.social-layout,
.cs-online-strip + main.social-layout,
.cs-online-stories-bar + main.social-layout {
    margin-top: 0 !important;
    padding-top: 18px !important;
}

.social-layout > .social-sidebar-left,
.social-layout > .social-feed,
.social-layout > .social-sidebar-right {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* CS_FIX_SOCIAL_TOP_SPACING_END */