/* Reset e estilos gerais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}



body{
    font-family:'Poppins',sans-serif;
    background:#050505;
    color:#fff;
}

/* Cabeçalho */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    height: 56px;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border-bottom: 1px solid #e5e5e5;
}

.logo {
    display: flex;
    align-items: center;
}

.logo h1 {
    font-size: 20px;
    margin-left: 8px;
    color: #ff5252;
}

.search-bar {
    display: flex;
    align-items: center;
    flex: 0 1 728px;
    margin: 0 40px;
}

.search-bar input {
    height: 40px;
    flex: 1;
    padding: 0 16px;
    border: 1px solid #ccc;
    border-radius: 20px 0 0 20px;
    font-size: 16px;
}

.search-bar button {
    height: 40px;
    width: 64px;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 20px 20px 0;
    background-color: #f8f8f8;
    cursor: pointer;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #606060;
    display: flex;
    align-items: center;
    gap: 5px;
}

.upload-btn {
    background-color: #ff5252;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

.upload-btn:hover {
    background-color: #e04444;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* Modal de autenticação */
.auth-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.auth-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
}

.auth-tabs {
    display: flex;
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    border-bottom: 2px solid #eee;
}

.auth-tab.active {
    border-bottom: 2px solid #ff5252;
    font-weight: bold;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.auth-form button {
    width: 100%;
    padding: 12px;
    background-color: #ff5252;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.google-auth {
    text-align: center;
    margin-top: 15px;
}

.google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #4285F4;
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

.google-btn i {
    margin-right: 10px;
}

.auth-error {
    color: #ff5252;
    margin-bottom: 15px;
    text-align: center;
}

/* Conteúdo principal */
main {
    display: flex;
    margin-top: 56px;
}

/* Navegação lateral */
.sidebar {
    width: 240px;
    background-color: #fff;
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    padding: 12px 0;
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    gap: 10px;
}

.sidebar-item:hover {
    background-color: #f2f2f2;
}

.sidebar-item.active {
    background-color: #e5e5e5;
    font-weight: 100;
}

.sidebar-item i {
    margin-right: 16px;
    font-size: 18px;
    width: 24px;
    text-align: center;
}

/* Área de conteúdo */
.content {
    flex: 1;
    margin-left: 240px;
    padding: 24px;
}

/* Stories */
.stories-container {
    display: flex;
    overflow-x: auto;
    padding: 16px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid #e5e5e5;
    scrollbar-width: none; /* Firefox */
}

.stories-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.story {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 16px;
    cursor: pointer;
}

.story-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    margin-bottom: 8px;
}

.story-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid white;
}

.story-username {
    font-size: 12px;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Categorias */
.categories {
    display: flex;
    overflow-x: auto;
    padding: 16px 0;
    margin-bottom: 24px;
    scrollbar-width: none;
}

.categories::-webkit-scrollbar {
    display: none;
}

.category {
    padding: 8px 16px;
    background-color: #f2f2f2;
    border-radius: 16px;
    margin-right: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.category.active {
    background-color: #030303;
    color: white;
}

/* Grid de vídeos */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.video-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.video-thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.thumbnail-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}

.play-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
}

.video-card:hover .play-overlay {
    opacity: 1;
}

.video-player-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}

.video-player-wrap iframe,
.video-player-wrap video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

.processing-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #fff3cd;
    color: #856404;
    font-size: 12px;
    font-weight: 600;
}

.video-info {
    padding: 12px;
}

.video-title {
    font-weight: 500;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-channel {
    font-size: 14px;
    color: #606060;
    margin-bottom: 4px;
}

.video-metadata {
    display: flex;
    font-size: 12px;
    color: #606060;
}

.video-views::after {
    content: "•";
    margin: 0 4px;
}

.no-videos {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #606060;
}


.video-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.video-card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Modal de Stories */
.stories-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.story-content {
    position: relative;
    width: 300px;
    height: 533px;
    border-radius: 16px;
    overflow: hidden;
}

.story-content > img,
.story-content > video,
.story-content > iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
    background: #000;
}

#currentStoryImage,
#currentStoryVideo,
#currentStoryIframe {
    width: 100%;
    height: 100%;
}

.story-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    z-index: 4;
    pointer-events: none;
}

.story-nav button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    pointer-events: auto;
}

.close-story {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 6;
}

.story-user {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 58px;
    display: flex;
    align-items: center;
    color: white;
    z-index: 5;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.story-user-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.8);
}

.story-user span {
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#currentStoryVideo,
#currentStoryIframe {
    display: none;
}

.story-empty {
    font-size: 13px;
    color: #777;
    padding: 12px 0;
}


.story-progress-container{
    position:absolute;
    top:0;
    left:0;
    right:0;
    display:flex;
    gap:4px;
    padding:10px;
    z-index:10;
}

.story-progress-item{
    flex:1;
    height:3px;
    background:rgba(255,255,255,.3);
    border-radius:999px;
    overflow:hidden;
}

.story-progress-fill{
    width:0%;
    height:100%;
    background:#fff;
    transition:width .1s linear;
}

.story-reply-box{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:11;
    display:flex;
    gap:8px;
}

.story-reply-box input{
    flex:1;
    border:none;
    border-radius:999px;
    padding:12px 15px;
    background:rgba(255,255,255,.15);
    color:#fff;
    backdrop-filter:blur(4px);
}

.story-reply-box button{
    border:none;
    border-radius:50%;
    width:45px;
    height:45px;
    background:#ff5252;
    color:#fff;
    cursor:pointer;
}

.story-views{
    position:absolute;
    bottom:70px;
    right:15px;
    z-index:11;
    color:#fff;
    font-size:13px;
    background:rgba(0,0,0,.4);
    padding:6px 10px;
    border-radius:999px;
}






/* Correção isolada do botão fechar dos stories */
.close-story,
#closeStoryBtn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0,0,0,.65) !important;
    color: #fff !important;
    z-index: 999999 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.close-story i,
#closeStoryBtn i {
    pointer-events: none !important;
}


/* Elementos usados apenas no responsivo */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #030303;
    font-size: 20px;
    cursor: pointer;
}

.sidebar-overlay {
    display: none;
}


/* ==========================================================
   SOU TOP - Visual dark moderno: YouTube + Stories + Shorts
   ========================================================== */
   :root {
    --soutop-bg: #000000;
    --soutop-surface: #181818;
    --soutop-surface-2: #302f2f94;
    --soutop-border: #2a2a2a;
    --soutop-text: #ffffff;
    --soutop-muted: #aaaaaa;
    --soutop-yellow: #ffcc00;
    --soutop-pink: #ff0050;
    --soutop-red: #ff2f4f;
}

html {
    background: var(--soutop-bg);
}

body {
    background: var(--soutop-bg) !important;
    color: var(--soutop-text) !important;
}

header {
    background: rgba(0, 0, 0) !important;
    /*border-bottom: 1px solid var(--soutop-border) !important;*/
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 35px rgba(0,0,0,.32);
}

.logo i {
    color: var(--soutop-yellow) !important;
    filter: drop-shadow(0 0 12px rgba(255,204,0,.35));
}

.logo h1 {
    color: var(--soutop-text) !important;
    font-weight: 900;
    letter-spacing: .5px;
}

.logo h1::after {
    content: "⭐";
    margin-left: 6px;
    font-size: 14px;
    vertical-align: middle;
}

.search-bar input {
    background: #121212 !important;
    border: 1px solid var(--soutop-border) !important;
    color: var(--soutop-text) !important;
    outline: none;
}

.search-bar input::placeholder {
    color: #777;
}

.search-bar input:focus {
    border-color: rgba(255,204,0,.65) !important;
    box-shadow: 0 0 0 3px rgba(255,204,0,.10);
}

.search-bar button {
    background: var(--soutop-surface-2) !important;
    border-color: var(--soutop-border) !important;
    color: var(--soutop-text) !important;
}

.user-actions button {
    color: var(--soutop-text) !important;
}

.upload-btn,
.story-reply-box button,
.auth-form button {
    background: linear-gradient(135deg, var(--soutop-yellow), var(--soutop-pink)) !important;
    color: #101010 !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(255,0,80,.18);
}

.upload-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.user-avatar {
    border: 2px solid var(--soutop-yellow);
}

main {
    background: transparent !important;
}

.sidebar {
    background: rgba(0, 0, 0) !important;
    border-right: 1px solid var(--soutop-border);
    color: var(--soutop-text);
}

.sidebar-item {
    color: var(--soutop-muted);
    margin: 3px 10px;
    border-radius: 12px;
    transition: .2s ease;
    text-decoration: none;
}

.sidebar-item:hover {
    background: var(--soutop-surface-2) !important;
    color: var(--soutop-yellow);
}

.sidebar-item.active {
    background: var(--soutop-surface-2);
    color: var(--soutop-yellow);
}

.sidebar-item i {
    color: var(--soutop-muted);
    font-weight: 300;
}

i[data-lucide] {
  width: 20px;
  height: 20px;
  stroke-width: 0.1;
}

.content {
    padding: 22px 26px 40px !important;
}

.stories-container {
    gap: 12px;
    padding: 18px 0 20px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--soutop-border) !important;
}

.story {
    margin-right: 2px !important;
    transition: transform .2s ease;
}

.story:hover {
    transform: translateY(-3px);
}

.story-avatar {
    width: 70px !important;
    height: 70px !important;
    padding: 3px !important;
    background: linear-gradient(135deg, var(--soutop-yellow), var(--soutop-pink), #7c3cff) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.25);
}

.story-avatar img {
    border: 3px solid var(--soutop-bg) !important;
    object-fit: cover;
}

.story-username,
.story-empty {
    color: var(--soutop-text) !important;
}

.categories {
    padding: 12px 0 20px !important;
    margin-bottom: 18px !important;
}

.category {
    background: var(--soutop-surface) !important;
    color: var(--soutop-text) !important;
    border: 1px solid var(--soutop-border);
    border-radius: 999px !important;
    transition: .2s ease;
}

.category:hover {
    background: var(--soutop-surface-2) !important;
    border-color: #444;
}

.category.active {
    background: var(--soutop-text) !important;
    color: #111 !important;
    border-color: var(--soutop-text);
    font-weight: 800;
}

.home-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) 380px;
    gap: 18px;
    margin-bottom: 28px;
}

.featured-video-card,
.ranking-card,
.video-card,
.short-card {
    background: rgba(24,24,24,.92) !important;
    border: 1px solid var(--soutop-border);
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.featured-video-card {
    display: block;
    color: var(--soutop-text);
    text-decoration: none;
}

.featured-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}

.featured-thumb img,
.short-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.featured-video-card:hover .featured-thumb img,
.short-card:hover img {
    transform: scale(1.04);
}

.featured-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0,0,0,.62);
    color: var(--soutop-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 1px solid rgba(255,255,255,.18);
}

.featured-tag {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--soutop-yellow), var(--soutop-pink));
    color: #101010;
    font-size: 12px;
    font-weight: 900;
}

.featured-info {
    padding: 16px 18px 18px;
}

.featured-info h2 {
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.1;
    margin-bottom: 8px;
}

.featured-info p {
    color: var(--soutop-muted);
    margin-bottom: 14px;
}

.top-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,204,0,.12);
    color: var(--soutop-yellow);
    border: 1px solid rgba(255,204,0,.22);
    font-weight: 800;
}

.ranking-card {
    padding: 16px;
}

.section-title,
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.section-title {
    justify-content: flex-start;
    margin-bottom: 12px;
}

.section-title i {
    color: var(--soutop-yellow);
}

.section-title h3,
.section-heading h2 {
    color: var(--soutop-text);
}

.ranking-item {
    display: grid;
    grid-template-columns: 28px 74px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    color: var(--soutop-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

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

.ranking-item strong {
    color: var(--soutop-yellow);
    font-size: 18px;
}

.ranking-item img {
    width: 74px;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 10px;
}

.ranking-item span {
    font-size: 13px;
    line-height: 1.25;
    display: grid;
    gap: 4px;
}

.ranking-item small {
    color: var(--soutop-muted);
}

.section-heading {
    margin: 4px 0 18px;
}

.section-heading span {
    color: var(--soutop-yellow);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.section-heading p {
    color: var(--soutop-muted);
    font-size: 13px;
}

.videos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-bottom: 34px;
}

.video-card {
    box-shadow: none !important;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.video-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(255,204,0,.36);
    background: var(--soutop-surface-2) !important;
}

.thumbnail-wrap {
    background: #000;
}

.video-thumbnail {
    border-radius: 0 !important;
}

.video-info {
    color: var(--soutop-text) !important;
}

.video-title {
    color: var(--soutop-text) !important;
    font-weight: 800 !important;
}

.video-channel,
.video-metadata {
    color: var(--soutop-muted) !important;
}

.video-metadata::before {
    content: "⭐";
    margin-right: 5px;
    color: var(--soutop-yellow);
}

.play-overlay {
    color: var(--soutop-yellow) !important;
    background: rgba(0,0,0,.62) !important;
}

.processing-badge {
    background: rgba(255,204,0,.92) !important;
    color: #111 !important;
}

.no-videos {
    color: var(--soutop-muted) !important;
    background: var(--soutop-surface);
    border: 1px solid var(--soutop-border);
    border-radius: 18px;
}

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

.shorts-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 16px;
}

.short-card {
    position: relative;
    display: block;
    aspect-ratio: 9/16;
    color: var(--soutop-text);
    text-decoration: none;
    min-height: 280px;
}

.short-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.88), transparent 55%);
}

.short-overlay {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: grid;
    gap: 7px;
}

.short-overlay strong {
    font-size: 14px;
    line-height: 1.2;
}

.short-overlay span {
    color: #e8e8e8;
    font-size: 11px;
    line-height: 1.35;
}

.auth-content {
    background: var(--soutop-surface) !important;
    color: var(--soutop-text);
    border: 1px solid var(--soutop-border);
}

.auth-tab {
    border-bottom-color: var(--soutop-border) !important;
    color: var(--soutop-muted);
}

.auth-tab.active {
    border-bottom-color: var(--soutop-yellow) !important;
    color: var(--soutop-text);
}

.auth-form input {
    background: #111 !important;
    border-color: var(--soutop-border) !important;
    color: var(--soutop-text) !important;
}

.stories-modal {
    background-color: rgba(0,0,0,.94) !important;
}

.story-content {
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.75);
}

.close-story,
#closeStoryBtn {
    background: rgba(0,0,0,.70) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}



/* ==========================================================
   AJUSTE FINAL - CARDS DE VÍDEOS ESTILO YOUTUBE
   Alteração isolada: somente cards do feed de vídeos
   ========================================================== */
   .video-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.video-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.videos-grid .video-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform .2s ease;
}

.videos-grid .video-card:hover {
    transform: translateY(-3px) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.videos-grid .thumbnail-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 18px !important;
    background: #000;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.videos-grid .video-thumbnail {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform .28s ease, filter .28s ease;
}

.videos-grid .video-card:hover .video-thumbnail {
    transform: scale(1.035);
    filter: brightness(1.04);
}

.videos-grid .play-overlay {
    width: 56px !important;
    height: 56px !important;
    color: var(--soutop-yellow) !important;
    background: rgba(0,0,0,.58) !important;
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(5px);
}

.videos-grid .video-info {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 2px 0 !important;
    color: var(--soutop-text) !important;
    background: transparent !important;
}

.video-channel-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: #202020;
    border: 2px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.video-channel-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.video-details {
    flex: 1;
    min-width: 0;
}

.videos-grid .video-title {
    color: #fff !important;
    font-size: 16px;
    font-weight: 700 !important;
    line-height: 1.34;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: none;
}

.videos-grid .video-channel {
    color: #b6b6b6 !important;
    font-size: 14px;
    line-height: 1.25;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.videos-grid .video-channel i {
    color: #3ea6ff;
    font-size: 12px;
}

.videos-grid .video-metadata {
    color: #9d9d9d !important;
    font-size: 12px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 6px;
}

.videos-grid .video-metadata::before,
.videos-grid .video-views::after {
    content: none !important;
    display: none !important;
}

.video-dot {
    width: 3px;
    height: 3px;
    min-width: 3px;
    border-radius: 50%;
    background: #777;
    display: inline-block;
}

.video-options {
    width: 28px;
    min-width: 28px;
    height: 32px;
    margin-top: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #d8d8d8;
    border-radius: 50%;
    cursor: pointer;
    opacity: .9;
}

.video-options:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
}

.processing-badge {
    z-index: 3;
}


/* ==========================================================
   AJUSTE FINAL - DESTAQUE + TOPS DA SEMANA PROFISSIONAL
   Alteração isolada: somente bloco .home-showcase
   ========================================================== */
   .home-showcase.home-showcase-pro {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) 380px;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 30px;
}

.featured-video-card.featured-video-pro,
.ranking-card.ranking-card-pro {
    background: linear-gradient(180deg, rgba(24,24,24,.96), rgba(15,15,15,.98)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.32) !important;
}

.featured-video-card.featured-video-pro {
    position: relative;
    display: block;
    text-decoration: none;
    color: #fff;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.featured-video-card.featured-video-pro:hover {
    transform: translateY(-3px);
    border-color: rgba(255,204,0,.28) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.42) !important;
}

.featured-thumb.featured-thumb-pro {
    position: relative;
    aspect-ratio: 16/8.55;
    min-height: 315px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: #000;
}

.featured-thumb.featured-thumb-pro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .38s ease, filter .38s ease;
}

.featured-video-pro:hover .featured-thumb-pro img {
    transform: scale(1.035);
    filter: brightness(1.05);
}

.featured-gradient {
    position: absolute;
    inset: 0;
    background:
    linear-gradient(to top, rgba(15,15,15,.98) 0%, rgba(15,15,15,.80) 18%, rgba(15,15,15,.20) 48%, transparent 70%),
    linear-gradient(to right, rgba(0,0,0,.28), transparent 45%);
    pointer-events: none;
}

.featured-play.featured-play-pro {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    color: var(--soutop-yellow) !important;
    background: rgba(0,0,0,.56) !important;
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    box-shadow: 0 14px 38px rgba(0,0,0,.40);
    z-index: 2;
}

.featured-tag.featured-tag-pro {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 3;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--soutop-yellow), #ff9f00);
    color: #111;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
    box-shadow: 0 10px 24px rgba(255,204,0,.18);
}

