/* ===================================================================
   BASE
=================================================================== */



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

/* =========================
   Avatar dropdown: remover divisores/linhas brancas
   (alguns layouts inserem <hr> ou divs com classes variadas)
   ========================= */
.user-dropdown hr,
.user-dropdown .divider,
.user-dropdown .sep,
.user-dropdown .separator,
.user-dropdown .menu-divider,
.user-dropdown .user-dd-sep,
.user-dropdown .user-dropdown-sep {
  display: none !important;
}

/* Em alguns templates as "linhas" vêm de bordas nos links */
.user-dropdown a {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #050509;
    color: #f5f5f5;
}

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


.main-nav {
    display: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ===================================================================
   LAYOUT GERAL
=================================================================== */

.site-header {
    background: #0d0d11;
    border-bottom: 1px solid #1f1f29;
    position: sticky;
    top: 0;
    z-index: 20;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo a {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
}

.main-nav a {
    margin: 0 10px;
    font-size: 14px;
    opacity: 0.85;
}

.main-nav a:hover {
    opacity: 1;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.btn {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    border: none;
    display: inline-block;
    cursor: pointer;
}

.btn-primary {
    background: #2b7bff;
    color: #fff;
}

.btn-primary:hover {
    background: #2260c7;
}

.btn-ghost {
    background: transparent;
    border: 1px solid #333642;
    color: #f5f5f5;
}

.btn-ghost:hover {
    border-color: #2b7bff;
}

.notif-badge {
    position: relative;
    font-size: 14px;
}

.notif-badge .badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #f55252;
    color: #fff;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 11px;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-name {
    opacity: 0.9;
}

.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 40px;
}

/* ===================================================================
   HOMEPAGE - HERO
=================================================================== */

/* ============================
   HOME / HERO
   ============================ */

.hero {
    padding: 32px 24px 24px;
    border-radius: 18px;
    background: radial-gradient(circle at top left, #2b59ff33, transparent 55%),
                radial-gradient(circle at bottom right, #ff3b8133, transparent 55%),
                #101018;
    margin: 16px auto 24px;
    max-width: 1120px;
}

.hero-content h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.hero-content p {
    font-size: 14px;
    opacity: .85;
    margin-bottom: 16px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ===================================================================
   HOME - POSTS DA ADMIN
=================================================================== */

.admin-highlight {
    margin-bottom: 26px;
}

.admin-highlight h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.admin-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.admin-post-card {
    background: #17171e;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.admin-media img,
.admin-media video {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

.admin-post-info {
    padding: 10px 12px 12px;
    font-size: 13px;
}

.admin-post-info h3 {
    font-size: 15px;
    margin-bottom: 4px;
}

/* slider horizontal */
.admin-slider {
    overflow-x: auto;
    padding-bottom: 4px;
}
.admin-slider-track {
    display: flex;
    gap: 12px;
}
.admin-post-card {
    min-width: 260px;
}

/* ===================================================================
   HOME - GRID DE PROJETOS
=================================================================== */

.projects-section {
    margin-top: 10px;
}

.projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.projects-header h2 {
    font-size: 18px;
}

.projects-filters {
    display: flex;
    gap: 8px;
}

.filter-link {
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    opacity: 0.8;
}

.filter-link.active {
    border-color: #2b7bff;
    background: #2b7bff;
    color: #fff;
    opacity: 1;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.project-card {
    background: #15151b;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.project-card:hover {
    transform: translateY(-3px);
    background: #191923;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}

.project-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    background: #222;
    overflow: hidden;
}

.project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    font-size: 13px;
}

.thumb-blur img {
    filter: blur(10px);
}

/* Fallback robusto: se o card estiver marcado como sensível via atributo, aplica blur
   mesmo que alguma classe condicional falhe em versões futuras. */
a[data-sensitive='1'] .project-thumb img,
a[data-sensitive='1'] .project-thumb video {
    filter: blur(10px);
}

.lock-overlay-small {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(0,0,0,0.7);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 16px;
}

.project-info {
    padding: 9px 12px 12px;
}

.project-title {
    font-size: 14px;
    margin-bottom: 4px;
}

.project-author {
    font-size: 12px;
    opacity: 0.7;
}

/* Avatar do autor nos cards da home */
.project-author-avatar {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid rgba(0,0,0,0.7);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.project-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================================================================
   FOOTER
=================================================================== */

.site-footer {
    border-top: 1px solid #1f1f29;
    background: #0d0d11;
    margin-top: 24px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    font-size: 12px;
    opacity: 0.7;
}

/* ===================================================================
   AUTH (LOGIN / REGISTER)
=================================================================== */

.auth-section {
    max-width: 480px;
    margin: 20px auto 0;
}

.auth-section h1 {
    font-size: 26px;
    margin-bottom: 14px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-form label {
    font-size: 13px;
    opacity: 0.85;
}

.auth-form input,
.auth-form textarea,
.auth-form select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #2c2c35;
    background: #0c0c12;
    color: #f5f5f5;
    font-size: 14px;
}

.auth-form textarea {
    resize: vertical;
}

/* ===================================================================
   DASHBOARD
=================================================================== */

.dashboard {
    margin-top: 8px;
}

.dashboard h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.card {
    background: #18181f;
    border-radius: 10px;
    padding: 12px 14px;
}

.card h2 {
    font-size: 15px;
    margin-bottom: 4px;
}

.wallet-balance {
    font-size: 22px;
    margin: 6px 0 10px;
}

.big-number {
    font-size: 26px;
    margin-top: 8px;
}

/* ===================================================================
   PERFIL (ANTIGO SIMPLES + NOVO COMPLETO)
=================================================================== */

.profile-header {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
}

.profile-avatar img,
.avatar-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.profile-info h1 {
    font-size: 24px;
    margin-bottom: 4px;
}

.profile-username {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 8px;
}

.profile-bio {
    font-size: 14px;
    opacity: 0.86;
    margin-bottom: 8px;
}

.profile-actions {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.donate-input {
    width: 90px;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #444;
    background: #101015;
    color: #fff;
    font-size: 13px;
}

.tag {
    font-size: 12px;
    padding: 4px 8px;
    background: #222;
    border-radius: 999px;
    opacity: 0.8;
}

.profile-wallet {
    margin-top: 10px;
    font-size: 14px;
}

.profile-plans,
.profile-projects {
    margin-top: 24px;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.plan-card {
    background: #18181f;
    border-radius: 10px;
    padding: 10px 12px;
}

.plan-card h3 {
    font-size: 15px;
}

.plan-description {
    font-size: 13px;
    opacity: 0.8;
    margin: 6px 0;
}

.plan-price {
    font-size: 16px;
    margin: 8px 0 10px;
}

.plan-price span {
    font-size: 12px;
    opacity: 0.7;
}

/* ===================================================================
   PÁGINA DO PROJETO (LEGADO – ALGUMAS CLASSES AINDA USADAS)
=================================================================== */

.locked-banner {
    padding: 10px 12px;
    background: #22151a;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 14px;
}

/* ===================================================================
   UPLOAD / FORM DE PROJETO
=================================================================== */

.auth-form input[type="file"] {
    padding: 4px 6px;
    background: transparent;
}

fieldset {
    border: 1px solid #2c2c35;
    border-radius: 6px;
    padding: 8px 10px;
}

legend {
    padding: 0 4px;
    font-size: 13px;
    opacity: 0.9;
}

/* ===================================================================
   ADMIN LAYOUT
=================================================================== */

.admin-wrapper {
    display: flex;
    min-height: calc(100vh - 52px);
}

.admin-sidebar {
    width: 220px;
    background: #101017;
    border-right: 1px solid #262635;
    padding: 16px 14px;
    font-size: 14px;
}

.admin-sidebar h2 {
    font-size: 16px;
    margin-bottom: 10px;
}

.admin-sidebar a {
    display: block;
    padding: 5px 2px;
    opacity: 0.9;
}

.admin-main {
    flex: 1;
    padding: 16px 20px 24px;
}

.admin-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.admin-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.admin-card {
    background: #18181f;
    border-radius: 8px;
    padding: 10px 12px;
}

.admin-card h3 {
    font-size: 14px;
    margin-bottom: 4px;
}

.admin-card .big {
    font-size: 22px;
}

table.admin-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

table.admin-table th,
table.admin-table td {
    padding: 6px;
    border-bottom: 1px solid #262635;
    text-align: left;
}

.label {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #222;
}

.label-danger { background:#7a1f2b; }
.label-ok { background:#1f7a3b; }

/* ===================================================================
   RESPONSIVO GERAL
=================================================================== */

@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        padding: 28px 18px;
    }

    .admin-wrapper {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #262635;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .admin-sidebar a {
        display: inline-block;
        margin-right: 8px;
    }
}

/* ===================================================================
   PERFIL COMPLETO (CAPA, AVATAR, STATS, ABAS)
=================================================================== */

.profile-page {
    margin-top: 8px;
}

/* capa */

.profile-cover {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #14141c;
    margin-bottom: 12px;
}

.profile-cover img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}

.profile-cover-placeholder {
    width: 100%;
    height: 180px;
    background: linear-gradient(90deg, #23233a, #121219);
}

/* barra sobre a capa */

.profile-header-bar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px 14px;
    background: linear-gradient(to bottom, rgba(5,5,9,0.0), rgba(5,5,9,0.9));
}

.profile-header-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.profile-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: #252535;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-large span {
    font-size: 28px;
}

.profile-header-left h1 {
    font-size: 22px;
    margin-bottom: 4px;
}

.profile-bio-short {
    font-size: 13px;
    opacity: .8;
    margin-top: 4px;
    max-width: 420px;
}

/* header direita */

.profile-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* stats */

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.profile-stat-item {
    background: #15151f;
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 120px;
}

.profile-stat-item .stat-number {
    font-size: 18px;
}

.profile-stat-item .stat-label {
    font-size: 11px;
    opacity: .8;
}

/* abas */

.profile-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #252535;
    padding-bottom: 4px;
}

.profile-tab-link {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    opacity: .8;
}

.profile-tab-link.active {
    opacity: 1;
    border-color: #2b7bff;
    background: #2b7bff;
    color: #fff;
}

.profile-tab-content {
    margin-top: 4px;
}

/* sobre */

.profile-about h2 {
    font-size: 18px;
    margin-bottom: 8px;
}

.profile-about p {
    font-size: 14px;
}

.profile-links {
    list-style: none;
    margin-top: 6px;
    font-size: 14px;
}

.profile-links li a {
    color: #7ab4ff;
}

/* header mini */

.profile-header-mini {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-username-mini {
    font-size: 12px;
    opacity: 0.7;
}

.profile-avatar-mini {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #272732;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

@media (max-width: 900px) {
    .profile-header-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .profile-header-right {
        align-items: flex-start;
    }
}

/* ===================================================================
   LISTA DE USUÁRIOS (SEGUIDORES/SEGUINDO)
=================================================================== */

.user-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.user-card {
    background: #18181f;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
}

.user-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.user-card-bio {
    font-size: 13px;
    opacity: .85;
    margin-bottom: 6px;
}

/* ===================================================================
   BUSCA
=================================================================== */

.search-form {
    margin-top: 10px;
    margin-bottom: 12px;
}

.search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.search-row input[type="text"] {
    flex: 1;
    min-width: 180px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #0c0c12;
    color: #f5f5f5;
    font-size: 14px;
}

.search-row select {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #0c0c12;
    color: #f5f5f5;
    font-size: 13px;
}

/* ===================================================================
   MENSAGENS PRIVADAS
=================================================================== */

.messages-thread {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.message-item {
    max-width: 80%;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 13px;
}

.message-item.mine {
    margin-left: auto;
    background: #2b7bff;
    color: #fff;
}

.message-item.theirs {
    margin-right: auto;
    background: #18181f;
}

.message-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    opacity: .8;
    margin-bottom: 4px;
}

.message-body {
    white-space: pre-wrap;
}

/* ===================================================================
   PAGINAÇÃO
=================================================================== */

.pagination {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.page-link {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #2c2c35;
    font-size: 13px;
    opacity: 0.85;
}

.page-link.active {
    background: #2b7bff;
    border-color: #2b7bff;
    color: #fff;
    opacity: 1;
}

.page-link:hover {
    border-color: #2b7bff;
}

/* ===================================================================
   COMENTÁRIOS (GENÉRICOS)
=================================================================== */

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

/* Comentários com avatar bonitinho */

/* Comentários – layout com avatar + texto alinhado */

.comment-item {
    background: #18181f;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    margin-top: 8px;
}

.comment-header {
    display: flex;
    align-items: flex-start; /* avatar em cima, texto alinhado ao topo */
    gap: 8px;
    margin-bottom: 4px;
}

.comment-avatar.profile-avatar-mini {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.comment-header-main {
    flex: 1;
    min-width: 0;
}

.comment-header-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.comment-body {
    white-space: pre-wrap;
    word-break: break-word;
}



.comment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.comment-meta {
    font-size: 11px;
    opacity: 0.7;
}

.comment-delete-form {
    margin-top: 4px;
    text-align: right;
}

.comment-delete-form button {
    background: transparent;
    border: none;
    color: #f36b6b;
    font-size: 11px;
    cursor: pointer;
}

/* ===================================================================
   PÁGINA DO PROJETO – GALERIA ESQ / INFO DIR
=================================================================== */

/* LAYOUT GERAL */
.project-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* COLUNA ESQUERDA = GALERIA */
.project-left {
    flex: 2.4;
    min-width: 0;
}

/* COLUNA DIREITA = CARDS */
.project-right {
    flex: 1.2;
    min-width: 260px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 90px;
}

/* CARDS DA COLUNA DIREITA */
.project-side-card {
    background: #18181f;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
}

/* GALERIA - CONTAINER */
.project-media-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* MÍDIA PRINCIPAL */
.project-main-media {
    width: 100%;
    background: #0f0f14;
    border-radius: 12px;
    overflow: hidden;
}

.project-main-media img,
.project-main-media video {
    width: 100%;
    height: auto;
    display: block;
}

/* THUMBS */
.project-thumbs-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.project-thumb-btn {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.7;
}

.project-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-thumb-btn.active {
    outline: 2px solid #2b7bff;
    opacity: 1;
}

.thumb-video-icon {
    width: 100%;
    height: 100%;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    opacity: 0.8;
}

/* COMENTÁRIOS (se ainda não tiver, mantém aqui também) */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.comment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.comment-meta {
    font-size: 11px;
    opacity: 0.7;
}

.comment-delete-form {
    margin-top: 4px;
    text-align: right;
}

.comment-delete-form button {
    background: transparent;
    border: none;
    color: #f36b6b;
    font-size: 11px;
    cursor: pointer;
}

/* RESPONSIVO: MOBILE = 1 COLUNA, AUTOR/INFO ACIMA, GALERIA ABAIXO */
@media (max-width: 900px) {
    .project-layout {
        flex-direction: column;
    }

    .project-left,
    .project-right {
        position: static;
        max-width: 100%;
    }
}

/* ============================
   MOBILE = ORDEM PERSONALIZADA
   ============================ */
@media (max-width: 900px) {

    .project-layout {
        flex-direction: column;
        gap: 14px;
    }

    /* 1️⃣ Card do autor no topo */
    .project-author-card {
        order: 1;
    }

    /* 2️⃣ Galeria logo abaixo */
    .project-left {
        order: 2;
    }

    /* 3️⃣ Cards (curtir, doar, info, descrição, comentários) */
    .project-right {
        order: 3;
        position: static;
        width: 100%;
        max-width: 100%;
    }
}

/* ============================
   POST: AUTOR MOBILE x DESKTOP
============================ */

/* por padrão, card do topo (mobile) fica escondido no desktop */
.project-author-card-top {
    display: none;
}

/* MOBILE: mostra card do topo e esconde o do sidebar */
@media (max-width: 900px) {

    /* layout vira coluna */
    .project-layout {
        flex-direction: column;
        gap: 14px;
    }

    .project-left,
    .project-right {
        position: static;
        max-width: 100%;
    }

    /* card do autor no topo visível */
    .project-author-card-top {
        display: block;
        margin-bottom: 8px;
    }

    /* esconde o primeiro card da coluna direita (autor lá) */
    .project-right .project-side-card:first-child {
        display: none;
    }
}

/* ===== ÍCONE DE NOTIFICAÇÃO NO HEADER ===== */

.notif-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #333642;
    background: #101018;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 4px;
}

.notif-icon-btn svg {
    width: 18px;
    height: 18px;
    fill: #f5f5f5;
}

.notif-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4b4b;
    color: #fff;
    border-radius: 999px;
    padding: 1px 5px;
    font-size: 10px;
}

/* ===== AVATAR E DROPDOWN NO HEADER ===== */

.header-user-wrapper {
    position: relative;
}

.header-avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-avatar-btn img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
}

.header-avatar-btn span {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;        /* deixa a inicial visível */
}

/* Dropdown */

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: 46px;
    min-width: 220px;
    background: #15151f;
    border-radius: 12px;
    box-shadow: 0 16px 30px rgba(0,0,0,0.6);
    padding: 10px;
    display: none;
    z-index: 50;
}

.user-menu-dropdown.open {
    display: block;
}

.user-menu-header {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #252535;
}

.user-menu-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #272732;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.user-menu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-menu-avatar span {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;        /* mesma coisa dentro do menu */
}


.user-menu-name {
    font-size: 14px;
}

.user-menu-username {
    font-size: 12px;
    opacity: .7;
}

.user-menu-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    margin-bottom: 8px;
}

.user-menu-links a {
    padding: 4px 0;
}

.user-menu-links a:hover {
    opacity: 1;
}

.user-menu-footer {
    border-top: 1px solid #252535;
    padding-top: 6px;
    font-size: 13px;
}

.user-menu-footer a {
    color: #ff6b6b;
}

.header-avatar-btn span {
    font-size: 16px;
    font-weight: 600;
    color: #fff; /* AGORA A LETRA APARECE */
}

/* ===============================
   Ajustes de avatar nos cards
================================= */

.profile-avatar-mini {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #272732;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* garante círculo mesmo com imagem retangular */
    font-size: 18px;
}

.profile-avatar-mini img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ===============================
   Card do autor no projeto
   (alinhamento do botão Denunciar)
================================= */

.project-author-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.project-author-card .profile-header-mini {
    flex: 1;
}

/* remove o espaçamento extra do form/botão */
.project-author-card form,
.project-author-card a.btn.btn-ghost {
    margin: 0;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .project-author-card-top {
        display: flex; /* sobrescreve o display:block do mobile */
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .project-author-card-top .profile-header-mini {
        flex: 1;
    }

    .project-author-card-top form,
    .project-author-card-top a.btn.btn-ghost {
        margin: 0;
        flex-shrink: 0;
    }
}

/* ============================
   Perfil - layout refinado
   ============================ */

.profile-header-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 24px 20px;
}

.profile-header-left {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.profile-header-text h1 {
    margin: 0 0 2px;
    font-size: 22px;
}

.profile-username {
    font-size: 14px;
    opacity: .8;
}

.profile-bio-short {
    margin-top: 6px;
    font-size: 13px;
    opacity: .9;
    max-width: 520px;
}

.profile-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: 280px;
}

/* Botões menores / com ícones */

.btn-sm {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 999px;
}

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

.profile-actions-owner {
    justify-content: flex-end;
}

.profile-actions .icon {
    margin-right: 6px;
    font-size: 14px;
}

.profile-action-main {
    font-weight: 600;
}

.profile-donation-hint {
    font-size: 11px;
    opacity: .7;
}

/* Mensagem */

.profile-message-section {
    margin-top: 24px;
}

.profile-message-section h2 {
    font-size: 16px;
    margin-bottom: 8px;
}

.profile-message-form {
    max-width: 420px;
}

.profile-message-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 80px;
    margin-bottom: 8px;
}

.muted-text {
    opacity: .7;
    font-size: 14px;
}

/* Subtítulo "Links" do Sobre */
.profile-about-subtitle {
    margin-top: 14px;
    font-size: 14px;
}

/* Responsivo */

@media (max-width: 900px) {
    .profile-header-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 12px 16px;
    }

    .profile-header-right {
        align-items: flex-start;
        max-width: 100%;
    }

    .profile-actions {
        justify-content: flex-start;
    }

    .profile-bio-short {
        max-width: 100%;
    }
}

/* ============================
   HEADER / NAV REFINADO
   ============================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
}

.logo a {
    font-weight: 700;
    font-size: 20px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* botão Enviar projeto mais compacto e redondinho */
.header-upload-btn {
    border-radius: 999px;
}

/* ícone de notificação e avatar já existiam, aqui só garantimos alinhamento */
.notif-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* MOBILE */
@media (max-width: 768px) {
    .header-inner {
        padding: 8px 12px;
    }

    .main-nav {
        gap: 12px;
        font-size: 13px;
    }

    .header-right {
        gap: 8px;
    }

    .header-upload-btn.btn-sm {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* ============================
   HOME / HERO
   ============================ */

.hero {
    padding: 32px 24px 24px;
    border-radius: 18px;
    background: radial-gradient(circle at top left, #2b59ff33, transparent 55%),
                radial-gradient(circle at bottom right, #ff3b8133, transparent 55%),
                #101018;
    margin: 16px auto 24px;
    max-width: 1120px;
}

.hero-content h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.hero-content p {
    font-size: 14px;
    opacity: .85;
    margin-bottom: 16px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ============================
   HOME / PROJETOS + FILTROS
   ============================ */

.projects-section {
    max-width: 1120px;
    margin: 0 auto 40px;
    padding: 0 24px 16px;
}

.projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.projects-header h2 {
    font-size: 18px;
}

.projects-filters {
    display: inline-flex;
    background: #181820;
    border-radius: 999px;
    padding: 3px;
    gap: 4px;
}

.filter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    font-size: 13px;
    border-radius: 999px;
    text-decoration: none;
    opacity: .8;
}

.filter-link.active {
    background: #2563eb;
    opacity: 1;
}


/* MOBILE */

@media (max-width: 768px) {
    .hero {
        padding: 20px 16px 18px;
        margin: 10px 8px 18px;
    }

    .hero-content h1 {
        font-size: 22px;
    }

    .projects-section {
        padding: 0 12px 16px;
    }

    .projects-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .projects-filters {
        margin-top: 4px;
    }

    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-field {
        min-width: 100%;
    }

    .filter-actions {
        margin-left: 0;
    }

    .filter-actions .btn-sm {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* =========================================
   HOME – grid dos projetos (mais destaque)
   ========================================= */

.projects-section,
.hero,
.admin-highlight {
    max-width: 1280px;  /* usava 1120px, agora ocupa mais largura */
}

/* garante um grid mais largo e com cards maiores */
.projects-section .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

/* aumenta um pouco a altura das thumbs */
.projects-section .project-card {
    border-radius: 18px;
}

.projects-section .project-thumb {
    height: 230px;               /* antes era menor */
    border-radius: 18px 18px 0 0;
}

.projects-section .project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projects-section .project-info {
    padding: 8px 12px 10px;
    font-size: 13px;
}

/* =========================================
   HOME – Destaques da equipe (mais compactos)
   ========================================= */

.admin-highlight {
    margin: 0 auto 20px;
    padding: 0 24px;
}

.admin-highlight h2 {
    font-size: 16px;
    margin-bottom: 10px;
}

.admin-slider {
    overflow-x: auto;
    padding-bottom: 4px;
}

.admin-slider-track {
    display: flex;
    gap: 12px;
}

.admin-post-card {
    flex: 0 0 260px;              /* cards estreitos */
    background: #12121a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.admin-post-card .admin-media img,
.admin-post-card .admin-media video {
    width: 100%;
    height: 150px;                /* bem menor que o projeto normal */
    object-fit: cover;
    display: block;
}

.admin-post-info {
    padding: 8px 10px 10px;
    font-size: 13px;
}

.admin-post-info h3 {
    font-size: 14px;
    margin: 0 0 4px;
}

.admin-post-info p {
    font-size: 12px;
    opacity: .85;
}

/* =========================================
   HEADER – ajustes específicos para mobile
   ========================================= */

@media (max-width: 600px) {
    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;        /* NÃO permite quebrar em 2 linhas */
        padding: 8px 10px;
        gap: 8px;
    }

    .logo a {
        font-size: 16px;
        white-space: nowrap;
    }

    .main-nav {
        flex: 1 1 auto;           /* ocupa o espaço do meio */
        display: flex;
        justify-content: center;
        gap: 10px;
        font-size: 12px;
        white-space: nowrap;      /* “Explorar” / “Buscar” ficam em linha */
    }

    .header-right {
        flex-shrink: 0;           /* não deixa o bloco da direita cair pra baixo */
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .header-upload-btn.btn-sm {
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .notif-icon-btn {
        width: 30px;
        height: 30px;
    }

    .header-avatar-btn {
        width: 32px;
        height: 32px;
        border-radius: 999px;
    }

    .header-avatar-btn img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 999px;
    }
}

/* em telas bem estreitas, só um ajuste fino extra */
@media (max-width: 420px) {
    .logo a {
        font-size: 15px;
    }
    .main-nav {
        gap: 8px;
        font-size: 11px;
    }
    .header-upload-btn.btn-sm {
        padding-inline: 6px;
    }
}


/* ============================
   HEADER – após remover "Explorar"
   ============================ */

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 1;
}

@media (max-width: 600px) {
    .main-nav {
        justify-content: flex-start;
        gap: 12px;
        font-size: 13px;
    }
}

/* ============================
   Barra de busca no header
   ============================ */

.header-search-form {
    flex: 1;
    max-width: 420px;
    margin: 0 8px;
}

.header-search-input {
    width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #0c0c12;
    color: #f5f5f5;
    font-size: 13px;
    outline: none;
}

.header-search-input::placeholder {
    color: #8a8a99;
    font-size: 12px;
}

.header-search-input:focus {
    border-color: #2563eb;
}

/* Mobile: ajusta largura pra caber tudo em 1 linha */
@media (max-width: 600px) {
    .header-search-form {
        max-width: 220px;
        margin: 0 4px;
    }

    .header-search-input {
        padding-inline: 8px;
        font-size: 12px;
    }
}

/* =========================================
   HEADER SEARCH BAR (input + ícone)
   ========================================= */

/* =========================================
   HEADER SEARCH BAR (input + botão de lupa)
   ========================================= */

.header-search-form {
    position: relative;
    flex: 1;
    max-width: 420px;
    margin: 0 8px;
}

.header-search-input {
    width: 100%;
    padding: 8px 36px 8px 12px; /* espaço pro botão à direita */
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #0c0c12;
    color: #f5f5f5;
    font-size: 13px;
    outline: none;
    transition: border-color .18s, background .18s;
}

.header-search-input::placeholder {
    color: #8a8a99;
}

.header-search-input:focus {
    border-color: #3a86ff;
    background: #10111a;
}

/* botão de lupa (submit) */
.header-search-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;  /* 👈 sem fundo */
    color: #9ca3af;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.header-search-button:hover {
    color: #ffffff;
}


/* quando tiver texto, reforça a borda */
.header-search-input:not(:placeholder-shown) {
    border-color: #2563eb;
}

/* MOBILE */
@media (max-width: 600px) {
    .header-search-form {
        max-width: 200px;
        margin: 0 4px;
    }

    .header-search-input {
        padding: 6px 32px 6px 10px;
        font-size: 12px;
    }

    .header-search-button {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }
}

/* =========================================
   MOBILE – "Enviar projeto" como ícone
   ========================================= */

@media (max-width: 600px) {
    .header-upload-btn {
        position: relative;
        padding: 0;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        font-size: 0;              /* esconde o texto */
    }

    .header-upload-btn::before {
        content: "⤴";              /* ou "＋", "📤", etc. */
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
}



/* EXTRA: estilizar borda apenas quando a barra tiver texto (opcional) */
.header-search-input:not(:placeholder-shown) {
    border-color: #2563eb;
}

/* =========================================
   HEADER – lupa branca minimalista
   ========================================= */

.header-search-form {
    position: relative;
    flex: 1;
    max-width: 420px;
    margin: 0 8px;
}

.header-search-input {
    width: 100%;
    padding: 8px 36px 8px 12px; /* espaço pro botão à direita */
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #0c0c12;
    color: #f5f5f5;
    font-size: 13px;
    outline: none;
    transition: border-color .18s, background .18s;
}

.header-search-input::placeholder {
    color: #8a8a99;
}

.header-search-input:focus {
    border-color: #3a86ff;
    background: #10111a;
}

/* reforça a borda quando tiver texto */
.header-search-input:not(:placeholder-shown) {
    border-color: #2563eb;
}

/* botão da lupa (sem fundo) */
.header-search-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* desenha a lente */
.header-search-button::before,
.header-search-button::after {
    content: "";
    position: absolute;
    background: #ffffff;
}

/* círculo da lupa */
.header-search-button::before {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: transparent;
}

/* cabinho da lupa */
.header-search-button::after {
    width: 7px;
    height: 2px;
    border-radius: 999px;
    transform: translate(5px, 5px) rotate(45deg);
}

/* hover: só clareia um pouco (já é branca, então só mexe na opacidade) */
.header-search-button:hover::before,
.header-search-button:hover::after {
    opacity: 0.9;
}

/* MOBILE */
@media (max-width: 600px) {
    .header-search-form {
        max-width: 200px;
        margin: 0 4px;
    }

    .header-search-input {
        padding: 6px 32px 6px 10px;
        font-size: 12px;
    }

    .header-search-button {
        width: 22px;
        height: 22px;
    }
}

/* =========================================
   MOBILE – botão "Enviar projeto" como ícone destacado
   ========================================= */

@media (max-width: 600px) {
    .header-upload-btn {
        position: relative;
        padding: 0;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: #2563eb;
        border: 1px solid #1e40af;
        font-size: 0; /* esconde o texto "Enviar projeto" */
    }

    .header-upload-btn::before {
        content: "⤴";  /* pode trocar por "＋" ou "📤" se preferir */
        color: #ffffff;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
}

/* =========================================
   LISTA DE USUÁRIOS – layout mais bonito
   ========================================= */

.user-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.user-card {
    background: #14141c;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.user-card:hover {
    transform: translateY(-2px);
    background: #181824;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}

.user-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-card-header .profile-avatar-mini {
    width: 40px;
    height: 40px;
}

.user-card-header .user-name-main {
    font-size: 14px;
    font-weight: 600;
}

.user-card-header .user-username {
    font-size: 12px;
    opacity: .7;
}

.user-card-bio {
    font-size: 13px;
    opacity: .85;
    max-height: 3.1em;
    overflow: hidden;
}

.user-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    opacity: .8;
}

.user-card-footer .btn-sm {
    padding-inline: 10px;
}

/* =========================================
   Perfil – ações em ícones (mobile)
   ========================================= */

/* container dos ícones dentro do header esquerdo */
.profile-actions-mobile {
    display: none;          /* escondido no desktop */
    margin-top: 8px;
    gap: 8px;
}

/* botão genérico de ícone */
.icon-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #15151f;
    color: #f5f5f5;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.icon-action-btn:hover {
    background: #1d1d27;
    border-color: #2563eb;
}

/* remove margens de form dentro da barra de ícones */
.profile-actions-mobile form {
    margin: 0;
}

.profile-actions-mobile button {
    all: unset;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #15151f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.profile-actions-mobile button:hover {
    background: #1d1d27;
    border-color: #2563eb;
}

/* no mobile: mostra ícones e esconde as ações de texto */
@media (max-width: 900px) {
    .profile-actions-desktop {
        display: none;
    }

    .profile-actions-mobile {
        display: flex;
        flex-wrap: nowrap;
    }
}

/* =========================================
   Perfil – posição dos ícones no mobile
   ========================================= */

@media (max-width: 900px) {
    .profile-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .profile-header-text {
        flex: 1;
        min-width: 0;
    }

    .profile-actions-mobile {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        margin-top: 0;
        margin-left: auto;     /* empurra pro lado direito */
    }

    .profile-actions-mobile a,
    .profile-actions-mobile button {
        flex-shrink: 0;
    }
}

/* =========================================
   HEADER – botão "Enviar projeto" no mobile
   ========================================= */

@media (max-width: 600px) {
    .header-right {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .header-upload-btn {
        width: 32px;
        height: 32px;
        padding: 0 !important;
        border-radius: 999px;
        background: #2563eb;
        border: 1px solid #1e40af;
        font-size: 0;          /* esconde o texto */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-upload-btn::before {
        content: "⤴";          /* pode trocar por "＋" ou "📤" */
        font-size: 18px;
        color: #ffffff;
    }
}

/* =========================================
   Perfil – alinhamento avatar / texto / ícones
   ========================================= */

.profile-header-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.profile-header-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.profile-header-text {
    flex: 1;
    min-width: 0;
}

.profile-actions-mobile {
    display: none; /* escondido no desktop */
}

/* ícones (já criados antes, reforço) */
.icon-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #15151f;
    color: #f5f5f5;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.icon-action-btn:hover {
    background: #1d1d27;
    border-color: #2563eb;
}

/* Mobile: mostra ícones e esconde os botões de texto */
@media (max-width: 900px) {
    .profile-actions-desktop {
        display: none;
    }

    .profile-actions-mobile {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        margin-left: auto; /* empurra pro lado direito */
    }

    .profile-actions-mobile form {
        margin: 0;
    }
}

/* =========================================
   HEADER – botão "Enviar projeto" só ícone no mobile
   ========================================= */

@media (max-width: 600px) {
    .header-right {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .header-upload-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0 !important;
        margin: 0;
        border-radius: 999px;
        background: #2563eb;
        border: 1px solid #1e40af;
        font-size: 0 !important;   /* mata o texto */
        overflow: hidden;
        white-space: nowrap;
    }

    .header-upload-btn::before {
        content: "📤";              /* escolhe o ícone que curtir: "⤴", "＋", etc. */
        font-size: 18px;
        color: #ffffff;
    }
}

/* IMPEDIR QUE TEXTOS GIGANTES ESTOUREM O LAYOUT */
.break-word,
.project-title,
.project-description,
.comment-body,
.project-info,
.profile-bio-short,
.admin-post-info,
.plan-description {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.project-info {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* máximo 3 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-bio-short {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.comment-item {
    word-break: break-word;
}

.comment-body {
    white-space: pre-wrap;
    word-break: break-word;
}

/* =============================
   EVITAR QUE TEXTO ESTOURE LAYOUT
   ============================= */

.break-word,
.project-title,
.project-info,
.project-description,
.project-header-title,
.description-text,
.comment-body,
.profile-bio-short,
.admin-post-info,
.plan-description {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* Em títulos muito longos, força truncamento */
.project-header-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* limite de 2 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Descrição dentro do box */
.description-text {
    white-space: normal !important;
}

/* Avatar do autor no card do projeto: não deixar deformar */
.profile-header-mini .profile-avatar-mini {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
}

.profile-header-mini .profile-avatar-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.project-author-card,
.project-author-card-top {
    align-items: center;
}

.project-author-card-top .profile-header-mini {
    flex: 1 1 auto;
}

/* botão "Aplicar filtros" em formato pill */
.projects-filter-form .filter-actions {
    margin-left: auto;
}

.projects-filter-form .filter-actions .btn-sm,
.projects-filter-form .filter-actions .btn {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
}

/* MOBILE */
@media (max-width: 780px) {
    .projects-filter-form {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        border-radius: 14px;
    }

    .projects-filter-form > label {
        width: 100%;
    }

    .projects-filter-form > label select {
        width: 100%;
    }

    .projects-filter-form > button {
        width: 100%;
        margin-left: 0;
        justify-content: center;
        text-align: center;
    }
}

.project-author-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.project-author-card .profile-header-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

/* Comentários – nome em cima, avatar + texto embaixo */

.comment-item {
    background: #18181f;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    margin-top: 8px;
}

/* linha 1: nome + meta */
.comment-header-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

/* linha 2: avatar + texto */
.comment-body-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* avatar pequeno */
.comment-avatar.profile-avatar-mini {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 14px;
}

/* texto do comentário */
.comment-text {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Comentários – nome em cima, avatar + texto embaixo */

.comment-item {
    background: #18181f;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    margin-top: 8px;
}

.comment-header-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

/* linha com avatar + texto */
.comment-body-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 2px;
}

.comment-avatar.profile-avatar-mini {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 14px;
}

/* texto ao lado do avatar */
.comment-text {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Comentários – formulário mais integrado ao tema */

.comment-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #2c2c35;
    background: #0f0f16;
    color: #f5f5f5;
    font-size: 13px;
    resize: vertical;
}

.comment-input::placeholder {
    color: #8a8a99;
    font-size: 12px;
}

.comment-input:focus {
    outline: none;
    border-color: #2563eb;
}

.comment-submit-btn {
    margin-top: 8px;
    border-radius: 999px;
    padding-inline: 18px;
    font-size: 13px;
}

/* Comentários – nome em cima, avatar + texto embaixo */

.comment-item {
    background: #18181f;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    margin-top: 8px;
}

.comment-header-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.comment-author-name {
    font-weight: 600;
    text-decoration: none;
}

.comment-author-name:hover {
    text-decoration: underline;
}

/* linha com avatar + texto */
.comment-body-row {
    display: flex;
    align-items: flex-start;
    gap: 6px; /* mais perto do avatar */
    margin-top: 2px;
}

.comment-avatar.profile-avatar-mini {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 14px;
}

/* texto do comentário colado no avatar */
.comment-text {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* =========================================
   Layout mais largo (usar mais da tela)
   ========================================= */

/* Aumenta a largura máxima do header e do conteúdo principal */
.site-main,
.header-inner,
.hero,
.projects-section,
.admin-highlight {
    max-width: 1400px;
}

/* Dá um pouco mais de respiro nas laterais em telas grandes */
.site-main {
    padding-left: 24px;
    padding-right: 24px;
}

/* =========================================
   HOME – destacar mais os projetos
   ========================================= */

/* Cards mais largos: menos colunas, mais destaque visual */
.projects-section .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* antes 260px */
    gap: 22px; /* um pouco mais de espaço entre eles */
}

/* Thumbs um pouco mais altas pro visual ficar mais forte */
.projects-section .project-thumb {
    height: 260px; /* antes 230px */
}

/* Deixa os cards com uma sombra mais marcante */
.projects-section .project-card {
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}

/* Título e autor um pouco maiores e com mais respiro */
.projects-section .project-info {
    padding: 10px 14px 12px;
    font-size: 14px;
}

.projects-section .project-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.projects-section .project-author {
    font-size: 12px;
    opacity: .8;
}

/* Esconde a paginação da home (vamos usar scroll infinito) */
.projects-section .pagination {
    display: none;
}

/* =========================================
   Botão "Planos do site" no header
   ========================================= */

.header-premium-link {
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f97316, #ec4899);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s;
    margin-left: 12px;
}

.header-premium-link:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

/* Em telas bem pequenas, deixa ele mais compacto */
@media (max-width: 600px) {
    .header-premium-link {
        padding: 4px 10px;
        font-size: 12px;
    }
}

/* =========================================
   Botão "Seja Premium" no menu do usuário
   ========================================= */

.user-menu-premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f97316, #ec4899);
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.user-menu-premium::after {
    content: "★";
    font-size: 14px;
}

.user-menu-premium:hover {
    filter: brightness(1.05);
}

/* ============================
   CENTRALIZAR TEXTO DO MENU
============================ */

.user-menu-dropdown,
.user-menu-links a,
.user-menu-footer a {
    text-align: center !important;
}

/* Centraliza o botão "Seja Premium" */
.user-menu-premium {
    text-align: center !important;
    justify-content: center !important;
}

/* Ajuste para o avatar + nome ficarem alinhados */
.user-menu-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.user-menu-avatar {
    margin-bottom: 6px;
}

/* =========================================
   HEADER – subnav com busca e planos do site
   ========================================= */

.header-subnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 24px 10px;
}

/* Em telas grandes, a subnav fica mais estreita */
@media (min-width: 769px) {
    .header-subnav {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* Em mobile: subnav vira coluna pra não apertar o topo */
@media (max-width: 768px) {
    .header-inner {
        padding: 8px 12px;
    }

    .header-subnav {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 12px 10px;
    }

    .header-search-form {
        max-width: 100%;
    }

    .header-premium-link {
        align-self: stretch;      /* ocupa a largura toda */
        text-align: center;       /* texto centralizado */
        justify-content: center;  /* se tiver display flex no futuro */
    }
}


/* =========================================
   BOTÃO HAMBÚRGUER (MOBILE)
   ========================================= */

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-menu-toggle {
    display: none; /* desktop some */
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #0f0f16;
    padding: 6px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-menu-toggle span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: #f5f5f5;
}

/* header em telas pequenas: mostra hambúrguer, some com a subnav se quiser */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }

    /* opcional: esconde subnav e deixa só o menu lateral com busca */
    .header-subnav {
        display: none;
    }
}

/* =========================================
   MENU LATERAL MOBILE
   ========================================= */

.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
}

.mobile-drawer.open {
    display: block;
}

.mobile-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.mobile-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    max-width: 80%;
    height: 100%;
    background: #05060b;
    box-shadow: 4px 0 20px rgba(0,0,0,0.7);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.mobile-drawer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    background: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mobile-drawer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-drawer-user .user-menu-name {
    font-size: 14px;
}

.mobile-drawer-user .user-menu-username {
    font-size: 12px;
    opacity: .7;
}

.mobile-search-form {
    margin-top: 4px;
    margin-bottom: 12px;
}

.mobile-search-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #0f1016;
    color: #f5f5f5;
    font-size: 13px;
    outline: none;
}

.mobile-search-input::placeholder {
    color: #8a8a99;
    font-size: 12px;
}

.mobile-search-input:focus {
    border-color: #2563eb;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    font-size: 14px;
}

.mobile-nav-links a {
    padding: 6px 4px;
    border-radius: 6px;
    text-decoration: none;
}

.mobile-nav-links a:hover {
    background: #111827;
}

.mobile-nav-logout {
    color: #f97373;
}

/* só mostra o drawer em mobile */
@media (min-width: 769px) {
    .mobile-drawer {
        display: none !important;
    }
}

/* =========================================
   HOME – Artistas em destaque (compacto)
   ========================================= */

.featured-artists {
    max-width: 1400px;
    margin: 0 auto 20px;
    padding: 0 24px;
}

.featured-artists h2 {
    font-size: 15px;
    margin-bottom: 8px;
}

.featured-artists-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 0;
}

/* card compacto, altura menor */
.featured-artist-card {
    background: radial-gradient(circle at top, #1f2937, #05060b);
    border-radius: 14px;
    padding: 10px 8px;
    min-width: 130px;
    max-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

.featured-artist-card img {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    object-fit: cover;
    margin-bottom: 4px;
}

.featured-artist-name {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.featured-artist-username {
    font-size: 11px;
    opacity: .75;
    text-align: center;
    margin-bottom: 4px;
}

/* botão seguir tipo instagram */
.featured-follow-btn {
    margin-top: 2px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    width: 100%;
    text-align: center;
}

/* =========================================
   Ajustes de header para mobile
   ========================================= */

@media (max-width: 768px) {
    /* Garante que o header não fique maior que a tela */
    .site-header,
    .header-inner,
    .header-left,
    .header-right {
        max-width: 100%;
    }

    .header-inner {
        padding-inline: 12px;
        gap: 8px;
    }

    .header-right {
        gap: 6px;
    }
}

/* Se sobrar algum elemento estourando, não deixa rolar lateral */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
}

/* =========================================
   HOME – filtros de projetos no MOBILE
   ========================================= */

@media (max-width: 768px) {

    .projects-filter-form {
        margin-top: 10px;
        margin-bottom: 18px;
    }

    .projects-filter-form .filter-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
        background: #15151f;
        border-radius: 16px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    }

    /* cada campo vira um bloco simples: label em cima, select embaixo */
    .projects-filter-form .filter-field {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        min-width: 0;
    }

    .projects-filter-form .filter-label {
        font-size: 12px;
        opacity: .85;
    }

    .projects-filter-form .filter-field select {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid #2c2c35;
        background: #0f1016;
        color: #f5f5f5;
        font-size: 13px;
        outline: none;
    }

    .projects-filter-form .filter-field select:focus {
        border-color: #2563eb;
    }

    /* botão 100% largura */
    .projects-filter-form .filter-actions {
        margin-left: 0;
    }

    .projects-filter-form .filter-actions .btn,
    .projects-filter-form .filter-actions .btn-sm {
        width: 100%;
        text-align: center;
        justify-content: center;
        border-radius: 999px;
        padding: 8px 0;
        font-size: 13px;
    }
}

/* =========================================
   HOME – Filtros de projetos (layout único)
   ========================================= */

/* layout base (desktop) */
.projects-filter-form {
    margin-top: 8px;
    margin-bottom: 18px;
}

.projects-filter-form .filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    background: #15151f;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.projects-filter-form .filter-field {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

.projects-filter-form .filter-label {
    font-size: 12px;
    opacity: .85;
    margin-bottom: 4px;
}

.projects-filter-form .filter-field select {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #2c2c35;
    background: #0f1016;
    color: #f5f5f5;
    font-size: 13px;
    outline: none;
}

.projects-filter-form .filter-field select:focus {
    border-color: #2563eb;
}

/* botão de aplicar à direita no desktop */
.projects-filter-form .filter-actions {
    margin-left: auto;
}

.projects-filter-form .filter-actions .btn,
.projects-filter-form .filter-actions .btn-sm {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
}

/* MOBILE: tudo empilhado, selects menores e botão full width */
@media (max-width: 768px) {

    .projects-filter-form {
        margin-top: 10px;
        margin-bottom: 18px;
    }

    .projects-filter-form .filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
        border-radius: 14px;
    }

    .projects-filter-form .filter-field {
        min-width: 0;
        align-items: flex-start;
    }

    .projects-filter-form .filter-field select {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
    }

    .projects-filter-form .filter-actions {
        margin-left: 0;
    }

    .projects-filter-form .filter-actions .btn,
    .projects-filter-form .filter-actions .btn-sm {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 8px 0;
    }
}

/* Botão "Seja Premium" compacto dentro do header-right */
.header-premium-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f97316, #ec4899);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Desktop: mostra premium grande na subnav e esconde o compacto */
@media (min-width: 601px) {
    .header-premium-link {
        display: inline-flex;
    }
    .header-premium-compact {
        display: none;
    }
}

/* Mobile: esconde "Planos do site" da subnav e usa só o compacto no topo */
@media (max-width: 600px) {

    /* some qualquer "Planos do site" da subnav */
    .header-subnav {
        display: none !important;
    }
    .header-premium-link {
        display: none !important;
    }

    .header-inner {
        max-width: 100%;
        padding: 8px 10px;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .header-left {
        flex: 0 0 auto;
    }

    .header-right {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }

    .header-premium-compact {
        display: inline-flex;
        padding: 4px 8px;
        font-size: 11px;
    }

    /* Enviar projeto vira ícone */
    .header-upload-btn {
        width: 32px;
        height: 32px;
        padding: 0 !important;
        border-radius: 999px;
        background: #2563eb;
        border: 1px solid #1e40af;
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .header-upload-btn::before {
        content: "⤴";
        font-size: 18px;
        color: #ffffff;
    }

    /* Notificação menor */
    .notif-icon-btn {
        width: 30px;
        height: 30px;
        margin-right: 0;
    }

    /* Avatar compacto */
    .header-avatar-btn {
        width: 32px;
        height: 32px;
    }

    /* Login / cadastro compactos no mobile (quando não logado) */
    .header-auth-mobile {
        display: flex;
        gap: 6px;
    }
    .header-auth-mobile .btn {
        padding: 4px 10px !important;
        font-size: 12px !important;
        border-radius: 999px;
        white-space: nowrap;
    }

    /* Evita scroll lateral por qualquer exagero */
    body {
        overflow-x: hidden;
    }
}

/* =========================================
   Botões de planos / premium
   ========================================= */

/* Por padrão, Sejam Premium (compacto) some no desktop */
.header-premium-compact {
    display: none;
}

/* Mobile: esconde o "Planos do site" grande e mostra só o "Seja Premium" pequeno */
@media (max-width: 768px) {
    .header-premium-link {
        display: none;
    }

    .header-premium-compact {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 10px;
        border-radius: 999px;
        background: linear-gradient(90deg, #f97316, #ec4899);
        color: #ffffff;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    }
}

/* Desktop: mostra apenas o "Planos do site" grande */
@media (min-width: 769px) {
    .header-premium-link {
        display: inline-flex;
    }

    .header-premium-compact {
        display: none;
    }
}

/* =========================================
   Header mobile – alinhamento fino
   ========================================= */
@media (max-width: 768px) {

    .site-header,
    .header-inner,
    .header-left,
    .header-right {
        max-width: 100%;
    }

    .header-inner {
        padding: 8px 12px;
        gap: 8px;
    }

    .header-right {
        gap: 6px;
    }

    /* Garante que nada estoure horizontalmente */
    body {
        overflow-x: hidden;
    }
}

/* Ajustes gerais para mobile */
@media (max-width: 768px) {
    .site-main {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero,
    .projects-section,
    .admin-highlight,
    .featured-artists {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    /* Só pra garantir que nada force largura mínima maior */
    body {
        overflow-x: hidden;
    }
}

/* Filtros mais compactos no mobile */
@media (max-width: 768px) {
    .projects-filter-form {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .projects-filter-form label {
        flex: 1 1 calc(50% - 4px); /* duas colunas */
        font-size: 12px;
    }

    .projects-filter-form select {
        width: 100%;
        font-size: 13px;
        padding: 6px 10px;
    }

    .projects-filter-form .btn {
        width: 100%;
        margin-top: 4px;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 16px 12px;
    }

    .hero h1 {
        font-size: 20px;
    }

    .hero p {
        font-size: 13px;
    }
}

/* ===== Página de projeto: limita textos longos ===== */

/* Título do post */
.project-header h1 {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Garante que textos dentro dos cards não estourem a largura */
.project-side-card,
.project-side-card p,
.project-side-card .project-tags,
.project-side-card .comment-body {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Evitar scroll horizontal provocado por texto gigante */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .site-main,
    .project-header,
    .project-layout,
    .project-side-card {
        max-width: 100%;
    }
}

.project-header h1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* número de linhas desejado */
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
}

/* ===== Post da equipe (news/show) ===== */

.project-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px 24px;
}

.project-view h1 {
    font-size: 24px;
    margin-bottom: 4px;
    word-break: break-word;
}

.project-view .project-meta {
    font-size: 13px;
    opacity: .8;
    margin-bottom: 12px;
}

/* imagem/vídeo em formato banner */
.admin-post-banner {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #050505;
}

.admin-post-banner img,
.admin-post-banner video {
    width: 100%;
    height: auto;
    max-height: 380px;    /* controla a altura máxima: banner */
    object-fit: cover;
    display: block;
}

/* mobile: banners um pouco menores */
@media (max-width: 768px) {
    .project-view {
        padding: 12px 10px 20px;
    }

    .admin-post-banner img,
    .admin-post-banner video {
        max-height: 260px;
    }
}

.boost-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.9); /* douradinho */
    color: #000;
    font-size: 11px;
    font-weight: 600;
}

/* ==== AJUSTE HOME – ALTURA DAS IMAGENS DOS PROJETOS NO MOBILE ==== */
@media (max-width: 900px) {
    .projects-section .project-thumb {
        height: 190px;           /* se quiser menor, pode baixar pra 160 */
    }
}

/* ==== AJUSTE HOME – FILTROS LADO A LADO NO MOBILE ==== */
@media (max-width: 768px) {

    /* linha dos filtros como no desktop */
    .projects-filter-form .filter-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;      /* tenta manter tudo na mesma linha */
        gap: 8px;
        padding: 8px 10px;
        background: #15151f;
        border-radius: 16px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    }

    /* selects dividem o espaço */
    .projects-filter-form .filter-field {
        flex: 1 1 0;
        min-width: 0;
    }

    .projects-filter-form .filter-field select {
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid #2c2c35;
        background: #0f1016;
        color: #f5f5f5;
        font-size: 13px;
    }

    /* botão fica na mesma linha, só ocupa o espaço dele */
    .projects-filter-form .filter-actions {
        flex: 0 0 auto;
        margin-left: 0;
    }

    .projects-filter-form .filter-actions .btn,
    .projects-filter-form .filter-actions .btn-sm {
        width: auto;
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 999px;
        white-space: nowrap;
    }
}

/* ==== HOME – VOLTAR GRADE BONITA (3 / 2 / 1) ==== */

/* base: grid com gap padrão */
.projects-section .project-grid {
    display: grid;
    gap: 16px;
}

/* Desktop grande: 3 colunas */
@media (min-width: 1024px) {
    .projects-section .project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet / médio: 2 colunas */
@media (min-width: 640px) and (max-width: 1023px) {
    .projects-section .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: 1 coluna (normal) */
@media (max-width: 639px) {
    .projects-section .project-grid {
        grid-template-columns: 1fr;
    }
}

/* Altura das imagens dos projetos */
.projects-section .project-thumb {
    height: 220px;
}
@media (max-width: 640px) {
    .projects-section .project-thumb {
        height: 180px;
    }
}

/* ===== FORÇAR GRADE DA HOME (3 / 2 / 1) ===== */

/* Desktop grande: 3 colunas */
.projects-section .project-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

/* Tablet / médio: 2 colunas */
@media (max-width: 1024px) {
    .projects-section .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile: 1 coluna */
@media (max-width: 640px) {
    .projects-section .project-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== Altura das thumbs mais controlada ===== */

.projects-section .project-thumb {
    height: 220px !important;
}

@media (max-width: 640px) {
    .projects-section .project-thumb {
        height: 180px !important;
    }
}

/* ===== FORÇAR GRADE DA HOME (3 / 2 / 1) ===== */

/* base */
.projects-section .project-grid {
    display: grid;
    gap: 16px;
}

/* Desktop grande: 3 colunas */
@media (min-width: 1024px) {
    .projects-section .project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet / médio: 2 colunas */
@media (min-width: 640px) and (max-width: 1023px) {
    .projects-section .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: 1 coluna */
@media (max-width: 639px) {
    .projects-section .project-grid {
        grid-template-columns: 1fr;
    }
}

/* Altura das thumbs */
.projects-section .project-thumb {
    height: 220px;
}
@media (max-width: 640px) {
    .projects-section .project-thumb {
        height: 180px;
    }
}

/* Avatar fallback em Artistas em destaque */
.featured-artist-avatar-fallback {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #272732;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.remember-row {
    margin: 8px 0 10px;
}

.remember-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    opacity: 0.9;
}

/* ===== HOME – BANNER / ANÚNCIO ===== */

.home-ad-section {
    max-width: 1400px;
    margin: 0 auto 24px;
    padding: 0 24px;
}

.home-ad-banner {
    border-radius: 18px;
    background: radial-gradient(circle at top left, #2b59ff33, transparent 55%),
                radial-gradient(circle at bottom right, #ff3b8133, transparent 55%),
                #101018;
    padding: 18px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

.home-ad-content h2 {
    font-size: 18px;
    margin-bottom: 6px;
}

.home-ad-content p {
    font-size: 14px;
    opacity: .9;
}

/* mobile */
@media (max-width: 768px) {
    .home-ad-section {
        padding: 0 12px;
    }

    .home-ad-banner {
        padding: 14px 14px;
        border-radius: 14px;
    }

    .home-ad-content h2 {
        font-size: 16px;
    }

    .home-ad-content p {
        font-size: 13px;
    }
}

/* ===== REFINO HOME – DESTAQUES E ARTISTAS ===== */

/* menos espaço vertical geral */
.admin-highlight,
.featured-artists,
.home-ad-section {
    margin-bottom: 18px;
}

/* cards de destaque um pouco menores no mobile */
@media (max-width: 768px) {
    .admin-highlight {
        padding: 0 12px;
    }

    .admin-post-card .admin-media img,
    .admin-post-card .admin-media video {
        height: 130px;
    }

    .admin-post-info h3 {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .admin-post-info p {
        font-size: 12px;
        line-height: 1.3;
        max-height: 3.2em;
        overflow: hidden;
    }

    .featured-artists {
        padding: 0 12px;
    }

    .featured-artists-row {
        padding-top: 0;
    }

    .featured-artist-card {
        min-width: 120px;
        max-width: 140px;
        padding: 8px 6px;
    }

    .featured-artist-name {
        font-size: 12px;
    }

    .featured-artist-username {
        font-size: 11px;
    }
}

/* ===== REFINO BANNER DE ANÚNCIO ===== */

.home-ad-section {
    max-width: 1400px;
    margin: 0 auto 22px;
    padding: 0 24px;
}

.home-ad-banner {
    border-radius: 16px;
    background: radial-gradient(circle at top left, #2b59ff33, transparent 55%),
                radial-gradient(circle at bottom right, #ff3b8133, transparent 55%),
                #101018;
    padding: 14px 18px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}

.home-ad-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-ad-content h2 {
    font-size: 16px;
    margin: 0;
}

.home-ad-content p {
    font-size: 13px;
    opacity: .9;
    margin: 0;
}

/* desktop: banner mais "fininho" e em linha se você colocar um botão depois */
@media (min-width: 900px) {
    .home-ad-banner {
        padding: 14px 20px;
    }
    .home-ad-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .home-ad-content p {
        font-size: 14px;
        max-width: 60%;
    }
}

/* diminuir espaço antes dos projetos em relação ao banner */
.projects-section {
    margin-top: 8px;
}

.admin-post-info p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-badges {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #1f2933;
    color: #e5e7eb;
    opacity: .95;
    border: 1px solid rgba(255,255,255,0.05);
}

/* estilos por tipo (slug) – só exemplo */
.badge-fundador,
.badge-founder {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    color: #111827;
    font-weight: 600;
}

.badge-evento,
.badge-event {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
    font-weight: 500;
}

.badge-staff,
.badge-equipe {
    background: linear-gradient(90deg, #ef4444, #f97316);
    color: #fff;
    font-weight: 500;
}

.badge-more {
    background: #111827;
    color: #9ca3af;
}

.badge-icon {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    object-fit: cover;
    margin-right: 4px;
    vertical-align: middle;
}

.profile-badges {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* wrapper do ícone */
.badge-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #111827;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}

/* imagem da badge */
.badge-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* fallback quando não tem ícone */
.badge-icon-fallback {
    font-size: 11px;
    font-weight: 600;
    color: #e5e7eb;
}

/* bolinha "+N" */
.badge-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #0f172a;
    color: #9ca3af;
    font-size: 11px;
    border: 1px solid rgba(148,163,184,0.4);
}

.badge-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 0 4px;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 999px;
    background: #1da1f2;
    color: #ffffff;
    vertical-align: middle;
}

/* ===== Home / Explorar – ajustes ===== */

.home-section {
    margin-top: 18px;
    margin-bottom: 26px;
}

.admin-highlight.home-section {
    margin-top: 8px; /* sobe um pouco os destaques da equipe */
}

.home-section-title {
    font-size: 24px;
    font-weight: 900;
    margin: 0 0 12px;
}

.home-section-subtext {
    font-size: 13px;
    opacity: 0.75;
    margin-top: 2px;
}

/* Em telas maiores, deixa os títulos um pouco maiores */
@media (min-width: 768px) {
    .home-section-title {
        font-size: 52px;
    }
}

/* Banner de anúncios maior e mais chamativo */
.home-ad-section {
    margin-top: 10px;
    margin-bottom: 32px;
}

.home-ad-banner {
    position: relative;
    width: 100%;
    border-radius: 18px;
    padding: 18px 20px;
    background: linear-gradient(90deg, #151734, #362445, #521f3b);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* aumenta a altura mínima do banner (aqui é onde ele “cresce”) */
.home-ad-banner-large {
    min-height: 150px;
}

@media (min-width: 900px) {
    .home-ad-banner-large {
        min-height: 170px;
        padding: 22px 26px;
    }
}

.home-ad-text {
    max-width: 520px;
}

.home-ad-title {
    font-size: 20px;
    margin: 0 0 6px;
    font-weight: 700;
}

.home-ad-description {
    font-size: 14px;
    opacity: 0.88;
    margin: 0;
}

.home-ad-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-size: 12px;
    opacity: 0.9;
}

.home-ad-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.home-ad-note {
    font-size: 12px;
    opacity: 0.8;
}

/* Em tela pequena, centraliza o conteúdo do banner */
@media (max-width: 768px) {
    .home-ad-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-ad-side {
        align-items: flex-start;
    }

    .home-ad-title {
        font-size: 18px;
    }
}

/* Seções da home mais “coladas” */
.home-section {
    margin-top: 12px;
    margin-bottom: 20px;
}

/* Destaques da equipe bem perto do topo */
.admin-highlight.home-section {
    margin-top: 4px;
}

/* Banner colado nos destaques e bem próximo dos artistas */
.home-ad-section {
    margin-top: 8px;
    margin-bottom: 18px;
}

/* Títulos um pouco mais fortes */
.home-section-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
}

@media (min-width: 768px) {
    .home-section-title {
        font-size: 22px;
    }
}

/* Banner continua alto, mas agora com menos “respiro” em volta */
.home-ad-banner-large {
    min-height: 150px; /* se quiser ainda mais compacto: 140px */
}

/* ===== HEADER / MENU ===== */

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
}

.header-left,
.header-center,
.header-right {
    display: flex;
    align-items: center;
}

.site-logo {
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    color: #ffffff;
}

.header-right {
    gap: 10px;
}

.header-cta {
    margin-right: 4px;
}

.header-icon-btn,
.header-avatar-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.header-hamburger {
    font-size: 20px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
}

.header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-avatar-large {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

/* Dropdown do usuário (curto) */
.user-menu {
    position: relative;
}

.user-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    min-width: 220px;
    background: #111319;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    padding: 10px 0 8px;
    display: none;
    z-index: 2000;
}

.user-dropdown.open {
    display: block;
}

.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 6px;
}

.user-dropdown-info .user-name {
    font-size: 14px;
    font-weight: 600;
}

.user-dropdown-info .user-username {
    font-size: 12px;
    opacity: 0.8;
}

.user-dropdown-body {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-dropdown-body a {
    display: block;
    padding: 5px 4px;
    font-size: 13px;
    text-decoration: none;
    color: #f5f5f5;
    border-radius: 6px;
}

.user-dropdown-body a:hover {
    background: rgba(255,255,255,0.06);
}

.user-dropdown-footer {
    margin-top: 6px;
    padding: 6px 12px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.user-logout-btn {
    width: 100%;
    border: none;
    background: none;
    color: #ff6b6b;
    font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
}

/* ===== MENU LATERAL (HAMBURGUER) ===== */

.side-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    z-index: 1900;
}

.side-menu-overlay.open {
    display: block;
}

.side-menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    max-width: 80%;
    background: #050509;
    box-shadow: 4px 0 30px rgba(0,0,0,0.7);
    transform: translateX(-100%);
    transition: transform 0.22s ease-out;
    z-index: 2000;
    display: flex;
    flex-direction: column;
}

.side-menu.open {
    transform: translateX(0);
}

.side-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.side-menu-user .user-name {
    font-size: 14px;
    font-weight: 600;
}

.side-menu-user .user-username {
    font-size: 12px;
    opacity: 0.8;
}

.side-menu-close {
    margin-left: auto;
    border: none;
    background: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.side-menu-nav {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.side-menu-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
    margin-bottom: 4px;
}

.side-menu-nav a {
    display: block;
    padding: 6px 6px;
    border-radius: 6px;
    text-decoration: none;
    color: #f5f5f5;
}

.side-menu-nav a:hover {
    background: rgba(255,255,255,0.07);
}

/* Em desktop, o hamburguer pode aparecer só se quiser (se quiser esconder, comente isso) */
@media (min-width: 960px) {
    .header-hamburger {
        opacity: 0.9;
    }
}

/* ===== HEADER / MENU ===== */

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
}

.header-left,
.header-center,
.header-right {
    display: flex;
    align-items: center;
}

.site-logo {
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    color: #ffffff;
}

.header-right {
    gap: 10px;
}

.header-cta {
    margin-right: 4px;
}

.header-icon-btn,
.header-avatar-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.header-hamburger {
    font-size: 20px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
}

.header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-avatar-large {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

/* Dropdown do usuário */
.user-menu {
    position: relative;
}

.user-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    min-width: 220px;
    background: #111319;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    padding: 10px 0 8px;
    display: none;
    z-index: 2000;
}

.user-dropdown.open {
    display: block;
}

/* ===== MENU LATERAL (HAMBURGUER) ===== */

.side-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    z-index: 1900;
}

.side-menu-overlay.open {
    display: block;
}

.side-menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    max-width: 80%;
    background: #050509;
    box-shadow: 4px 0 30px rgba(0,0,0,0.7);
    transform: translateX(-100%);
    transition: transform 0.22s ease-out;
    z-index: 2000;
    display: flex;
    flex-direction: column;
}

.side-menu.open {
    transform: translateX(0);
}

.side-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.side-menu-nav {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.side-menu-nav a {
    display: block;
    padding: 6px 6px;
    border-radius: 6px;
    text-decoration: none;
    color: #f5f5f5;
}

.side-menu-nav a:hover {
    background: rgba(255,255,255,0.07);
}

.header-notif-btn {
    position: relative;
    border-radius: 999px;
    padding: 4px 8px;
}

.notif-icon {
    font-size: 18px;
    line-height: 1;
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #ff4d4f;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-hamburger {
    font-size: 20px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    color: #ffffff;                 /* deixa os três tracinhos brancos */
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
}

.header-notif-btn {
    position: relative;
    border-radius: 999px;
    padding: 4px 8px;
}

.notif-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notif-svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 1.7;
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #ff4d4f;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.user-logout-btn {
    display:block;
    width:100%;
    text-align:left;
    border:none;
    background:none;
    color:#ff6b6b;
    font-size:13px;
    padding:4px 0;
    cursor:pointer;
    text-decoration:none;
}
.user-logout-btn:hover {
    opacity:0.85;
}

.side-menu-premium-cta {
    display: block;
    margin: 10px 14px 6px;
    padding: 8px 12px;
    border-radius: 12px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
}
.side-menu-premium-cta:hover {
    filter: brightness(1.05);
}

/* CONTAINER FULLSCREEN */
.project-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,0.9);
    box-sizing: border-box;
}
.project-lightbox.open {
    display: flex;
}

/* ÁREA CENTRAL QUE CONTÉM A MÍDIA */
.project-lightbox-inner {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1000px;      /* limite horizontal */
    max-height: 95vh;       /* IMPORTANTE */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* IMAGEM / VÍDEO */
.project-lightbox-inner img,
.project-lightbox-inner video {
    max-width: 100%;
    max-height: 95vh;      /* altura real útil */
    width: auto;
    height: auto;
    object-fit: contain;   /* garante que CABE NA TELA */
    display: block;
    border-radius: 10px;
}

/* BOTÕES */
.project-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.7);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    z-index: 10;
}

.project-lightbox-prev,
.project-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 47px;
    height: 47px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.7);
    color: #fff;
    cursor: pointer;
    font-size: 28px;
    z-index: 10;
}

.project-lightbox-prev { left: 15px; }
.project-lightbox-next { right: 15px; }

/* Selo verificado */
.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #2f80ff; /* azul */
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(47,128,255,0.35);
    border: 2px solid rgba(255,255,255,0.12);
    cursor: default;
}

.verified-badge::after {
    content: "✓";
}

/* Tooltip simples */
.verified-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.verified-wrap .verified-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    background: rgba(15,15,18,0.95);
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    z-index: 9999;
}

.verified-wrap:hover .verified-tooltip {
    opacity: 1;
}

/* Anel no avatar quando verificado */
.avatar-verified-ring {
    position: relative;
    border-radius: 999px;
    padding: 3px;
    background: linear-gradient(135deg, #2f80ff, #8b5cf6);
    box-shadow: 0 10px 30px rgba(47,128,255,0.25);
}

.avatar-verified-ring > img,
.avatar-verified-ring > .avatar-fallback {
    display: block;
    border-radius: 999px;
    background: #0f0f12;
}

.comments-thread{display:flex;flex-direction:column;gap:14px;margin-top:10px}

.cmt{display:flex;gap:10px}
.cmt-left{width:38px;display:flex;flex-direction:column;align-items:center;position:relative}
.cmt-avatar{width:34px;height:34px;border-radius:999px;overflow:hidden;background:#272732;
  display:flex;align-items:center;justify-content:center;flex:0 0 34px}
.cmt-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cmt-avatar span{font-weight:700;font-size:14px;color:#fff}

.cmt-line{flex:1;width:2px;background:rgba(255,255,255,.08);margin-top:8px;border-radius:999px}
.cmt:not(.has-replies) .cmt-line{opacity:.0}

.cmt-main{flex:1;min-width:0}
.cmt-header{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.cmt-author{font-weight:700;text-decoration:none;color:inherit}
.cmt-meta{font-size:12px;opacity:.65}

.cmt-body{margin-top:6px;font-size:14px;line-height:1.35;word-break:break-word}

.cmt-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.cmt-action{background:transparent;border:0;color:rgba(255,255,255,.7);font-size:12px;cursor:pointer;padding:0}
.cmt-action:hover{color:#fff}
.cmt-action.danger{color:#f36b6b}
.cmt-delete{margin:0}

.cmt-children{margin-top:12px;padding-left:12px;border-left:2px solid rgba(255,255,255,.06)}
.cmt-children .cmt-left .cmt-line{opacity:.0} /* evita “linha dupla” dentro da reply */

.cmt-replybox{margin-top:10px}
.cmt-replyform textarea{
  width:100%;border-radius:10px;border:1px solid #2c2c35;background:#0c0c12;color:#fff;
  padding:8px 10px;font-size:13px;resize:vertical
}
.cmt-replyactions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}


/* Header: busca desktop */
.header-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}

.header-search-input {
  width: 100%;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  padding: 0 14px;
  color: inherit;
  outline: none;
}

.header-search-input:focus {
  border-color: rgba(255,255,255,0.22);
}

.header-search-button {
  height: 38px;
  width: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}

@media (max-width: 768px) {
  .header-premium-desktop { display: none !important; } /* só o do header */
}


/* Premium no dropdown: mantém o mesmo visual do header-premium-link,
   mas com comportamento/hover igual aos botões do header */
.user-premium-link{
  display:flex;
  justify-content:center;
  width:100%;
  margin: 4px 0 10px 0;
}

/* Hover igual ao comportamento dos botões do header (sem mexer no laranja base) */
.user-premium-link:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.user-premium-link:active{
  transform: translateY(0);
  filter: brightness(1.02);
}

/* Premium no dropdown: mantém o mesmo visual do header-premium-link,
   mas com comportamento/hover igual aos botões do header */
.user-premium-link{
  display:flex;
  justify-content:center;
  width:100%;
  margin: 4px 0 10px 0;
}

/* Hover igual ao comportamento dos botões do header (sem mexer no laranja base) */
.user-premium-link:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.user-premium-link:active{
  transform: translateY(0);
  filter: brightness(1.02);
}

@media (max-width: 768px) {
  .side-menu .header-premium-link { 
    display: block !important; 
  }

  .user-dropdown .header-premium-link { 
    display: flex !important; 
  }
}

/* ====== Financeiro (Admin) ====== */
.finance-page{max-width:1240px;margin:0 auto;padding:18px 16px 32px}
.finance-header{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.finance-title h1{margin:0;font-size:28px}
.finance-title p{margin:6px 0 0;opacity:.75;font-size:13px}

.finance-actions form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.finance-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);font-size:12px}
.finance-chip input,.finance-chip select{background:transparent;border:0;outline:none;color:#fff;font-size:12px}
.finance-chip input[type="date"]{color-scheme:dark}

.finance-metrics{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin:12px 0 16px}
.metric-card{grid-column:span 3;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);border-radius:14px;padding:12px 12px 10px}
.metric-card.is-wide{grid-column:span 6}
.metric-card .label{margin:0 0 6px;opacity:.75;font-size:12px}
.metric-card .value{margin:0;font-size:22px}
.metric-card .hint{margin:8px 0 0;opacity:.75;font-size:12px;line-height:1.35}
@media(max-width:1200px){.metric-card{grid-column:span 6}.metric-card.is-wide{grid-column:span 12}}

.finance-section{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);border-radius:14px;padding:12px}
.finance-section h2{margin:0 0 10px;font-size:16px}

.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.10);border-radius:12px}
.finance-table{width:100%;border-collapse:separate;border-spacing:0;min-width:980px}
.finance-table thead th{position:sticky;top:0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);padding:10px 10px;font-size:12px;opacity:.8;text-align:left;border-bottom:1px solid rgba(255,255,255,.10);white-space:nowrap}
.finance-table tbody td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;vertical-align:middle}
.finance-table tbody tr:hover td{background:rgba(255,255,255,.03)}
.is-mono{font-variant-numeric:tabular-nums}

.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);font-size:12px;opacity:.95}
.badge.success{border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.10);color:rgba(46,204,113,.95)}
.badge.warn{border-color:rgba(241,196,15,.35);background:rgba(241,196,15,.10);color:rgba(241,196,15,.95)}
.badge.danger{border-color:rgba(231,76,60,.35);background:rgba(231,76,60,.10);color:rgba(231,76,60,.95)}
.badge.info{border-color:rgba(47,127,214,.35);background:rgba(47,127,214,.10);color:rgba(47,127,214,.95)}

.profile-badges{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.profile-badge{
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.profile-badge img{
  width:18px;
  height:18px;
  display:block;
}

.profile-badge .badge-fallback{
  font-size:14px;
  opacity:.85;
}

/* botão ícone do header (se você não tiver um padrão) */
.header-icon-btn{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.header-icon-btn svg{ width:20px; height:20px; display:block; opacity:.95; }
.header-icon-btn:hover{ background:rgba(255,255,255,.10); }

/* overlay */
.search-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}
.search-overlay.open{ display:block; }
.search-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

.search-overlay-panel{
  position:relative;
  width:92%;
  max-width:560px;
  margin: 80px auto 0;
  background:rgba(15,15,18,.96);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 18px 70px rgba(0,0,0,.65);
}

.search-overlay-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.search-overlay-title{
  font-size:16px;
  font-weight:700;
}
.search-overlay-close{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.search-overlay-close svg{ width:18px; height:18px; display:block; }
.search-overlay-close:hover{ background:rgba(255,255,255,.10); }

.search-overlay-form{
  display:flex;
  gap:10px;
  align-items:center;
}
.search-overlay-input{
  flex:1;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:0 12px;
  outline:none;
}
.search-overlay-input:focus{
  border-color: rgba(47,127,214,.55);
  box-shadow: 0 0 0 3px rgba(47,127,214,.15);
}

.search-overlay-submit{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  color:#fff;
  background: rgba(47,127,214,.95);
  font-weight:700;
}
.search-overlay-submit:hover{ filter:brightness(1.05); }

.search-overlay-hints{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.hint-title{ font-size:12px; opacity:.75; margin-bottom:4px; }
.hint-text{ font-size:13px; opacity:.85; line-height:1.35; }

/* Desktop: mostra a busca "input" e esconde o botão overlay */
.header-search-mobile { display: none !important; }
.header-search-desktop { display: flex !important; }

/* Mobile: esconde a busca "input" e mostra o botão overlay */
@media (max-width: 900px){
  .header-search-desktop { display: none !important; }
  .header-search-mobile { display: inline-flex !important; }
}

@media (max-width: 900px){
  .header-inner{ gap:10px; }
  .header-left{ gap:10px; }
  .header-right{ gap:10px; }
  .header-cta{ padding:10px 12px; } /* botão Upload mais compacto */
  .site-logo img{ height:24px !important; }
}
/* ===================================================================
   HOME GRID (FIX FINAL)
   - Desktop: 5 colunas
   - Mobile: 2 colunas (inclusive 360px) e sem “caixa” central
   - Info: só aparece no hover (desktop) ou quando o card ganha .is-open (mobile)
=================================================================== */

/* Mais largura na home (desktop) */
.projects-section,
.hero,
.admin-highlight,
.featured-artists,
.home-ad-section{
  max-width: 1680px !important;
}

/* Desktop: grid mais denso (estilo ArtStation)
   - Cards um pouco maiores
   - Menos espaço entre eles
*/
@media (min-width: 1200px){
  .projects-section .project-grid{
    display:grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .projects-section .project-thumb{
    height: 240px !important;
    aspect-ratio: auto !important;
  }
}

/* 3 colunas (desktop médio) */
@media (min-width: 992px) and (max-width: 1199px){
  .projects-section .project-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .projects-section .project-thumb{
    height: 230px !important;
    aspect-ratio: auto !important;
  }
}

/* 3 colunas (tablet / médio) */
@media (min-width: 720px) and (max-width: 991px){
  .projects-section .project-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .projects-section .project-thumb{
    height: 210px !important;
    aspect-ratio: auto !important;
  }
}

/* Mobile/tablet pequeno: 2 colunas */
@media (max-width: 719px){
  .projects-section .project-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .projects-section .project-thumb{
    height: 170px !important;
    aspect-ratio: auto !important;
  }
}

/* Mobile: ocupar toda a lateral (sem “caixa”) */
@media (max-width: 900px){
  .site-main{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding: 12px 8px 22px !important;
  }

  .projects-section{ padding: 0 0 16px !important; }
  .projects-header{ width:100% !important; }

  .projects-filter-form{ width:100% !important; }
  .projects-filter-form .filter-row{ width:100% !important; }
  .filter-row{ gap:10px !important; }
  .filter-field{ min-width: 0 !important; flex: 1 1 auto !important; }
  .filter-actions{ margin-left: 0 !important; }
  .filter-actions .btn-sm{ width:100% !important; justify-content:center !important; }
}

/* Card estilo ArtStation: info como overlay, só aparece no hover */
.projects-section .project-card{
  position: relative !important;
  background: transparent !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.projects-section .project-thumb{
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* some com as infos abaixo (vira overlay) */
.projects-section .project-info{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 10px 12px 12px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.86) 100%) !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: 160ms ease !important;
  pointer-events: none !important;
}

.projects-section .project-title{
  font-size: 13px !important;
  line-height: 1.15 !important;
  margin: 0 0 2px 0 !important;
}
.projects-section .project-author{
  font-size: 12px !important;
  opacity: .88 !important;
  margin: 0 !important;
}

/* Avatar do autor: aparece junto no hover */
.projects-section .project-author-avatar{
  opacity: 0 !important;
  transform: scale(.96) !important;
  transition: 160ms ease !important;
}

/* Desktop: hover mostra */
@media (hover:hover){
  .projects-section .project-card:hover .project-info{
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .projects-section .project-card:hover .project-author-avatar{
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mobile: 1º toque (JS) adiciona .is-open */
.projects-section .project-card.is-open .project-info{
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.projects-section .project-card.is-open .project-author-avatar{
  opacity: 1 !important;
  transform: none !important;
}


/* === HOTFIX: Mobile filtros menores + Sensível alinhado com Recentes/Populares === */

@media (max-width: 900px){
  /* header: título em cima, filtros + sensível na mesma linha */
  .projects-section .projects-header{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:10px !important;
  }
  .projects-section .projects-header .home-section-title{
    flex:0 0 100% !important;
    margin:0 !important;
  }

  .projects-section .projects-filters{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
  }
  .projects-section .projects-filters .filter-link{
    padding:6px 10px !important;
    font-size:12px !important;
    line-height:1 !important;
  }

  /* pílula do sensível (injetada pelo layout) */
  #sensitive-toggle-pill,
  .sensitive-toggle-pill{
    margin-left:auto !important;
    padding:3px 8px !important;
    height:30px !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }
  #sensitive-toggle-pill .sensitive-switch,
  .sensitive-toggle-pill .sensitive-switch{
    width:40px !important;
    height:20px !important;
  }
  #sensitive-toggle-pill .sensitive-switch .slider:before,
  .sensitive-toggle-pill .sensitive-switch .slider:before{
    height:14px !important;
    width:14px !important;
  }

  /* filtro (Categoria / Tendência / Aplicar) mais compacto e ocupando toda a largura */
  .projects-section .projects-filter-form{
    width:100% !important;
  }
  .projects-section .projects-filter-form .filter-row{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:10px !important;
  }
  .projects-section .projects-filter-form .filter-label{
    font-size:12px !important;
    opacity:.82 !important;
  }
  .projects-section .projects-filter-form select{
    height:40px !important;
    font-size:13px !important;
    padding:0 12px !important;
  }
  .projects-section .projects-filter-form .filter-actions{
    grid-column:1 / -1 !important;
    display:flex !important;
    justify-content:flex-end !important;
  }
  .projects-section .projects-filter-form .filter-actions .btn{
    height:40px !important;
    padding:0 14px !important;
    font-size:13px !important;
  }
}

@media (max-width: 420px){
  /* em telas muito pequenas, empilha e deixa o botão full */
  .projects-section .projects-filter-form .filter-row{
    grid-template-columns: 1fr !important;
  }
  .projects-section .projects-filter-form .filter-actions{
    justify-content:stretch !important;
  }
  .projects-section .projects-filter-form .filter-actions .btn{
    width:100% !important;
  }
}