/* ============================
   SYNCHUB PREMIUM UI
=============================*/

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

:root{

    --bg:#090312;
    --sidebar:#12071d;
    --card:#171022;
    --card2:#211430;

    --primary:#8B5CF6;
    --secondary:#EC4899;

    --text:#ffffff;
    --muted:#9CA3AF;

    --border:rgba(255,255,255,.08);

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:Inter,sans-serif;

    overflow-x:hidden;

}

/* Glow */

.background-glow{

    position:fixed;

    width:500px;
    height:500px;

    border-radius:50%;

    filter:blur(160px);

    opacity:.15;

    z-index:-1;

}

.glow-1{

    background:#9333ea;

    top:-250px;
    left:-200px;

}

.glow-2{

    background:#ec4899;

    bottom:-250px;
    right:-200px;

}

/* Layout */

.app{

    display:flex;

    min-height:100vh;

}

/* Sidebar */

.sidebar{

    width:260px;

    background:rgba(15,10,22,.95);

    backdrop-filter:blur(25px);

    border-right:1px solid var(--border);

    padding:30px;

    display:flex;

    flex-direction:column;

}

.logo{

    display:flex;

    gap:15px;

    align-items:center;

    margin-bottom:45px;

}

/* Container principal da logo ocupando toda a largura da sidebar */
.logo {
    width: 100%;          /* Garante que ocupe a largura toda da lateral */
    height: 120px;        /* Aumenta a altura para dar destaque */
    background-color: #ffffff; /* Fundo branco/claro para destacar o texto escuro da logo */
    border-radius: 18px;  /* Borda arredondada */
    
    /* O SEGREDO DO ALINHAMENTO ESTÁ AQUI: */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    
    margin-bottom: 20px;  /* Espaço para não grudar nos botões abaixo */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra suave para o container "saltar" */
}

/* Garante que a imagem não ultrapasse o tamanho do container */
.logo img {
    max-width: 80%;       /* Ocupa no máximo 80% da largura do container */
    max-height: 80%;      /* Ocupa no máximo 80% da altura do container */
    object-fit: contain;  /* Mantém a proporção da imagem sem esticar */
}

.logo h2{

    font-size:26px;

}

.logo span{

    color:var(--muted);

    font-size:13px;

}

