/* ==========================================================
   SOU TOP - RESPONSIVIDADE
   Todas as regras para tablet e celular ficam neste arquivo.
   ========================================================== */

@media (max-width: 1180px) {
    .home-showcase,
    .home-showcase.home-showcase-pro {
        grid-template-columns: 1fr;
    }

    .ranking-card.ranking-card-pro {
        display: block;
    }

    .videos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .shorts-grid {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
    }

    .meus-tops-page .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .soutop-header {
        grid-template-columns: auto 1fr auto;
        height: auto;
        min-height: 64px;
        padding: 10px 14px;
        gap: 12px;
    }

    .soutop-search {
        order: 3;
        grid-column: 1 / -1;
        max-width: none;
    }

    .soutop-upload-btn span,
    .soutop-profile-name {
        display: none;
    }

    .soutop-actions {
        gap: 8px;
    }

    .videos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .shorts-grid {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: 20px;
        background:
            radial-gradient(circle at 20% 0%, rgba(255,204,0,.08), transparent 30%),
            radial-gradient(circle at 90% 0%, rgba(255,0,80,.10), transparent 30%),
            #0f0f0f !important;
    }

    body.sidebar-mobile-open {
        overflow: hidden;
    }

    .soutop-header {
        position: sticky;
        top: 0;
        grid-template-columns: auto 1fr auto;
        min-height: 58px;
        padding: 8px 10px;
        z-index: 1200;
    }

    .soutop-brand-title {
        font-size: 18px;
    }

    .soutop-brand {
        min-width: auto;
    }

    .soutop-search {
        height: 36px;
    }

    .soutop-actions {
        justify-self: end;
    }

    .soutop-notification-btn {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 9px;
        background: rgba(255,255,255,.06);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    main {
        display: block;
        min-height: auto;
    }

    .sidebar {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(82vw, 280px);
        height: 100vh;
        padding: 78px 12px 20px;
        transform: translateX(-105%);
        transition: transform .25s ease;
        z-index: 1400;
        box-shadow: 8px 0 30px rgba(0,0,0,.5);
    }

    body.sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgba(0,0,0,.62);
        z-index: 1350;
        cursor: pointer;
    }

    body.sidebar-mobile-open .sidebar-overlay {
        display: block;
    }

    .content,
    .meus-tops-page .content {
        width: 100%;
        margin-left: 0;
        padding: 14px 10px 40px !important;
    }

    .stories-container {
        gap: 10px;
        padding: 10px 0 14px !important;
        margin-bottom: 10px !important;
    }

    .story-avatar {
        width: 62px !important;
        height: 62px !important;
    }

    .categories {
        padding: 8px 0 14px !important;
        margin-bottom: 12px !important;
    }

    .home-showcase.home-showcase-pro {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px;
        margin-bottom: 24px;
    }

    .featured-video-card.featured-video-pro,
    .ranking-card.ranking-card-pro {
        border-radius: 16px !important;
    }

    .featured-thumb.featured-thumb-pro {
        min-height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 16px 16px 0 0;
    }

    .featured-play.featured-play-pro {
        width: 58px !important;
        height: 58px !important;
        font-size: 20px;
    }

    .featured-tag.featured-tag-pro {
        left: 12px;
        top: 12px;
        padding: 7px 11px;
        font-size: 11px;
    }

    .featured-info.featured-info-pro {
        padding: 14px 14px 16px !important;
    }

    .featured-info-pro h2 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    .featured-meta-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .featured-actions {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
        font-size: 12px;
    }

    .ranking-card.ranking-card-pro {
        padding: 14px !important;
    }

    .ranking-item.ranking-item-pro {
        grid-template-columns: 28px 78px 1fr;
        gap: 10px;
        padding: 11px 0;
    }

    .ranking-thumb {
        width: 78px;
    }

    .section-heading {
        margin-bottom: 12px;
        gap: 6px;
    }

    .section-heading p {
        display: none;
    }

    .videos-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        width: 100%;
        overflow: visible !important;
    }

    .video-card-link {
        width: 100%;
        display: block;
        flex: none;
    }

    .videos-grid .video-card {
        width: 100%;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
    }

    .videos-grid .video-card:hover {
        transform: none !important;
    }

    .videos-grid .thumbnail-wrap {
        border-radius: 14px !important;
        border: 1px solid rgba(255,255,255,.08);
    }

    .videos-grid .video-info {
        display: flex !important;
        align-items: flex-start;
        gap: 10px !important;
        padding: 10px 2px 0 !important;
        background: transparent !important;
    }

    .video-channel-avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .videos-grid .video-title {
        font-size: 15px !important;
        line-height: 1.32 !important;
        margin-bottom: 5px !important;
    }

    .videos-grid .video-channel {
        font-size: 13px !important;
        margin-bottom: 3px !important;
    }

    .videos-grid .video-metadata {
        font-size: 12px !important;
        gap: 5px !important;
    }

    .shorts-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .short-card {
        min-height: 250px;
        border-radius: 14px !important;
    }

    .stories-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        min-height: 100vh;
        z-index: 2147483000 !important;
    }

    .story-content {
        width: 100vw !important;
        max-width: 430px;
        height: 100vh !important;
        max-height: 100vh;
        border-radius: 0 !important;
        margin: 0 auto !important;
    }

    .close-story,
    #closeStoryBtn {
        top: 14px !important;
        right: 14px !important;
        width: 48px !important;
        height: 48px !important;
        z-index: 2147483647 !important;
    }

    .story-user {
        top: 14px !important;
        left: 14px !important;
        right: 70px !important;
    }

    .story-progress-container {
        top: 0 !important;
        padding: 8px 10px !important;
    }

    .story-reply-box {
        bottom: 18px !important;
        left: 12px !important;
        right: 12px !important;
    }

    .story-views {
        bottom: 78px !important;
        right: 14px !important;
    }

    .meus-tops-page .hero {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .meus-tops-page .hero h1 {
        font-size: 27px;
    }

    .meus-tops-page .heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .meus-tops-page .grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .soutop-header {
        gap: 7px;
    }

    .soutop-brand-title {
        display: none;
    }

    .short-card {
        min-height: 220px;
    }

    .featured-info-pro h2 {
        font-size: 17px !important;
    }

    .ranking-title-pro {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .video-social-actions {
        gap: 9px;
        font-size: 12px;
    }

    .star-action-btn {
        font-size: 12px;
        padding: 4px 5px;
    }

    .meus-tops-page .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .meus-tops-page .stat {
        min-width: 0;
    }
}

@media (min-width: 769px) {
    body.story-open {
        overflow: hidden;
    }
}

/* Painel de notificações em tablet e celular */
@media (max-width: 768px) {
    .notification-panel {
        position: fixed;
        top: 58px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - 74px);
        border-radius: 12px;
        z-index: 2300;
    }

    .notification-panel-header {
        min-height: 54px;
        padding: 0 13px;
    }

    .notification-read-all span {
        display: none;
    }

    .notification-item {
        min-height: 96px;
        padding: 13px 12px 13px 20px;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .notification-avatar-wrap,
    .notification-avatar {
        width: 44px;
        height: 44px;
    }

    .notification-thumbnail {
        width: 72px;
        height: 42px;
    }

    .notification-text strong,
    .notification-text > span {
        font-size: 12px;
    }
}

@media (max-width: 430px) {
    .notification-panel {
        top: 56px;
        right: 0;
        left: 0;
        max-height: calc(100vh - 56px);
        border-left: 0;
        border-right: 0;
        border-radius: 0 0 12px 12px;
    }

    .notification-thumbnail {
        width: 64px;
        height: 38px;
    }
}


/* ==========================================================
   SOU TOP - MENU INFERIOR MOBILE / PWA
   ========================================================== */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    /* No mobile, a navegação principal passa a ser o menu inferior. */
    body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .sidebar,
    .sidebar-overlay {
        display: none !important;
    }

    body.sidebar-mobile-open {
        overflow: auto;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2200;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
        min-height: 70px;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        background: rgba(8, 10, 13, .96);
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 -12px 36px rgba(0,0,0,.38);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .mobile-bottom-nav__item {
        position: relative;
        min-width: 0;
        min-height: 54px;
        padding: 5px 2px 3px;
        border: 0;
        background: transparent;
        color: #8f959d;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        font-family: inherit;
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav__item i {
        width: 27px;
        height: 27px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 21px;
        color: currentColor;
    }

    .mobile-bottom-nav__item.active {
        color: #ffcc00;
    }

    .mobile-bottom-nav__item.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #ffcc00;
        box-shadow: 0 0 10px rgba(255,204,0,.8);
    }

    .mobile-bottom-nav__camera {
        justify-content: flex-end;
        overflow: visible;
    }

    .mobile-bottom-nav__camera-ring {
        width: 58px;
        height: 58px;
        margin-top: -25px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111;
        background: linear-gradient(145deg, #ffe56b, #ffcc00 58%, #ff9f00);
        border: 5px solid #080a0d;
        box-shadow:
            0 0 0 1px rgba(255,204,0,.34),
            0 10px 25px rgba(0,0,0,.48),
            0 0 22px rgba(255,204,0,.22);
        transition: transform .16s ease, filter .16s ease;
    }

    .mobile-bottom-nav__camera:active .mobile-bottom-nav__camera-ring {
        transform: scale(.94);
        filter: brightness(1.08);
    }

    .mobile-bottom-nav__camera-ring i {
        width: auto;
        height: auto;
        font-size: 23px;
        color: #111;
    }

    .mobile-bottom-nav__camera > span:last-child {
        color: #ffcc00;
        font-weight: 800;
    }

    /* Garante que conteúdos e modais não fiquem escondidos atrás do menu. */
    .content,
    .meus-tops-page .content {
        padding-bottom: 28px !important;
    }

    .fullscreen-camera-modal,
    .stories-modal,
    .auth-modal {
        z-index: 3000;
    }
}


/* Avatar do perfil com Story ativo */
@media (max-width: 768px) {
    .soutop-profile-story-avatar {
        width: 39px;
        height: 39px;
        min-width: 39px;
    }

    .soutop-profile-story-avatar .user-avatar {
        width: 33px !important;
        height: 33px !important;
        min-width: 33px;
    }
}
/* ==========================================================
   SOU TOP STUDIO - RESPONSIVIDADE DO UPLOAD
   ========================================================== */
@media(max-width:980px){
    .upload-studio-layout{
        grid-template-columns:1fr;
    }

    .upload-studio-right{
        position:static;
        grid-template-columns:1fr 1fr;
        align-items:start;
    }

    .upload-publish-btn,
    .upload-publish-note{
        grid-column:1/-1;
    }
}

@media(max-width:768px){
    .upload-studio-page{
        padding-bottom:0 !important;
    }

    .upload-studio-page .soutop-header{
        grid-template-columns:auto 1fr auto;
        min-height:58px;
    }

    .upload-studio-header-title{
        justify-self:start;
    }

    .upload-studio-header-link span,
    .upload-studio-profile{
        display:none;
    }

    .upload-studio-shell{
        width:100%;
        padding:16px 10px 34px;
    }

    .upload-studio-hero{
        align-items:flex-start;
        flex-direction:column;
        padding:22px 18px;
        border-radius:18px;
    }

    .upload-studio-hero h1{
        font-size:31px;
    }

    .upload-studio-hero-badge{
        width:100%;
        min-width:0;
    }

    .upload-studio-card{
        padding:16px;
        border-radius:16px;
    }

    .upload-dropzone{
        min-height:245px;
        padding:24px 18px;
    }

    .upload-video-preview-wrap{
        border-radius:13px;
    }

    .upload-metadata-grid{
        grid-template-columns:1fr 1fr;
    }

    .upload-studio-right{
        display:grid;
        grid-template-columns:1fr;
    }

    .upload-publish-btn,
    .upload-publish-note{
        grid-column:auto;
    }

    .upload-progress-studio{
        padding:17px;
        border-radius:16px;
    }

    .upload-progress-top{
        grid-template-columns:auto 1fr;
    }

    .upload-progress-top > strong{
        grid-column:1/-1;
        justify-self:end;
        margin-top:-10px;
        font-size:21px;
    }

    .upload-progress-steps{
        grid-template-columns:1fr;
    }

    .upload-progress-step{
        padding:10px 12px;
    }

    .upload-progress-step small{
        white-space:normal;
    }

    .upload-progress-bottom{
        align-items:flex-start;
        flex-direction:column;
    }

    .upload-success-screen{
        min-height:440px;
        border-radius:18px;
    }
}

@media(max-width:430px){
    .upload-studio-header-title span{
        display:none;
    }

    .upload-studio-header-title strong{
        font-size:12px;
    }

    .upload-studio-header-close{
        display:none;
    }

    .upload-studio-hero h1{
        font-size:27px;
    }

    .upload-file-summary{
        align-items:flex-start;
        flex-direction:column;
    }

    .upload-secondary-btn{
        width:100%;
        justify-content:center;
    }

    .upload-metadata-grid{
        grid-template-columns:1fr 1fr;
    }

    .upload-success-actions{
        width:100%;
        flex-direction:column;
    }

    .upload-success-primary,
    .upload-success-secondary{
        width:100%;
    }
}


/* ==========================================================
   INDEX / HOME - HEADER RESPONSIVO
   Sobrescreve apenas a home sem afetar Upload Studio e outras páginas.
   ========================================================== */

@media (max-width: 900px) {
    .home-page .soutop-header {
        grid-template-columns: auto 1fr auto;
        gap: 9px;
    }

    .home-page .soutop-brand {
        min-width: 120px;
    }

    .home-page .soutop-brand-title {
        display: inline-block !important;
        font-size: 18px;
    }

    .home-page .soutop-notification-btn {
        display: inline-flex !important;
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .home-page .soutop-actions {
        gap: 7px;
        min-width: max-content;
    }

    .home-page .soutop-profile-story-avatar {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .home-page .soutop-profile-story-avatar .soutop-header-profile-avatar,
    .home-page .soutop-profile-story-avatar .user-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }
}

@media (max-width: 768px) {
    .home-page .soutop-header {
        grid-template-columns: auto 1fr auto !important;
        gap: 7px;
        padding-left: 9px;
        padding-right: 9px;
        overflow: visible;
    }

    .home-page .soutop-brand {
        min-width: 108px;
        gap: 5px;
    }

    .home-page .soutop-brand-title {
        display: inline-block !important;
        font-size: 17px !important;
    }

    .home-page .soutop-brand-star {
        display: inline-block !important;
        font-size: 13px;
    }

    .home-page .soutop-notifications,
    .home-page .soutop-notification-btn {
        display: inline-flex !important;
    }

    .home-page .soutop-notification-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
    }

    .home-page .soutop-profile-story-avatar {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .home-page .soutop-profile-story-avatar .soutop-header-profile-avatar,
    .home-page .soutop-profile-story-avatar .user-avatar {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .home-page .soutop-profile-btn {
        gap: 4px;
        padding: 2px 3px;
    }
}

@media (max-width: 430px) {
    .home-page .soutop-header {
        gap: 4px;
        padding-left: 7px;
        padding-right: 7px;
    }

    /*
     * O CSS original escondia o texto da marca abaixo de 430px.
     * Na home ele permanece visível.
     */
    .home-page .soutop-brand-title {
        display: inline-block !important;
        font-size: 15px !important;
    }

    .home-page .soutop-brand {
        min-width: 91px;
        gap: 4px;
    }

    .home-page .soutop-actions {
        gap: 2px;
    }

    .home-page .soutop-upload-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        padding: 0 !important;
        justify-content: center;
    }

    .home-page .soutop-upload-btn span {
        display: none !important;
    }

    .home-page .soutop-notification-btn {
        display: inline-flex !important;
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .home-page .soutop-profile-story-avatar {
        width: 43px;
        height: 43px;
        min-width: 43px;
    }

    .home-page .soutop-profile-story-avatar .soutop-header-profile-avatar,
    .home-page .soutop-profile-story-avatar .user-avatar {
        width: 37px !important;
        height: 37px !important;
        min-width: 37px !important;
    }

    .home-page .soutop-profile-btn .fa-chevron-down {
        display: none;
    }
}


/* ==========================================================
   NOTIFICAÇÕES MOBILE - FECHAMENTO E OVERLAY
   ========================================================== */
@media (max-width: 768px) {
    .notification-mobile-overlay.active {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.62);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 2250;
        animation: notificationOverlayIn .16s ease-out;
    }

    .notification-panel {
        z-index: 2300 !important;
    }

    .notification-panel-header {
        position: sticky;
        top: 0;
        z-index: 3;
        flex-shrink: 0;
    }

    .notification-panel-actions {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .notification-close-mobile {
        display: inline-flex;
    }

    .notification-panel-list {
        flex: 1;
        min-height: 0;
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 430px) {
    .notification-panel {
        top: 0 !important;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: none !important;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .notification-panel-header {
        min-height: 58px;
        padding: max(8px, env(safe-area-inset-top)) 10px 8px 14px;
        background: #1f1f1f;
    }

    .notification-panel-header h3 {
        font-size: 16px;
    }

    .notification-close-mobile {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 19px;
    }

    .notification-read-all {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
    }
}

@keyframes notificationOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ==========================================================
   ETAPA 3 - BUSCA GLOBAL / RESPONSIVO
   ========================================================== */
@media (max-width:900px){
    .home-page .soutop-search-wrap{
        order:3;
        grid-column:1 / -1;
        max-width:none;
        width:100%;
    }

    .home-page .soutop-search-wrap .soutop-search{
        height:38px;
    }

    .home-page .soutop-search-results{
        top:calc(100% + 7px);
    }
}

@media (max-width:768px){
    .home-page .soutop-search-wrap{
        position:relative;
        z-index:2500;
    }

    .home-page .soutop-search-results{
        position:fixed;
        top:106px;
        left:8px;
        right:8px;
        width:auto;
        max-height:calc(100dvh - 188px);
        border-radius:15px;
    }

    .home-page .soutop-search-results-scroll{
        max-height:calc(100dvh - 188px);
    }

    .soutop-search-result-item{
        min-height:64px;
        padding:9px 10px;
    }

    .soutop-search-result-copy strong{
        font-size:12px;
    }

    .soutop-search-result-copy small{
        font-size:10px;
    }
}

@media (max-width:430px){
    .home-page .soutop-search-wrap .soutop-search{
        height:36px;
    }

    .home-page .soutop-search-wrap .soutop-search input{
        font-size:12px;
        padding-left:10px;
        padding-right:66px;
    }

    .home-page .soutop-search-wrap .soutop-search > i{
        margin-left:12px;
    }

    .home-page .soutop-search-results{
        top:99px;
        left:5px;
        right:5px;
        max-height:calc(100dvh - 176px);
        border-radius:13px;
    }

    .home-page .soutop-search-results-scroll{
        max-height:calc(100dvh - 176px);
        padding:5px;
    }

    .soutop-search-video-thumb{
        width:72px;
        height:41px;
        min-width:72px;
    }

    .soutop-search-avatar,
    .soutop-search-hashtag-icon{
        width:40px;
        height:40px;
        min-width:40px;
    }
}

/* ==========================================================
   ETAPA 4 - PERFIL PÚBLICO / RESPONSIVO
   ========================================================== */
@media(max-width:980px){
    .public-profile-summary{grid-template-columns:150px minmax(0,1fr);padding-left:34px;padding-right:34px;gap:20px}
    .public-profile-avatar{width:138px;height:138px;top:-54px}
    .public-profile-name-row{grid-template-columns:minmax(180px,1fr) auto;gap:20px}
    .public-profile-actions{grid-column:2;grid-row:2;align-self:start}
    .public-profile-stats{grid-column:1 / -1;grid-row:2;justify-self:start;margin-top:4px}
    .public-profile-stats>div:first-child{padding-left:0;text-align:left}
    .public-profile-banner-carousel{margin-left:34px;margin-right:34px}
    .public-profile-tabs{padding-left:30px;padding-right:30px}
    .public-profile-tops-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(max-width:768px){
    body.public-profile-page{padding-bottom:0!important}
    .public-profile-shell{border-left:0;border-right:0}
    .public-profile-cover{min-height:215px}
    .public-profile-back,.public-profile-more{top:13px;width:38px;height:38px}
    .public-profile-back{left:12px}.public-profile-more{right:12px}
    .public-profile-brand{left:60px;top:17px}.public-profile-brand strong{font-size:15px}
    .public-profile-more-menu{right:12px;top:58px}
    .public-profile-cover-placeholder{left:22px;bottom:28px}
    .public-profile-cover-placeholder span{font-size:9px}.public-profile-cover-placeholder strong{font-size:35px}.public-profile-cover-placeholder small{font-size:10px}

    .public-profile-summary{display:block;padding:0 16px 22px}
    /*
     * O avatar é absoluto. Não precisamos reservar 54px antes
     * das informações, pois isso empurrava nome/@/nível para baixo.
     */
    .public-profile-avatar-column{min-height:0;height:0}
    .public-profile-avatar{width:108px;height:108px;top:-50px;left:0;border-width:4px}
    .public-profile-main-info{padding-top:10px}
    .public-profile-name-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
    .public-profile-name-row>div:first-child{padding-left:122px;min-height:82px}
    .public-profile-name-row h1{font-size:21px}
    .public-profile-handle{font-size:12px}
    .public-profile-level{font-size:9px;padding:5px 8px;margin-top:6px}
    .public-profile-stats{grid-column:1 / -1;grid-row:auto;width:100%;justify-content:space-between;margin-top:10px}
    .public-profile-stats>div{flex:1;min-width:0;padding:0 8px;text-align:center!important}
    .public-profile-stats>div:first-child{padding-left:8px}
    .public-profile-stats strong{font-size:19px}.public-profile-stats span{font-size:9px}
    .public-profile-actions{grid-column:1 / -1;grid-row:auto;width:100%;margin-top:6px}
    .public-profile-fan-btn,.public-profile-owner-btn{width:100%;min-height:43px;font-size:12px;border-radius:11px}
    .public-profile-bio{margin-top:15px;font-size:11px}
    .public-profile-links{margin-top:16px;gap:8px}
    .public-profile-links>a:not(.public-profile-external-link){width:38px;height:38px;font-size:18px}
    .public-profile-external-link{min-height:38px;max-width:100%;padding:0 10px;font-size:10px}

    .public-profile-banner-carousel{margin:5px 12px 22px;padding-bottom:18px}
    .public-profile-banner-slide{aspect-ratio:2.7 / 1;min-height:112px;border-radius:12px}
    .public-profile-banner-arrow{display:none}

    .public-profile-tabs{min-height:62px;padding:0;position:sticky;top:0}
    .public-profile-tab{gap:5px;font-size:9px;flex-direction:column}
    .public-profile-tab i{font-size:17px}
    .public-profile-tab.active::after{left:9%;right:9%;height:2px}
    .public-profile-tab-panel{padding:5px 4px 24px}
    .public-profile-photo-grid{gap:3px}
    .public-profile-video-grid{grid-template-columns:1fr;gap:17px;padding:10px 7px}
    .public-profile-video-thumb{border-radius:12px}
    .public-profile-video-card>strong{font-size:12px;padding:0 2px}
    .public-profile-video-card>small{font-size:9px;padding:0 2px}
    .public-profile-tops-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 6px}
    .public-profile-top-card{padding:12px 7px;border-radius:12px}
    .public-profile-top-card img{width:60px;height:60px}
    .public-profile-top-card strong{font-size:10px}
    .public-profile-empty{min-height:250px;padding:35px 15px}
}

@media(max-width:430px){
    .public-profile-cover{min-height:178px}
    .public-profile-brand strong{font-size:13px}
    .public-profile-cover-placeholder{bottom:18px}
    .public-profile-cover-placeholder strong{font-size:29px}
    .public-profile-summary{padding-left:12px;padding-right:12px}
    .public-profile-avatar{width:92px;height:92px;top:-40px}
    .public-profile-main-info{padding-top:8px}
    .public-profile-name-row>div:first-child{padding-left:102px;min-height:70px}
    .public-profile-name-row h1{font-size:18px}
    .public-profile-handle{font-size:10px}
    .public-profile-level{font-size:8px}
    .public-profile-stats strong{font-size:17px}
    .public-profile-links{align-items:center}
    .public-profile-external-link{width:100%;border-left:0;border-top:1px solid rgba(255,255,255,.08);padding-top:10px;margin-top:2px}
    .public-profile-banner-slide{aspect-ratio:2.45/1;min-height:100px}
    .public-profile-tabs{min-height:58px}
    .public-profile-tab span{font-size:8px}
    .public-profile-tab i{font-size:15px}
    .public-profile-tops-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================
   SOU TOP STUDIO - PAINEL / PERFIL PÚBLICO RESPONSIVO
   ========================================================== */
@media(max-width:1100px){
    .studio-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .studio-profile-editor{grid-template-columns:1fr}
    .studio-editor-side{position:static;grid-template-columns:minmax(250px,.7fr) minmax(0,1fr);align-items:start}
    .studio-editor-side .studio-save-btn,.studio-editor-side .studio-form-message{grid-column:2}
    .studio-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
    .studio-layout{grid-template-columns:82px minmax(0,1fr)}
    .studio-sidebar{padding-left:9px;padding-right:9px}
    .studio-user-card{justify-content:center}.studio-user-card div,.studio-nav-item span,.studio-sidebar-bottom{display:none}.studio-nav-item{justify-content:center;padding:0}.studio-nav-item i{width:auto;font-size:16px}
    .studio-overview-grid{grid-template-columns:1fr}
    .studio-media-layout{grid-template-columns:1fr}.studio-media-uploader{position:static}
}
@media(max-width:768px){
    body.studio-page{padding-bottom:0!important}
    .studio-header{height:58px;padding:0 10px}.studio-brand strong{font-size:16px}.studio-brand span{display:none}.studio-header-link span,.studio-header-primary span{display:none}.studio-header-link,.studio-header-primary{width:36px;padding:0;justify-content:center}.studio-header-avatar{width:34px;height:34px}
    .studio-layout{display:block}.studio-sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:2350;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid rgba(255,255,255,.07);display:block;background:rgba(7,9,12,.97)}
    .studio-user-card,.studio-sidebar-bottom{display:none}.studio-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}.studio-nav-item{min-height:52px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:3px 2px;font-size:7px}.studio-nav-item span{display:block}.studio-nav-item:nth-child(n+6){display:none}.studio-nav-item.active{box-shadow:none;background:rgba(255,204,0,.07)}
    .studio-main{padding:20px 10px calc(86px + env(safe-area-inset-bottom))}.studio-page-heading{align-items:flex-start;flex-direction:column;margin-bottom:18px}.studio-page-heading h1{font-size:27px}.studio-page-heading p{font-size:9px}.studio-outline-btn{width:100%;justify-content:center}
    .studio-stats-grid{grid-template-columns:1fr 1fr;gap:9px}.studio-stat-card{padding:13px;gap:9px;border-radius:14px}.studio-stat-icon{width:36px;height:36px;min-width:36px;border-radius:11px}.studio-stat-card strong{font-size:20px}.studio-stat-card em{display:none}
    .studio-card{padding:15px;border-radius:16px}.studio-card-heading h2{font-size:15px}.studio-overview-grid{gap:12px}.studio-health-list{grid-template-columns:1fr}.studio-video-grid{grid-template-columns:1fr 1fr;gap:10px}
    .studio-profile-editor{gap:12px}.studio-editor-main{gap:12px}.studio-editor-side{display:grid;grid-template-columns:1fr;gap:10px}.studio-editor-side .studio-save-btn,.studio-editor-side .studio-form-message{grid-column:auto}.studio-cover-preview{aspect-ratio:2.5/1;min-height:130px}.studio-field-grid.two{grid-template-columns:1fr}.studio-social-editor-grid{grid-template-columns:1fr}.studio-live-preview{order:2}.studio-save-btn{order:1}.studio-form-message{order:3}
    .studio-media-layout{gap:12px}.studio-photo-library{grid-template-columns:repeat(3,1fr);gap:4px}.studio-banner-library-item{grid-template-columns:110px 1fr auto}.studio-banner-library-item img{width:110px}.studio-file-drop{min-height:150px}
    .studio-account-avatar{align-items:flex-start;flex-direction:column}.studio-account-form .studio-save-btn{max-width:none}
}
@media(max-width:430px){
    .studio-main{padding-left:8px;padding-right:8px}.studio-stats-grid{grid-template-columns:1fr 1fr}.studio-stat-card{display:block}.studio-stat-icon{margin-bottom:9px}.studio-stat-card small{font-size:7px}.studio-stat-card strong{font-size:18px}
    .studio-video-grid{grid-template-columns:1fr}.studio-photo-library{grid-template-columns:repeat(2,1fr)}.studio-banner-library-item{grid-template-columns:86px 1fr auto}.studio-banner-library-item img{width:86px}.studio-card-heading>small{display:none}
    .studio-nav-item{font-size:6.5px}.studio-nav-item i{font-size:15px}
}


/* ==========================================================
   STUDIO - CÂMERA MULTIDESTINO / LOGOUT / ZAPS RESPONSIVO
   ========================================================== */
@media(max-width:900px){
    .public-profile-zaps-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:9px 12px}
}
@media(max-width:768px){
    .studio-header-camera{width:36px;padding:0;justify-content:center}.studio-header-camera span{display:none}
    .studio-logout-card{align-items:stretch;flex-direction:column}.studio-logout-btn{width:100%;justify-content:center;min-height:43px}
    .camera-publish-panel{bottom:10px;width:calc(100% - 16px);padding:11px;border-radius:15px;max-height:58dvh;overflow-y:auto}
    .camera-publish-head{align-items:flex-start;flex-direction:column;gap:4px;margin-bottom:9px}.camera-publish-head small{text-align:left;font-size:7px}
    .camera-destination-grid{grid-template-columns:1fr 1fr;gap:6px}.camera-destination{min-height:54px;padding:8px}.camera-destination>i{width:31px;height:31px;min-width:31px}.camera-destination small{font-size:6.5px}
    .camera-caption-field textarea{min-height:48px}.camera-publish-panel .camera-preview-actions{display:grid!important;grid-template-columns:1fr 1.4fr}.camera-publish-panel .camera-preview-actions button{width:100%;padding:0 8px}
    .public-profile-zaps-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px 5px}.public-profile-zap-card{min-height:250px;border-radius:11px}
}
@media(max-width:430px){
    .camera-publish-panel{bottom:max(7px,env(safe-area-inset-bottom));max-height:64dvh}
    .camera-destination-grid{grid-template-columns:1fr 1fr}.camera-destination{gap:6px}.camera-destination>i{width:28px;height:28px;min-width:28px;font-size:12px}.camera-destination strong{font-size:8px}
    .public-profile-zaps-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.public-profile-zap-card{min-height:220px}
}


/* ==========================================================
   CANAIS CLICÁVEIS / CÂMERA - AJUSTES MOBILE
   ========================================================== */
@media(max-width:768px){
    .channel-profile-clickable{
        min-height:24px;
    }

    .video-channel-avatar.channel-profile-clickable{
        min-height:38px;
    }

    .channel-name-link,
    .suggested-channel-link{
        -webkit-tap-highlight-color:rgba(255,204,0,.12);
    }
}


/* ==========================================================
   HEADER GLOBAL SOU TOP / RESPONSIVO
   Substitui a dependência antiga de .home-page.
   ========================================================== */
@media(max-width:900px){
    .soutop-global-header{
        grid-template-columns:auto 1fr auto;
        gap:9px;
    }

    .soutop-global-header .soutop-brand{
        min-width:120px;
    }

    .soutop-global-header .soutop-brand-title{
        display:inline-block!important;
        font-size:18px;
    }

    .soutop-global-header .soutop-search-wrap{
        order:3;
        grid-column:1 / -1;
        width:100%;
        max-width:none;
    }

    .soutop-global-header .soutop-search-wrap .soutop-search{
        height:38px;
    }

    .soutop-global-header .soutop-notification-btn{
        display:inline-flex!important;
        width:38px;
        height:38px;
        min-width:38px;
    }

    .soutop-global-header .soutop-actions{
        gap:7px;
        min-width:max-content;
    }
}

@media(max-width:768px){
    .soutop-global-header{
        grid-template-columns:auto 1fr auto!important;
        gap:7px;
        padding-left:9px;
        padding-right:9px;
        overflow:visible;
    }

    .soutop-global-header .soutop-brand{
        min-width:108px;
        gap:5px;
    }

    .soutop-global-header .soutop-brand-title{
        display:inline-block!important;
        font-size:17px!important;
    }

    .soutop-global-header .soutop-brand-star{
        display:inline-block!important;
        font-size:13px;
    }

    .soutop-global-header .soutop-notifications,
    .soutop-global-header .soutop-notification-btn{
        display:inline-flex!important;
    }

    .soutop-global-header .soutop-notification-btn{
        width:36px;
        height:36px;
        min-width:36px;
        font-size:16px;
    }

    .soutop-global-header .soutop-profile-story-avatar{
        width:46px;
        height:46px;
        min-width:46px;
    }

    .soutop-global-header .soutop-profile-story-avatar .soutop-header-profile-avatar,
    .soutop-global-header .soutop-profile-story-avatar .user-avatar{
        width:40px!important;
        height:40px!important;
        min-width:40px!important;
    }

    .soutop-global-header .soutop-profile-btn{
        gap:4px;
        padding:2px 3px;
    }

    .soutop-global-header .soutop-search-results{
        position:fixed;
        top:106px;
        left:8px;
        right:8px;
        width:auto;
        max-height:calc(100dvh - 118px);
        border-radius:15px;
    }

    .soutop-global-header .soutop-search-results-scroll{
        max-height:calc(100dvh - 118px);
    }
}

@media(max-width:430px){
    .soutop-global-header{
        gap:4px;
        padding-left:7px;
        padding-right:7px;
    }

    .soutop-global-header .soutop-brand{
        min-width:91px;
        gap:4px;
    }

    .soutop-global-header .soutop-brand-title{
        display:inline-block!important;
        font-size:15px!important;
    }

    .soutop-global-header .soutop-actions{
        gap:2px;
    }

    .soutop-global-header .soutop-upload-btn{
        width:34px;
        min-width:34px;
        height:34px;
        padding:0!important;
        justify-content:center;
    }

    .soutop-global-header .soutop-upload-btn span{
        display:none!important;
    }

    .soutop-global-header .soutop-notification-btn{
        width:34px;
        height:34px;
        min-width:34px;
    }

    .soutop-global-header .soutop-profile-story-avatar{
        width:43px;
        height:43px;
        min-width:43px;
    }

    .soutop-global-header .soutop-profile-story-avatar .soutop-header-profile-avatar,
    .soutop-global-header .soutop-profile-story-avatar .user-avatar{
        width:37px!important;
        height:37px!important;
        min-width:37px!important;
    }

    .soutop-global-header .soutop-profile-btn .fa-chevron-down{
        display:none;
    }

    .soutop-global-header .soutop-search-wrap .soutop-search{
        height:36px;
    }

    .soutop-global-header .soutop-search-results{
        top:99px;
        left:5px;
        right:5px;
        max-height:calc(100dvh - 110px);
        border-radius:13px;
    }

    .soutop-global-header .soutop-search-results-scroll{
        max-height:calc(100dvh - 110px);
    }
}

/* ==========================================================
   ETAPA 5 - MENSAGENS PRIVADAS / RESPONSIVO
   Um único bloco responsivo, sem regras duplicadas.
   ========================================================== */
@media(max-width:900px){
    .messages-app{grid-template-columns:310px minmax(0,1fr)}
    .messages-thread{padding-left:18px;padding-right:18px}
    .public-profile-actions{gap:8px}
    .public-profile-message-btn{min-height:43px;padding:0 14px;font-size:12px}
}

@media(max-width:768px){
    body.messages-page{height:100%;overflow:hidden!important}
    body.messages-page{padding-bottom:0!important}
    .messages-page .soutop-header{display:none!important}

    .messages-page .messages-app{
        --messages-header-offset:0px;
        width:100%;
        height:var(--messages-viewport-height,100dvh);
        max-height:var(--messages-viewport-height,100dvh);
        display:block;
        position:relative;
        overflow:hidden;
        border:0;
    }

    .messages-sidebar{
        position:absolute;inset:0;width:100%;height:100%;
        border:0;z-index:1;background:#080a0d;
    }
    .messages-sidebar-head{height:64px;flex-basis:64px;padding:9px 14px 7px;padding-top:max(9px,env(safe-area-inset-top))}
    .messages-sidebar-head h1{font-size:21px}
    .messages-sidebar-head span{font-size:8px}
    .messages-search{margin-left:10px;margin-right:10px}
    .messages-conversation-list{padding-left:5px;padding-right:5px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
    .messages-conversation-item{grid-template-columns:50px minmax(0,1fr) auto;padding:9px 8px}
    .messages-avatar-wrap,.messages-avatar-wrap img{width:50px;height:50px}

    .messages-chat{
        position:absolute;inset:0;height:100%;z-index:2;
        transform:translateX(100%);transition:transform .22s ease;background:#090b0e;
    }
    body.messages-chat-open .messages-chat{transform:translateX(0)}
    .messages-chat-empty{display:none}
    .messages-chat-active{height:100%;grid-template-rows:56px minmax(0,1fr) auto auto}
    .messages-chat-header{height:56px!important;min-height:56px!important;padding:0 8px!important;padding-top:env(safe-area-inset-top)!important}
    .messages-mobile-back{display:flex}
    .messages-chat-user img{width:38px;height:38px}

    .messages-thread{padding:12px 10px 8px!important}
    .messages-bubble{max-width:82%;font-size:12px}
    .messages-bubble-image{max-width:260px;max-height:300px}

    .messages-image-preview{padding:4px 8px 0}
    .messages-image-preview img{width:60px;height:60px}

    .messages-composer{
        min-height:44px;max-height:92px;
        margin:4px 7px max(5px,env(safe-area-inset-bottom));
        padding:4px 5px;border-radius:16px;gap:4px;
    }
    .messages-composer textarea{
        min-height:34px;height:34px;max-height:68px;
        padding:7px 4px;font-size:12px;
    }
    .messages-emoji-btn,.messages-image-btn,.messages-send-btn{width:34px;height:34px;min-width:34px}
    .messages-emoji-panel{left:8px;bottom:58px;width:250px;grid-template-columns:repeat(8,1fr)}

    .public-profile-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%;gap:8px}
    .public-profile-fan-btn,.public-profile-message-btn{width:100%!important;min-width:0;padding-left:8px;padding-right:8px}
    .public-profile-owner-btn{grid-column:1 / -1;width:100%!important}
}

@media(max-width:430px){
    .messages-sidebar-head{height:60px;flex-basis:60px}
    .messages-home-btn{width:36px;height:36px}
    .messages-search{height:40px;margin-bottom:7px}
    .messages-conversation-copy strong{font-size:12px}
    .messages-conversation-copy small{font-size:9px}
    .messages-bubble{max-width:86%;padding:9px 11px 6px}
    .messages-emoji-panel{width:238px;padding:8px}
}

/* Tablets/dispositivos touch em paisagem: preserva as duas colunas,
   mas usa a altura visual real quando o teclado aparece. */
@media (min-width:769px) and (max-width:1100px) and (pointer:coarse){
    .messages-page .messages-app{
        height:calc(var(--messages-viewport-height,100dvh) - 64px);
        max-height:calc(var(--messages-viewport-height,100dvh) - 64px);
    }
    .messages-page .messages-chat-active{grid-template-rows:58px minmax(0,1fr) auto auto}
    .messages-page .messages-thread{padding-bottom:8px}
    .messages-page .messages-composer{margin-bottom:8px}
}

/* ==========================================================
   TOPS DA SEMANA / RESPONSIVO
   ========================================================== */
@media(max-width:1180px){
    .weekly-tops-page .weekly-tops-content{
        padding-left:24px!important;
        padding-right:24px!important;
    }

    .weekly-ranking-row{
        grid-template-columns:38px 102px minmax(0,1fr) 132px 110px 14px;
        gap:10px;
    }

    .weekly-creators-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:980px){
    .weekly-tops-podium{
        grid-template-columns:1fr 1fr;
        align-items:stretch;
    }

    .weekly-podium-card.position-1{
        grid-column:1 / -1;
        grid-row:1;
        transform:none;
    }

    .weekly-podium-card.position-1:hover{
        transform:translateY(-4px);
    }

    .weekly-podium-card.position-2{
        grid-column:1;
        grid-row:2;
    }

    .weekly-podium-card.position-3{
        grid-column:2;
        grid-row:2;
    }

    .weekly-ranking-row{
        grid-template-columns:38px 96px minmax(0,1fr) 125px 18px;
    }

    .weekly-ranking-metrics{
        display:none;
    }
}

@media(max-width:768px){
    body.weekly-tops-page{
        padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;
    }

    .weekly-tops-page .weekly-tops-content{
        width:100%;
        margin-left:0;
        padding:14px 10px 36px!important;
    }

    .weekly-tops-hero{
        min-height:auto;
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
        padding:24px 20px;
        border-radius:18px;
    }

    .weekly-tops-hero h1{
        font-size:33px;
    }

    .weekly-tops-hero p{
        font-size:11px;
    }

    .weekly-tops-hero-badge{
        width:100%;
        min-width:0;
    }

    .weekly-tops-categories{
        margin-left:-1px;
        padding-bottom:18px;
    }

    .weekly-tops-section-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
        margin-bottom:13px;
    }

    .weekly-tops-section-heading h2{
        font-size:19px;
    }

    .weekly-tops-section-heading p{
        display:none;
    }

    .weekly-tops-podium{
        grid-template-columns:1fr;
        gap:12px;
    }

    .weekly-podium-card.position-1,
    .weekly-podium-card.position-2,
    .weekly-podium-card.position-3{
        grid-column:auto;
        grid-row:auto;
        transform:none;
    }

    .weekly-podium-card{
        border-radius:16px;
    }

    .weekly-podium-media,
    .weekly-podium-card.position-1 .weekly-podium-media{
        aspect-ratio:16/9;
    }

    .weekly-podium-body{
        padding:13px 14px 15px;
    }

    .weekly-ranking-list{
        border-radius:15px;
    }

    .weekly-ranking-row{
        min-height:78px;
        padding:9px 8px;
        grid-template-columns:33px 88px minmax(0,1fr) 16px;
        gap:8px;
    }

    .weekly-ranking-stars,
    .weekly-ranking-metrics{
        display:none;
    }

    .weekly-ranking-thumb{
        width:88px;
    }

    .weekly-ranking-copy strong{
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        line-height:1.35;
    }

    .weekly-creators-grid{
        grid-template-columns:1fr;
    }

    .weekly-creator-card{
        border-radius:15px;
    }
}

@media(max-width:430px){
    .weekly-tops-hero{
        padding:20px 16px;
    }

    .weekly-tops-hero h1{
        font-size:29px;
    }

    .weekly-tops-period{
        font-size:9px;
    }

    .weekly-tops-categories a{
        min-height:34px;
        padding:0 12px;
        font-size:10px;
    }

    .weekly-podium-title{
        font-size:13px;
    }

    .weekly-podium-star strong{
        font-size:20px;
    }

    .weekly-ranking-row{
        grid-template-columns:28px 78px minmax(0,1fr) 12px;
        gap:7px;
    }

    .weekly-ranking-thumb{
        width:78px;
    }

    .weekly-ranking-position{
        font-size:15px;
    }

    .weekly-ranking-copy strong{
        font-size:10px;
    }

    .weekly-ranking-copy small{
        font-size:8px;
    }

    .weekly-creator-card{
        padding:14px;
        gap:10px;
    }

    .weekly-creator-card>img{
        width:46px;
        height:46px;
        min-width:46px;
    }

    .weekly-creator-score strong{
        font-size:15px;
    }
}



/* ==========================================================
   TOPS DA SEMANA - RANKING PREMIUM / RESPONSIVO
   ========================================================== */

@media(max-width:1180px){
    .weekly-tops-page .weekly-tops-content.weekly-ranking-layout{
        padding-left:24px!important;
        padding-right:24px!important;
    }

    .weekly-ranking-table-row{
        grid-template-columns:44px 110px minmax(0,1fr) 130px 100px 18px;
        gap:12px;
    }

    .weekly-ranking-table-thumb{
        width:110px;
        height:54px;
    }
}

@media(max-width:980px){
    .weekly-ranking-podium{
        grid-template-columns:1fr 1fr;
        gap:78px 15px;
    }

    .weekly-ranking-podium-card.rank-1{
        grid-column:1/-1;
        grid-row:1;
        transform:none;
        max-width:620px;
        width:100%;
        margin:0 auto;
    }

    .weekly-ranking-podium-card.rank-2{
        grid-column:1;
        grid-row:2;
    }

    .weekly-ranking-podium-card.rank-3{
        grid-column:2;
        grid-row:2;
    }

    .weekly-ranking-table-row{
        grid-template-columns:42px 100px minmax(0,1fr) 120px 18px;
    }

    .weekly-ranking-table-metrics{
        display:none;
    }

    .weekly-ranking-creators-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:768px){
    .weekly-tops-page .weekly-tops-content.weekly-ranking-layout{
        width:100%;
        margin-left:0;
        padding:22px 12px 36px!important;
    }

    .weekly-ranking-header{
        padding-top:2px;
    }

    .weekly-ranking-header h1{
        font-size:34px;
    }

    .weekly-ranking-header p{
        margin-top:8px;
        font-size:11px;
    }

    .weekly-ranking-filters{
        justify-content:flex-start;
        padding:2px 0 70px;
        margin-bottom: 55px;
    }

    .weekly-ranking-filters a{
        min-height:34px;
        padding:0 14px;
        font-size:10px;
    }

    .weekly-ranking-podium{
        grid-template-columns:1fr;
        gap:76px;
    }

    .weekly-ranking-podium-card.rank-1,
    .weekly-ranking-podium-card.rank-2,
    .weekly-ranking-podium-card.rank-3{
        grid-column:auto;
        grid-row:auto;
        max-width:none;
        transform:none;
        margin:0;
    }

    .weekly-ranking-podium-card.rank-1{
        order:-1;
    }

    .weekly-ranking-podium-card.rank-2{
        order:0;
    }

    .weekly-ranking-podium-card.rank-3{
        order:1;
    }

    .weekly-ranking-podium{
        display:flex;
        flex-direction:column;
    }

    .weekly-ranking-table-row{
        min-height:74px;
        padding:8px 9px;
        grid-template-columns:34px 90px minmax(0,1fr) 16px;
        gap:8px;
    }

    .weekly-ranking-table-thumb{
        width:90px;
        height:52px;
    }

    .weekly-ranking-table-stars,
    .weekly-ranking-table-metrics{
        display:none;
    }

    .weekly-ranking-table-position{
        font-size:17px;
    }

    .weekly-ranking-table-copy strong{
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        font-size:11px;
        line-height:1.3;
    }

    .weekly-ranking-creators{
        padding:16px 12px;
    }

    .weekly-ranking-creators-heading{
        align-items:flex-start;
    }

    .weekly-ranking-creators-heading>i{
        font-size:21px;
        margin-top:2px;
    }

    .weekly-ranking-creators-heading h2{
        font-size:18px;
        line-height:1.2;
    }

    .weekly-ranking-creators-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:430px){
    .weekly-ranking-header h1{
        font-size:29px;
    }

    .weekly-ranking-header p{
        font-size:10px;
    }

    .weekly-ranking-filters{
        padding-bottom:68px;
    }

    .weekly-ranking-podium{
        gap:72px;
    }

    .weekly-ranking-medal{
        top:-58px;
        transform:translateX(-50%) scale(.88);
    }

    .weekly-ranking-podium-body{
        min-height:200px;
        padding-left:13px;
        padding-right:13px;
    }

    .weekly-ranking-title{
        font-size:13px;
    }

    .weekly-ranking-star-total strong{
        font-size:24px;
    }

    .rank-1 .weekly-ranking-star-total strong{
        font-size:27px;
    }

    .weekly-ranking-podium-meta{
        gap:10px;
        font-size:8px;
    }

    .weekly-ranking-table-row{
        grid-template-columns:29px 78px minmax(0,1fr) 12px;
        gap:7px;
    }

    .weekly-ranking-table-thumb{
        width:78px;
        height:47px;
    }

    .weekly-ranking-table-position{
        font-size:15px;
    }

    .weekly-ranking-table-copy strong{
        font-size:10px;
    }

    .weekly-ranking-table-copy span{
        font-size:8px;
    }

    .weekly-ranking-creator-top{
        grid-template-columns:auto 48px minmax(0,1fr);
        gap:8px;
    }

    .weekly-ranking-creator-top>img{
        width:48px;
        height:48px;
        min-width:48px;
    }
}


/* ==========================================================
   ETAPA 9 - GAMIFICAÇÃO / RESPONSIVO
   ========================================================== */
@media(max-width:768px){
    .public-profile-gamification{
        margin:0 12px 18px;
        padding:12px;
        border-radius:13px;
    }
    .public-profile-gamification-head{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }
    .public-profile-gamification-breakdown{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:6px 10px;
    }
    .studio-level-breakdown{
        grid-template-columns:1fr 1fr;
    }
    .studio-level-top{
        grid-template-columns:auto minmax(0,1fr);
    }
    .studio-level-points{
        grid-column:1 / -1;
        justify-self:start;
        margin-top:2px;
    }
    .studio-milestones-title{
        align-items:flex-start;
        flex-direction:column;
        gap:2px;
    }
}
@media(max-width:430px){
    .public-profile-level span{
        display:none;
    }
    .public-profile-gamification-breakdown{
        grid-template-columns:1fr 1fr;
        font-size:8px;
    }
    .studio-level-breakdown{
        grid-template-columns:1fr 1fr;
        gap:5px;
    }
    .studio-milestone{
        grid-template-columns:28px minmax(0,1fr);
    }
    .studio-milestone em{
        grid-column:2;
        justify-self:start;
        margin-top:-3px;
    }
}


/* ==========================================================
   SIDEBAR RECOLHÍVEL - RESPONSIVO
   No mobile (<=768px) continua valendo o menu inferior/PWA.
   ========================================================== */
@media(max-width:900px) and (min-width:769px){
    .soutop-global-header .soutop-header-left{
        min-width:max-content;
    }

    .soutop-global-header .soutop-brand{
        min-width:auto;
    }

    .soutop-sidebar-toggle{
        width:36px;
        height:36px;
        min-width:36px;
    }
}

@media(max-width:768px){
    .soutop-sidebar-toggle{
        display:none!important;
    }

    .soutop-global-header .soutop-header-left{
        display:flex;
        align-items:center;
        min-width:0;
    }
}


/* ==========================================================
   STUDIO - MENU HAMBÚRGUER MOBILE
   Substitui a antiga navegação inferior de 5 ícones.
   ========================================================== */
@media(max-width:768px){
    body.studio-page{padding-bottom:0!important}
    body.studio-mobile-menu-open{overflow:hidden!important}

    .studio-header{
        position:sticky;top:0;z-index:3400;height:58px;
        padding:0 10px;gap:8px;
    }

    .studio-header-left{
        display:flex;align-items:center;gap:7px;min-width:0;
    }

    .studio-mobile-menu-toggle{
        width:40px;height:40px;min-width:40px;padding:0;
        border:1px solid rgba(255,255,255,.09);
        border-radius:11px;
        display:inline-flex!important;
        align-items:center;justify-content:center;
        background:rgba(255,255,255,.045);
        color:#fff;font-size:18px;cursor:pointer;
    }

    .studio-brand{min-width:0}
    .studio-brand strong{font-size:16px}
    .studio-brand span{display:none}

    .studio-header-actions{margin-left:auto;gap:6px}
    .studio-header-link,.studio-header-primary,.studio-header-camera{
        width:36px;height:36px;min-width:36px;padding:0;justify-content:center;
    }
    .studio-header-link span,.studio-header-primary span,.studio-header-camera span{display:none}
    .studio-header-avatar{width:34px;height:34px;min-width:34px}

    .studio-layout{display:block}

    .studio-sidebar{
        position:fixed!important;
        top:0!important;left:0!important;right:auto!important;bottom:0!important;
        width:min(86vw,330px)!important;height:100dvh!important;
        z-index:3700!important;
        display:flex!important;flex-direction:column!important;
        padding:max(18px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom))!important;
        background:#090c10!important;
        border-right:1px solid rgba(255,255,255,.09)!important;
        border-top:0!important;
        box-shadow:18px 0 55px rgba(0,0,0,.55);
        transform:translateX(-105%);
        transition:transform .24s ease;
        overflow-y:auto;
        overscroll-behavior:contain;
    }

    body.studio-mobile-menu-open .studio-sidebar{transform:translateX(0)}

    .studio-mobile-menu-close{
        position:absolute;top:max(14px,env(safe-area-inset-top));right:12px;
        width:38px;height:38px;border:0;border-radius:10px;
        display:inline-flex!important;align-items:center;justify-content:center;
        background:rgba(255,255,255,.06);color:#fff;font-size:18px;cursor:pointer;
        z-index:2;
    }

    .studio-user-card{
        display:flex!important;justify-content:flex-start!important;align-items:center!important;
        gap:11px!important;min-height:72px;
        padding:10px 48px 16px 8px!important;margin:0 0 10px!important;
        border-bottom:1px solid rgba(255,255,255,.07);
    }
    .studio-user-card img{width:48px!important;height:48px!important;min-width:48px!important}
    .studio-user-card div{display:grid!important;min-width:0;gap:3px}
    .studio-user-card strong{font-size:13px!important}
    .studio-user-card small{font-size:10px!important}

    .studio-nav{
        display:grid!important;grid-template-columns:1fr!important;gap:4px!important;padding:2px 0 10px;
    }

    .studio-nav-item,
    .studio-nav-item:nth-child(n+6){
        width:100%!important;min-height:50px!important;
        display:flex!important;flex-direction:row!important;
        align-items:center!important;justify-content:flex-start!important;
        gap:14px!important;padding:0 14px!important;
        border-radius:11px!important;font-size:13px!important;line-height:1.2!important;
    }

    .studio-nav-item span{display:block!important;font-size:13px!important}
    .studio-nav-item i{
        width:22px!important;min-width:22px;font-size:17px!important;text-align:center;
    }
    .studio-nav-item.active{
        background:rgba(255,204,0,.09)!important;
        color:var(--soutop-yellow)!important;
        box-shadow:inset 3px 0 0 var(--soutop-yellow)!important;
    }

    .studio-sidebar-bottom{
        display:block!important;margin-top:auto!important;
        padding:14px 8px 4px!important;
        border-top:1px solid rgba(255,255,255,.07)!important;
    }
    .studio-sidebar-bottom a{
        min-height:44px;display:flex!important;align-items:center;gap:10px;
        color:#a8afb8!important;font-size:11px!important;
    }

    .studio-mobile-menu-overlay{
        position:fixed;inset:0;width:100%;height:100%;
        z-index:3650;display:block!important;padding:0;border:0;
        background:rgba(0,0,0,.64);
        backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
        opacity:0;visibility:hidden;pointer-events:none;
        transition:opacity .2s ease,visibility .2s ease;
    }
    body.studio-mobile-menu-open .studio-mobile-menu-overlay{
        opacity:1;visibility:visible;pointer-events:auto;
    }

    .studio-main{width:100%;padding:20px 10px 34px!important}
}

@media(max-width:430px){
    .studio-mobile-menu-toggle{width:38px;height:38px;min-width:38px}
    .studio-sidebar{width:min(90vw,315px)!important}
    .studio-nav-item,.studio-nav-item:nth-child(n+6){min-height:49px!important;font-size:12.5px!important}
    .studio-nav-item span{font-size:12.5px!important}
}

@media(max-width:900px){.achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.achievement-grid{grid-template-columns:1fr}.achievement-card{padding:14px}.achievement-summary{padding:15px}.achievement-summary strong{font-size:17px}.public-achievements-list{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.public-achievement-badge{white-space:nowrap}}


/* ==========================================================
   PERFIL PÚBLICO - 3 CONQUISTAS POR LINHA NO RESPONSIVO
   Tablet e celular.
   ========================================================== */
@media (max-width: 900px) {
    .public-achievements-list {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .public-achievement-badge {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center;
        padding: 7px 6px !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 9px !important;
    }

    .public-achievement-badge i {
        flex: 0 0 auto;
        font-size: 10px;
    }
}

@media (max-width: 430px) {
    .public-achievements-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .public-achievement-badge {
        gap: 4px !important;
        padding: 6px 4px !important;
        font-size: 8px !important;
    }

    .public-achievement-badge i {
        font-size: 9px;
    }
}


/* ==========================================================
   CORREÇÃO FINAL - CANAL MOBILE: 3 CONQUISTAS COMPLETAS POR LINHA
   ========================================================== */
@media (max-width: 600px) {
    .public-profile-page .public-achievements {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .public-profile-page .public-achievements-list {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        overflow: visible !important;
        overflow-x: visible !important;
        padding: 0 !important;
    }

    .public-profile-page .public-achievement-badge {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 48px;
        margin: 0 !important;
        padding: 6px 3px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;

        border-radius: 10px !important;
        white-space: normal !important;
        overflow: hidden !important;

        text-align: center !important;
        line-height: 1.15 !important;
        font-size: 7.5px !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    .public-profile-page .public-achievement-badge i {
        flex: 0 0 auto !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 380px) {
    .public-profile-page .public-achievements-list {
        gap: 4px !important;
    }

    .public-profile-page .public-achievement-badge {
        min-height: 46px;
        padding: 5px 2px !important;
        font-size: 7px !important;
    }
}


/* ==========================================================
   PERFIL PÚBLICO - AJUSTE ESPECÍFICO PARA TABLET
   4 conquistas por linha + ações sem corte.
   ========================================================== */
@media (min-width: 601px) and (max-width: 1100px) {

    /* Conquistas: 4 por linha, sem scroll horizontal */
    .public-profile-page .public-achievements,
    .public-profile-page .public-achievements-list {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        overflow-x: visible !important;
    }

    .public-profile-page .public-achievements-list {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 0 !important;
    }

    .public-profile-page .public-achievement-badge {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 7px 5px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;

        white-space: normal !important;
        overflow: hidden !important;
        text-align: center !important;
        line-height: 1.15 !important;
        font-size: 8.5px !important;
        border-radius: 10px !important;
    }

    .public-profile-page .public-achievement-badge i {
        flex: 0 0 auto;
        font-size: 10px !important;
    }

    /*
     * Ações do perfil no tablet:
     * evita que "Mensagem" ultrapasse a borda direita.
     */
    .public-profile-page .public-profile-name-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .public-profile-page .public-profile-name-row > div:first-child {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    .public-profile-page .public-profile-stats {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 520px;
        margin-top: 4px !important;
    }

    .public-profile-page .public-profile-actions {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 520px;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        justify-self: start !important;
    }

    .public-profile-page .public-profile-fan-btn,
    .public-profile-page .public-profile-owner-btn,
    .public-profile-page .public-profile-message-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
}

/* Mantém o celular com 3 conquistas por linha */
@media (max-width: 600px) {
    .public-profile-page .public-achievements-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* ==========================================================
   PERFIL PÚBLICO - TABLET REAL / VIEWPORT AMPLO
   4 conquistas por linha + botões totalmente visíveis.
   Mantém celular em 3 por linha.
   ========================================================== */
@media (min-width: 601px) and (max-width: 1600px) and (pointer: coarse) {
    .public-profile-page .public-profile-summary,
    .public-profile-page .public-profile-main-info,
    .public-profile-page .public-profile-name-row,
    .public-profile-page .public-profile-name-row > div:first-child {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .public-profile-page .public-profile-name-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .public-profile-page .public-profile-name-row > div:first-child {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .public-profile-page .public-achievements {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .public-profile-page .public-achievements-list {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .public-profile-page .public-achievement-badge {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 7px 5px !important;
        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;

        white-space: normal !important;
        overflow: hidden !important;
        text-align: center !important;
        line-height: 1.15 !important;
        font-size: 8.5px !important;
        border-radius: 10px !important;
    }

    .public-profile-page .public-achievement-badge i {
        flex: 0 0 auto !important;
        font-size: 10px !important;
    }

    .public-profile-page .public-profile-stats {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 560px !important;
        min-width: 0 !important;
        margin-top: 4px !important;
        box-sizing: border-box !important;
    }

    .public-profile-page .public-profile-actions {
        grid-column: 1 !important;
        grid-row: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 560px !important;
        min-width: 0 !important;
        justify-self: start !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .public-profile-page .public-profile-fan-btn,
    .public-profile-page .public-profile-owner-btn,
    .public-profile-page .public-profile-message-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
}

/* Celular continua exatamente com 3 conquistas por linha. */
@media (max-width: 600px) {
    .public-profile-page .public-achievements-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* ==========================================================
   PERFIL PÚBLICO - 3 CONQUISTAS POR LINHA NO CELULAR
   Regra final: mantém os cards maiores e mais legíveis.
   ========================================================== */
@media (max-width: 600px) {
    .public-profile-page .public-achievements-list {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .public-profile-page .public-achievement-badge {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 6px 3px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;

        white-space: normal !important;
        overflow: hidden !important;
        text-align: center !important;
        line-height: 1.15 !important;
        font-size: 7.5px !important;
        overflow-wrap: anywhere !important;
    }

    .public-profile-page .public-achievement-badge i {
        flex: 0 0 auto !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 380px) {
    .public-profile-page .public-achievements-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    .public-profile-page .public-achievement-badge {
        min-height: 46px !important;
        padding: 5px 2px !important;
        font-size: 7px !important;
    }
}

/* ==========================================================
   SOU TOP - CONFIGURAÇÕES / RESPONSIVO
   ========================================================== */
@media(max-width:980px){.settings-page .settings-content{padding:24px 20px!important}.settings-layout{grid-template-columns:210px minmax(0,1fr)}}
@media(max-width:768px){.settings-page{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}.settings-page .settings-content{width:100%;margin-left:0;padding:14px 10px 28px!important}.settings-hero{padding:22px 18px;border-radius:16px}.settings-hero h1{font-size:25px}.settings-layout{display:block}.settings-nav{position:static;display:flex;overflow-x:auto;gap:6px;margin-bottom:12px;padding:6px;scrollbar-width:none}.settings-nav::-webkit-scrollbar{display:none}.settings-nav button{flex:0 0 auto;min-height:38px;font-size:9px}.settings-card{border-radius:14px}.settings-card-head{padding:15px 14px 12px}.settings-row{padding:12px 14px;min-height:62px}.settings-row select{min-width:125px;max-width:145px}.settings-theme-grid{gap:6px;padding:12px 14px}.settings-theme-card{min-height:82px}.settings-topics{padding:12px 14px}.settings-toast{left:10px;right:10px;bottom:calc(82px + env(safe-area-inset-bottom));text-align:center}}
@media(max-width:430px){.settings-hero h1{font-size:22px}.settings-row{padding-left:12px;padding-right:12px}.settings-row small{max-width:210px}.settings-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-theme-card strong{font-size:8px}}


/* ==========================================================
   TEMA CLARO GLOBAL - AJUSTES RESPONSIVOS
   ========================================================== */
@media (max-width:768px){
    html[data-soutop-theme="light"] body{
        background:
            radial-gradient(circle at 20% 0%,rgba(255,204,0,.08),transparent 30%),
            radial-gradient(circle at 90% 0%,rgba(255,0,80,.05),transparent 30%),
            #f5f6f8!important;
    }

    html[data-soutop-theme="light"] .soutop-global-header,
    html[data-soutop-theme="light"] .soutop-header{
        background:rgba(255,255,255,.98)!important;
    }

    html[data-soutop-theme="light"] .mobile-bottom-nav__camera-ring{
        border-color:#fff!important;
    }

    html[data-soutop-theme="light"] .notification-panel-header{
        background:#f7f8f9!important;
    }
}


/* ==========================================================
   SOU TOP - ACESSIBILIDADE / AJUSTES RESPONSIVOS
   ========================================================== */
@media(max-width:768px){
    /*
     * Texto grande no mobile precisa quebrar linha em vez de alargar a tela.
     */
    html[data-soutop-font-size="large"] :where(
        .settings-row,.settings-card-head,.notification-text,
        .messages-conversation-copy,.video-details,.public-profile-main-info
    ),
    html[data-soutop-font-size="xlarge"] :where(
        .settings-row,.settings-card-head,.notification-text,
        .messages-conversation-copy,.video-details,.public-profile-main-info
    ){
        min-width:0!important;
        overflow-wrap:anywhere;
    }

    html[data-soutop-font-size="large"] .settings-row,
    html[data-soutop-font-size="xlarge"] .settings-row{
        align-items:flex-start;
        gap:10px;
    }

    html[data-soutop-font-size="xlarge"] .settings-row{
        flex-wrap:wrap;
    }

    html[data-soutop-font-size="xlarge"] .settings-row > :last-child{
        margin-left:auto;
    }

    html[data-soutop-font-size="large"] .mobile-bottom-nav__item,
    html[data-soutop-font-size="xlarge"] .mobile-bottom-nav__item{
        line-height:1.15!important;
    }

    /*
     * Alto contraste no menu inferior e cabeçalho mobile.
     */
    html[data-soutop-high-contrast="1"] .mobile-bottom-nav{
        border-top-width:2px!important;
    }

    html[data-soutop-high-contrast="1"] .soutop-global-header{
        border-bottom-width:2px!important;
    }
}

@media(max-width:430px){
    /*
     * Em telas pequenas, "Muito grande" prioriza leitura, permitindo
     * mais altura nos itens de configuração em vez de cortar conteúdo.
     */
    html[data-soutop-font-size="xlarge"] .settings-row{
        min-height:74px;
    }

    html[data-soutop-font-size="xlarge"] .settings-row small{
        max-width:none!important;
    }
}

/* SOU TOP Salvos - responsividade isolada */
@media(max-width:768px){
    .salvos-page .saved-shell{display:block!important}
    .salvos-page .saved-content{width:100%!important;margin-left:0!important;padding:16px 11px calc(100px + env(safe-area-inset-bottom))!important}
    .salvos-page .saved-hero{padding:20px 17px;gap:15px;align-items:flex-start;flex-direction:column;border-radius:17px}
    .salvos-page .saved-hero h1{font-size:28px}
    .salvos-page .saved-hero p{font-size:11px}
    .salvos-page .saved-hero-badge{padding:10px 13px}
    .salvos-page .saved-hero-badge>i{width:34px;height:34px;font-size:15px}
    .salvos-page .saved-hero-badge strong{font-size:20px}
    .salvos-page .saved-section-head{margin:23px 0 14px;align-items:flex-start}
    .salvos-page .saved-section-head h2{font-size:18px}
    .salvos-page .saved-section-head small{font-size:9px;text-align:right}
    .salvos-page .saved-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 9px}
    .salvos-page .saved-card-info{padding:10px 9px;gap:7px}
    .salvos-page .saved-creator-avatar{width:27px;height:27px;min-width:27px}
    .salvos-page .saved-card-title{font-size:11px}
    .salvos-page .saved-card-channel,.salvos-page .saved-card-meta{font-size:9px}
    .salvos-page .saved-remove-btn{width:27px;height:27px;font-size:12px}
    .salvos-page .saved-play{width:43px;height:43px;font-size:14px}
    .salvos-page .saved-empty{padding:40px 18px}
}
@media(max-width:450px){
    .salvos-page .saved-grid{grid-template-columns:1fr;gap:15px}
    .salvos-page .saved-card-info{padding:13px 12px;gap:10px}
    .salvos-page .saved-creator-avatar{width:36px;height:36px;min-width:36px}
    .salvos-page .saved-card-title{font-size:13px}
    .salvos-page .saved-card-channel,.salvos-page .saved-card-meta{font-size:10px}
    .salvos-page .saved-remove-btn{width:34px;height:34px}
    .salvos-page .saved-section-head small{display:none}
}


/* ==========================================================
   SOU TOP - LOGO HORIZONTAL / PÁGINAS INTERNAS RESPONSIVO
   ========================================================== */
@media (max-width: 900px){
    .soutop-brand > img.soutop-brand-logo{
        width:136px;
        height:46px;
    }

    .public-profile-brand > img.public-profile-brand-logo{
        width:132px;
        height:44px;
    }

    .studio-brand > img.studio-brand-logo{
        width:126px;
        height:40px;
    }
}

@media (max-width: 768px){
    .soutop-brand > img.soutop-brand-logo{
        width:125px;
        height:42px;
    }

    .public-profile-brand{left:60px;top:17px}
    .public-profile-brand > img.public-profile-brand-logo{
        width:120px;
        height:40px;
    }

    .studio-brand > img.studio-brand-logo{
        width:118px;
        height:38px;
    }

    .studio-brand span{
        display:none;
    }
}

@media (max-width: 430px){
    .soutop-brand > img.soutop-brand-logo{
        width:110px;
        height:37px;
    }

    .public-profile-brand > img.public-profile-brand-logo{
        width:108px;
        height:36px;
    }

    .studio-brand > img.studio-brand-logo{
        width:108px;
        height:35px;
    }
}