.featured-duration {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    padding: 5px 7px;
    border-radius: 6px;
    background: rgba(0,0,0,.78);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.featured-info.featured-info-pro {
    padding: 18px 20px 20px !important;
    margin-top: -2px;
}

.featured-info-pro h2 {
    margin: 0 0 12px !important;
    color: #fff !important;
    font-size: clamp(22px, 2.25vw, 32px) !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: -.02em;
}

.featured-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.featured-author {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.featured-author img {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.featured-author span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.featured-author strong {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.featured-author strong i {
    color: #3ea6ff;
    font-size: 12px;
}

.featured-author small {
    color: var(--soutop-muted);
    font-size: 13px;
    line-height: 1.25;
}

.featured-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #e7e7e7;
    font-size: 13px;
    white-space: nowrap;
}

.featured-actions span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.featured-actions i {
    font-size: 17px;
}

.featured-top-count i {
    color: var(--soutop-yellow);
    filter: drop-shadow(0 0 8px rgba(255,204,0,.22));
}

.ranking-card.ranking-card-pro {
    padding: 18px !important;
    min-height: 100%;
}

.ranking-title-pro {
    margin-bottom: 14px !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.ranking-title-pro > div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ranking-title-pro h3 {
    color: #fff !important;
    font-size: 18px;
    font-weight: 900;
}

.ranking-title-pro i {
    color: var(--soutop-yellow);
}

.ranking-title-pro > a {
    color: var(--soutop-yellow);
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.ranking-list-pro {
    display: grid;
    gap: 0;
}

.ranking-item.ranking-item-pro {
    display: grid;
    grid-template-columns: 32px 82px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #fff;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease;
}

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

.ranking-item.ranking-item-pro:hover {
    transform: translateX(3px);
    background: rgba(255,255,255,.025);
}

.ranking-item-pro > strong {
    color: #fff700 !important;
    font-size: 22px !important;
    font-weight: 900;
    text-align: center;
}

.ranking-thumb {
    width: 82px;
    height: 80px;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255,255,255,.08);
}

.ranking-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .24s ease;
}

.ranking-item-pro:hover .ranking-thumb img {
    transform: scale(1.06);
}

.ranking-item-pro span {
    display: grid !important;
    gap: 3px !important;
    min-width: 0;
    line-height: 1.22 !important;
}

.ranking-item-pro b {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.ranking-item-pro small {
    color: #aaa !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-item-pro em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--soutop-yellow);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.ranking-item-pro em i {
    font-size: 10px;
    color: var(--soutop-yellow);
}


.star-action-btn{border:0;background:transparent;color:#e9e9e9;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:700;font-size:14px;padding:5px 6px;border-radius:999px;transition:.2s ease;line-height:1;white-space:nowrap;flex:0 0 auto}
.star-action-btn i{color:#ffcc00;text-shadow:0 0 10px rgba(255,204,0,.25)}
.star-action-btn:hover{background:rgba(255,204,0,.10);color:#fff;transform:translateY(-1px)}
.star-action-btn.starred i{font-weight:900;filter:drop-shadow(0 0 6px rgba(255,204,0,.65))}
.star-action-btn:disabled{opacity:.65;cursor:not-allowed;transform:none}
.video-card-link .star-action-btn{position:relative;z-index:5}
.video-card-link .video-card{overflow:visible}
.video-card-link .video-info{align-items:flex-start}
.video-card-link .video-details{min-width:0;width:100%}
.video-social-actions{display:flex!important;align-items:center;gap:12px;margin-top:9px;color:#cfcfcf;font-size:13px;flex-wrap:nowrap!important;white-space:nowrap;line-height:1}
.video-social-actions span{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.video-social-actions i{font-size:15px}
.auth-message{display:none;margin-bottom:12px;padding:10px 12px;border-radius:10px;background:rgba(255,204,0,.12);color:#ffde59;font-size:14px;font-weight:700;text-align:center}

/* Câmera fullscreen estilo Instagram */
.fullscreen-camera-modal{
    display:none;
    position:fixed;
    inset:0;
    background:#000;
    z-index:9999;
    color:#fff;
}

.fullscreen-camera-modal.active{
    display:block;
}

.camera-full-video,
.camera-full-preview{
    width:100%;
    height:100%;
    object-fit:contain !important;
    background:#000;
    display:none;
}

/* Evita o efeito de zoom/corte na câmera frontal em celulares */
.camera-full-video.selfie-camera{
    object-fit:contain !important;
    transform:scale(1) !important;
}

/* Mantém a traseira natural, mas também sem cortar exageradamente */
.camera-full-video.back-camera{
    object-fit:contain !important;
    transform:scale(1) !important;
}

.camera-full-video.active,
.camera-full-preview.active{
    display:block;
}

.camera-topbar{
    position:absolute;
    top:0;
    left:0;
    right:0;
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:5;
    background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
}

.camera-topbar button,
.camera-actions button,
.camera-preview-actions button{
    border:none;
    cursor:pointer;
    color:#fff;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(8px);
}

.camera-round-btn{
    width:48px;
    height:48px;
    border-radius:50%;
    font-size:19px;
}

.camera-actions{
    position:absolute;
    bottom:28px;
    left:0;
    right:0;
    z-index:5;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    padding:0 18px;
}

.capture-btn{
    width:82px;
    height:82px;
    border-radius:50%;
    border:5px solid #fff !important;
    background:rgba(255,255,255,.22) !important;
    position:relative;
}

.capture-btn.recording{
    border-color:#ff3b3b !important;
}

.capture-btn.recording::after{
    content:'';
    position:absolute;
    inset:20px;
    background:#ff3b3b;
    border-radius:10px;
}

.camera-mode-tabs{
    position:absolute;
    bottom:128px;
    left:0;
    right:0;
    z-index:5;
    display:flex;
    justify-content:center;
    gap:10px;
}

.camera-mode-tabs button{
    border:none;
    border-radius:999px;
    padding:10px 18px;
    background:rgba(0,0,0,.45);
    color:#fff;
    cursor:pointer;
}

.camera-mode-tabs button.active{
    background:#fff;
    color:#111;
    font-weight:bold;
}

.record-timer{
    position:absolute;
    top:76px;
    left:50%;
    transform:translateX(-50%);
    z-index:6;
    background:rgba(255,0,0,.88);
    color:#fff;
    padding:8px 14px;
    border-radius:999px;
    display:none;
    font-weight:bold;
}

.record-timer.active{
    display:block;
}

.camera-preview-actions{
    position:absolute;
    bottom:28px;
    left:0;
    right:0;
    z-index:8;
    display:none;
    justify-content:center;
    gap:14px;
    padding:0 20px;
}

.camera-preview-actions.active{
    display:flex;
}

.camera-preview-actions button{
    border-radius:999px;
    padding:14px 22px;
    font-weight:bold;
}

.publish-story-btn{
    background:#ff4d4d !important;
}

.camera-help{
    position:absolute;
    left:18px;
    right:18px;
    bottom:190px;
    z-index:6;
    text-align:center;
    color:rgba(255,255,255,.82);
    font-size:14px;
    text-shadow:0 2px 8px rgba(0,0,0,.75);
}


/* Header desktop no padrão solicitado */
.soutop-header{
    height:64px;
    padding:0 28px;
    background:#050607;
    border-bottom:1px solid rgba(255,255,255,.08);
    display:grid;
    grid-template-columns:auto minmax(280px,520px) auto;
    align-items:center;
    gap:28px;
    position:sticky;
    top:0;
    z-index:1000;
}
.soutop-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:118px;
    color:#fff;
    text-decoration:none;
}
.soutop-brand-title{
    font-size:22px;
    line-height:1;
    font-weight:900;
    letter-spacing:.5px;
    color:#fff;
}
.soutop-brand-star{color:#ffcc00;font-size:14px;filter:drop-shadow(0 0 5px rgba(255,204,0,.4))}
.soutop-search{
    width:100%;
    height:34px;
    border:1px solid rgba(255,255,255,.08);
    background:#0d1116;
    border-radius:7px;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.soutop-search i{color:#a7abb2;font-size:14px;margin-left:16px}
.soutop-search input{
    width:100%;
    height:100%;
    background:transparent;
    border:0;
    outline:0;
    color:#fff;
    padding:0 14px;
    font-size:13px;
}
.soutop-search input::placeholder{color:#9ca3af}
.soutop-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:18px;
}
.soutop-upload-btn{
    height:34px;
    border:1px solid rgba(255,204,0,.48);
    background:rgba(255,204,0,.04);
    color:#ffcc00;
    border-radius:7px;
    padding:0 16px;
    font-size:13px;
    font-weight:800;
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition:.2s ease;
    white-space:nowrap;
    text-decoration: none;
}
.soutop-upload-btn:hover{background:rgba(255,204,0,.13);transform:translateY(-1px)}
.soutop-notification-btn{
    width:34px;
    height:34px;
    border:0;
    background:transparent;
    color:#fff;
    position:relative;
    cursor:pointer;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
}
.soutop-notification-btn:hover{background:rgba(255,255,255,.08)}
.soutop-badge{
    position:absolute;
    top:3px;
    right:3px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#ff3040;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:900;
    border:2px solid #050607;
}
.soutop-profile{position:relative}
.soutop-profile-btn{
    border:0;
    background:transparent;
    color:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    padding:5px 8px;
    border-radius:999px;
}
.soutop-profile-btn:hover{background:rgba(255,255,255,.08)}
.soutop-profile-btn .user-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(255,255,255,.16);
}
.soutop-profile-name{font-size:13px;font-weight:700;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soutop-profile-menu{
    position:absolute;
    top:48px;
    right:0;
    min-width:210px;
    padding:8px;
    background:#111317;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    box-shadow:0 18px 45px rgba(0,0,0,.45);
    display:none;
}
.soutop-profile-menu.active{display:block}
.soutop-profile-menu button{
    width:100%;
    border:0;
    background:transparent;
    color:#f6f6f6;
    padding:12px 13px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    text-align:left;
}
.soutop-profile-menu button:hover{background:rgba(255,255,255,.08)}
.soutop-profile-menu i{width:18px;color:#ffcc00;text-align:center}


/* ==========================================================
   SIDEBAR GLOBAL
   ========================================================== */
.sidebar {
    width: 240px;
    flex: 0 0 240px;
    background: #090c10 !important;
    border-right: 1px solid rgba(255,255,255,.07);
    padding: 18px 12px;
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    height: calc(100vh - 64px);
    overflow-y: auto;
    z-index: 900;
}

.sidebar-item {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    margin: 0 0 5px;
    border-radius: 11px;
    color: #c8ccd2;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}

.sidebar-item:hover {
    color: #fff;
    background: rgba(255,255,255,.06) !important;
}

.sidebar-item.active {
    color: var(--soutop-yellow);
    background: rgba(255,204,0,.11);
    box-shadow: inset 3px 0 0 var(--soutop-yellow);
}

.sidebar-item svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    stroke-width: 1.8;
}

.sidebar-overlay {
    display: none;
}

main {
    min-height: calc(100vh - 64px);
    margin-top: 0;
}

.content {
    width: calc(100% - 240px);
    margin-left: 240px;
}


/* ==========================================================
   PÁGINA: MEUS TOPS
   ========================================================== */
.meus-tops-page .content {
    width: calc(100% - 240px);
    padding: 34px;
}

.meus-tops-page .hero {
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 85% 15%, rgba(255,204,0,.17), transparent 32%),
        linear-gradient(145deg, #11161d, #0c0f14);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 28px;
}

.meus-tops-page .hero small,
.meus-tops-page .heading small {
    color: var(--soutop-yellow);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.meus-tops-page .hero h1 {
    font-size: 34px;
    margin: 8px 0 5px;
}

.meus-tops-page .hero p {
    color: #aeb4bd;
    margin: 0;
    max-width: 720px;
    line-height: 1.7;
    font-size: 14px;
}

.meus-tops-page .stats {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.meus-tops-page .stat {
    min-width: 145px;
    background: rgba(0,0,0,.27);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 12px 15px;
}

.meus-tops-page .stat strong {
    display: block;
    font-size: 22px;
}

.meus-tops-page .stat span {
    color: #969da8;
    font-size: 12px;
}

.meus-tops-page .heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.meus-tops-page .heading h2 {
    margin: 4px 0 0;
}

.meus-tops-page .heading p {
    color: #969da8;
    font-size: 13px;
}

.meus-tops-page .grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.meus-tops-page .card {
    background: #10141a;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease;
}

.meus-tops-page .card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,204,0,.34);
}

.meus-tops-page .video-link {
    color: #fff;
    text-decoration: none;
}

.meus-tops-page .thumb {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    background: #0a0c0f;
}

.meus-tops-page .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.meus-tops-page .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent 58%);
}

.meus-tops-page .play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soutop-yellow);
    color: #111;
}

.meus-tops-page .latest,
.meus-tops-page .processing {
    position: absolute;
    z-index: 2;
    padding: 6px 9px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.meus-tops-page .latest {
    left: 12px;
    bottom: 10px;
    background: rgba(0,0,0,.72);
}

.meus-tops-page .processing {
    right: 10px;
    top: 10px;
    background: var(--soutop-yellow);
    color: #111;
}

.meus-tops-page .body {
    padding: 16px;
}

.meus-tops-page .channel {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

.meus-tops-page .channel img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,204,0,.55);
}

.meus-tops-page .channel-info {
    min-width: 0;
    flex: 1;
}

.meus-tops-page .channel-info strong,
.meus-tops-page .channel-info small {
    display: block;
}

.meus-tops-page .channel-info strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

.meus-tops-page .channel-info small {
    color: #9299a4;
    font-size: 11px;
    margin-top: 3px;
}

.meus-tops-page .fan-badge {
    color: var(--soutop-yellow);
    font-size: 11px;
    font-weight: 800;
    background: rgba(255,204,0,.1);
    padding: 6px 8px;
    border-radius: 999px;
}

.meus-tops-page .title {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
    min-height: 43px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meus-tops-page .meta {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    color: #8f97a3;
    font-size: 11px;
    margin-top: 9px;
}

.meus-tops-page .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #747b84;
}

.meus-tops-page .footer {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.meus-tops-page .watch {
    color: var(--soutop-yellow);
    font-size: 12px;
    font-weight: 800;
}

.meus-tops-page .pill {
    color: #adb3bc;
    font-size: 10px;
    background: #1b2028;
    border-radius: 999px;
    padding: 6px 9px;
}

.meus-tops-page .no-video {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #8e96a1;
    background: linear-gradient(145deg, #131820, #090c10);
    padding: 20px;
}

.meus-tops-page .empty {
    border: 1px dashed rgba(255,255,255,.14);
    background: #0e1217;
    border-radius: 22px;
    padding: 55px 25px;
    text-align: center;
}

.meus-tops-page .empty i {
    font-size: 34px;
    color: var(--soutop-yellow);
}

.meus-tops-page .empty h2 {
    margin: 16px 0 8px;
}

.meus-tops-page .empty p {
    color: #969da8;
    max-width: 620px;
    margin: auto;
    line-height: 1.65;
}

.meus-tops-page .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--soutop-yellow);
    color: #111;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
}


/* ==========================================================
   PAINEL DE NOTIFICAÇÕES - ESTILO YOUTUBE
   ========================================================== */
.soutop-notifications {
    position: relative;
}

.soutop-badge.is-hidden {
    display: none;
}

.notification-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: -10px;
    width: min(480px, calc(100vw - 32px));
    max-height: min(680px, calc(100vh - 88px));
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: #222222;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,.62);
    z-index: 2100;
}

.notification-panel.active {
    display: flex;
    animation: notificationPanelIn .16s ease-out;
}

@keyframes notificationPanelIn {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.notification-panel-header {
    min-height: 58px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: #242424;
}

.notification-panel-header h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.notification-read-all {
    border: 0;
    background: transparent;
    color: #d7d7d7;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.notification-read-all:hover:not(:disabled) {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.notification-read-all:disabled {
    opacity: .38;
    cursor: default;
}

.notification-panel-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #666 transparent;
}

.notification-panel-list::-webkit-scrollbar {
    width: 8px;
}

.notification-panel-list::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 999px;
}

.notification-item {
    position: relative;
    min-height: 104px;
    padding: 14px 16px 14px 22px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: start;
    color: #f4f4f4;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.055);
    transition: background .16s ease;
}

.notification-item:hover {
    background: rgba(255,255,255,.065);
}

.notification-item.unread {
    background: rgba(255,255,255,.035);
}

.notification-unread-dot {
    position: absolute;
    left: 8px;
    top: 49px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
}

.notification-item.unread .notification-unread-dot {
    background: #3ea6ff;
    box-shadow: 0 0 10px rgba(62,166,255,.5);
}

.notification-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
}

.notification-avatar {
    width: 48px;
    height: 48px;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    background: #151515;
}

.notification-type-icon {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #ffcc00;
    border: 2px solid #222;
    font-size: 9px;
}

.notification-text {
    min-width: 0;
    display: grid;
    gap: 3px;
    line-height: 1.36;
}

.notification-text strong {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.notification-text > span {
    color: #e3e3e3;
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.notification-text small {
    color: #a8a8a8;
    font-size: 11px;
    margin-top: 3px;
}

.notification-item.unread .notification-text small {
    color: #3ea6ff;
}

.notification-thumbnail {
    width: 86px;
    height: 49px;
    object-fit: cover;
    border-radius: 6px;
    background: #111;
    margin-top: 1px;
}

.notification-empty {
    min-height: 310px;
    padding: 44px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #aaa;
}

.notification-empty-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.12);
    font-size: 27px;
    color: #ddd;
}

.notification-empty strong {
    color: #fff;
    font-size: 16px;
    margin-bottom: 7px;
}

.notification-empty p {
    max-width: 300px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}


/* ==========================================================
   STORY DO PRÓPRIO USUÁRIO NO AVATAR DO CABEÇALHO
   ========================================================== */
.soutop-profile-story-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.soutop-profile-story-avatar .user-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #050607 !important;
    position: relative;
    z-index: 2;
}

.soutop-profile-story-avatar.has-story {
    background: linear-gradient(135deg, var(--soutop-yellow), var(--soutop-pink), #7c3cff);
    box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 14px rgba(255,204,0,.22);
}

.soutop-profile-story-avatar.has-story:hover {
    transform: scale(1.04);
}

.soutop-profile-story-avatar:not(.has-story) {
    padding: 2px;
}

.soutop-profile-story-avatar:not(.has-story) .user-avatar {
    border-color: rgba(255,255,255,.16) !important;
}
/* ==========================================================
   SOU TOP STUDIO - UPLOAD DE VÍDEO
   ========================================================== */
.upload-studio-page{
    min-height:100vh;
    background:
        radial-gradient(circle at 8% 0%,rgba(255,204,0,.08),transparent 28%),
        radial-gradient(circle at 92% 12%,rgba(255,0,80,.08),transparent 26%),
        #050505 !important;
}

.upload-studio-page .upload-studio-header{
    grid-template-columns:auto 1fr auto;
}

.upload-studio-header-title{
    justify-self:center;
    display:flex;
    align-items:center;
    gap:9px;
    color:#8f959d;
    font-size:12px;
}

.upload-studio-header-title strong{
    color:#fff;
    font-size:14px;
}

.upload-studio-header-title span::after{
    content:"/";
    margin-left:9px;
    color:#40454d;
}

.upload-studio-header-link,
.upload-studio-header-close{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#d8dbe0;
    text-decoration:none;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.035);
    padding:0 12px;
    font-size:12px;
    font-weight:700;
}

.upload-studio-header-close{
    width:34px;
    padding:0;
    border-radius:50%;
}

.upload-studio-header-link:hover,
.upload-studio-header-close:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
}

.upload-studio-profile .user-avatar{
    width:34px;
    height:34px;
    border:2px solid rgba(255,204,0,.65);
}

.upload-studio-main{
    display:block;
    min-height:calc(100vh - 64px);
    padding:0;
}

.upload-studio-shell{
    width:min(1240px,calc(100% - 40px));
    margin:0 auto;
    padding:36px 0 70px;
}

.upload-studio-hero{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:26px;
    padding:30px;
    overflow:hidden;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 88% 20%,rgba(255,204,0,.14),transparent 27%),
        linear-gradient(145deg,#10151b,#090c10);
}

.upload-studio-hero::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-120px;
    bottom:-180px;
    border-radius:50%;
    border:55px solid rgba(255,204,0,.035);
    pointer-events:none;
}

.upload-studio-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--soutop-yellow);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.upload-studio-hero h1{
    max-width:760px;
    margin:9px 0 10px;
    color:#fff;
    font-size:clamp(30px,4.5vw,52px);
    line-height:1.02;
    letter-spacing:-.035em;
}

.upload-studio-hero p{
    max-width:760px;
    color:#9ba2ad;
    font-size:13px;
    line-height:1.7;
}

.upload-studio-hero-badge{
    position:relative;
    z-index:2;
    min-width:250px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(255,204,0,.15);
    background:rgba(255,204,0,.055);
}

.upload-studio-hero-badge > i{
    width:40px;
    height:40px;
    min-width:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(255,204,0,.12);
    color:var(--soutop-yellow);
}

.upload-studio-hero-badge span{
    display:grid;
    gap:3px;
}

.upload-studio-hero-badge strong{
    font-size:12px;
}

.upload-studio-hero-badge small{
    color:#8f959d;
    font-size:10px;
    line-height:1.4;
}

.upload-studio-alert{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    padding:13px 15px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
}

.upload-studio-alert.error{
    color:#ffb4b4;
    background:rgba(255,70,70,.10);
    border:1px solid rgba(255,70,70,.22);
}

.upload-studio-alert.success{
    color:#a7f3c2;
    background:rgba(40,180,95,.10);
    border:1px solid rgba(40,180,95,.22);
}

.upload-studio-layout{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(300px,.75fr);
    gap:22px;
    align-items:start;
}

.upload-studio-left{
    display:grid;
    gap:22px;
}

.upload-studio-right{
    position:sticky;
    top:86px;
    display:grid;
    gap:16px;
}

.upload-studio-card{
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:linear-gradient(180deg,rgba(18,22,28,.96),rgba(10,13,17,.98));
    box-shadow:0 20px 55px rgba(0,0,0,.18);
    padding:22px;
}

.upload-studio-card-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.upload-studio-card-heading.compact{
    margin-bottom:14px;
}

.upload-studio-card-heading span{
    display:block;
    margin-bottom:4px;
    color:var(--soutop-yellow);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.11em;
}

.upload-studio-card-heading h2{
    color:#fff;
    font-size:19px;
    line-height:1.2;
}

.upload-studio-card-heading > i{
    color:#59616d;
    font-size:20px;
}

.upload-dropzone{
    min-height:310px;
    border:1.5px dashed rgba(255,255,255,.17);
    border-radius:18px;
    background:
        linear-gradient(rgba(255,255,255,.018),rgba(255,255,255,.018)),
        radial-gradient(circle at 50% 45%,rgba(255,204,0,.045),transparent 35%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    transition:.2s ease;
    padding:30px;
}

.upload-dropzone:hover,
.upload-dropzone.dragging{
    border-color:rgba(255,204,0,.5);
    background:rgba(255,204,0,.035);
    transform:translateY(-2px);
}

.upload-dropzone.has-file{
    min-height:120px;
    display:none;
}

.upload-dropzone-icon{
    width:72px;
    height:72px;
    margin-bottom:15px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--soutop-yellow);
    font-size:27px;
    background:rgba(255,204,0,.09);
    border:1px solid rgba(255,204,0,.18);
    box-shadow:0 14px 38px rgba(0,0,0,.22);
}

.upload-dropzone strong{
    color:#fff;
    font-size:18px;
    margin-bottom:5px;
}

.upload-dropzone p{
    color:#858d98;
    font-size:12px;
}

.upload-select-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    margin:17px 0 12px;
    padding:0 17px;
    border-radius:9px;
    color:#101010;
    background:var(--soutop-yellow);
    font-size:12px;
    font-weight:900;
}

.upload-dropzone small{
    color:#666e78;
    font-size:10px;
}

.upload-video-selected{
    display:none;
}

.upload-video-selected.active{
    display:block;
}

.upload-video-preview-wrap{
    position:relative;
    overflow:hidden;
    border-radius:16px;
    background:#000;
    border:1px solid rgba(255,255,255,.08);
    aspect-ratio:16/9;
}

.upload-video-preview-wrap video{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    background:#000;
}

.upload-preview-badge{
    position:absolute;
    left:12px;
    top:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border-radius:999px;
    background:rgba(10,14,18,.82);
    border:1px solid rgba(255,255,255,.11);
    color:#b7f7ca;
    font-size:10px;
    font-weight:800;
    backdrop-filter:blur(8px);
}

.upload-file-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:15px 0 4px;
}

.upload-file-main{
    min-width:0;
    display:flex;
    align-items:center;
    gap:11px;
}

.upload-file-icon{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--soutop-yellow);
    background:rgba(255,204,0,.09);
}

.upload-file-main > div{
    min-width:0;
    display:grid;
    gap:3px;
}

.upload-file-main strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
}

.upload-file-main small{
    color:#7f8792;
    font-size:10px;
}

.upload-secondary-btn{
    min-height:34px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.035);
    color:#d7dbe0;
    border-radius:9px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    cursor:pointer;
    font-size:10px;
    font-weight:800;
}

.upload-secondary-btn:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.upload-metadata-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    margin-top:13px;
}

.upload-metadata-grid > div{
    padding:11px 12px;
    border-radius:11px;
    background:#0b0e12;
    border:1px solid rgba(255,255,255,.055);
}

.upload-metadata-grid span,
.upload-metadata-grid strong{
    display:block;
}

.upload-metadata-grid span{
    color:#707985;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.upload-metadata-grid strong{
    margin-top:4px;
    color:#dfe3e8;
    font-size:11px;
}

.upload-details-card{
    display:grid;
    gap:0;
}

.upload-field{
    margin-bottom:18px;
}

.upload-field:last-child{
    margin-bottom:0;
}

.upload-field label{
    display:block;
    margin-bottom:8px;
    color:#e9ebee;
    font-size:12px;
    font-weight:700;
}

.upload-field label em{
    color:var(--soutop-yellow);
    font-style:normal;
}

.upload-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.upload-label-row small{
    color:#68717c;
    font-size:10px;
}

.upload-label-row b{
    color:#a9b0b8;
}

.upload-field input,
.upload-field textarea,
.upload-field select{
    width:100%;
    border:1px solid rgba(255,255,255,.09);
    outline:none;
    border-radius:11px;
    background:#090c10;
    color:#fff;
    font-family:inherit;
    font-size:12px;
    transition:.18s ease;
}

.upload-field input,
.upload-field select{
    min-height:47px;
    padding:0 13px;
}

.upload-field textarea{
    min-height:135px;
    resize:vertical;
    padding:13px;
    line-height:1.6;
}

.upload-field input:focus,
.upload-field textarea:focus,
.upload-field select:focus{
    border-color:rgba(255,204,0,.48);
    box-shadow:0 0 0 3px rgba(255,204,0,.055);
}