.menu{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.menu a{

    text-decoration:none;

    color:var(--muted);

    padding:16px 18px;

    border-radius:14px;

    transition:.3s;

    font-weight:600;

    display:flex;

    gap:14px;

    align-items:center;

}

.menu a:hover{

    background:var(--card);

    color:white;

    transform:translateX(5px);

}

.menu .active{

    background:linear-gradient(90deg,#8B5CF6,#7C3AED);

    color:white;

    box-shadow:0 10px 25px rgba(139,92,246,.3);

}

.sidebar-footer{

    margin-top:auto;

}

.version{

    padding:18px;

    border-radius:18px;

    background:var(--card);

    text-align:center;

}

.version small{

    display:block;

    margin-top:6px;

    color:var(--muted);

}

/* Main */

.main{

    flex:1;

}

/* Topbar */

.topbar{

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 40px;

    border-bottom:1px solid var(--border);

}

.topbar h1{

    font-size:34px;

}

.topbar p{

    color:var(--muted);

}

.user{

    display:flex;

    align-items:center;

    gap:18px;

}

.notification{

    width:48px;
    height:48px;

    border:none;

    border-radius:14px;

    background:var(--card);

    color:white;

    cursor:pointer;

}

.avatar{

    width:52px;
    height:52px;

    border-radius:50%;

    background:linear-gradient(135deg,#8B5CF6,#EC4899);

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

}

.content{

    padding:40px;

}

.legal-public{

    min-height:100vh;

    padding:40px;

}

.legal-public__topbar{

    max-width:900px;

    margin:0 auto 24px;

    display:flex;

    justify-content:flex-end;

}

.legal-public__login{

    padding:10px 18px;

    border:1px solid rgba(196,181,253,.45);

    border-radius:10px;

    background:rgba(139,92,246,.16);

    color:#e9d5ff;

    cursor:pointer;

    font-family:inherit;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

}

.legal-public__login:hover{

    background:rgba(139,92,246,.3);

}

@media (max-width:700px){

    .legal-public{

        padding:20px;

    }

}

/* ============================
   ESTATÍSTICAS
=============================*/

.stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-bottom:40px;

}

.stat-card{

    background:linear-gradient(145deg,var(--card),var(--card2));

    border:1px solid var(--border);

    border-radius:22px;

    padding:28px;

    display:flex;

    align-items:center;

    gap:20px;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:#8B5CF6;

}

.stat-icon{

    width:65px;
    height:65px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

}

.purple{

    background:#8B5CF633;

}

.pink{

    background:#EC489933;

}

.green{

    background:#10B98133;

}

.orange{

    background:#F59E0B33;

}

.stat-card h2{

    font-size:34px;

}

.stat-card p{

    color:var(--muted);

}

/* ============================
   TÍTULO
=============================*/

.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.section-title h2{

    font-size:28px;

}

.new-video{

    text-decoration:none;

    color:white;

    background:linear-gradient(90deg,#8B5CF6,#EC4899);

    padding:14px 24px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}

.new-video:hover{

    transform:translateY(-3px);

}

/* ============================
   GRID DOS VÍDEOS
=============================*/

.video-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(350px,1fr));

    gap:30px;

}

.video-card{

    background:linear-gradient(145deg,var(--card),var(--card2));

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

}

.video-card:hover{

    transform:translateY(-8px);

    border-color:#8B5CF6;

}

.video-card video{

    width:100%;

    aspect-ratio:9/16;

    background:black;

}

.video-info{

    padding:22px;

}

.video-info h3{

    margin-bottom:12px;

}

.video-info p{

    color:var(--muted);

    margin-bottom:15px;

}

.video-info span{

    display:inline-block;

    padding:8px 15px;

    border-radius:50px;

    background:#10B98122;

    color:#4ADE80;

    font-size:14px;

    margin-bottom:20px;

}

.video-info button{

    width:100%;

    border:none;

    padding:15px;

    border-radius:12px;

    cursor:pointer;

    background:linear-gradient(90deg,#8B5CF6,#EC4899);

    color:white;

    font-weight:700;

    transition:.3s;

}

.video-info button:hover{

    transform:scale(1.03);

}

.delete-button {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 18px;

    background: rgba(255, 70, 90, 0.12);

    color: #ff5c70;

    border: 1px solid rgba(255, 70, 90, 0.25);

    border-radius: 14px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: all .25s ease;

    backdrop-filter: blur(8px);
}


.delete-button:hover {

    background: linear-gradient(
        135deg,
        #ff416c,
        #ff4b2b
    );

    color: white;

    border-color: transparent;

    transform: translateY(-3px);

    box-shadow: 
        0 10px 25px rgba(255, 65, 90, .35);
}


.delete-icon {
    font-size: 16px;
}

.delete-btn {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    border: none;
    color: white;

    padding: 10px 18px;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 8px;

    transition: 0.3s;

    box-shadow: 0 8px 20px rgba(255, 65, 108, 0.25);
}


.delete-btn:hover {

    transform: translateY(-2px);

    box-shadow:
    0 12px 25px rgba(255, 65, 108, 0.45);

}

.videos-header {

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:30px;

}


.videos-header h2 {

    font-size:28px;
    margin-bottom:8px;

}


.videos-header p {

    color:#aaa;

}



.upload-btn {

    background:linear-gradient(135deg,#8b5cf6,#ec4899);

    color:white;

    padding:12px 22px;

    border-radius:14px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}


.upload-btn:hover {

    transform:translateY(-2px);

}



.videos-grid {

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));

    gap:25px;

}



.video-card {

    background:#15151f;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    overflow:hidden;

    padding:15px;

}



.video-preview video {

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:14px;

}



.video-info {

    margin-top:15px;

    display:flex;

    flex-direction:column;

    gap:8px;

}



.video-info h3 {

    font-size:16px;

    color:white;

}



.video-info span {

    color:#999;

    font-size:13px;

}



.video-actions {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

}



.watch-btn {

    background:#26263a;

    color:white;

    padding:9px 16px;

    border-radius:10px;

    text-decoration:none;

}



.delete-btn {

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#ef4444;

    color:white;

    cursor:pointer;

    font-size:18px;

}



.delete-btn:hover {

    background:#dc2626;

}



.empty-card {

    background:#15151f;

    padding:40px;

    border-radius:20px;

    text-align:center;

}

.tiktok-container {

    display:flex;
    justify-content:center;
    align-items:center;

    min-height:500px;

}



.tiktok-card {

    width:420px;

    background:#15151f;

    border:1px solid rgba(255,255,255,.08);

    border-radius:25px;

    padding:40px;

    text-align:center;

}



.tiktok-icon {

    font-size:60px;

    margin-bottom:20px;

}



.tiktok-card h2 {

    color:white;

    font-size:28px;

    margin-bottom:15px;

}



.tiktok-card p {

    color:#999;

    line-height:1.6;

    margin-bottom:30px;

}



.tiktok-btn {


    width:100%;

    border:none;

    padding:14px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #00f2ea,
        #ff0050
    );


    color:white;

    font-weight:700;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}



.tiktok-btn:hover {

    transform:translateY(-3px);

}



.tiktok-status {

    margin-top:25px;

    color:#aaa;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}



.tiktok-status span {

    width:10px;

    height:10px;

    background:#777;

    border-radius:50%;

}

.tiktok-btn{

display:block;

text-decoration:none;

}

.tiktok-account{
    margin:20px 0;
    text-align:center;
}

.tiktok-account strong{
    display:block;
    font-size:22px;
    color:#fff;
}

.username{
    margin-top:6px;
    color:#b5b5b5;
    font-size:15px;
}

.tiktok-status{
    margin:18px 0;
}

.analytics-page{
    padding:40px;
}


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


.analytics-header h1{
    font-size:32px;
    color:white;
}


.analytics-header p{
    color:#aaa;
}


.status{
    background:rgba(34,197,94,.15);
    color:#4ade80;
    padding:12px 20px;
    border-radius:30px;
    display:flex;
    align-items:center;
    gap:10px;
}


.status span{
    width:10px;
    height:10px;
    background:#4ade80;
    border-radius:50%;
}

.status--disconnected{

    background:rgba(156,163,175,.15);

    color:#d1d5db;

    text-decoration:none;

}

.status--disconnected span{

    background:#9ca3af;

}


.analytics-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}


.analytics-card{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.08);
    padding:30px;
    border-radius:25px;
    display:flex;
    align-items:center;
    gap:20px;
    transition:.3s;
}


.analytics-card:hover{
    transform:translateY(-8px);
}


.analytics-card h2{
    color:white;
    font-size:35px;
    margin:0;
}


.analytics-card p{
    color:#aaa;
}


.icon{
    width:65px;
    height:65px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    border-radius:20px;
}


.purple .icon{
    background:#7c3aed;
}


.pink .icon{
    background:#ec4899;
}


.blue .icon{
    background:#3b82f6;
}


.green .icon{
    background:#22c55e;
}

.logout-btn{

    width:100%;

    margin-top:15px;

    padding:14px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    color:white;

    background:linear-gradient(135deg,#ef4444,#dc2626);

    transition:.3s;

}

.logout-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(239,68,68,.35);

}