/* Center everything */
#twitchResizer {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    margin: 20px auto;
}

/* Hide default file input */
#emoteUpload {
    display: none;
}

/* Upload box */
.upload-box {
    position: relative;
    padding: 40px 20px;
    width: 400px;
    max-width: 90%;
    border: 4px dashed #9147ff;
    border-radius: 16px;
    background: #f8f8f8;
    color: #9147ff;
    text-align: center;
    font-weight: bold;
    transition: all 0.3s;
    cursor: pointer;
    margin-bottom: 30px;
}



.centertext {
text-align: center;
padding : 10px;
font-size: 18px;
   }
   
 .centerhead {
text-align: center;
font-size: 24px;
padding : 10px;
   }  
   
.upload-box:hover {
    background: #f0e7ff;
    border-color: #772ce8;
    color: #772ce8;
}
.upload-box.dragover {
    background: #e5d7ff;
    border-color: #772ce8;
    color: #772ce8;
}

/* Browse button */
.upload-box .Button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #9147ff;
    color: #fff;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.upload-box .Button:hover {
    background-color: #772ce8;
}

/* Resized images container */
#resizedContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* Section wrapper to center cards */
.section-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* Individual card */
#resizedContainer .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 14px;
    border-radius: 14px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    transition: all 0.3s;
    width: fit-content;
}
#resizedContainer .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Image */
#resizedContainer .card img {
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 8px;
}

/* Info text */
#resizedContainer .card .info {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

/* Download button */
#resizedContainer .card .download-btn {
    padding: 6px 14px;
    background-color: #9147ff;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
}
#resizedContainer .card .download-btn:hover {
    background-color: #772ce8;
}

/* Section titles */
#resizedContainer h3 {
    text-align: center;
    color: #9147ff;
    margin-bottom: 10px;
    font-size: 18px;
}

.body-page {
           display: flex;
           justify-content: center;
           align-items: center;
           min-height: 0vh;
       }

       .tiktok-follower-container {
           display: flex;
           justify-content: center;
       background-color: #E9FFD7;
           align-items: center;
           padding: 0px;
           color: black;
           width: 90%;
           max-width: 1300px;
           border-radius: 17px;
       }

       .tiktok-follower-wrapper {
           width: 100%;
           background: rgba(255, 255, 255, 0.1);
           backdrop-filter: blur(10px);
           border-radius: 20px;
           padding: 30px;
           box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
           border: 1px solid rgba(255, 255, 255, 0.1);
           overflow: hidden;
           text-align: center;
       }

       .tiktok-icon {
           color: #000;
           font-size: 25px;
           margin-bottom: 20px;
           display: inline-block;
       }

   

       .tiktok-description {
           color: black;
           margin-bottom: 25px;
           line-height: 1.5;
       }

       .tiktok-input-group {
           display: flex;
           gap: 10px;
           margin-bottom: 25px;
       }

       .tiktok-input {
           flex: 1;
           padding: 15px 20px;
           border: none;
           border-radius: 10px;
           background: rgba(255, 255, 255, 0.1);
           color: #000;
       border: #638E41 2px solid;
           font-size: 16px;
           outline: none;
       }

       .tiktok-input::placeholder {
           color: #000;
       }

       .tiktok-button {
           padding: 15px 25px;
           border: none;
           border-radius: 10px;
           background: #ff2963;
           color: #000;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s ease;
       }

       .tiktok-button:hover {
           background: #ff4d7c;
           transform: translateY(-2px);
       }

       .tiktok-button:disabled {
           background: #555;
           cursor: not-allowed;
           transform: none;
       }

       .tiktok-button.cancel {
           background: #6c757d;
       }

       .tiktok-button.cancel:hover {
           background: #5a6268;
       }

       .tiktok-result-container {
           background: rgba(0, 0, 0, 0.2);
           border-radius: 15px;
           padding: 25px;
           margin-top: 20px;
           display: none;
       }

       .tiktok-profile {
           display: flex;
           align-items: center;
           margin-bottom: 20px;
       }

       .tiktok-profile-img {
           width: 80px;
           height: 80px;
           border-radius: 50%;
           object-fit: cover;
           border: 3px solid #fff;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
       }

       .tiktok-profile-info {
           margin-left: 15px;
           text-align: left;
       }

       .tiktok-username {
           color: #000;
           font-weight: 600;
           font-size: 1.4rem;
           margin-bottom: 5px;
       }

       .tiktok-name {
            color: #000;
           font-size: 1rem;
       }

       .tiktok-counter-container {
           margin: 20px 0;
       }

       .tiktok-counter-title {
            color: #000;
           font-size: 1.5rem;
           margin-bottom: 10px;
           opacity: 0.8;
       }

       .tiktok-follower-count {
           color: blue;
           font-size: 3.5rem;
           font-weight: 700;
           margin: 10px 0;
           text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
       }

       .tiktok-stats {
           display: flex;
           justify-content: space-around;
           margin-top: 20px;
       }

       .tiktok-stat {
           text-align: center;
       }

       .tiktok-stat-number {
            color: #000;
           font-size: 18px;
           font-weight: 600;
       }

       .tiktok-stat-label {
          color: #000;
           font-size: 18px;
       }

       .tiktok-loading {
           display: none;
           margin: 20px 0;
       }

       .tiktok-loading-spinner {
           border: 4px solid rgba(255, 255, 255, 0.3);
           border-radius: 50%;
           border-top: 4px solid #ff2963;
           width: 40px;
           height: 40px;
           animation: tiktok-spin 1s linear infinite;
           margin: 0 auto;
       }

       .loading-progress {
           width: 100%;
           height: 6px;
           background: rgba(255, 255, 255, 0.1);
           border-radius: 3px;
           margin: 15px 0;
           overflow: hidden;
       }

       .loading-progress-bar {
           height: 100%;
           width: 0%;
           background: #ff2963;
           border-radius: 3px;
           transition: width 0.3s ease;
       }

       .loading-time {
           font-size: 1.5rem;
           color: rgba(255, 255, 255, 0.7);
           margin-top: 10px;
       }

       @keyframes tiktok-spin {
           0% {
               transform: rotate(0deg);
           }

           100% {
               transform: rotate(360deg);
           }
       }

       .tiktok-error {
           color: #ff2963;
           margin-top: 20px;
           display: none;
           background: rgba(255, 255, 255, 0.1);
           padding: 15px;
           border-radius: 10px;
       }

       .proxy-options {
           margin-top: 15px;
           padding: 10px;
           background: rgba(0, 0, 0, 0.1);
           border-radius: 8px;
       }

       .proxy-btn {
           background: #3a4ca0;
           margin: 5px;
           padding: 8px 15px;
           font-size: 0.9rem;
       }

       .proxy-btn:hover {
           background: #4a5cb0;
       }

       .retry-btn {
           background: #28a745;
           margin-top: 10px;
       }

       .retry-btn:hover {
           background: #218838;
       }

       @media (max-width: 500px) {
           .tiktok-input-group {
               flex-direction: column;
           }

           .tiktok-button {
               width: 100%;
           }

           .tiktok-follower-count {
               font-size: 2.8rem;
           }
       }