.upload-field input::placeholder,
.upload-field textarea::placeholder{
    color:#555d67;
}

.upload-select-wrap{
    position:relative;
}

.upload-select-wrap select{
    appearance:none;
    padding-right:38px;
}

.upload-select-wrap > i{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    color:#6c7480;
    font-size:10px;
    pointer-events:none;
}

.thumbnail-picker{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border-radius:14px;
    overflow:hidden;
    background:#090c10;
    border:1px dashed rgba(255,255,255,.14);
    cursor:pointer;
    display:block;
}

.thumbnail-picker img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:none;
}

.thumbnail-picker img.active{
    display:block;
}

.thumbnail-empty{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#747d88;
    gap:6px;
}

.thumbnail-empty.hidden{
    display:none;
}

.thumbnail-empty > i{
    font-size:24px;
    color:#929aa5;
}

.thumbnail-empty strong{
    color:#dddfe3;
    font-size:11px;
}

.thumbnail-empty small{
    font-size:9px;
}

.thumbnail-change{
    position:absolute;
    right:9px;
    bottom:9px;
    display:none;
    align-items:center;
    gap:5px;
    padding:6px 8px;
    border-radius:7px;
    background:rgba(0,0,0,.76);
    color:#fff;
    font-size:9px;
    font-weight:800;
}

.thumbnail-picker:has(img.active) .thumbnail-change{
    display:inline-flex;
}

.upload-frame-btn{
    width:100%;
    min-height:38px;
    margin-top:10px;
    border:1px solid rgba(255,204,0,.15);
    border-radius:9px;
    background:rgba(255,204,0,.055);
    color:var(--soutop-yellow);
    cursor:pointer;
    font-size:10px;
    font-weight:800;
}

.upload-frame-btn:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.upload-thumbnail-help{
    margin-top:9px;
    color:#6d7580;
    font-size:9px;
    line-height:1.5;
}

.upload-checklist-card{
    display:grid;
    gap:10px;
}

.upload-check-item{
    display:flex;
    align-items:center;
    gap:9px;
    color:#737c87;
    font-size:10px;
    transition:.18s ease;
}

.upload-check-item i{
    font-size:12px;
}

.upload-check-item.done{
    color:#bcefc9;
}

.upload-check-item.done i{
    color:#4bce75;
}

.upload-publish-btn{
    width:100%;
    min-height:52px;
    border:0;
    border-radius:12px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(135deg,var(--soutop-yellow),#ff9f00);
    color:#101010;
    box-shadow:0 16px 34px rgba(255,204,0,.14);
    cursor:pointer;
    font-family:inherit;
    font-size:12px;
    font-weight:900;
}

.upload-publish-btn > span{
    display:flex;
    align-items:center;
    gap:9px;
}

.upload-publish-btn:hover:not(:disabled){
    transform:translateY(-1px);
    filter:brightness(1.04);
}

.upload-publish-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.upload-publish-note{
    text-align:center;
    color:#646d78;
    font-size:9px;
    line-height:1.45;
    padding:0 12px;
}

.upload-progress-studio{
    display:none;
    margin-top:22px;
    padding:24px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(145deg,#10151b,#090c10);
    box-shadow:0 22px 60px rgba(0,0,0,.2);
}

.upload-progress-studio.active{
    display:block;
    animation:uploadStudioIn .25s ease;
}

@keyframes uploadStudioIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

.upload-progress-top{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
}

.upload-progress-status-icon{
    width:52px;
    height:52px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,204,0,.09);
    color:var(--soutop-yellow);
    border:1px solid rgba(255,204,0,.15);
    font-size:20px;
}

.upload-progress-status-icon.process{
    animation:uploadProcessPulse 1.6s ease infinite;
}

.upload-progress-status-icon.done,
.upload-progress-status-icon.success{
    color:#77e398;
    background:rgba(70,210,110,.09);
    border-color:rgba(70,210,110,.18);
}

.upload-progress-status-icon.error{
    color:#ff7d7d;
    background:rgba(255,70,70,.09);
    border-color:rgba(255,70,70,.18);
}

@keyframes uploadProcessPulse{
    50%{box-shadow:0 0 0 8px rgba(255,204,0,.04)}
}

.upload-progress-copy{
    min-width:0;
}

.upload-progress-copy > span{
    color:#68717c;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.09em;
}

.upload-progress-copy h2{
    margin:3px 0 2px;
    color:#fff;
    font-size:16px;
}

.upload-progress-copy p{
    color:#7d8691;
    font-size:10px;
    line-height:1.45;
}

.upload-progress-top > strong{
    color:var(--soutop-yellow);
    font-size:24px;
}

.upload-progress-track{
    height:8px;
    margin:18px 0 21px;
    overflow:hidden;
    border-radius:999px;
    background:#080a0d;
    border:1px solid rgba(255,255,255,.055);
}

.upload-progress-bar{
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--soutop-yellow),#ff9f00,var(--soutop-pink));
    transition:width .3s ease;
    box-shadow:0 0 16px rgba(255,204,0,.16);
}

.upload-progress-steps{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
}

.upload-progress-step{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px;
    border-radius:11px;
    background:#0a0d11;
    border:1px solid rgba(255,255,255,.045);
    color:#565f69;
}

.upload-progress-step > span{
    width:28px;
    height:28px;
    min-width:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#11151b;
    font-size:10px;
}

.upload-progress-step > div{
    min-width:0;
    display:grid;
    gap:2px;
}

.upload-progress-step strong{
    font-size:9px;
}

.upload-progress-step small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:7px;
}

.upload-progress-step.active{
    color:var(--soutop-yellow);
    border-color:rgba(255,204,0,.18);
    background:rgba(255,204,0,.035);
}

.upload-progress-step.active > span{
    background:rgba(255,204,0,.12);
}

.upload-progress-step.done{
    color:#9ae6ae;
}

.upload-progress-step.done > span{
    color:#78df96;
    background:rgba(70,210,110,.09);
}

.upload-progress-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:15px;
    color:#68717c;
    font-size:9px;
}

.upload-progress-bottom a{
    color:var(--soutop-yellow);
}

.upload-success-screen{
    display:none;
    min-height:520px;
    padding:60px 25px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 50% 20%,rgba(255,204,0,.12),transparent 25%),
        linear-gradient(145deg,#10151b,#090c10);
    text-align:center;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

.upload-success-screen.active{
    display:flex;
}

.upload-success-star{
    width:86px;
    height:86px;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:28px;
    color:#101010;
    background:linear-gradient(145deg,#ffe76a,var(--soutop-yellow));
    font-size:33px;
    box-shadow:0 0 0 10px rgba(255,204,0,.04),0 20px 55px rgba(0,0,0,.26);
}

.upload-success-screen h2{
    margin:8px 0;
    color:#fff;
    font-size:30px;
}

.upload-success-screen p{
    max-width:580px;
    color:#858e99;
    font-size:12px;
    line-height:1.65;
}

.upload-success-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}

.upload-success-primary,
.upload-success-secondary{
    min-height:42px;
    padding:0 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:10px;
    text-decoration:none;
    font-family:inherit;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.upload-success-primary{
    border:0;
    color:#101010;
    background:var(--soutop-yellow);
}

.upload-success-secondary{
    color:#e6e8eb;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.035);
}


/* ==========================================================
   INDEX / HOME - AJUSTE DO HEADER
   Logo completa, sino visível e avatar maior.
   ========================================================== */
.home-page .soutop-brand {
    min-width: 148px;
    flex-shrink: 0;
    overflow: visible;
    white-space: nowrap;
}

.home-page .soutop-brand-title {
    display: inline-block;
    white-space: nowrap;
    overflow: visible;
}

.home-page .soutop-notifications {
    display: block;
    position: relative;
    flex: 0 0 auto;
}

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

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

.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;
}

.home-page .soutop-profile-btn {
    padding: 4px 6px;
}


/* ==========================================================
   NOTIFICAÇÕES - AÇÕES E FECHAMENTO MOBILE
   ========================================================== */
.notification-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.notification-close-mobile {
    display: none;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}

.notification-close-mobile:hover {
    background: rgba(255,255,255,.14);
}

.notification-close-mobile:active {
    transform: scale(.93);
}

.notification-mobile-overlay {
    display: none;
}

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


/* ==========================================================
   ETAPA 3 - BUSCA GLOBAL SOU TOP
   Usuários + vídeos + hashtags
   ========================================================== */
.soutop-search-wrap{
    position:relative;
    width:100%;
    max-width:520px;
    min-width:0;
}

.soutop-search-wrap .soutop-search{
    position:relative;
    width:100%;
    max-width:none;
}

.soutop-search-wrap.search-open .soutop-search{
    border-color:rgba(255,204,0,.34);
    background:#10141a;
    box-shadow:0 0 0 3px rgba(255,204,0,.055),0 10px 26px rgba(0,0,0,.16);
}

.soutop-search-icon{
    flex:0 0 auto;
}

.soutop-search-wrap .soutop-search input[type="search"]{
    min-width:0;
    padding-right:72px;
}

.soutop-search-wrap .soutop-search input[type="search"]::-webkit-search-cancel-button{
    display:none;
}

.soutop-search-clear,
.soutop-search-spinner{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    display:none;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#858b94;
    font-size:12px;
}

.soutop-search-clear{
    cursor:pointer;
}

.soutop-search-clear.active{
    display:inline-flex;
}

.soutop-search-clear:hover{
    color:#fff;
    background:rgba(255,255,255,.07);
}

.soutop-search-spinner{
    display:none;
    pointer-events:none;
    color:var(--soutop-yellow);
}

.soutop-search-spinner.active{
    display:inline-flex;
}

.soutop-search-wrap.is-loading .soutop-search-clear{
    right:38px;
}

.soutop-search-results{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    width:100%;
    max-height:min(640px,calc(100vh - 92px));
    display:none;
    overflow:hidden;
    background:#12161c;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    box-shadow:0 26px 70px rgba(0,0,0,.58);
    z-index:2600;
}

.soutop-search-results.active{
    display:block;
    animation:soutopSearchOpen .14s ease-out;
}

@keyframes soutopSearchOpen{
    from{opacity:0;transform:translateY(-5px) scale(.992)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.soutop-search-results-scroll{
    max-height:min(640px,calc(100vh - 92px));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:7px;
    scrollbar-width:thin;
    scrollbar-color:#4a4f57 transparent;
}

.soutop-search-group + .soutop-search-group{
    border-top:1px solid rgba(255,255,255,.065);
    margin-top:5px;
    padding-top:5px;
}

.soutop-search-group-title{
    height:34px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#747c87;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.soutop-search-group-title i{
    color:#5d6570;
    font-size:11px;
}

.soutop-search-result-item{
    width:100%;
    min-height:62px;
    padding:8px 10px;
    display:flex;
    align-items:center;
    gap:11px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#fff;
    text-decoration:none;
    text-align:left;
    font-family:inherit;
    cursor:pointer;
    transition:background .14s ease,transform .14s ease;
}

.soutop-search-result-item:hover,
.soutop-search-result-item:focus-visible{
    outline:none;
    background:rgba(255,255,255,.055);
}

.soutop-search-avatar{
    width:43px;
    height:43px;
    min-width:43px;
    border-radius:50%;
    object-fit:cover;
    background:#0a0d11;
    border:1px solid rgba(255,255,255,.09);
}

.soutop-search-video-thumb{
    width:80px;
    height:45px;
    min-width:80px;
    object-fit:cover;
    border-radius:8px;
    background:#080a0d;
    border:1px solid rgba(255,255,255,.07);
}

.soutop-search-result-copy{
    min-width:0;
    flex:1;
    display:grid;
    gap:3px;
}

.soutop-search-result-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#f4f5f6;
    font-size:12px;
    font-weight:800;
}

.soutop-search-result-copy small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#838b96;
    font-size:10px;
}

.soutop-search-result-arrow,
.soutop-search-video-play{
    width:24px;
    min-width:24px;
    text-align:center;
    color:#555e69;
    font-size:10px;
}

.soutop-search-video-play{
    color:var(--soutop-yellow);
}

.soutop-search-hashtag-icon{
    width:43px;
    height:43px;
    min-width:43px;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--soutop-yellow);
    background:rgba(255,204,0,.075);
    border:1px solid rgba(255,204,0,.13);
    font-size:21px;
    font-weight:900;
}

.soutop-search-state{
    min-height:190px;
    padding:28px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.soutop-search-state-icon{
    width:52px;
    height:52px;
    margin-bottom:12px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--soutop-yellow);
    background:rgba(255,204,0,.07);
    border:1px solid rgba(255,204,0,.12);
    font-size:18px;
}

.soutop-search-state strong{
    color:#f1f3f5;
    font-size:13px;
    margin-bottom:5px;
}

.soutop-search-state small{
    max-width:310px;
    color:#747d88;
    font-size:10px;
    line-height:1.55;
}

/* ==========================================================
   ETAPA 4 - PERFIL PÚBLICO SOU TOP
   Exibição pública; personalização acontece pelo Studio.
   ========================================================== */
.public-profile-page{
    min-height:100vh;
    background:#050607 !important;
    color:#fff;
    font-family:'Poppins',sans-serif;
}

.public-profile-page *{box-sizing:border-box}
.public-profile-page a{text-decoration:none}

