body { font-family: Arial, sans-serif; background:#f2f5f7; padding:20px; }
h1 { text-align:center; color:#333; }
.search-container { display:flex; justify-content:center; margin-bottom:30px; }
#username { padding:10px; width:300px; border-radius:8px 0 0 8px; border:1px solid #ccc; }
#loader { display:none; text-align:center; font-size:18px; color:#555; margin:20px; }
.results-container { display:flex; flex-wrap:wrap; justify-content:center; gap:15px; }
.user-card { background:white; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.1); width:220px; padding:15px; text-align:center; transition: transform 0.2s; }
.user-card:hover { transform: translateY(-5px); }
.user-card img { width:80px; height:80px; border-radius:50%; margin-bottom:10px; object-fit:cover; }
.user-card a { display:block; font-weight:bold; color:#0095f6; text-decoration:none; margin-top:5px; }
.user-card a:hover { text-decoration:underline; }
.skeleton { background: #e0e0e0; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

#checkBtn {
    padding: 10px 20px;
    border: none;
    background: #0095f6;
    color: white;
    cursor: pointer;
    border-radius: 0 8px 8px 0;
    transition: background 0.2s, opacity 0.2s;
}

#checkBtn:hover {
    background: #007acc;
}

/* Стиль для отключённой кнопки */
#checkBtn:disabled {
    background: #b2dffc; /* светло-голубой */
    cursor: not-allowed;
    opacity: 0.7;
}

/* Анимация загрузки при скролле */
.loading-more {
    text-align: center;
    color: #666;
    margin: 20px;
    display: none;
    font-size: 16px;
}

.spinner {
    border: 4px solid #eee;
    border-top: 4px solid #0095f6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.retry-btn {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}
.retry-btn:hover { background: #cc0000; }

#popup {
    position:fixed;top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:white;
    padding:20px 30px;
    border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.2);
    z-index:9999;
    text-align:center;
}

#popupClose {
    padding:8px 16px;
    background:#0095f6;
    border:none;
    color:white;
    border-radius:6px;
    cursor:pointer;
}

#loadMoreBtn {
    display:block;
    margin:20px auto;
    padding:10px 20px;
    background:#0095f6;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
}