.public-profile-shell{
    width:min(1180px,100%);
    min-height:100vh;
    margin:0 auto;
    overflow:hidden;
    background:linear-gradient(180deg,#080b0f,#06080b 45%,#050607);
    border-left:1px solid rgba(255,255,255,.06);
    border-right:1px solid rgba(255,255,255,.06);
}

.public-profile-cover{
    position:relative;
    min-height:310px;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.public-profile-cover.no-cover{
    background:
        radial-gradient(circle at 82% 28%,rgba(255,0,80,.28),transparent 28%),
        radial-gradient(circle at 22% 35%,rgba(59,71,255,.20),transparent 32%),
        linear-gradient(135deg,#080a0d,#12121a 52%,#16070d);
}

.public-profile-cover-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(5,6,7,.55),rgba(5,6,7,.03) 55%,rgba(0,0,0,.28));
    pointer-events:none;
}

.public-profile-back,
.public-profile-more{
    position:absolute;
    top:22px;
    z-index:5;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:rgba(4,6,9,.55);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
    cursor:pointer;
}
.public-profile-back{left:22px}
.public-profile-more{right:22px}
.public-profile-back:hover,.public-profile-more:hover{background:rgba(255,255,255,.12)}

.public-profile-brand{
    position:absolute;
    z-index:5;
    left:82px;
    top:25px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    letter-spacing:.04em;
}
.public-profile-brand strong{font-size:18px;font-weight:900}
.public-profile-brand i{color:#ffcc00;font-size:13px}

.public-profile-more-menu{
    position:absolute;
    top:74px;
    right:22px;
    z-index:8;
    width:210px;
    padding:7px;
    display:none;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:#11151a;
    box-shadow:0 20px 50px rgba(0,0,0,.55);
}
.public-profile-more-menu.active{display:grid;gap:3px}
.public-profile-more-menu button{
    border:0;
    background:transparent;
    color:#e9edf1;
    padding:11px 12px;
    border-radius:9px;
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    font-family:inherit;
    font-size:12px;
    cursor:pointer;
}
.public-profile-more-menu button:hover{background:rgba(255,255,255,.07)}
.public-profile-more-menu i{width:18px;color:#ffcc00}

.public-profile-cover-placeholder{
    position:absolute;
    left:80px;
    bottom:58px;
    z-index:2;
    display:grid;
    gap:1px;
}
.public-profile-cover-placeholder span{font-size:13px;color:#c8cbd0;text-transform:uppercase;letter-spacing:.16em}
.public-profile-cover-placeholder strong{font-size:54px;line-height:1;color:#fff;font-weight:900;letter-spacing:-.05em}
.public-profile-cover-placeholder strong::after{content:'★';font-size:24px;color:#ffcc00;margin-left:10px;vertical-align:middle}
.public-profile-cover-placeholder small{margin-top:7px;color:#8e96a1;font-size:13px}

.public-profile-summary{
    position:relative;
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:28px;
    padding:0 54px 34px;
}

.public-profile-avatar-column{position:relative;min-height:95px}
.public-profile-avatar{
    position:absolute;
    width:168px;
    height:168px;
    left:0;
    top:-70px;
    border-radius:50%;
    object-fit:cover;
    background:#111;
    border:6px solid #080b0f;
    box-shadow:0 0 0 1px rgba(255,255,255,.10),0 18px 45px rgba(0,0,0,.38);
}

.public-profile-main-info{padding-top:26px;min-width:0}
.public-profile-name-row{
    display:grid;
    grid-template-columns:minmax(240px,1fr) auto auto;
    gap:34px;
    align-items:start;
}
.public-profile-name-row h1{font-size:30px;line-height:1.15;font-weight:900;margin:0 0 3px;color:#fff}
.public-profile-handle{color:#aaa;font-size:15px}
.public-profile-level{
    width:max-content;
    max-width:100%;
    margin-top:9px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(255,204,0,.55);
    background:rgba(255,204,0,.06);
    color:#ffcc00;
    font-size:12px;
    font-weight:800;
}
.public-profile-level i{margin-right:5px}

.public-profile-stats{display:flex;align-items:center;gap:0}
.public-profile-stats>div{
    min-width:105px;
    padding:0 19px;
    border-left:1px solid rgba(255,255,255,.09);
    text-align:center;
}
.public-profile-stats>div:first-child{border-left:0}
.public-profile-stats strong{display:block;color:#fff;font-size:23px;line-height:1.1;font-weight:800}
.public-profile-stats span{display:block;margin-top:5px;color:#9aa1aa;font-size:11px}
.public-profile-stats span i{color:#ffcc00}

.public-profile-actions{display:flex;justify-content:flex-end}
.public-profile-fan-btn,
.public-profile-owner-btn{
    min-height:48px;
    padding:0 20px;
    border-radius:999px;
    border:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-family:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.public-profile-fan-btn{
    color:#fff;
    background:linear-gradient(135deg,#ff3152,#ff1748);
    box-shadow:0 12px 28px rgba(255,23,72,.19);
}
.public-profile-fan-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.public-profile-fan-btn.is-fan{color:#e9edf1;background:#1b2027;border:1px solid rgba(255,255,255,.09);box-shadow:none}
.public-profile-fan-btn:disabled{opacity:.58;cursor:wait;transform:none}
.public-profile-owner-btn{color:#111;background:#ffcc00}

.public-profile-bio{max-width:700px;margin:20px 0 0;color:#d1d5da;font-size:13px;line-height:1.65}
.public-profile-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.public-profile-links>a:not(.public-profile-external-link){
    width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:20px;border:1px solid rgba(255,255,255,.12);background:#10141a;transition:.18s ease;
}
.public-profile-links>a:hover{transform:translateY(-2px)}
.public-profile-links .whatsapp{background:#16a34a!important}
.public-profile-links .instagram{background:linear-gradient(135deg,#7c3cff,#e1306c,#ff9f00)!important}
.public-profile-links .tiktok{background:#080808!important}
.public-profile-links .facebook{background:#1877f2!important}
.public-profile-external-link{
    min-height:42px;max-width:320px;padding:0 14px;display:flex;align-items:center;gap:9px;
    border-left:1px solid rgba(255,255,255,.12);color:#64a8ff;font-size:12px;overflow:hidden;
}
.public-profile-external-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.public-profile-external-link i{color:#b9c0c8}

.public-profile-banner-carousel{
    position:relative;
    margin:6px 54px 32px;
    padding:0 0 22px;
}
.public-profile-banner-track{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    scroll-behavior:smooth;
}
.public-profile-banner-track::-webkit-scrollbar{display:none}
.public-profile-banner-slide{
    flex:0 0 100%;
    width:100%;
    aspect-ratio:4.8 / 1;
    min-height:150px;
    overflow:hidden;
    border-radius:15px;
    scroll-snap-align:center;
    border:1px solid rgba(255,255,255,.08);
    background:#0b0e12;
}
.public-profile-banner-slide img{width:100%;height:100%;object-fit:cover;display:block}
.public-profile-banner-arrow{
    position:absolute;top:calc(50% - 22px);transform:translateY(-50%);z-index:4;
    width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.13);
    background:rgba(5,7,10,.86);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.public-profile-banner-arrow.prev{left:-18px}.public-profile-banner-arrow.next{right:-18px}
.public-profile-banner-arrow:hover{background:#ffcc00;color:#111}
.public-profile-banner-dots{height:18px;display:flex;align-items:end;justify-content:center;gap:6px}
.public-profile-banner-dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:#525861;cursor:pointer;transition:.18s ease}
.public-profile-banner-dots button.active{width:22px;background:#ff3152}

.public-profile-content{border-top:1px solid rgba(255,255,255,.075)}
.public-profile-tabs{
    min-height:76px;
    padding:0 54px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-bottom:1px solid rgba(255,255,255,.075);
    background:rgba(8,10,13,.86);
    position:sticky;
    top:0;
    z-index:20;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}
.public-profile-tab{
    position:relative;border:0;background:transparent;color:#949ba4;
    display:flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
}
.public-profile-tab i{font-size:18px}
.public-profile-tab.active{color:#ff3152}
.public-profile-tab.active::after{content:'';position:absolute;left:18%;right:18%;bottom:0;height:3px;border-radius:999px 999px 0 0;background:#ff3152}

.public-profile-tab-panel{display:none;padding:16px 18px 46px}
.public-profile-tab-panel.active{display:block;animation:publicProfilePanelIn .18s ease}
@keyframes publicProfilePanelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.public-profile-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.public-profile-photo-card{border:0;padding:0;aspect-ratio:1/1;overflow:hidden;background:#0b0d10;cursor:pointer}
.public-profile-photo-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease,filter .25s ease}
.public-profile-photo-card:hover img{transform:scale(1.035);filter:brightness(1.05)}

.public-profile-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:8px 22px}
.public-profile-video-card{min-width:0;color:#fff}
.public-profile-video-thumb{position:relative;aspect-ratio:16/9;border-radius:13px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.07)}
.public-profile-video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.public-profile-video-card:hover .public-profile-video-thumb img{transform:scale(1.04)}
.public-profile-video-thumb span{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);color:#ffcc00}
.public-profile-video-card>strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:9px;font-size:13px;line-height:1.35}
.public-profile-video-card>small{display:block;margin-top:4px;color:#858c96;font-size:10px}

.public-profile-tops-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding:10px 22px}
.public-profile-top-card{padding:16px 10px;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:#0c1015;color:#fff;text-align:center;transition:.18s ease}
.public-profile-top-card:hover{transform:translateY(-3px);border-color:rgba(255,204,0,.25)}
.public-profile-top-card img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.09)}
.public-profile-top-card strong{display:block;margin-top:10px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.public-profile-top-card span{display:inline-flex;margin-top:7px;align-items:center;gap:5px;color:#ffcc00;font-size:9px;font-weight:800}

.public-profile-empty{min-height:300px;padding:48px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7d8691}
.public-profile-empty>i{width:66px;height:66px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:#0c1117;border:1px solid rgba(255,255,255,.07);color:#ffcc00;font-size:24px}
.public-profile-empty strong{color:#e9edf1;font-size:15px}
.public-profile-empty p{max-width:420px;margin-top:5px;color:#747d88;font-size:11px;line-height:1.55}

.public-photo-modal{display:none;position:fixed;inset:0;z-index:4000;background:rgba(0,0,0,.92);align-items:center;justify-content:center;padding:24px}
.public-photo-modal.active{display:flex}
.public-photo-close{position:absolute;right:20px;top:20px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.10);color:#fff;font-size:18px;cursor:pointer}
.public-photo-modal-card{max-width:min(92vw,880px);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.public-photo-modal-card img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:12px}
.public-photo-modal-card p{max-width:760px;color:#d2d7dd;font-size:12px;line-height:1.6;text-align:center}
body.public-photo-open{overflow:hidden}

.public-profile-not-found{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:#050607;color:#fff}
.public-profile-not-found>i{font-size:42px;color:#ffcc00}.public-profile-not-found h1{margin-top:18px}.public-profile-not-found p{margin-top:6px;color:#8c949e}.public-profile-not-found a{margin-top:20px;padding:12px 18px;border-radius:10px;background:#ffcc00;color:#111;font-weight:800}

/* ==========================================================
   SOU TOP STUDIO - PAINEL / PERFIL PÚBLICO
   Mantém todo o desktop no CSS principal do projeto.
   ========================================================== */
.studio-page{
    min-height:100vh;
    background:
        radial-gradient(circle at 8% 0%,rgba(255,204,0,.07),transparent 28%),
        radial-gradient(circle at 92% 8%,rgba(255,0,80,.07),transparent 26%),
        #050607!important;
    color:#fff;
    font-family:'Poppins',sans-serif;
}
.studio-page *{box-sizing:border-box}
.studio-page a{text-decoration:none}
.studio-header{
    position:sticky;top:0;z-index:2400;height:64px;padding:0 24px;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    background:rgba(5,6,7,.95)!important;border-bottom:1px solid rgba(255,255,255,.07);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.studio-brand{display:flex;align-items:center;gap:8px;color:#fff}
.studio-brand strong{font-size:20px;font-weight:900;letter-spacing:.03em}.studio-brand i{color:var(--soutop-yellow)}
.studio-brand span{margin-left:5px;padding-left:12px;border-left:1px solid rgba(255,255,255,.11);color:#8d949e;font-size:11px;font-weight:700}
.studio-header-actions{display:flex;align-items:center;gap:9px}
.studio-header-link,.studio-header-primary{
    min-height:36px;padding:0 13px;border-radius:9px;display:inline-flex;align-items:center;gap:8px;
    font-size:11px;font-weight:800;transition:.18s ease
}
.studio-header-link{color:#d7dbe0;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
.studio-header-primary{color:#111;background:linear-gradient(135deg,#ffe467,var(--soutop-yellow))}
.studio-header-link:hover{background:rgba(255,255,255,.08);color:#fff}.studio-header-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}
.studio-header-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,204,0,.48)}
.studio-layout{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 64px)}
.studio-sidebar{
    position:sticky;top:64px;height:calc(100vh - 64px);display:flex;flex-direction:column;
    padding:18px 12px;background:#090c10;border-right:1px solid rgba(255,255,255,.07)
}
.studio-user-card{display:flex;align-items:center;gap:11px;padding:11px 10px 18px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.065)}
.studio-user-card img{width:44px;height:44px;min-width:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,204,0,.38)}
.studio-user-card div{min-width:0;display:grid;gap:3px}.studio-user-card strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-user-card small{font-size:9px;color:#747c87;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-nav{display:grid;gap:4px}.studio-nav-item{
    width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:#a4abb4;
    display:flex;align-items:center;gap:12px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;text-align:left
}
.studio-nav-item i{width:18px;text-align:center;font-size:14px;color:#69727d}.studio-nav-item:hover{background:rgba(255,255,255,.055);color:#fff}.studio-nav-item.active{background:rgba(255,204,0,.09);color:var(--soutop-yellow);box-shadow:inset 3px 0 0 var(--soutop-yellow)}.studio-nav-item.active i{color:var(--soutop-yellow)}
.studio-sidebar-bottom{margin-top:auto;padding:12px 7px 0;border-top:1px solid rgba(255,255,255,.06)}.studio-sidebar-bottom a{color:#747c86;font-size:10px;display:flex;align-items:center;gap:8px}.studio-sidebar-bottom a:hover{color:#fff}
.studio-main{min-width:0;padding:34px clamp(18px,3vw,42px) 70px}.studio-section{display:none}.studio-section.active{display:block;animation:studioSectionIn .2s ease}@keyframes studioSectionIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.studio-alert{margin-bottom:20px;padding:13px 15px;border-radius:13px;display:flex;gap:11px;align-items:flex-start;font-size:11px}.studio-alert.warning{border:1px solid rgba(255,190,60,.2);background:rgba(255,190,60,.07);color:#ffd982}.studio-alert div{display:grid;gap:3px}.studio-alert strong{font-size:11px}.studio-alert span{color:#bcae87;line-height:1.5}
.studio-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:25px}.studio-page-heading h1{margin:6px 0 5px;font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.03em}.studio-page-heading p{color:#7f8792;font-size:11px;line-height:1.6}.studio-eyebrow{color:var(--soutop-yellow);font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.studio-outline-btn{min-height:38px;padding:0 13px;border-radius:9px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);color:#d9dde2;display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;white-space:nowrap}.studio-outline-btn:hover{background:rgba(255,255,255,.075);color:#fff}
.studio-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.studio-stat-card{min-width:0;padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:linear-gradient(180deg,rgba(17,21,27,.96),rgba(10,13,17,.98));display:flex;gap:13px;align-items:flex-start}.studio-stat-icon{width:42px;height:42px;min-width:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:16px}.studio-stat-icon.fans{background:rgba(99,102,241,.11);color:#8e91ff}.studio-stat-icon.views{background:rgba(0,178,255,.10);color:#4ecbff}.studio-stat-icon.stars{background:rgba(255,204,0,.10);color:var(--soutop-yellow)}.studio-stat-icon.videos{background:rgba(255,0,80,.10);color:#ff5c8a}.studio-stat-card div{min-width:0;display:grid;gap:3px}.studio-stat-card small{color:#747d87;font-size:9px;text-transform:uppercase;font-weight:800;letter-spacing:.08em}.studio-stat-card strong{font-size:25px;line-height:1.1}.studio-stat-card em{font-style:normal;color:#666f79;font-size:8px;line-height:1.4}
.studio-card{border:1px solid rgba(255,255,255,.075);border-radius:20px;background:linear-gradient(180deg,rgba(17,21,27,.96),rgba(9,12,16,.98));box-shadow:0 20px 55px rgba(0,0,0,.16);padding:21px}.studio-card-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.studio-card-heading>div{min-width:0}.studio-card-heading span{display:block;color:var(--soutop-yellow);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;margin-bottom:3px}.studio-card-heading h2{font-size:17px;line-height:1.2}.studio-card-heading>small{color:#68717c;font-size:8px}.studio-card-heading>a{color:var(--soutop-yellow);font-size:9px;font-weight:800}.studio-card-heading>i{color:#535c67}.studio-card-heading>strong{font-size:17px;color:var(--soutop-yellow)}
.studio-overview-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.7fr);gap:18px;margin-bottom:18px}.studio-progress{height:8px;border-radius:999px;background:#07090c;overflow:hidden;border:1px solid rgba(255,255,255,.04)}.studio-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--soutop-yellow),#ff9f00,#ff3152)}.studio-health-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:17px 0}.studio-health-list span{color:#69727d;font-size:9px;display:flex;align-items:center;gap:7px}.studio-health-list span i{color:#404851}.studio-health-list span.done{color:#b8d8c0}.studio-health-list span.done i{color:#56ce79}
.studio-primary-btn,.studio-save-btn{width:100%;min-height:46px;border:0;border-radius:11px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;font-family:inherit;font-size:10px;font-weight:900;cursor:pointer}.studio-primary-btn{background:rgba(255,204,0,.09);border:1px solid rgba(255,204,0,.15);color:var(--soutop-yellow)}.studio-primary-btn:hover{background:rgba(255,204,0,.14)}.studio-primary-btn span,.studio-save-btn span{display:flex;align-items:center;gap:8px}.studio-save-btn{background:linear-gradient(135deg,var(--soutop-yellow),#ff9f00);color:#111;box-shadow:0 14px 30px rgba(255,204,0,.11)}.studio-save-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.03)}.studio-save-btn:disabled,.studio-primary-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.studio-level-card{position:relative;overflow:hidden}.studio-level-card:after{content:'';position:absolute;width:180px;height:180px;right:-85px;bottom:-105px;border:35px solid rgba(255,204,0,.035);border-radius:50%}.studio-level-icon{width:48px;height:48px;border-radius:15px;background:rgba(255,204,0,.09);border:1px solid rgba(255,204,0,.14);display:flex;align-items:center;justify-content:center;color:var(--soutop-yellow);font-size:18px;margin-bottom:15px}.studio-level-card>span{color:#787f89;font-size:8px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.studio-level-card h2{margin:4px 0 8px;font-size:22px;color:var(--soutop-yellow)}.studio-level-card p{color:#737b86;font-size:9px;line-height:1.6}.studio-level-meta{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}.studio-level-meta span{padding:7px 9px;border-radius:999px;background:#0a0d11;color:#9198a1;font-size:8px}.studio-level-meta i{color:var(--soutop-yellow)}
.studio-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.studio-video-item{min-width:0;color:#fff}.studio-video-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}.studio-video-thumb img{width:100%;height:100%;object-fit:cover;display:block}.studio-video-thumb span{position:absolute;inset:0;margin:auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);color:var(--soutop-yellow);opacity:0;transition:.18s}.studio-video-item:hover .studio-video-thumb span{opacity:1}.studio-video-item>strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:10px;line-height:1.4}.studio-video-item>small{display:block;margin-top:4px;color:#717985;font-size:8px}.studio-video-item>small i{color:var(--soutop-yellow)}.studio-empty-mini{min-height:120px;display:flex;align-items:center;justify-content:center;gap:9px;color:#747d87;font-size:10px}
.studio-profile-editor{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.58fr);gap:18px;align-items:start}.studio-editor-main{display:grid;gap:18px}.studio-editor-side{display:grid;gap:12px;position:sticky;top:86px}.studio-cover-preview{position:relative;width:100%;aspect-ratio:3.8/1;min-height:190px;border-radius:15px;overflow:hidden;background-size:cover;background-position:center;border:1px dashed rgba(255,255,255,.15);cursor:pointer;display:flex;align-items:center;justify-content:center}.studio-cover-preview.empty{background:radial-gradient(circle at 85% 20%,rgba(255,0,80,.15),transparent 30%),linear-gradient(145deg,#0d1117,#090b0f)}.studio-cover-preview:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.28)}.studio-cover-preview>span{position:relative;z-index:2;display:grid;justify-items:center;gap:4px;text-align:center}.studio-cover-preview>span i{font-size:20px;color:var(--soutop-yellow)}.studio-cover-preview>span strong{font-size:10px}.studio-cover-preview>span small{color:#a0a6ae;font-size:8px}.studio-field-grid{display:grid;gap:12px}.studio-field-grid.two{grid-template-columns:1fr 1fr}.studio-field{display:grid;gap:7px;margin-top:13px}.studio-field>span{display:flex;align-items:center;justify-content:space-between;color:#dfe3e7;font-size:9px;font-weight:700}.studio-field>span em{font-style:normal;color:#69717b;font-size:8px}.studio-field input,.studio-field textarea{width:100%;border:1px solid rgba(255,255,255,.085);border-radius:10px;background:#080b0f;color:#fff;outline:0;font-family:inherit;font-size:10px}.studio-field input{height:44px;padding:0 12px}.studio-field textarea{min-height:112px;padding:11px 12px;resize:vertical;line-height:1.6}.studio-field input:focus,.studio-field textarea:focus{border-color:rgba(255,204,0,.4);box-shadow:0 0 0 3px rgba(255,204,0,.045)}.studio-field input:disabled{color:#8e96a0;background:#0c0f13}.studio-field small{color:#606975;font-size:7px;line-height:1.5}.studio-input-prefix{display:grid;grid-template-columns:40px 1fr;border:1px solid rgba(255,255,255,.085);border-radius:10px;background:#080b0f;overflow:hidden}.studio-input-prefix b{display:flex;align-items:center;justify-content:center;color:var(--soutop-yellow);border-right:1px solid rgba(255,255,255,.07);font-size:11px}.studio-input-prefix input{border:0;border-radius:0}.studio-input-prefix:focus-within{border-color:rgba(255,204,0,.4)}
.studio-social-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.studio-social-field{min-height:64px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#0a0d11;display:flex;align-items:center;gap:10px}.studio-social-field>i{width:34px;height:34px;min-width:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}.studio-social-field.whatsapp>i{background:rgba(37,211,102,.11);color:#25d366}.studio-social-field.instagram>i{background:rgba(225,48,108,.11);color:#e1306c}.studio-social-field.tiktok>i{background:rgba(255,255,255,.07);color:#fff}.studio-social-field.facebook>i{background:rgba(24,119,242,.12);color:#4f9cff}.studio-social-field div{min-width:0;flex:1;display:grid;gap:3px}.studio-social-field span{font-size:8px;color:#89919b}.studio-social-field input{width:100%;height:27px;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;color:#fff;outline:0;font-family:inherit;font-size:9px}
.studio-live-preview{padding:16px}.studio-mini-profile{border:1px solid rgba(255,255,255,.07);border-radius:15px;overflow:hidden;background:#07090c}.studio-mini-cover{height:105px;background:radial-gradient(circle at 80% 20%,rgba(255,0,80,.18),transparent 30%),linear-gradient(135deg,#10141a,#080a0d);background-size:cover;background-position:center}.studio-mini-body{position:relative;padding:38px 13px 15px;display:grid;gap:3px}.studio-mini-body img{position:absolute;left:12px;top:-28px;width:58px;height:58px;border-radius:50%;object-fit:cover;border:4px solid #07090c}.studio-mini-body strong{font-size:11px}.studio-mini-body small{font-size:8px;color:#7b838e}.studio-mini-body em{width:max-content;margin-top:4px;padding:4px 7px;border-radius:999px;border:1px solid rgba(255,204,0,.3);color:var(--soutop-yellow);font-size:7px;font-style:normal}.studio-mini-body p{margin-top:7px;color:#8e96a0;font-size:7px;line-height:1.5}.studio-form-message{display:none;padding:10px 11px;border-radius:9px;font-size:8px;line-height:1.45}.studio-form-message.success{display:block;color:#a7edb8;background:rgba(50,190,90,.09);border:1px solid rgba(50,190,90,.16)}.studio-form-message.error{display:block;color:#ffaaaa;background:rgba(255,70,70,.09);border:1px solid rgba(255,70,70,.16)}
.studio-media-layout{display:grid;grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr);gap:18px;align-items:start}.studio-media-uploader{position:sticky;top:86px}.studio-file-drop{min-height:180px;padding:22px;border:1.5px dashed rgba(255,255,255,.13);border-radius:14px;background:#090c10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;cursor:pointer;background-position:center;background-size:cover;overflow:hidden}.studio-file-drop i{font-size:24px;color:var(--soutop-yellow)}.studio-file-drop strong{font-size:10px}.studio-file-drop small{color:#67707b;font-size:7px}.studio-file-drop.has-preview{color:#fff;text-shadow:0 2px 7px #000;border-style:solid}.studio-photo-library{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.studio-photo-library-item{position:relative;aspect-ratio:1/1;border-radius:11px;overflow:hidden;background:#090c10}.studio-photo-library-item img{width:100%;height:100%;object-fit:cover}.studio-photo-library-item button,.studio-banner-library-item>button{position:absolute;right:7px;top:7px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;cursor:pointer}.studio-photo-library-item button:hover,.studio-banner-library-item>button:hover{background:#ff304f}.studio-banner-library{display:grid;gap:10px}.studio-banner-library-item{position:relative;display:grid;grid-template-columns:160px 1fr auto;gap:11px;align-items:center;padding:9px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:#0a0d11}.studio-banner-library-item img{width:160px;aspect-ratio:3/1;object-fit:cover;border-radius:8px}.studio-banner-library-item div{min-width:0;display:grid;gap:3px}.studio-banner-library-item strong{font-size:9px}.studio-banner-library-item small{font-size:7px;color:#6f7882;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-banner-library-item>button{position:static;min-width:30px}.studio-empty-media{grid-column:1/-1;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#69727c}.studio-empty-media i{font-size:24px;color:#4f5761;margin-bottom:9px}.studio-empty-media strong{font-size:10px;color:#8c949d}.studio-empty-media span{font-size:7px;margin-top:3px}
.studio-account-form{max-width:860px}.studio-account-avatar{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.06)}.studio-account-avatar img{width:78px;height:78px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,204,0,.35)}.studio-account-avatar label{min-height:36px;padding:0 11px;border-radius:9px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);display:flex;align-items:center;gap:8px;color:#dce0e4;font-size:9px;font-weight:800;cursor:pointer}.studio-account-form .studio-save-btn{max-width:360px;margin-top:20px}


/* ==========================================================
   SOU TOP STUDIO - CÂMERA MULTIDESTINO + LOGOUT + ZAPS
   ========================================================== */
.studio-header-camera{
    min-height:36px;padding:0 13px;border-radius:9px;border:1px solid rgba(255,204,0,.18);
    background:rgba(255,204,0,.07);color:var(--soutop-yellow);display:inline-flex;align-items:center;gap:8px;
    font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;transition:.18s ease
}
.studio-header-camera:hover{background:rgba(255,204,0,.13);transform:translateY(-1px)}

.studio-logout-card{max-width:860px;margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-color:rgba(255,74,91,.14)}
.studio-logout-copy{display:flex;align-items:center;gap:12px;min-width:0}
.studio-logout-copy>div{display:grid;gap:3px}.studio-logout-copy strong{font-size:11px}.studio-logout-copy small{color:#727b86;font-size:8px}
.studio-logout-icon{width:42px;height:42px;min-width:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(255,74,91,.09);color:#ff6676;border:1px solid rgba(255,74,91,.14)}
.studio-logout-btn{min-height:38px;padding:0 14px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;color:#ff8994;border:1px solid rgba(255,74,91,.18);background:rgba(255,74,91,.06);font-size:9px;font-weight:900;white-space:nowrap}
.studio-logout-btn:hover{background:rgba(255,74,91,.12);color:#fff}

.camera-publish-panel{
    position:absolute;left:50%;bottom:18px;z-index:12;width:min(720px,calc(100% - 28px));
    transform:translateX(-50%) translateY(18px);display:none;padding:15px;border:1px solid rgba(255,255,255,.12);
    border-radius:18px;background:rgba(8,10,13,.88);box-shadow:0 22px 70px rgba(0,0,0,.55);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.camera-publish-panel.active{display:block;animation:cameraPublishIn .2s ease both}
@keyframes cameraPublishIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.camera-publish-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:11px}
.camera-publish-head>div{display:grid;gap:2px}.camera-publish-head span{color:var(--soutop-yellow);font-size:7px;font-weight:900;letter-spacing:.14em}.camera-publish-head strong{font-size:13px}.camera-publish-head small{max-width:330px;color:#89919a;font-size:8px;text-align:right;line-height:1.45}
.camera-destination-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.camera-destination{min-width:0;min-height:58px;padding:9px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#0d1116;color:#b6bdc6;display:flex;align-items:center;gap:9px;text-align:left;font-family:inherit;cursor:pointer}
.camera-destination[hidden]{display:none!important}.camera-destination>i{width:34px;height:34px;min-width:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);font-size:14px}
.camera-destination>span{display:grid;gap:2px;min-width:0}.camera-destination strong{font-size:9px;color:#e8ebef}.camera-destination small{font-size:7px;color:#717a85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camera-destination.active{border-color:rgba(255,204,0,.38);background:rgba(255,204,0,.08);color:var(--soutop-yellow);box-shadow:0 0 0 2px rgba(255,204,0,.035)}
.camera-destination.active>i{background:rgba(255,204,0,.12)}
.camera-caption-field{display:grid;gap:5px;margin-top:10px}.camera-caption-field>span{color:#b9c0c8;font-size:8px;font-weight:800}.camera-caption-field>span small{color:#666f79;font-weight:500}
.camera-caption-field textarea{width:100%;min-height:54px;max-height:90px;resize:none;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#080b0f;color:#fff;padding:9px 10px;outline:0;font:inherit;font-size:9px;line-height:1.45}
.camera-caption-field textarea:focus{border-color:rgba(255,204,0,.34)}
.camera-publish-panel .camera-preview-actions{position:static;display:flex!important;padding:0;margin-top:10px;justify-content:flex-end;gap:8px}
.camera-publish-panel .camera-preview-actions button{min-height:38px;padding:0 14px;font-size:9px}
.camera-publish-panel .publish-story-btn{background:linear-gradient(135deg,var(--soutop-yellow),#ff9f00)!important;color:#111!important}
.camera-publish-status{min-height:0;margin-top:7px;text-align:center;color:#8e96a0;font-size:8px}.camera-publish-status.success{color:#8ce7a5}.camera-publish-status.error{color:#ff929c}

.public-profile-zaps-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:10px 22px}
.public-profile-zap-card{position:relative;aspect-ratio:9/16;min-height:300px;overflow:hidden;border-radius:15px;background:#090c10;border:1px solid rgba(255,255,255,.08);color:#fff}
.public-profile-zap-card>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .28s ease}.public-profile-zap-card:hover>img{transform:scale(1.04)}
.public-profile-zap-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92),transparent 58%)}
.public-profile-zap-badge{position:absolute;left:9px;top:9px;padding:5px 7px;border-radius:999px;background:rgba(255,204,0,.92);color:#111;font-size:7px;font-weight:900}.public-profile-zap-badge i{margin-right:3px}
.public-profile-zap-play{position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.58);color:var(--soutop-yellow);border:1px solid rgba(255,255,255,.14)}
.public-profile-zap-copy{position:absolute;left:10px;right:10px;bottom:10px;display:grid;gap:5px;z-index:2}.public-profile-zap-copy strong{font-size:10px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.public-profile-zap-copy small{font-size:8px;color:#d2d6db}


/* ==========================================================
   CANAIS CLICÁVEIS - HOME / FEED / PLAYER
   ========================================================== */
.channel-profile-clickable{
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.featured-author .channel-profile-clickable:hover,
.ranking-item-pro .channel-profile-clickable:hover,
.videos-grid .video-channel .channel-profile-clickable:hover{
    color:var(--soutop-yellow)!important;
}

.featured-author img.channel-profile-clickable:hover,
.video-channel-avatar.channel-profile-clickable:hover{
    border-color:rgba(255,204,0,.72)!important;
    box-shadow:0 0 0 3px rgba(255,204,0,.08),0 8px 20px rgba(0,0,0,.28);
}

.channel-profile-clickable:focus-visible{
    outline:2px solid var(--soutop-yellow);
    outline-offset:3px;
    border-radius:5px;
}

.video-channel-avatar.channel-profile-clickable:focus-visible{
    border-radius:50%;
}

.channel-avatar-link{
    display:inline-flex;
    flex:0 0 auto;
    border-radius:50%;
    text-decoration:none;
}

.channel-name-link{
    display:inline-block;
    color:#fff;
    text-decoration:none;
    transition:color .16s ease;
}

.channel-name-link:hover,
.channel-name-link:focus-visible{
    color:#ffcc00;
}

.channel-avatar-link:hover .channel-avatar{
    box-shadow:0 0 0 3px rgba(255,204,0,.12);
}

.suggested-channel-link{
    cursor:pointer;
    width:max-content;
    max-width:100%;
    transition:color .16s ease;
}

.suggested-channel-link:hover,
.suggested-channel-link:focus-visible{
    color:#ffcc00!important;
    outline:none;
}


/* ==========================================================
   HEADER GLOBAL SOU TOP
   O mesmo componente pode ser usado na Home, Vídeo, Upload etc.
   ========================================================== */
.soutop-global-header{
    flex-shrink:0;
}

.soutop-global-header .soutop-search-wrap{
    min-width:0;
}

.soutop-global-header .soutop-brand,
.soutop-global-header .soutop-actions{
    position:relative;
    z-index:2;
}

/* ==========================================================
   ETAPA 5 - MENSAGENS PRIVADAS
   Layout único e previsível: cabeçalho + histórico + preview + composer.
   ========================================================== */
.soutop-message-btn{
    width:34px;height:34px;min-width:34px;border:0;background:transparent;color:#fff;
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;font-size:18px;text-decoration:none;transition:.18s ease;
}
.soutop-message-btn:hover{background:rgba(255,255,255,.08);color:#ffcc00}
.soutop-message-badge{
    position:absolute;top:0;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;background:#ff3040;color:#fff;
    border:2px solid #050607;font-size:9px;font-weight:900;line-height:1;
}
.soutop-message-badge.is-hidden{display:none!important}

.public-profile-actions{gap:10px;align-items:center}
.public-profile-message-btn{
    min-height:48px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
    display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#11161c;color:#fff;
    text-decoration:none;font-family:inherit;font-size:13px;font-weight:800;white-space:nowrap;transition:.18s ease;
}
.public-profile-message-btn:hover{border-color:rgba(255,204,0,.45);color:#ffcc00;transform:translateY(-1px)}

.messages-page{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
    background:#050607!important;
}
.messages-page .soutop-header{position:relative;z-index:2400}

.messages-app{
    --messages-header-offset:64px;
    height:calc(var(--messages-viewport-height, 100dvh) - var(--messages-header-offset));
    max-width:1500px;
    margin:0 auto;
    display:grid;
    grid-template-columns:370px minmax(0,1fr);
    overflow:hidden;
    border-left:1px solid rgba(255,255,255,.07);
    border-right:1px solid rgba(255,255,255,.07);
    background:#090b0e;
}

.messages-sidebar{
    min-width:0;min-height:0;overflow:hidden;
    border-right:1px solid rgba(255,255,255,.08);
    background:#080a0d;
    display:flex;flex-direction:column;
}
.messages-sidebar-head{height:84px;flex:0 0 84px;padding:18px 20px 12px;display:flex;align-items:center;justify-content:space-between}
.messages-sidebar-head span{display:block;color:#ffcc00;font-size:9px;font-weight:900;letter-spacing:.14em}
.messages-sidebar-head h1{font-size:24px;line-height:1.2;color:#fff;margin-top:3px}
.messages-home-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#11151a;border:1px solid rgba(255,255,255,.07);color:#fff;text-decoration:none}
.messages-search{height:42px;flex:0 0 42px;margin:0 14px 12px;padding:0 13px;display:flex;align-items:center;gap:9px;background:#11151a;border:1px solid rgba(255,255,255,.07);border-radius:12px}
.messages-search i{color:#858b94;font-size:13px}
.messages-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:12px}
.messages-search input::placeholder{color:#70757d}
.messages-conversation-list{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 18px;scrollbar-width:thin;scrollbar-color:#2b3036 transparent}
.messages-conversation-item{width:100%;border:0;background:transparent;color:#fff;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:11px;align-items:center;text-align:left;padding:10px 9px;border-radius:13px;cursor:pointer;font-family:inherit;transition:.15s ease}
.messages-conversation-item:hover{background:rgba(255,255,255,.045)}
.messages-conversation-item.active{background:rgba(255,204,0,.08)}
.messages-avatar-wrap{position:relative;width:52px;height:52px}
.messages-avatar-wrap img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.10)}
.messages-online-dot{position:absolute;width:11px;height:11px;right:1px;bottom:2px;border-radius:50%;background:#27c46b;border:2px solid #080a0d}
.messages-conversation-copy{min-width:0;display:grid;gap:4px}
.messages-conversation-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.messages-conversation-copy small{font-size:10px;color:#8f959e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.messages-conversation-item.unread .messages-conversation-copy small{color:#e9edf1;font-weight:700}
.messages-conversation-meta{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:7px}
.messages-conversation-meta time{font-size:9px;color:#6f757d;white-space:nowrap}
.messages-conversation-meta b{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ff3040;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center}
.messages-loading,.messages-no-conversations{padding:30px 16px;text-align:center;color:#8b9199;font-size:11px}
.messages-no-conversations{display:flex;flex-direction:column;align-items:center;gap:8px}
.messages-no-conversations i{font-size:28px;color:#ffcc00}
.messages-no-conversations strong{color:#fff;font-size:13px}
.messages-no-conversations p{line-height:1.5}

.messages-chat{
    min-width:0;min-height:0;overflow:hidden;position:relative;
    background:radial-gradient(circle at 50% 0,rgba(255,204,0,.025),transparent 30%),#090b0e;
}
.messages-chat-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:#8f959e}
.messages-chat-empty>span{width:86px;height:86px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:35px;color:#ffcc00;margin-bottom:18px}
.messages-chat-empty h2{font-size:22px;color:#fff}
.messages-chat-empty p{max-width:440px;margin:8px auto 13px;font-size:12px;line-height:1.7}
.messages-chat-empty small{font-size:10px}
.messages-chat-empty small strong{color:#fff}

.messages-chat-active{
    width:100%;height:100%;min-height:0;overflow:hidden;
    display:grid;
    grid-template-rows:58px minmax(0,1fr) auto auto;
    position:relative;
}
.messages-chat-header{
    position:relative!important;inset:auto!important;width:auto!important;
    height:58px!important;min-height:58px!important;
    display:flex;align-items:center;gap:12px;padding:0 18px;
    border-bottom:1px solid rgba(255,255,255,.07);
    background:rgba(8,10,13,.96)!important;
    box-shadow:none!important;z-index:5;
}
.messages-chat-user{display:flex;align-items:center;gap:10px;min-width:0;color:#fff;text-decoration:none}
.messages-chat-user img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.10)}
.messages-chat-user span{display:grid;min-width:0}
.messages-chat-user strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.messages-chat-user small{font-size:9px;color:#8f959e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.messages-chat-more,.messages-mobile-back{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.messages-chat-more{margin-left:auto}
.messages-chat-more:hover,.messages-mobile-back:hover{background:rgba(255,255,255,.06)}
.messages-mobile-back{display:none}

.messages-thread{
    min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding:18px 28px 12px;
    display:flex;flex-direction:column;gap:7px;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
}
.messages-bubble-row{display:flex;width:100%}
.messages-bubble-row.mine{justify-content:flex-end}
.messages-bubble-row.theirs{justify-content:flex-start}
.messages-bubble{max-width:min(70%,620px);padding:10px 13px 7px;border-radius:18px;background:#1b2026;color:#fff;font-size:12px;line-height:1.5;box-shadow:0 5px 14px rgba(0,0,0,.12)}
.messages-bubble-row.mine .messages-bubble{background:linear-gradient(135deg,#ffcc00,#ffab00);color:#111;border-bottom-right-radius:5px}
.messages-bubble-row.theirs .messages-bubble{border-bottom-left-radius:5px}
.messages-bubble-text{overflow-wrap:anywhere}
.messages-bubble small{display:block;margin-top:4px;text-align:right;font-size:8px;opacity:.62}
.messages-bubble small i{margin-left:3px}
.messages-bubble small i.read{color:#1d83ff}
.messages-bubble-image{display:block;max-width:340px;width:100%;max-height:360px;object-fit:cover;border-radius:12px;margin-bottom:6px;background:#000}
.messages-first-contact{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;color:#8c929b}
.messages-first-contact img{width:82px;height:82px;border-radius:50%;object-fit:cover;margin-bottom:10px;border:2px solid rgba(255,204,0,.35)}
.messages-first-contact strong{color:#fff;font-size:15px}
.messages-first-contact span{font-size:10px;margin-top:2px}
.messages-first-contact p{font-size:10px;margin-top:13px}

.messages-image-preview{padding:6px 18px 0;position:relative;width:max-content;max-width:100%}
.messages-image-preview img{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.10)}
.messages-image-preview button{position:absolute;top:1px;right:10px;width:24px;height:24px;border:0;border-radius:50%;background:#ff3040;color:#fff;cursor:pointer}

.messages-composer{
    min-height:48px;height:auto;max-height:104px;
    margin:6px 18px 10px;
    padding:5px 7px;
    display:flex;align-items:flex-end;gap:7px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;background:#10141a;
    flex:0 0 auto;
}
.messages-composer textarea{
    flex:1;min-width:0;
    min-height:36px;height:36px;max-height:78px;
    resize:none;overflow-y:auto;border:0;outline:0;background:transparent;color:#fff;
    padding:8px 5px;font:inherit;font-size:12px;line-height:1.45;
}
.messages-composer textarea::placeholder{color:#707780}
.messages-emoji-btn,.messages-image-btn,.messages-send-btn{width:36px;height:36px;min-width:36px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px}
.messages-emoji-btn,.messages-image-btn{background:transparent;color:#b5bac1}
.messages-emoji-btn:hover,.messages-image-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.messages-send-btn{background:#ffcc00;color:#111}
.messages-send-btn:disabled{opacity:.45}

.messages-emoji-panel{position:absolute;left:18px;bottom:66px;width:264px;padding:10px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;background:#15191f;border:1px solid rgba(255,255,255,.10);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.45);z-index:30}
.messages-emoji-panel[hidden]{display:none}
.messages-emoji-panel button{height:30px;border:0;background:transparent;border-radius:7px;font-size:18px;cursor:pointer}
.messages-emoji-panel button:hover{background:rgba(255,255,255,.08)}
.messages-image-preview[hidden],.messages-chat-active[hidden],.messages-chat-empty[hidden]{display:none!important}

/* ==========================================================
   TOPS DA SEMANA
   Página isolada pelo namespace .weekly-tops-page
   ========================================================== */
.weekly-tops-page{
    min-height:100vh;
    background:
        radial-gradient(circle at 84% 2%,rgba(255,204,0,.055),transparent 28%),
        #050607!important;
    color:#fff;
}

.weekly-tops-page .weekly-tops-content{
    width:calc(100% - 240px);
    min-width:0;
    padding:34px clamp(22px,3vw,42px) 70px!important;
}

.weekly-tops-hero{
    position:relative;
    overflow:hidden;
    min-height:230px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    padding:34px;
    margin-bottom:20px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:24px;
    background:
        radial-gradient(circle at 84% 22%,rgba(255,204,0,.14),transparent 27%),
        linear-gradient(145deg,#11161d,#090c10 70%);
    box-shadow:0 22px 60px rgba(0,0,0,.18);
}

.weekly-tops-hero::after{
    content:"";
    position:absolute;
    right:-110px;
    bottom:-150px;
    width:310px;
    height:310px;
    border-radius:50%;
    border:58px solid rgba(255,204,0,.028);
    pointer-events:none;
}

.weekly-tops-hero-copy{
    position:relative;
    z-index:2;
    max-width:760px;
}

.weekly-tops-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--soutop-yellow);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.13em;
}

.weekly-tops-hero h1{
    margin:9px 0 8px;
    color:#fff;
    font-size:clamp(34px,4vw,54px);
    line-height:1;
    letter-spacing:-.045em;
}

.weekly-tops-hero p{
    max-width:720px;
    color:#98a0aa;
    font-size:13px;
    line-height:1.7;
}

.weekly-tops-period{
    width:max-content;
    max-width:100%;
    margin-top:18px;
    padding:8px 11px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    color:#aeb5be;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.065);
    font-size:10px;
}

.weekly-tops-period i{
    color:var(--soutop-yellow);
}

.weekly-tops-hero-badge{
    position:relative;
    z-index:2;
    min-width:245px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:16px;
    background:rgba(255,204,0,.055);
    border:1px solid rgba(255,204,0,.15);
}

.weekly-tops-hero-badge>span{
    width:42px;
    height:42px;
    min-width:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    color:#111;
    background:var(--soutop-yellow);
}

.weekly-tops-hero-badge>div{
    display:grid;
    gap:2px;
}

.weekly-tops-hero-badge small{
    color:#7e8792;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.09em;
}

.weekly-tops-hero-badge strong{
    font-size:12px;
}

.weekly-tops-hero-badge em{
    color:#8f98a3;
    font-size:8px;
    font-style:normal;
}

.weekly-tops-categories{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:5px 0 24px;
    scrollbar-width:none;
}

.weekly-tops-categories::-webkit-scrollbar{
    display:none;
}

.weekly-tops-categories a{
    min-height:36px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    white-space:nowrap;
    color:#aeb4bd;
    background:#101419;
    border:1px solid rgba(255,255,255,.075);
    text-decoration:none;
    font-size:11px;
    font-weight:700;
    transition:.18s ease;
}

.weekly-tops-categories a:hover{
    color:#fff;
    border-color:rgba(255,204,0,.26);
}

.weekly-tops-categories a.active{
    color:#111;
    background:var(--soutop-yellow);
    border-color:var(--soutop-yellow);
    font-weight:900;
}

.weekly-tops-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.weekly-tops-section-heading>div{
    min-width:0;
}

.weekly-tops-section-heading span{
    display:block;
    margin-bottom:3px;
    color:var(--soutop-yellow);
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.weekly-tops-section-heading h2{
    margin:0;
    color:#fff;
    font-size:22px;
    line-height:1.15;
}

.weekly-tops-section-heading p{
    color:#747d87;
    font-size:10px;
}

.weekly-tops-podium-section,
.weekly-ranking-section,
.weekly-creators-section{
    margin-top:10px;
    margin-bottom:34px;
}

.weekly-tops-podium{
    display:grid;
    grid-template-columns:1fr 1.13fr 1fr;
    gap:16px;
    align-items:end;
}

.weekly-podium-card{
    min-width:0;
    overflow:hidden;
    border-radius:20px;
    background:linear-gradient(180deg,#11161c,#0a0d11);
    border:1px solid rgba(255,255,255,.075);
    box-shadow:0 20px 48px rgba(0,0,0,.18);
    transition:.22s ease;
}

.weekly-podium-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,204,0,.26);
}

.weekly-podium-card.position-1{
    transform:translateY(-18px);
    border-color:rgba(255,204,0,.34);
    box-shadow:0 24px 65px rgba(0,0,0,.27),0 0 0 1px rgba(255,204,0,.06);
}

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

.weekly-podium-card.silver{
    border-color:rgba(212,218,225,.16);
}

.weekly-podium-card.bronze{
    border-color:rgba(205,127,50,.18);
}

.weekly-podium-media{
    position:relative;
    display:block;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#000;
}

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

.weekly-podium-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .28s ease,filter .28s ease;
}

.weekly-podium-card:hover .weekly-podium-media img{
    transform:scale(1.035);
    filter:brightness(1.04);
}

.weekly-podium-gradient{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(8,10,13,.62),transparent 58%);
}

.weekly-podium-rank{
    position:absolute;
    left:12px;
    top:12px;
    min-height:31px;
    padding:0 10px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    background:rgba(10,13,17,.86);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:10px;
    font-weight:900;
    backdrop-filter:blur(8px);
}

.weekly-podium-rank.gold{
    color:#111;
    background:var(--soutop-yellow);
    border-color:var(--soutop-yellow);
}

.weekly-podium-rank.silver{
    color:#111;
    background:#d7dce2;
}

.weekly-podium-rank.bronze{
    color:#111;
    background:#cd7f32;
}

.weekly-podium-play{
    position:absolute;
    inset:0;
    margin:auto;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(0,0,0,.62);
    color:var(--soutop-yellow);
    border:1px solid rgba(255,255,255,.15);
    opacity:.9;
}

.weekly-podium-body{
    padding:15px 16px 17px;
}

.weekly-podium-channel{
    min-width:0;
    display:flex;
    align-items:center;
    gap:9px;
    color:#fff;
    text-decoration:none;
}

.weekly-podium-channel img{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,204,0,.35);
}

.weekly-podium-channel span{
    min-width:0;
    display:grid;
    gap:2px;
}

.weekly-podium-channel strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
}

.weekly-podium-channel small{
    color:#747d87;
    font-size:8px;
}

.weekly-podium-title{
    min-height:42px;
    margin:12px 0 10px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    line-height:1.45;
    font-weight:800;
}

.weekly-podium-title:hover{
    color:var(--soutop-yellow);
}

.weekly-podium-star{
    display:flex;
    align-items:baseline;
    gap:6px;
    color:var(--soutop-yellow);
}

.weekly-podium-star i{
    font-size:14px;
}

.weekly-podium-star strong{
    font-size:22px;
    line-height:1;
}

.weekly-podium-star span{
    margin:0;
    color:#858e98;
    font-size:8px;
    text-transform:none;
    letter-spacing:0;
    font-weight:600;
}

.weekly-podium-meta{
    display:flex;
    gap:13px;
    margin-top:11px;
    color:#7e8791;
    font-size:9px;
}

.weekly-podium-meta span{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin:0;
    color:#7e8791;
    font-size:9px;
    font-weight:500;
    text-transform:none;
    letter-spacing:0;
}

.weekly-ranking-list{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    background:linear-gradient(180deg,#0e1217,#090c10);
}

.weekly-ranking-row{
    min-height:82px;
    padding:10px 14px;
    display:grid;
    grid-template-columns:42px 112px minmax(0,1fr) 150px 135px 18px;
    gap:13px;
    align-items:center;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:background .16s ease;
}

.weekly-ranking-row:last-child{
    border-bottom:0;
}

.weekly-ranking-row:hover{
    background:rgba(255,255,255,.035);
}

.weekly-ranking-position{
    color:var(--soutop-yellow);
    font-size:18px;
    text-align:center;
}

.weekly-ranking-thumb{
    position:relative;
    width:112px;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:9px;
    background:#000;
}

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

.weekly-ranking-thumb span{
    position:absolute;
    inset:0;
    margin:auto;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--soutop-yellow);
    background:rgba(0,0,0,.6);
    opacity:0;
    transition:.16s ease;
}

.weekly-ranking-row:hover .weekly-ranking-thumb span{
    opacity:1;
}

.weekly-ranking-copy{
    min-width:0;
    display:grid;
    gap:4px;
}

.weekly-ranking-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
}

.weekly-ranking-copy small{
    color:#7c8590;
    font-size:9px;
}

.weekly-ranking-stars{
    display:grid;
    gap:2px;
}

.weekly-ranking-stars strong{
    display:flex;
    align-items:center;
    gap:7px;
    color:#fff;
    font-size:15px;
}

.weekly-ranking-stars strong i{
    color:var(--soutop-yellow);
}

.weekly-ranking-stars small{
    color:#747d87;
    font-size:8px;
}

.weekly-ranking-metrics{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    color:#838b95;
    font-size:9px;
}

.weekly-ranking-metrics span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.weekly-ranking-arrow{
    color:#4f5862;
    font-size:10px;
}

.weekly-creators-section{
    padding-top:6px;
}

.weekly-creators-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
}

.weekly-creator-card{
    position:relative;
    min-width:0;
    padding:16px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    overflow:hidden;
    border-radius:17px;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(180deg,#10141a,#0a0d11);
    border:1px solid rgba(255,255,255,.07);
    transition:.18s ease;
}

.weekly-creator-card:hover{
    transform:translateY(-3px);
    border-color:rgba(255,204,0,.24);
}

.weekly-creator-card>img{
    width:52px;
    height:52px;
    min-width:52px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.09);
}

.weekly-creator-card.gold>img{
    border-color:rgba(255,204,0,.62);
}

.weekly-creator-position{
    position:absolute;
    left:8px;
    top:8px;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#111;
    background:#6f7780;
    border:2px solid #0d1116;
    font-size:8px;
    font-weight:900;
    z-index:2;
}

.weekly-creator-position.gold{background:var(--soutop-yellow)}
.weekly-creator-position.silver{background:#d7dce2}
.weekly-creator-position.bronze{background:#cd7f32}

.weekly-creator-info{
    min-width:0;
    display:grid;
    gap:3px;
}

.weekly-creator-info strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
}

.weekly-creator-info small{
    color:#757e89;
    font-size:8px;
}

.weekly-creator-score{
    text-align:right;
    display:grid;
    gap:1px;
}

.weekly-creator-score strong{
    color:var(--soutop-yellow);
    font-size:17px;
}

.weekly-creator-score span{
    color:#6f7882;
    font-size:7px;
}

.weekly-creator-bar{
    grid-column:1 / -1;
    height:4px;
    overflow:hidden;
    border-radius:999px;
    background:#080a0d;
}

.weekly-creator-bar span{
    display:block;
    height:100%;
    margin:0;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--soutop-yellow),#ff9f00);
}

.weekly-tops-empty{
    min-height:320px;
    padding:45px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:20px;
    background:#0b0e12;
    color:#7b8490;
}

.weekly-tops-empty>i{
    width:68px;
    height:68px;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    color:var(--soutop-yellow);
    background:rgba(255,204,0,.07);
    border:1px solid rgba(255,204,0,.12);
    font-size:25px;
}

.weekly-tops-empty h2{
    margin:0 0 6px;
    color:#fff;
    font-size:18px;
}

.weekly-tops-empty p{
    max-width:520px;
    font-size:10px;
    line-height:1.6;
}

.weekly-tops-footer-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:11px 0 2px;
    color:#626b75;
    font-size:8px;
}

.weekly-tops-footer-note i{
    color:var(--soutop-yellow);
}



/* ==========================================================
   TOPS DA SEMANA - LAYOUT RANKING PREMIUM
   Baseado no layout conceitual aprovado.
   Isolado em .weekly-tops-page para não afetar outras páginas.
   ========================================================== */

.weekly-tops-page{
    --weekly-bg:#050607;
    --weekly-panel:#111315;
    --weekly-panel-2:#151719;
    --weekly-border:rgba(255,255,255,.10);
    --weekly-text:#ffffff;
    --weekly-muted:#a5a7ab;
    --weekly-primary:var(--soutop-yellow,#ffcc00);
    --weekly-pink:var(--soutop-pink,#ff0050);
    --weekly-silver:#cdd2d8;
    --weekly-bronze:#c87932;
    background:
        radial-gradient(circle at 58% 12%,rgba(255,204,0,.055),transparent 24%),
        #050607 !important;
}

.weekly-tops-page .weekly-tops-content.weekly-ranking-layout{
    width:calc(100% - 240px);
    margin-left:240px;
    padding:24px clamp(26px,4vw,64px) 60px !important;
    overflow:visible;
}

.weekly-ranking-header{
    text-align:center;
    padding:2px 0 18px;
}

.weekly-ranking-header h1{
    margin:0;
    color:#fff;
    font-size:clamp(38px,4vw,58px);
    line-height:1;
    font-weight:900;
    letter-spacing:-.045em;
}

.weekly-ranking-header h1 span{
    color:var(--weekly-primary);
}

.weekly-ranking-header p{
    margin:13px 0 0;
    color:#a5a7ab;
    font-size:15px;
    font-weight:400;
}

.weekly-ranking-filters{
    display:flex;
    justify-content:center;
    gap:10px;
    overflow-x:auto;
    scrollbar-width:none;
    padding:0 0 74px;
    margin-bottom: 55px;
}

.weekly-ranking-filters::-webkit-scrollbar{
    display:none;
}

.weekly-ranking-filters a{
    min-width:max-content;
    min-height:38px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.06);
    border-radius:999px;
    background:linear-gradient(180deg,#191b1e,#121416);
    color:#f2f2f2;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    transition:.18s ease;
}

.weekly-ranking-filters a:hover{
    transform:translateY(-1px);
    border-color:rgba(255,204,0,.28);
}

.weekly-ranking-filters a.active{
    color:#111;
    background:var(--weekly-primary);
    border-color:var(--weekly-primary);
    font-weight:900;
    box-shadow:0 8px 26px rgba(255,204,0,.12);
}

/* PÓDIO */
.weekly-ranking-podium{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);
    gap:18px;
    align-items:end;
    margin-bottom:36px;
}

.weekly-ranking-podium-card{
    position:relative;
    min-width:0;
    overflow:visible;
    border:1px solid rgba(255,255,255,.20);
    border-radius:13px;
    background:
        radial-gradient(circle at 50% 105%,rgba(255,255,255,.03),transparent 30%),
        linear-gradient(180deg,#151718,#101214);
    box-shadow:
        0 24px 62px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.weekly-ranking-podium-card.rank-1{
    transform:translateY(-38px);
    border-color:rgba(255,204,0,.82);
    box-shadow:
        0 0 0 1px rgba(255,204,0,.09),
        0 0 44px rgba(255,204,0,.08),
        0 28px 70px rgba(0,0,0,.42);
}

.weekly-ranking-podium-card.silver{
    border-color:rgba(205,210,216,.42);
}

.weekly-ranking-podium-card.bronze{
    border-color:rgba(200,121,50,.58);
}

.weekly-ranking-medal{
    position:absolute;
    left:50%;
    top:-62px;
    transform:translateX(-50%);
    width:108px;
    height:66px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:8;
    color:#fff;
}

.weekly-ranking-medal.gold{color:var(--weekly-primary)}
.weekly-ranking-medal.silver{color:var(--weekly-silver)}
.weekly-ranking-medal.bronze{color:var(--weekly-bronze)}

.weekly-ranking-medal-core{
    position:relative;
    z-index:2;
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 35% 28%,rgba(255,255,255,.38),transparent 23%),
        linear-gradient(145deg,currentColor,#7b7b7b);
    border:3px solid currentColor;
    box-shadow:
        inset 0 0 0 4px rgba(0,0,0,.25),
        0 7px 22px rgba(0,0,0,.34);
    color:#121212;
    font-size:24px;
    font-weight:900;
}

.weekly-ranking-medal.gold .weekly-ranking-medal-core{
    background:linear-gradient(145deg,#ffe868,#d7a800);
}

.weekly-ranking-medal.silver .weekly-ranking-medal-core{
    background:linear-gradient(145deg,#f4f5f7,#8f969d);
}

.weekly-ranking-medal.bronze .weekly-ranking-medal-core{
    background:linear-gradient(145deg,#e6a15e,#8a4717);
}

.weekly-ranking-laurel{
    position:absolute;
    top:12px;
    width:38px;
    height:48px;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    color:currentColor;
}

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

.weekly-ranking-laurel-left{
    left:1px;
    align-items:flex-end;
    transform:rotate(-15deg);
}

.weekly-ranking-laurel-left i:nth-child(1){transform:rotate(-35deg)}
.weekly-ranking-laurel-left i:nth-child(2){transform:rotate(-15deg)}
.weekly-ranking-laurel-left i:nth-child(3){transform:rotate(6deg)}

.weekly-ranking-laurel-right{
    right:1px;
    align-items:flex-start;
    transform:rotate(15deg) scaleX(-1);
}

.weekly-ranking-podium-thumb{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:12px 12px 0 0;
    background:#080808;
}

.weekly-ranking-podium-card.rank-1 .weekly-ranking-podium-thumb{
    aspect-ratio:16/8.7;
}

.weekly-ranking-podium-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.weekly-ranking-podium-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.25),transparent 55%);
}

.weekly-ranking-play{
    position:absolute;
    inset:0;
    margin:auto;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    background:rgba(0,0,0,.58);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 8px 24px rgba(0,0,0,.30);
    backdrop-filter:blur(4px);
}

.weekly-ranking-play i{
    margin-left:3px;
}

.weekly-ranking-podium-body{
    position:relative;
    min-height:214px;
    padding:42px 18px 17px;
    text-align:center;
}

.weekly-ranking-avatar{
    position:absolute;
    top:-34px;
    left:50%;
    transform:translateX(-50%);
    width:68px;
    height:68px;
    display:block;
    border-radius:50%;
    padding:3px;
    background:#0d0f11;
    border:2px solid rgba(255,255,255,.5);
    box-shadow:0 10px 26px rgba(0,0,0,.34);
}

.rank-1 .weekly-ranking-avatar{
    width:74px;
    height:74px;
    top:-38px;
    border-color:var(--weekly-primary);
}

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

.weekly-ranking-avatar-badge{
    position:absolute;
    right:-2px;
    bottom:0;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--weekly-primary);
    color:#111;
    border:3px solid #111315;
    font-size:7px;
}

.weekly-ranking-title{
    min-height:42px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:#fff;
    text-decoration:none;
    font-size:15px;
    line-height:1.38;
    font-weight:800;
}

.rank-1 .weekly-ranking-title{
    font-size:16px;
}

.weekly-ranking-channel{
    display:block;
    margin-top:4px;
    color:#c0c1c4;
    text-decoration:none;
    font-size:11px;
}

.weekly-ranking-channel:hover,
.weekly-ranking-title:hover{
    color:var(--weekly-primary);
}

.weekly-ranking-star-total{
    margin-top:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    color:var(--weekly-primary);
}

.weekly-ranking-star-total i{
    font-size:20px;
}

.weekly-ranking-star-total strong{
    color:#fff;
    font-size:28px;
    line-height:1;
    letter-spacing:-.04em;
}

.rank-1 .weekly-ranking-star-total strong{
    color:var(--weekly-primary);
    font-size:31px;
}

.weekly-ranking-star-label{
    display:block;
    margin-top:6px;
    color:#b6b6b8;
    font-size:10px;
}

.weekly-ranking-podium-meta{
    margin-top:16px;
    display:flex;
    justify-content:center;
    gap:18px;
    color:#b4b5b8;
    font-size:9px;
}

.weekly-ranking-podium-meta span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

/* RANKING 4+ */
.weekly-ranking-table-section{
    margin-top:8px;
}

.weekly-ranking-table{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:linear-gradient(180deg,#151719,#111315);
    box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.weekly-ranking-table-row{
    min-height:74px;
    padding:8px 18px;
    display:grid;
    grid-template-columns:48px 126px minmax(0,1fr) 145px 140px 20px;
    align-items:center;
    gap:16px;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.075);
    transition:.15s ease;
}

.weekly-ranking-table-row:last-child{
    border-bottom:0;
}

.weekly-ranking-table-row:hover{
    background:rgba(255,255,255,.035);
}

.weekly-ranking-table-position{
    color:#fff;
    font-size:20px;
    font-weight:900;
    text-align:center;
}

.weekly-ranking-table-thumb{
    position:relative;
    width:126px;
    height:59px;
    overflow:hidden;
    border-radius:6px;
    background:#000;
}

.weekly-ranking-table-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.weekly-ranking-table-play{
    position:absolute;
    inset:0;
    margin:auto;
    width:31px;
    height:31px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(0,0,0,.58);
    color:#fff;
    font-size:10px;
}

.weekly-ranking-table-copy{
    min-width:0;
    display:grid;
    gap:4px;
}

.weekly-ranking-table-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:13px;
}

.weekly-ranking-table-copy span{
    color:#b8b9bc;
    font-size:10px;
}

.weekly-ranking-table-stars{
    display:grid;
    gap:3px;
}

.weekly-ranking-table-stars strong{
    display:flex;
    align-items:center;
    gap:7px;
    color:#fff;
    font-size:18px;
    line-height:1;
}

.weekly-ranking-table-stars strong i{
    color:var(--weekly-primary);
}

.weekly-ranking-table-stars span{
    color:#aeafb2;
    font-size:9px;
}

.weekly-ranking-table-metrics{
    display:flex;
    justify-content:flex-end;
    gap:16px;
    color:#cacbcd;
    font-size:10px;
}

.weekly-ranking-table-metrics span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.weekly-ranking-table-more{
    color:#bbb;
    text-align:right;
}

/* CRIADORES */
.weekly-ranking-creators{
    margin-top:28px;
    padding:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:
        radial-gradient(circle at 8% 0%,rgba(255,204,0,.04),transparent 22%),
        linear-gradient(180deg,#121416,#0e1012);
    box-shadow:0 20px 48px rgba(0,0,0,.22);
}

.weekly-ranking-creators-heading{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}

.weekly-ranking-creators-heading>i{
    color:var(--weekly-primary);
    font-size:27px;
}

.weekly-ranking-creators-heading h2{
    margin:0;
    color:#fff;
    font-size:23px;
    text-transform:uppercase;
    letter-spacing:-.025em;
}

.weekly-ranking-creators-heading h2 span{
    color:var(--weekly-primary);
}

.weekly-ranking-creators-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.weekly-ranking-creator-card{
    position:relative;
    min-width:0;
    padding:15px;
    display:block;
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.18);
    border-radius:9px;
    background:linear-gradient(180deg,#17191b,#121416);
}

.weekly-ranking-creator-card.gold{border-color:rgba(255,204,0,.38)}
.weekly-ranking-creator-card.silver{border-color:rgba(205,210,216,.35)}
.weekly-ranking-creator-card.bronze{border-color:rgba(200,121,50,.38)}

.weekly-ranking-creator-top{
    min-width:0;
    display:grid;
    grid-template-columns:auto 54px minmax(0,1fr);
    gap:10px;
    align-items:center;
}

.weekly-ranking-creator-medal{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#111;
    background:#777;
    font-size:17px;
    font-weight:900;
    box-shadow:inset 0 0 0 3px rgba(0,0,0,.22);
}

.weekly-ranking-creator-medal.gold{background:var(--weekly-primary)}
.weekly-ranking-creator-medal.silver{background:var(--weekly-silver)}
.weekly-ranking-creator-medal.bronze{background:var(--weekly-bronze)}

.weekly-ranking-creator-top>img{
    width:54px;
    height:54px;
    min-width:54px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.22);
}

.weekly-ranking-creator-top>div{
    min-width:0;
    display:grid;
    gap:4px;
}

.weekly-ranking-creator-top strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
}

.weekly-ranking-creator-top small{
    color:#b0b1b4;
    font-size:9px;
}

.weekly-ranking-creator-score{
    margin-top:15px;
    padding-top:12px;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.06);
}

.weekly-ranking-creator-score strong{
    display:block;
    color:var(--weekly-primary);
    font-size:26px;
    line-height:1;
}

.weekly-ranking-creator-score span{
    display:block;
    margin-top:4px;
    color:#b3b4b7;
    font-size:10px;
}

.weekly-ranking-creator-progress{
    height:6px;
    margin-top:14px;
    overflow:hidden;
    border-radius:999px;
    background:#292b2d;
}

.weekly-ranking-creator-progress span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--weekly-primary),#ff9f00);
}

.weekly-ranking-update-note{
    margin-top:13px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    color:#8d8f93;
    font-size:9px;
}

.weekly-ranking-empty{
    min-height:330px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px dashed rgba(255,255,255,.13);
    border-radius:14px;
    background:#111315;
    color:#929497;
}

.weekly-ranking-empty>i{
    color:var(--weekly-primary);
    font-size:34px;
    margin-bottom:13px;
}

.weekly-ranking-empty h2{
    margin:0 0 5px;
    color:#fff;
    font-size:19px;
}

.weekly-ranking-empty p{
    max-width:520px;
    font-size:11px;
    line-height:1.6;
}


/* ==========================================================
   ETAPA 9 - GAMIFICAÇÃO DE CRIADORES
   ========================================================== */
.public-profile-level{
    gap:6px;
}
.public-profile-level span{
    margin-left:3px;
    padding-left:7px;
    border-left:1px solid rgba(255,255,255,.14);
    font-size:.9em;
    opacity:.86;
}
.public-profile-level.level-top-destaque{border-color:rgba(255,204,0,.35)}
.public-profile-level.level-top-creator{border-color:rgba(255,145,0,.38)}
.public-profile-level.level-top-elite{border-color:rgba(190,120,255,.42)}
.public-profile-level.level-top-diamante{
    border-color:rgba(88,220,255,.52);
    box-shadow:0 0 18px rgba(88,220,255,.10);
}

.public-profile-gamification{
    margin:0 42px 24px;
    padding:15px 17px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,204,0,.025));
}
.public-profile-gamification-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
}
.public-profile-gamification-head>div{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.public-profile-gamification-head span{
    color:#ffcc00;
    font-weight:800;
    font-size:12px;
}
.public-profile-gamification-head strong{
    font-size:15px;
}
.public-profile-gamification-head small{
    color:#949ba5;
    font-size:10px;
}
.public-profile-gamification-bar,
.studio-level-progress{
    height:9px;
    margin-top:12px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.04);
}
.public-profile-gamification-bar span,
.studio-level-progress span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#ffcc00,#ff8a00,#ff3b75);
    box-shadow:0 0 16px rgba(255,204,0,.28);
}
.public-profile-gamification-breakdown{
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-top:10px;
    color:#8f96a0;
    font-size:9px;
}
.public-profile-gamification-breakdown i{color:#ffcc00}

.studio-gamification-card{
    overflow:hidden;
}
.studio-level-top{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
}
.studio-level-top>div:nth-child(2)>span{
    color:#8f96a0;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:800;
}
.studio-level-top h2{margin:2px 0 0}
.studio-level-points{
    white-space:nowrap;
    color:#ffcc00;
    font-size:18px;
}
.studio-gamification-card>p{
    margin-top:13px;
    color:#9da4ad;
    font-size:10px;
    line-height:1.6;
}
.studio-level-progress{
    height:10px;
    margin-top:12px;
}
.studio-level-breakdown{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    margin-top:13px;
}
.studio-level-breakdown>span{
    min-width:0;
    padding:10px 8px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:11px;
    background:rgba(255,255,255,.025);
    display:grid;
    grid-template-columns:auto 1fr;
    gap:2px 7px;
    align-items:center;
}
.studio-level-breakdown i{
    grid-row:1 / 3;
    color:#ffcc00;
}
.studio-level-breakdown b{font-size:13px}
.studio-level-breakdown small{
    color:#858c96;
    font-size:7px;
    white-space:nowrap;
}
.studio-milestones{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.07);
}
.studio-milestones-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:9px;
}
.studio-milestones-title span{
    font-weight:800;
    font-size:11px;
}
.studio-milestones-title small{
    color:#777f89;
    font-size:8px;
}
.studio-milestones-list{
    display:grid;
    gap:6px;
}
.studio-milestone{
    display:grid;
    grid-template-columns:30px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    min-height:48px;
    padding:7px 9px;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.05);
    background:rgba(255,255,255,.018);
    opacity:.52;
}
.studio-milestone>i{
    width:30px;
    height:30px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#15191e;
    color:#747b84;
}
.studio-milestone span{display:grid}
.studio-milestone strong{font-size:9px}
.studio-milestone small{font-size:7px;color:#777f89}
.studio-milestone em{
    font-size:7px;
    font-style:normal;
    font-weight:800;
    color:#747b84;
}
.studio-milestone.unlocked{
    opacity:1;
    border-color:rgba(255,204,0,.15);
    background:rgba(255,204,0,.035);
}
.studio-milestone.unlocked>i{
    color:#ffcc00;
    background:rgba(255,204,0,.10);
}
.studio-milestone.unlocked em{color:#ffcc00}


/* ==========================================================
   SIDEBAR RECOLHÍVEL - DESKTOP / TABLET
   Controlada pelo botão hambúrguer do header global.
   ========================================================== */
:root{
    --soutop-sidebar-expanded:240px;
    --soutop-sidebar-collapsed:72px;
}

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

.soutop-sidebar-toggle{
    width:38px;
    height:38px;
    min-width:38px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#f1f1f1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:18px;
    transition:background .2s ease,color .2s ease,transform .2s ease;
}

.soutop-sidebar-toggle:hover{
    background:rgba(255,255,255,.08);
    color:var(--soutop-yellow);
}

.soutop-sidebar-toggle:focus-visible{
    outline:2px solid rgba(255,204,0,.7);
    outline-offset:2px;
}

.sidebar,
.content{
    transition:width .25s ease,margin-left .25s ease,flex-basis .25s ease;
}

.sidebar-item{
    overflow:hidden;
    transition:background .2s ease,color .2s ease,padding .25s ease,gap .25s ease;
}

.sidebar-item span{
    white-space:nowrap;
    overflow:hidden;
    opacity:1;
    max-width:170px;
    transition:opacity .15s ease,max-width .25s ease;
}

@media (min-width:769px){
    body.sidebar-collapsed .sidebar{
        width:var(--soutop-sidebar-collapsed);
        flex:0 0 var(--soutop-sidebar-collapsed);
        padding-left:8px;
        padding-right:8px;
    }

    body.sidebar-collapsed .sidebar-item{
        width:56px;
        min-height:46px;
        margin-left:0;
        margin-right:0;
        padding-left:0;
        padding-right:0;
        gap:0;
        justify-content:center;
    }

    body.sidebar-collapsed .sidebar-item span{
        opacity:0;
        max-width:0;
        pointer-events:none;
    }

    body.sidebar-collapsed .sidebar-item svg,
    body.sidebar-collapsed .sidebar-item i{
        margin-left:0!important;
        margin-right:0!important;
        flex:0 0 20px;
    }

    body.sidebar-collapsed .sidebar-item.active{
        box-shadow:inset 3px 0 0 var(--soutop-yellow);
    }

    body.sidebar-collapsed .content{
        width:calc(100% - var(--soutop-sidebar-collapsed));
        margin-left:var(--soutop-sidebar-collapsed);
    }

    body.sidebar-collapsed.meus-tops-page .content,
    body.sidebar-collapsed.weekly-tops-page .content,
    body.sidebar-collapsed.weekly-tops-page .weekly-tops-content{
        width:calc(100% - var(--soutop-sidebar-collapsed));
        margin-left:var(--soutop-sidebar-collapsed);
    }
}


/* ==========================================================
   STUDIO - CONTROLES DO MENU MOBILE
   ========================================================== */
.studio-header-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.studio-mobile-menu-toggle,
.studio-mobile-menu-close,
.studio-mobile-menu-overlay{
    display:none;
}


/* SOU TOP - CONQUISTAS */
.achievement-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 10px;padding:18px 20px;background:#15181d;border:1px solid rgba(255,255,255,.07);border-radius:16px}.achievement-summary div{display:grid;gap:2px}.achievement-summary strong{font-size:20px}.achievement-summary span{color:#8f98a3;font-size:12px}.achievement-summary b{color:#ffcc00;font-size:22px}.achievement-summary-bar{height:8px;background:#20242a;border-radius:999px;overflow:hidden;margin-bottom:22px}.achievement-summary-bar span,.achievement-progress span{display:block;height:100%;background:linear-gradient(90deg,#ffcc00,#ff8a00);border-radius:inherit}.achievement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.achievement-card{display:flex;gap:14px;padding:17px;background:#15181d;border:1px solid rgba(255,255,255,.07);border-radius:16px}.achievement-card.unlocked{border-color:rgba(255,204,0,.24);box-shadow:0 8px 30px rgba(0,0,0,.14)}.achievement-card.locked{opacity:.62}.achievement-icon{width:48px;height:48px;min-width:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,204,0,.1);color:#ffcc00;font-size:20px}.achievement-card.locked .achievement-icon{background:#23272d;color:#727983}.achievement-copy{min-width:0;flex:1}.achievement-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px}.achievement-meta span,.achievement-meta em{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#8f98a3;font-style:normal}.achievement-meta em{color:#ffcc00}.achievement-copy h3{font-size:13px;margin:0 0 4px}.achievement-copy p{font-size:10px;color:#8f98a3;line-height:1.45;margin:0 0 10px}.achievement-progress{height:5px;background:#292e35;border-radius:999px;overflow:hidden}.achievement-copy small{display:block;margin-top:6px;color:#777f89;font-size:9px}.public-achievements{margin-top:14px}.public-achievements-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.public-achievements-head strong{font-size:12px;color:#ffcc00}.public-achievements-head span{font-size:10px;color:#8d8d8d}.public-achievements-list{display:flex;flex-wrap:wrap;gap:7px}.public-achievement-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid rgba(255,204,0,.18);background:rgba(255,204,0,.07);border-radius:999px;font-size:10px;font-weight:700;color:#e9e9e9}.public-achievement-badge i{color:#ffcc00}


/* ==========================================================
   STUDIO / VISÃO GERAL - CONQUISTAS NO ESPAÇO LIVRE
   ========================================================== */
.studio-profile-health{
    display:flex;
    flex-direction:column;
}

.studio-overview-achievements{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.065);
}

.studio-overview-achievements-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
}

.studio-overview-achievements-head>div{
    display:grid;
    gap:3px;
}

.studio-overview-achievements-head span{
    display:flex;
    align-items:center;
    gap:7px;
    color:#ffcc00;
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.studio-overview-achievements-head strong{
    color:#fff;
    font-size:13px;
}

.studio-overview-achievements-head button{
    border:0;
    background:transparent;
    color:#a3aab3;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:inherit;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.studio-overview-achievements-head button:hover{
    color:#ffcc00;
}

.studio-overview-achievements-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.studio-overview-achievement{
    width:100%;
    min-width:0;
    min-height:64px;
    padding:9px 10px;
    border:1px solid rgba(255,204,0,.13);
    border-radius:12px;
    background:linear-gradient(145deg,rgba(255,204,0,.045),rgba(255,255,255,.018));
    color:#fff;
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 18px;
    align-items:center;
    gap:9px;
    text-align:left;
    font-family:inherit;
    cursor:pointer;
    transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.studio-overview-achievement:hover{
    transform:translateY(-2px);
    border-color:rgba(255,204,0,.32);
    background:rgba(255,204,0,.065);
}

.studio-overview-achievement-icon{
    width:36px;
    height:36px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,204,0,.10);
    color:#ffcc00;
    font-size:14px;
}

.studio-overview-achievement-copy{
    min-width:0;
    display:grid;
    gap:3px;
}

.studio-overview-achievement-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#e9ecef;
    font-size:9px;
}

.studio-overview-achievement-copy small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#727b86;
    font-size:7px;
}

.studio-overview-achievement-check{
    color:#58d47a;
    font-size:10px;
}

.studio-overview-achievements-empty{
    width:100%;
    min-height:70px;
    padding:12px;
    border:1px dashed rgba(255,255,255,.10);
    border-radius:12px;
    background:rgba(255,255,255,.018);
    color:#777f89;
    display:flex;
    align-items:center;
    gap:11px;
    text-align:left;
    font-family:inherit;
    cursor:pointer;
}

.studio-overview-achievements-empty>i{
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:11px;
    background:#11151a;
    display:flex;
    align-items:center;
    justify-content:center;
}

.studio-overview-achievements-empty span{
    display:grid;
    gap:3px;
}

.studio-overview-achievements-empty strong{
    color:#a9b0b8;
    font-size:9px;
}

.studio-overview-achievements-empty small{
    color:#646d78;
    font-size:7px;
}


/* ==========================================================
   STUDIO SIDEBAR - CORREÇÃO EXCLUSIVA DO DESKTOP
   Mantém "Voltar para a SOU TOP" sempre dentro da viewport.
   ========================================================== */
@media (min-width:901px){
    .studio-sidebar{
        overflow-y:auto;
        overflow-x:hidden;
        scrollbar-width:thin;
        scrollbar-color:rgba(255,255,255,.14) transparent;
        padding-top:14px;
        padding-bottom:10px;
    }

    .studio-sidebar::-webkit-scrollbar{
        width:5px;
    }

    .studio-sidebar::-webkit-scrollbar-thumb{
        background:rgba(255,255,255,.14);
        border-radius:999px;
    }

    .studio-user-card{
        padding-top:8px;
        padding-bottom:13px;
        margin-bottom:5px;
    }

    .studio-nav{
        gap:2px;
    }

    .studio-nav-item{
        min-height:40px;
    }

    .studio-sidebar-bottom{
        position:sticky;
        bottom:-1px;
        z-index:3;
        margin-top:auto;
        padding:10px 7px 5px;
        background:linear-gradient(to bottom,rgba(9,12,16,.92),#090c10 28%);
        border-top:1px solid rgba(255,255,255,.07);
    }

    .studio-sidebar-bottom a{
        min-height:34px;
        color:#8d959f;
        font-size:9px;
    }

    .studio-sidebar-bottom a i{
        color:#ffcc00;
    }
}

/* Tablet/mobile: preserva o comportamento que já estava correto. */
@media (max-width:900px){
    .studio-overview-achievements-grid{
        grid-template-columns:1fr;
    }
}




/* ==========================================================
   PERFIL PÚBLICO - DESKTOP: 6 CONQUISTAS POR LINHA
   Corrigido para evitar sobreposição de textos.
   Tablet/celular continuam controlados pelo responsive.css.
   ========================================================== */
@media (min-width: 1101px) {
    .public-profile-page .public-achievements {
        width: min(620px, 100%) !important;
        max-width: 620px !important;
        margin-top: 14px !important;
        overflow: visible !important;
    }

    .public-profile-page .public-achievements-head {
        margin-bottom: 8px !important;
    }

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

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

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        border-radius: 999px !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-align: center !important;
        line-height: 1.15 !important;
        font-size: 9px !important;
    }

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

/* ==========================================================
   SOU TOP - CONFIGURAÇÕES DO USUÁRIO
   ========================================================== */
.settings-page .settings-content{width:calc(100% - 240px);margin-left:240px;padding:34px!important}
.settings-shell{width:min(1120px,100%);margin:0 auto}
.settings-hero{padding:30px;margin-bottom:18px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:radial-gradient(circle at 90% 10%,rgba(255,204,0,.14),transparent 32%),linear-gradient(145deg,#11161d,#0b0e12)}
.settings-eyebrow{display:inline-flex;gap:7px;align-items:center;color:#ffcc00;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.settings-hero h1{font-size:32px;margin:8px 0 6px}.settings-hero p{max-width:720px;color:#9fa6b0;font-size:13px;line-height:1.65}
.settings-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}.settings-nav{position:sticky;top:82px;display:grid;gap:5px;padding:10px;background:#0d1116;border:1px solid rgba(255,255,255,.075);border-radius:17px}
.settings-nav button{min-height:44px;border:0;border-radius:10px;background:transparent;color:#aeb4bd;display:flex;align-items:center;gap:11px;padding:0 12px;font:700 12px Poppins,sans-serif;cursor:pointer;text-align:left}.settings-nav button:hover{background:rgba(255,255,255,.05);color:#fff}.settings-nav button.active{color:#ffcc00;background:rgba(255,204,0,.09);box-shadow:inset 3px 0 0 #ffcc00}
.settings-panel{display:none}.settings-panel.active{display:block}.settings-card{overflow:hidden;margin-bottom:14px;border:1px solid rgba(255,255,255,.075);border-radius:17px;background:#0d1116}.settings-card-head{padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.06)}.settings-card-head h2{font-size:17px}.settings-card-head p{margin-top:4px;color:#89919c;font-size:11px}
.settings-row{min-height:66px;padding:13px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;border-bottom:1px solid rgba(255,255,255,.055)}.settings-row:last-child{border-bottom:0}.settings-row strong{display:block;font-size:12px}.settings-row small{display:block;margin-top:3px;color:#7f8791;font-size:10px;line-height:1.45}
.settings-switch{position:relative;width:42px;height:24px}.settings-switch input{opacity:0}.settings-switch span{position:absolute;inset:0;border-radius:999px;background:#292e35;border:1px solid rgba(255,255,255,.09);cursor:pointer}.settings-switch span:after{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;border-radius:50%;background:#aab0b8;transition:.18s}.settings-switch input:checked+span{background:#ffcc00}.settings-switch input:checked+span:after{transform:translateX(18px);background:#111}
.settings-row select{min-width:150px;min-height:37px;padding:0 10px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:#171b21;color:#fff;font:11px Poppins,sans-serif}.settings-theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 20px 20px}.settings-theme-card{min-height:92px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#15191f;color:#fff;display:grid;place-items:center;gap:6px;font-family:Poppins;cursor:pointer}.settings-theme-card i{font-size:22px}.settings-theme-card strong{font-size:10px}.settings-theme-card.active{border-color:#ffcc00;box-shadow:0 0 0 2px rgba(255,204,0,.08)}
.settings-topics{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px}.settings-topics button,.settings-action{min-height:35px;padding:0 13px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:#15191f;color:#b4bac2;font:700 10px Poppins;cursor:pointer}.settings-topics button.active{background:#ffcc00;color:#111;border-color:#ffcc00}.settings-action{border-radius:9px;color:#fff}.settings-badge{padding:5px 8px;border-radius:999px;background:rgba(255,204,0,.1);color:#ffcc00;font-size:9px;font-weight:800}
.settings-toast{position:fixed;right:22px;bottom:22px;z-index:2600;padding:10px 13px;border-radius:10px;background:#102018;color:#a7f3c0;border:1px solid rgba(134,239,172,.22);font-size:10px;font-weight:700;opacity:0;transform:translateY(8px);transition:.18s}.settings-toast.active{opacity:1;transform:none}.settings-reduce-motion *{transition:none!important;animation:none!important}.settings-high-contrast .settings-card,.settings-high-contrast .settings-nav,.settings-high-contrast .settings-hero{border-color:rgba(255,255,255,.24)}
html[data-soutop-theme="light"] .settings-page{background:#f4f6f8!important;color:#111!important}html[data-soutop-theme="light"] .settings-page .soutop-header,html[data-soutop-theme="light"] .settings-page .sidebar{background:#fff!important;border-color:#e1e5ea!important}html[data-soutop-theme="light"] .settings-hero,html[data-soutop-theme="light"] .settings-nav,html[data-soutop-theme="light"] .settings-card{background:#fff!important;border-color:#dde2e7!important;color:#111}html[data-soutop-theme="light"] .settings-row{border-color:#edf0f2}html[data-soutop-theme="light"] .settings-row small,html[data-soutop-theme="light"] .settings-card-head p,html[data-soutop-theme="light"] .settings-hero p{color:#6d7680}html[data-soutop-theme="light"] .settings-row select,html[data-soutop-theme="light"] .settings-topics button,html[data-soutop-theme="light"] .settings-action{background:#f5f7f8;color:#222;border-color:#dde2e7}


/* ==========================================================
   SOU TOP - TEMA GLOBAL CLARO / ESCURO / AUTOMÁTICO
   ========================================================== */
html[data-soutop-theme="light"]{
    --soutop-bg:#f5f6f8;
    --soutop-surface:#ffffff;
    --soutop-surface-2:#eef1f4;
    --soutop-border:#dfe3e8;
    --soutop-text:#171a1f;
    --soutop-muted:#68717d;
}

html[data-soutop-theme="light"],
html[data-soutop-theme="light"] body{
    background:#f5f6f8!important;
    color:#171a1f!important;
}

html[data-soutop-theme="light"] .soutop-header,
html[data-soutop-theme="light"] .soutop-global-header{
    background:rgba(255,255,255,.97)!important;
    border-bottom-color:#dfe3e8!important;
    box-shadow:0 9px 28px rgba(30,40,50,.08)!important;
}

html[data-soutop-theme="light"] .soutop-brand-title,
html[data-soutop-theme="light"] .soutop-profile-name,
html[data-soutop-theme="light"] .soutop-profile-btn,
html[data-soutop-theme="light"] .soutop-notification-btn,
html[data-soutop-theme="light"] .soutop-message-btn,
html[data-soutop-theme="light"] .soutop-sidebar-toggle{
    color:#171a1f!important;
}

html[data-soutop-theme="light"] .soutop-search{
    background:#f1f3f5!important;
    border-color:#dbe0e5!important;
}
html[data-soutop-theme="light"] .soutop-search input{color:#171a1f!important}
html[data-soutop-theme="light"] .soutop-search input::placeholder{color:#7a838e!important}

html[data-soutop-theme="light"] .soutop-search-results,
html[data-soutop-theme="light"] .soutop-profile-menu{
    background:#fff!important;
    color:#171a1f!important;
    border-color:#dfe3e8!important;
    box-shadow:0 18px 46px rgba(30,40,50,.16)!important;
}
html[data-soutop-theme="light"] .soutop-profile-menu button{color:#292e35!important}
html[data-soutop-theme="light"] .soutop-profile-menu button:hover{background:#f0f2f4!important}

html[data-soutop-theme="light"] .sidebar{
    background:#fff!important;
    border-right-color:#dfe3e8!important;
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .sidebar-item{color:#5e6772!important}
html[data-soutop-theme="light"] .sidebar-item:hover{background:#f0f2f4!important;color:#171a1f!important}
html[data-soutop-theme="light"] .sidebar-item.active{background:#fff4c7!important;color:#856500!important}

html[data-soutop-theme="light"] main,
html[data-soutop-theme="light"] .content{background:transparent!important}

html[data-soutop-theme="light"] .stories-container{border-bottom-color:#dfe3e8!important}
html[data-soutop-theme="light"] .story-username,
html[data-soutop-theme="light"] .story-empty,
html[data-soutop-theme="light"] .section-title h3,
html[data-soutop-theme="light"] .section-heading h2{color:#171a1f!important}

html[data-soutop-theme="light"] .category{
    background:#fff!important;color:#39414a!important;border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .category:hover{background:#eef1f4!important}
html[data-soutop-theme="light"] .category.active{background:#171a1f!important;color:#fff!important;border-color:#171a1f!important}

html[data-soutop-theme="light"] .feed-mode-tabs a{
    background:#fff!important;color:#606a75!important;border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .feed-mode-tabs a.active{
    background:#ffcc00!important;color:#111!important;border-color:#ffcc00!important;
}

html[data-soutop-theme="light"] .featured-video-card.featured-video-pro,
html[data-soutop-theme="light"] .ranking-card.ranking-card-pro,
html[data-soutop-theme="light"] .weekly-ranking-list,
html[data-soutop-theme="light"] .weekly-ranking-podium-card,
html[data-soutop-theme="light"] .weekly-ranking-creator-card,
html[data-soutop-theme="light"] .weekly-podium-card,
html[data-soutop-theme="light"] .weekly-creator-card{
    background:#fff!important;
    border-color:#dfe3e8!important;
    box-shadow:0 18px 44px rgba(30,40,50,.10)!important;
}

html[data-soutop-theme="light"] .featured-info-pro h2,
html[data-soutop-theme="light"] .featured-author strong,
html[data-soutop-theme="light"] .ranking-title-pro h3,
html[data-soutop-theme="light"] .ranking-item-pro b,
html[data-soutop-theme="light"] .weekly-ranking-title,
html[data-soutop-theme="light"] .weekly-ranking-table-copy strong{
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .featured-author small,
html[data-soutop-theme="light"] .ranking-item-pro small,
html[data-soutop-theme="light"] .weekly-ranking-table-copy span{color:#707985!important}

html[data-soutop-theme="light"] .videos-grid .video-title,
html[data-soutop-theme="light"] .video-title{color:#171a1f!important}
html[data-soutop-theme="light"] .videos-grid .video-channel,
html[data-soutop-theme="light"] .videos-grid .video-metadata,
html[data-soutop-theme="light"] .video-channel,
html[data-soutop-theme="light"] .video-metadata{color:#707985!important}
html[data-soutop-theme="light"] .videos-grid .thumbnail-wrap{
    border-color:#dfe3e8!important;
    box-shadow:0 12px 28px rgba(30,40,50,.10)!important;
}
html[data-soutop-theme="light"] .video-options,
html[data-soutop-theme="light"] .feed-share-btn,
html[data-soutop-theme="light"] .star-action-btn,
html[data-soutop-theme="light"] .video-social-actions{color:#606a75!important}

html[data-soutop-theme="light"] .notification-panel{
    background:#fff!important;
    border-color:#dfe3e8!important;
    box-shadow:0 22px 60px rgba(30,40,50,.18)!important;
}
html[data-soutop-theme="light"] .notification-panel-header{
    background:#f7f8f9!important;border-bottom-color:#e2e6ea!important;
}
html[data-soutop-theme="light"] .notification-panel-header h3,
html[data-soutop-theme="light"] .notification-text strong{color:#171a1f!important}
html[data-soutop-theme="light"] .notification-text>span{color:#414850!important}
html[data-soutop-theme="light"] .notification-text small{color:#747d88!important}
html[data-soutop-theme="light"] .notification-item{color:#20252b!important;border-bottom-color:#eceff2!important}
html[data-soutop-theme="light"] .notification-item:hover,
html[data-soutop-theme="light"] .notification-item.unread{background:#f4f6f8!important}

html[data-soutop-theme="light"] .meus-tops-page .hero,
html[data-soutop-theme="light"] .meus-tops-page .card,
html[data-soutop-theme="light"] .meus-tops-page .empty{
    background:#fff!important;border-color:#dfe3e8!important;color:#171a1f!important;
}

html[data-soutop-theme="light"] .settings-page{background:#f5f6f8!important;color:#171a1f!important}
html[data-soutop-theme="light"] .settings-hero,
html[data-soutop-theme="light"] .settings-nav,
html[data-soutop-theme="light"] .settings-card{
    background:#fff!important;border-color:#dfe3e8!important;color:#171a1f!important;
}
html[data-soutop-theme="light"] .settings-row{border-color:#edf0f2!important}
html[data-soutop-theme="light"] .settings-row strong,
html[data-soutop-theme="light"] .settings-card-head h2{color:#171a1f!important}
html[data-soutop-theme="light"] .settings-row small,
html[data-soutop-theme="light"] .settings-card-head p,
html[data-soutop-theme="light"] .settings-hero p{color:#6d7680!important}
html[data-soutop-theme="light"] .settings-row select,
html[data-soutop-theme="light"] .settings-topics button,
html[data-soutop-theme="light"] .settings-action{
    background:#f5f7f8!important;color:#222!important;border-color:#dce1e6!important;
}

html[data-soutop-theme="light"] .public-profile-page,
html[data-soutop-theme="light"] .public-profile-shell,
html[data-soutop-theme="light"] .public-profile-summary,
html[data-soutop-theme="light"] .public-profile-tab-panel{
    background:#f5f6f8!important;color:#171a1f!important;
}
html[data-soutop-theme="light"] .public-profile-name-row h1,
html[data-soutop-theme="light"] .public-profile-stats strong,
html[data-soutop-theme="light"] .public-profile-video-card>strong,
html[data-soutop-theme="light"] .public-profile-top-card strong{color:#171a1f!important}
html[data-soutop-theme="light"] .public-profile-handle,
html[data-soutop-theme="light"] .public-profile-bio,
html[data-soutop-theme="light"] .public-profile-stats span,
html[data-soutop-theme="light"] .public-profile-video-card>small{color:#68717d!important}
html[data-soutop-theme="light"] .public-profile-tabs,
html[data-soutop-theme="light"] .public-profile-gamification,
html[data-soutop-theme="light"] .public-profile-top-card{
    background:#fff!important;border-color:#dfe3e8!important;
}

html[data-soutop-theme="light"] .mobile-bottom-nav{
    background:rgba(255,255,255,.97)!important;
    border-top-color:#dfe3e8!important;
    box-shadow:0 -10px 28px rgba(30,40,50,.12)!important;
}
html[data-soutop-theme="light"] .mobile-bottom-nav__item{color:#717a85!important}
html[data-soutop-theme="light"] .mobile-bottom-nav__item.active{color:#9a7300!important}


/* ==========================================================
   SOU TOP - TEMA CLARO / PÁGINAS ESPECIAIS
   Meus Tops + Studio + Upload + Perfil Público
   ========================================================== */

/* ---------- MEUS TOPS ---------- */
html[data-soutop-theme="light"] .meus-tops-page{
    background:#f5f6f8!important;
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .meus-tops-page .hero{
    background:
        radial-gradient(circle at 85% 15%,rgba(255,204,0,.18),transparent 32%),
        linear-gradient(145deg,#ffffff,#f5f7f9)!important;
    border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .meus-tops-page .stat{
    background:#f6f8fa!important;
    border-color:#e0e4e8!important;
}
html[data-soutop-theme="light"] .meus-tops-page .stat strong,
html[data-soutop-theme="light"] .meus-tops-page .heading h2,
html[data-soutop-theme="light"] .meus-tops-page .channel-info strong,
html[data-soutop-theme="light"] .meus-tops-page .title{
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .meus-tops-page .card{
    background:#fff!important;
    border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .meus-tops-page .pill{
    background:#eef1f4!important;
    color:#5d6670!important;
}
html[data-soutop-theme="light"] .meus-tops-page .no-video{
    background:linear-gradient(145deg,#f7f9fa,#edf1f4)!important;
    color:#727b86!important;
}

/* ---------- STUDIO ---------- */
html[data-soutop-theme="light"] .studio-page{
    background:#f5f6f8!important;
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .studio-header{
    background:#fff!important;
    border-bottom-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .studio-brand strong,
html[data-soutop-theme="light"] .studio-header-actions,
html[data-soutop-theme="light"] .studio-header-link,
html[data-soutop-theme="light"] .studio-header-camera{
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .studio-header-link,
html[data-soutop-theme="light"] .studio-header-camera{
    background:#f5f7f9!important;
    border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .studio-sidebar{
    background:#fff!important;
    border-right-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .studio-user-card{
    border-bottom-color:#e4e7ea!important;
}
html[data-soutop-theme="light"] .studio-user-card strong,
html[data-soutop-theme="light"] .studio-nav-item{
    color:#4f5863!important;
}
html[data-soutop-theme="light"] .studio-nav-item:hover{
    background:#f0f2f4!important;
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .studio-nav-item.active{
    background:#fff4c7!important;
    color:#856500!important;
}
html[data-soutop-theme="light"] .studio-sidebar-bottom{
    border-top-color:#e3e7ea!important;
}
html[data-soutop-theme="light"] .studio-sidebar-bottom a{
    color:#59626d!important;
}
html[data-soutop-theme="light"] .studio-main{
    background:
        radial-gradient(circle at 92% 8%,rgba(255,0,80,.035),transparent 28%),
        radial-gradient(circle at 8% 0%,rgba(255,204,0,.055),transparent 30%),
        #f5f6f8!important;
}
html[data-soutop-theme="light"] .studio-page-heading h1,
html[data-soutop-theme="light"] .studio-page-heading h2,
html[data-soutop-theme="light"] .studio-card h2,
html[data-soutop-theme="light"] .studio-stat-card strong,
html[data-soutop-theme="light"] .studio-level-card h2,
html[data-soutop-theme="light"] .achievement-card h3{
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .studio-page-heading p,
html[data-soutop-theme="light"] .studio-stat-card em,
html[data-soutop-theme="light"] .studio-card small,
html[data-soutop-theme="light"] .studio-level-card p,
html[data-soutop-theme="light"] .achievement-card p{
    color:#6f7883!important;
}
html[data-soutop-theme="light"] .studio-card,
html[data-soutop-theme="light"] .studio-stat-card,
html[data-soutop-theme="light"] .achievement-card,
html[data-soutop-theme="light"] .studio-live-preview{
    background:#fff!important;
    border-color:#dfe3e8!important;
    box-shadow:0 18px 42px rgba(30,40,50,.08)!important;
}
html[data-soutop-theme="light"] .studio-outline-btn{
    background:#fff!important;
    color:#171a1f!important;
    border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .studio-field input,
html[data-soutop-theme="light"] .studio-field textarea,
html[data-soutop-theme="light"] .studio-input-prefix,
html[data-soutop-theme="light"] .studio-social-field{
    background:#f6f8fa!important;
    color:#171a1f!important;
    border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .studio-field input,
html[data-soutop-theme="light"] .studio-field textarea{
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .studio-field input::placeholder,
html[data-soutop-theme="light"] .studio-field textarea::placeholder{
    color:#8a929c!important;
}
html[data-soutop-theme="light"] .studio-overview-achievement,
html[data-soutop-theme="light"] .studio-milestone,
html[data-soutop-theme="light"] .studio-level-breakdown span,
html[data-soutop-theme="light"] .studio-video-item{
    background:#f6f8fa!important;
    border-color:#e0e4e8!important;
    color:#171a1f!important;
}

/* ---------- UPLOAD ---------- */
html[data-soutop-theme="light"] .upload-studio-page{
    background:
        radial-gradient(circle at 8% 0%,rgba(255,204,0,.07),transparent 28%),
        radial-gradient(circle at 92% 12%,rgba(255,0,80,.045),transparent 26%),
        #f5f6f8!important;
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .upload-studio-header{
    background:#fff!important;
    border-bottom-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .upload-studio-header-title strong,
html[data-soutop-theme="light"] .upload-studio-header-link,
html[data-soutop-theme="light"] .upload-studio-header-close{
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .upload-studio-header-link,
html[data-soutop-theme="light"] .upload-studio-header-close{
    background:#f6f8fa!important;
    border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .upload-studio-hero{
    background:
        radial-gradient(circle at 88% 20%,rgba(255,204,0,.18),transparent 27%),
        linear-gradient(145deg,#fff,#f5f7f9)!important;
    border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .upload-studio-hero h1,
html[data-soutop-theme="light"] .upload-studio-card-heading h2,
html[data-soutop-theme="light"] .upload-dropzone strong,
html[data-soutop-theme="light"] .upload-file-main strong,
html[data-soutop-theme="light"] .upload-field label,
html[data-soutop-theme="light"] .thumbnail-empty strong,
html[data-soutop-theme="light"] .upload-hashtag-helper-head span{
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .upload-studio-hero p,
html[data-soutop-theme="light"] .upload-dropzone p,
html[data-soutop-theme="light"] .upload-file-main small,
html[data-soutop-theme="light"] .upload-thumbnail-help,
html[data-soutop-theme="light"] .upload-publish-note{
    color:#707985!important;
}
html[data-soutop-theme="light"] .upload-studio-card,
html[data-soutop-theme="light"] .upload-progress-studio,
html[data-soutop-theme="light"] .upload-success-screen{
    background:#fff!important;
    border-color:#dfe3e8!important;
    box-shadow:0 18px 42px rgba(30,40,50,.08)!important;
}
html[data-soutop-theme="light"] .upload-dropzone,
html[data-soutop-theme="light"] .thumbnail-picker,
html[data-soutop-theme="light"] .upload-hashtag-helper{
    background:#f7f9fa!important;
    border-color:#d8dde2!important;
}
html[data-soutop-theme="light"] .upload-field input,
html[data-soutop-theme="light"] .upload-field textarea,
html[data-soutop-theme="light"] .upload-field select{
    background:#f7f9fa!important;
    border-color:#d8dde2!important;
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .upload-field input::placeholder,
html[data-soutop-theme="light"] .upload-field textarea::placeholder{
    color:#8a929c!important;
}
html[data-soutop-theme="light"] .upload-metadata-grid>div{
    background:#f3f5f7!important;
    border-color:#e0e4e8!important;
}
html[data-soutop-theme="light"] .upload-metadata-grid strong{
    color:#171a1f!important;
}

/* ---------- PERFIL PÚBLICO ---------- */
html[data-soutop-theme="light"] .public-profile-page{
    background:#f5f6f8!important;
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .public-profile-shell{
    background:#f5f6f8!important;
}
html[data-soutop-theme="light"] .public-profile-summary,
html[data-soutop-theme="light"] .public-profile-content,
html[data-soutop-theme="light"] .public-profile-tab-panel,
html[data-soutop-theme="light"] .public-profile-gamification{
    background:#fff!important;
    border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .public-profile-name-row h1,
html[data-soutop-theme="light"] .public-profile-stats strong,
html[data-soutop-theme="light"] .public-profile-bio,
html[data-soutop-theme="light"] .public-profile-tab,
html[data-soutop-theme="light"] .public-profile-video-card strong,
html[data-soutop-theme="light"] .public-profile-empty strong{
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .public-profile-handle,
html[data-soutop-theme="light"] .public-profile-stats span,
html[data-soutop-theme="light"] .public-profile-video-card small,
html[data-soutop-theme="light"] .public-profile-empty p{
    color:#707985!important;
}
html[data-soutop-theme="light"] .public-profile-tabs{
    background:#fff!important;
    border-color:#dfe3e8!important;
}
html[data-soutop-theme="light"] .public-profile-tab:hover{
    background:#f3f5f7!important;
}
html[data-soutop-theme="light"] .public-profile-more-menu{
    background:#fff!important;
    border-color:#dfe3e8!important;
    box-shadow:0 18px 42px rgba(30,40,50,.14)!important;
}
html[data-soutop-theme="light"] .public-profile-more-menu button{
    color:#171a1f!important;
}
html[data-soutop-theme="light"] .public-profile-more-menu button:hover{
    background:#f1f3f5!important;
}
html[data-soutop-theme="light"] .public-profile-photo-modal-card,
html[data-soutop-theme="light"] .public-profile-top-card{
    background:#fff!important;
    border-color:#dfe3e8!important;
}

/* Evita flash escuro em páginas especiais */
html[data-soutop-theme="light"] .studio-page,
html[data-soutop-theme="light"] .upload-studio-page,
html[data-soutop-theme="light"] .meus-tops-page,
html[data-soutop-theme="light"] .public-profile-page{
    color-scheme:light;
}


/* ==========================================================
   SOU TOP - ACESSIBILIDADE GLOBAL
   Controlado pelos atributos aplicados no <html> pelo header:
   data-soutop-font-size
   data-soutop-high-contrast
   data-soutop-reduce-motion
   ========================================================== */

/* ----------------------------------------------------------
   1. TAMANHO DO TEXTO
   ----------------------------------------------------------
   Como boa parte da interface antiga usa px, além de aumentar a base do
   documento aplicamos text-size-adjust e reforço nos principais grupos.
   Não alteramos ícones, imagens, players ou medidas estruturais.
   ---------------------------------------------------------- */
html[data-soutop-font-size="large"]{
    font-size:106%;
    -webkit-text-size-adjust:106%;
    text-size-adjust:106%;
}

html[data-soutop-font-size="xlarge"]{
    font-size:114%;
    -webkit-text-size-adjust:114%;
    text-size-adjust:114%;
}

/*
 * A plataforma possui muitos tamanhos em px. Estes grupos cobrem os textos
 * recorrentes sem escalar containers, vídeos, imagens e ícones.
 */
html[data-soutop-font-size="large"] :where(
    p, small, label, input, textarea, select, button,
    .sidebar-item, .soutop-profile-name, .soutop-search input,
    .video-title, .video-channel, .video-metadata,
    .section-heading p, .section-heading span,
    .ranking-item span, .ranking-item small,
    .featured-author strong, .featured-author small,
    .notification-text strong, .notification-text > span, .notification-text small,
    .messages-bubble, .messages-conversation-copy strong, .messages-conversation-copy small,
    .public-profile-handle, .public-profile-bio, .public-profile-stats span,
    .settings-row strong, .settings-row small, .settings-card-head p,
    .mobile-bottom-nav__item
){
    font-size:calc(1em + 1px)!important;
}

html[data-soutop-font-size="xlarge"] :where(
    p, small, label, input, textarea, select, button,
    .sidebar-item, .soutop-profile-name, .soutop-search input,
    .video-title, .video-channel, .video-metadata,
    .section-heading p, .section-heading span,
    .ranking-item span, .ranking-item small,
    .featured-author strong, .featured-author small,
    .notification-text strong, .notification-text > span, .notification-text small,
    .messages-bubble, .messages-conversation-copy strong, .messages-conversation-copy small,
    .public-profile-handle, .public-profile-bio, .public-profile-stats span,
    .settings-row strong, .settings-row small, .settings-card-head p,
    .mobile-bottom-nav__item
){
    font-size:calc(1em + 2px)!important;
}

/* Títulos ganham aumento controlado sem estourar os layouts. */
html[data-soutop-font-size="large"] :where(
    h1,h2,h3,
    .featured-info-pro h2,
    .public-profile-name-row h1,
    .settings-hero h1,
    .studio-page-heading h1,
    .weekly-ranking-header h1
){
    font-size:calc(1em + 2px)!important;
}

html[data-soutop-font-size="xlarge"] :where(
    h1,h2,h3,
    .featured-info-pro h2,
    .public-profile-name-row h1,
    .settings-hero h1,
    .studio-page-heading h1,
    .weekly-ranking-header h1
){
    font-size:calc(1em + 4px)!important;
}

/* ----------------------------------------------------------
   2. ALTO CONTRASTE
   ---------------------------------------------------------- */
html[data-soutop-high-contrast="1"]{
    --soutop-border:rgba(255,255,255,.38);
    --soutop-muted:#d2d6dc;
    --soutop-text:#ffffff;
}

html[data-soutop-theme="light"][data-soutop-high-contrast="1"]{
    --soutop-border:#707780;
    --soutop-muted:#343a40;
    --soutop-text:#080a0d;
}

/* Texto secundário deixa de ficar "apagado". */
html[data-soutop-high-contrast="1"] :where(
    .video-channel,.video-metadata,
    .featured-author small,.section-heading p,
    .ranking-item small,.ranking-item-pro small,
    .notification-text small,
    .messages-conversation-copy small,
    .public-profile-handle,.public-profile-bio,.public-profile-stats span,
    .settings-row small,.settings-card-head p,
    .upload-studio-hero p,.upload-thumbnail-help,.upload-publish-note,
    .studio-page-heading p,.studio-card-heading small
){
    color:var(--soutop-muted)!important;
}

/* Bordas e superfícies críticas ficam mais claramente separadas. */
html[data-soutop-high-contrast="1"] :where(
    .soutop-header,.sidebar,.mobile-bottom-nav,
    .video-card,.thumbnail-wrap,.featured-video-card,.ranking-card,
    .notification-panel,.notification-item,
    .messages-app,.messages-sidebar,.messages-chat,.messages-composer,
    .public-profile-shell,.public-profile-tabs,.public-profile-gamification,
    .settings-nav,.settings-card,.settings-row,
    .studio-card,.upload-studio-card,
    .weekly-ranking-table,.weekly-ranking-creators
){
    border-color:var(--soutop-border)!important;
}

/* Controles interativos recebem foco mais evidente. */
html[data-soutop-high-contrast="1"] :where(
    a,button,input,textarea,select,[role="button"],[tabindex]
):focus-visible{
    outline:3px solid #ffcc00!important;
    outline-offset:3px!important;
    box-shadow:0 0 0 2px #000!important;
}

html[data-soutop-theme="light"][data-soutop-high-contrast="1"] :where(
    a,button,input,textarea,select,[role="button"],[tabindex]
):focus-visible{
    box-shadow:0 0 0 2px #fff!important;
}

/* No alto contraste o amarelo permanece legível em fundo escuro. */
html[data-soutop-high-contrast="1"] :where(
    .sidebar-item.active,.mobile-bottom-nav__item.active,
    .soutop-upload-btn,.star-action-btn i,
    .weekly-ranking-star-total,.zap-badge
){
    text-shadow:none!important;
    filter:none!important;
}

/* ----------------------------------------------------------
   3. REDUZIR ANIMAÇÕES
   ----------------------------------------------------------
   Desliga animações puramente decorativas e torna transições instantâneas.
   Vídeos, áudio, timers, barras de progresso e lógica JS continuam ativos.
   ---------------------------------------------------------- */
html[data-soutop-reduce-motion="1"]{
    scroll-behavior:auto!important;
}

html[data-soutop-reduce-motion="1"] *,
html[data-soutop-reduce-motion="1"] *::before,
html[data-soutop-reduce-motion="1"] *::after{
    animation-duration:.001ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
}

/* Remove movimentos decorativos que podem sobreviver por transform inline/hover. */
html[data-soutop-reduce-motion="1"] :where(
    .story:hover,
    .video-card:hover,
    .featured-video-card:hover,
    .ranking-item:hover,
    .short-card:hover img,
    .featured-video-pro:hover .featured-thumb-pro img,
    .videos-grid .video-card:hover .video-thumbnail,
    .soutop-upload-btn:hover,
    .soutop-profile-story-avatar.has-story:hover,
    .meus-tops-page .card:hover
){
    transform:none!important;
}

/* Spinners continuam visíveis, porém sem rotação contínua. */
html[data-soutop-reduce-motion="1"] :where(
    .fa-spin,.fa-spinner,.soutop-search-spinner i
){
    animation:none!important;
}

/* Mantém estado visual dos painéis sem animação de entrada. */
html[data-soutop-reduce-motion="1"] :where(
    .notification-panel.active,
    .soutop-search-results.active,
    .upload-progress-studio.active
){
    animation:none!important;
}

/* ============================================================
   SOU TOP - SALVOS / ASSISTIR DEPOIS
   Estilos isolados para não alterar páginas existentes.
   ============================================================ */
body.salvos-page{background:#050607!important;color:#fff}
.salvos-page .saved-shell{display:block!important;margin-top:0!important;min-height:calc(100vh - 64px)}
.salvos-page .saved-content{width:calc(100% - 240px);margin-left:240px;padding:34px 34px 64px!important;min-width:0;max-width:none}
.salvos-page .saved-hero{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px 30px;border:1px solid #2c323b;border-radius:20px;background:linear-gradient(130deg,#181c22,#101317 70%);box-shadow:0 20px 45px rgba(0,0,0,.23)}
.salvos-page .saved-hero-copy{min-width:0;max-width:800px}
.salvos-page .saved-eyebrow{display:flex;align-items:center;gap:8px;color:#ffcc00;font-size:10px;font-weight:900;letter-spacing:1.1px;margin-bottom:10px}
.salvos-page .saved-hero h1{font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:-.04em;line-height:1.15;margin:0 0 10px}
.salvos-page .saved-hero h1 span{color:#ffcc00}
.salvos-page .saved-hero p{color:#aeb7c2;font-size:12px;line-height:1.75;max-width:720px;margin:0}
.salvos-page .saved-hero-badge{flex:0 0 auto;display:flex;gap:12px;align-items:center;border:1px solid #51451b;border-radius:15px;padding:14px 17px;background:rgba(255,204,0,.055)}
.salvos-page .saved-hero-badge>i{display:grid;place-items:center;width:42px;height:42px;background:#292719;color:#ffcc00;border-radius:12px;font-size:18px}
.salvos-page .saved-hero-badge div{display:flex;flex-direction:column;gap:2px}
.salvos-page .saved-hero-badge strong{font-size:26px;line-height:1;color:#fff;font-weight:900}
.salvos-page .saved-hero-badge span{font-size:10px;color:#b3becb}
.salvos-page .saved-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:32px 0 18px}
.salvos-page .saved-section-head div>span{font-size:10px;color:#ffcc00;font-weight:800;letter-spacing:1.15px}
.salvos-page .saved-section-head h2{font-size:20px;color:#fff;margin:3px 0 0;font-weight:900;line-height:1.2}
.salvos-page .saved-section-head small{color:#9fa9b5;font-size:11px}
.salvos-page .saved-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
.salvos-page .saved-card{min-width:0;background:#14181d;border:1px solid #282e36;border-radius:16px;overflow:hidden;transition:border-color .2s,transform .2s}
.salvos-page .saved-card:hover{border-color:rgba(255,204,0,.42);transform:translateY(-3px)}
.salvos-page .saved-thumb{display:block;position:relative;aspect-ratio:16/9;background:#090a0c;overflow:hidden}
.salvos-page .saved-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.salvos-page .saved-card:hover .saved-thumb img{transform:scale(1.035)}
.salvos-page .saved-thumb-placeholder{height:100%;display:grid;place-items:center;color:#ffcc00;background:linear-gradient(135deg,#222,#0e0e0e);font-size:32px}
.salvos-page .saved-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:53px;height:53px;border-radius:50%;background:rgba(0,0,0,.64);border:1px solid rgba(255,255,255,.2);color:#ffcc00;font-size:17px;opacity:.9}
.salvos-page .saved-temp-badge{position:absolute;bottom:9px;right:9px;background:rgba(0,0,0,.82);color:#ffcc00;border-radius:7px;padding:5px 8px;font-size:10px;font-weight:800}
.salvos-page .saved-card-info{display:flex;gap:10px;padding:14px 12px 16px;align-items:flex-start}
.salvos-page .saved-creator-avatar{width:35px;height:35px;min-width:35px;display:grid;place-items:center;overflow:hidden;color:#ffcc00;background:#272b31;border-radius:50%}
.salvos-page .saved-creator-avatar img{width:100%;height:100%;object-fit:cover}
.salvos-page .saved-card-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.salvos-page .saved-card-title{color:#fff;text-decoration:none;font-size:13px;line-height:1.36;font-weight:800;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.salvos-page .saved-card-title:hover{color:#ffcc00}
.salvos-page .saved-card-channel{font-size:11px;color:#c6ccd4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.salvos-page .saved-card-meta{font-size:10px;color:#9da7b2;line-height:1.6}
.salvos-page .saved-card-meta span{margin:0 3px}
.salvos-page .saved-remove-btn{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;background:#242932;color:#aeb7c1;border:1px solid #383e48;border-radius:9px;cursor:pointer;transition:.2s}
.salvos-page .saved-remove-btn:hover{color:#ffcc00;border-color:#ffcc00;background:#292719}
.salvos-page .saved-remove-btn:disabled{opacity:.5;cursor:wait}
.salvos-page .saved-empty{max-width:640px;margin:38px auto 0;padding:54px 26px;text-align:center;border:1px dashed #343b44;background:#111418;border-radius:20px}
.salvos-page .saved-empty-icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 19px;border-radius:18px;background:#302b17;color:#ffcc00;font-size:29px}
.salvos-page .saved-empty h2{color:#fff;font-size:22px;font-weight:800;margin:0 0 10px}
.salvos-page .saved-empty p{font-size:12px;line-height:1.7;color:#aab4c0;margin:0 auto 22px;max-width:450px}
.salvos-page .saved-empty code{color:#ffcc00}
.salvos-page .saved-primary{display:inline-flex;align-items:center;gap:9px;justify-content:center;padding:12px 18px;background:#ffcc00;color:#111;font-weight:900;font-size:12px;border-radius:11px;text-decoration:none;transition:.2s}
.salvos-page .saved-primary:hover{filter:brightness(1.08)}
.salvos-page .saved-pagination{display:flex;justify-content:center;align-items:center;gap:15px;flex-wrap:wrap;margin-top:30px}
.salvos-page .saved-pagination a{display:inline-flex;align-items:center;gap:7px;padding:10px 13px;border-radius:10px;border:1px solid #3a414b;color:#ffcc00;font-size:12px;font-weight:700;text-decoration:none;background:#171a1f}
.salvos-page .saved-pagination span{font-size:12px;color:#aeb7c2}
.salvos-page .saved-feedback:not(:empty){margin:20px 0 0;padding:13px 15px;border:1px solid #694e2e;border-radius:10px;color:#ffd677;background:#33281b;font-size:12px}
@media(min-width:769px){body.sidebar-collapsed.salvos-page .saved-content{width:calc(100% - var(--soutop-sidebar-collapsed,72px));margin-left:var(--soutop-sidebar-collapsed,72px)}}
@media(max-width:1180px) and (min-width:769px){.salvos-page .saved-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
html[data-soutop-theme="light"] .salvos-page{background:#f4f6f8!important;color:#111}
html[data-soutop-theme="light"] .salvos-page .saved-hero,html[data-soutop-theme="light"] .salvos-page .saved-card,html[data-soutop-theme="light"] .salvos-page .saved-empty{background:#fff;border-color:#dce1e7}
html[data-soutop-theme="light"] .salvos-page .saved-hero h1,html[data-soutop-theme="light"] .salvos-page .saved-section-head h2,html[data-soutop-theme="light"] .salvos-page .saved-card-title,html[data-soutop-theme="light"] .salvos-page .saved-empty h2,html[data-soutop-theme="light"] .salvos-page .saved-hero-badge strong{color:#16191e}
html[data-soutop-theme="light"] .salvos-page .saved-hero p,html[data-soutop-theme="light"] .salvos-page .saved-card-channel,html[data-soutop-theme="light"] .salvos-page .saved-card-meta{color:#5b6470}


/* ==========================================================
   SOU TOP - LOGO HORIZONTAL NO CABEÇALHO
   Escopo restrito à imagem da marca no header global.
   Não interfere em miniaturas, avatars ou imagens do feed.
   ========================================================== */
.soutop-global-header .soutop-brand > img.soutop-brand-logo {
    display: block;
    flex: 0 0 auto;
    width: 150px;
    height: 50px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

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

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


/* ==========================================================
   SOU TOP - LOGO HORIZONTAL APLICADA EM CABEÇALHOS E PÁGINAS
   ========================================================== */
.soutop-brand > img.soutop-brand-logo{
    display:block;
    width:150px;
    height:50px;
    max-width:100%;
    object-fit:contain;
    object-position:left center;
    flex:0 0 auto;
}

.public-profile-brand{min-width:0}
.public-profile-brand > img.public-profile-brand-logo{
    display:block;
    width:145px;
    height:48px;
    max-width:100%;
    object-fit:contain;
    object-position:left center;
}

.studio-brand{min-width:0;gap:10px}
.studio-brand > img.studio-brand-logo{
    display:block;
    width:138px;
    height:44px;
    max-width:100%;
    object-fit:contain;
    object-position:left center;
    flex:0 0 auto;
}

.studio-brand span{
    margin-left:2px;
}